Modified the UI of events log and switch tab

src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx

@@ -24,6 +24,19 @@ import routes from "../../../Redux/api";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import EncounterSymptomsCard from "../../Symptoms/SymptomsCard";
 import Tabs from "../../Common/components/Tabs";
+import { QueryParams } from "../../../Utils/request/types";
+import { EVENTS_SORT_OPTIONS } from "../../../Common/constants";
+import DailyRoundsFilter from "../Consultations/DailyRoundsFilter";
+import ButtonV2 from "../../Common/components/ButtonV2";
+import { classNames } from "../../../Utils/utils";
+
+import { useTranslation } from "react-i18next";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "@headlessui/react";
 
 import PageTitle from "@/Components/Common/PageTitle";
 
@@ -33,6 +46,9 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
   const [monitorBedData, setMonitorBedData] = useState<AssetBedModel>();
   const [ventilatorBedData, setVentilatorBedData] = useState<AssetBedModel>();
   const [showEvents, setShowEvents] = useState(true);
+  const [eventsQuery, setEventsQuery] = useState<QueryParams>();
+  const [dailyRoundsQuery, setDailyRoundsQuery] = useState<QueryParams>();
+  const { t } = useTranslation();
 
   const vitals = useVitalsAspectRatioConfig({
     default: undefined,
@@ -651,32 +667,107 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           </div>
         </div>
         <div className="w-full pl-0 md:pl-4 xl:w-1/3">
-          <Tabs
-            className="mt-3 w-full lg:w-full"
-            tabs={[
-              {
-                text: (
-                  <div className="flex items-center justify-center gap-1 text-sm">
-                    Events
-                    <span className="rounded-lg bg-warning-400 p-px px-1 text-xs text-white">
-                      beta
-                    </span>
-                  </div>
-                ),
-                value: 1,
-              },
-              { text: "Daily Rounds", value: 0 },
-            ]}
-            onTabChange={(v) => setShowEvents(!!v)}
-            currentTab={showEvents ? 1 : 0}
-          />
+          <div className="flex items-center">
+            <Tabs
+              className="mr-2 mt-3 w-full lg:w-full"
+              tabs={[
+                {
+                  text: (
+                    <div className="flex items-center justify-center gap-1 text-sm">
+                      Events
+                      <span className="rounded-lg bg-warning-400 p-px px-1 text-xs text-white">
+                        beta
+                      </span>
+                    </div>
+                  ),
+                  value: 1,
+                },
+                { text: "Daily Rounds", value: 0 },
+              ]}
+              onTabChange={(v) => setShowEvents(!!v)}
+              currentTab={showEvents ? 1 : 0}
+            />
+            {showEvents ? (
+              <Popover className="relative mt-3">
+                <PopoverButton>
+                  <ButtonV2 className="border p-3" variant="secondary">
+                    <CareIcon icon="l-filter" />
+                  </ButtonV2>
+                </PopoverButton>
+                <Transition
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <PopoverPanel className="absolute right-0 z-30">
+                    <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+                      <div className="relative flex flex-col rounded-b-lg bg-white">
+                        {EVENTS_SORT_OPTIONS.map(({ isAscending, value }) => {
+                          return (
+                            <div
+                              className={classNames(
+                                "dropdown-item-primary pointer-events-auto m-2 flex w-56 cursor-pointer items-center justify-start gap-3 rounded border-0 px-4 py-2 text-sm font-normal transition-all duration-200 ease-in-out",
+                                eventsQuery?.ordering?.toString() === value
+                                  ? "bg-primary-100 !font-medium text-primary-500"
+                                  : "",
+                              )}
+                              onClick={() => {
+                                setEventsQuery({
+                                  ordering: value,
+                                });
+                              }}
+                            >
+                              <CareIcon
+                                className="text-primary-600"
+                                icon={
+                                  isAscending
+                                    ? "l-sort-amount-up"
+                                    : "l-sort-amount-down"
+                                }
+                              />
+                              <span>{t("SORT_OPTIONS__" + value)}</span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </PopoverPanel>
+                </Transition>
+              </Popover>
+            ) : (
+              <DailyRoundsSortDropdown
+                setDailyRoundsQuery={setDailyRoundsQuery}
+              />
+            )}
+          </div>
+
           {showEvents ? (
-            <EventsList />
+            <EventsList query={eventsQuery!} />
           ) : (
-            <DailyRoundsList consultation={props.consultationData} />
+            <DailyRoundsList
+              consultation={props.consultationData}
+              query={dailyRoundsQuery!}
+            />
           )}
         </div>
       </div>
     </div>
   );
 };
+
+function DailyRoundsSortDropdown({
+  setDailyRoundsQuery,
+}: {
+  setDailyRoundsQuery: (query: QueryParams) => void;
+}) {
+  return (
+    <DailyRoundsFilter
+      onApply={(query) => {
+        setDailyRoundsQuery(query);
+      }}
+    />
+  );
+}

src/Components/Facility/ConsultationDetails/Events/EventsList.tsx

@@ -7,15 +7,11 @@ import LoadingLogUpdateCard from "../../Consultations/DailyRounds/LoadingCard";
 import GenericEvent from "./GenericEvent";
 import { getEventIcon } from "./iconMap";
 import { EventGeneric } from "./types";
-import SortDropdownMenu from "../../../Common/SortDropdown";
-import { EVENTS_SORT_OPTIONS } from "../../../../Common/constants";
 import { QueryParams } from "../../../../Utils/request/types";
-import { useState } from "react";
 
-export default function EventsList() {
+export default function EventsList({ query }: { query: QueryParams }) {
   const [consultationId] = useSlugs("consultation");
   const { t } = useTranslation();
-  const [query, setQuery] = useState<QueryParams>();
 
   return (
     <PaginatedList
@@ -25,14 +21,6 @@ export default function EventsList() {
     >
       {() => (
         <>
-          <div className="m-1 flex flex-1 justify-end">
-            <SortDropdownMenu
-              options={EVENTS_SORT_OPTIONS}
-              selected={query?.ordering?.toString()}
-              onSelect={setQuery}
-            />
-          </div>
-
           <div className="mt-4 flex w-full flex-col gap-4">
             <div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
               <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">

src/Components/Facility/Consultations/DailyRoundsFilter.tsx

@@ -42,84 +42,81 @@ export default function DailyRoundsFilter(props: Props) {
   );
 
   return (
-    <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
-      <Popover className="relative">
-        <PopoverButton>
-          <ButtonV2
-            variant={isFilterApplied ? "primary" : "secondary"}
-            className="mr-5 border"
-          >
-            <CareIcon icon="l-filter" />
-            {t("filter")}
-          </ButtonV2>
-        </PopoverButton>
-        <Transition
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
+    <Popover className="relative mt-3">
+      <PopoverButton>
+        <ButtonV2
+          variant={isFilterApplied ? "primary" : "secondary"}
+          className="border p-3"
         >
-          <PopoverPanel className="absolute right-0 z-30 mt-1 w-80 px-4 sm:px-0 md:w-96 lg:max-w-3xl">
-            <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
-              <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
-                <div className="flow-root rounded-md">
-                  <span className="block text-sm text-secondary-800">
-                    {t("filter_by")}
-                  </span>
-                </div>
+          <CareIcon icon="l-filter" />
+        </ButtonV2>
+      </PopoverButton>
+      <Transition
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <PopoverPanel className="absolute right-0 z-30 mt-1 w-80 px-4 sm:px-0 md:w-96 lg:max-w-3xl">
+          <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+            <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
+              <div className="flow-root rounded-md">
+                <span className="block text-sm text-secondary-800">
+                  {t("filter_by")}
+                </span>
               </div>
-              <div className="relative flex flex-col gap-4 rounded-b-lg bg-white p-6">
-                <SelectFormField
-                  {...field("rounds_type")}
-                  label={t("LOG_UPDATE_FIELD_LABEL__rounds_type")}
-                  options={DailyRoundTypes}
-                  placeholder={t("show_all")}
-                  optionLabel={(o) => t(`ROUNDS_TYPE__${o}`)}
-                  optionValue={(o) => o}
-                />
-                <TextFormField
-                  {...field("taken_at_after")}
-                  label="Measured after"
-                  type="datetime-local"
-                  max={dayjs().format("YYYY-MM-DDTHH:mm")}
-                />
-                <TextFormField
-                  {...field("taken_at_before")}
-                  label="Measured before"
-                  type="datetime-local"
-                  max={dayjs().format("YYYY-MM-DDTHH:mm")}
-                />
+            </div>
+            <div className="relative flex flex-col gap-4 rounded-b-lg bg-white p-6">
+              <SelectFormField
+                {...field("rounds_type")}
+                label={t("LOG_UPDATE_FIELD_LABEL__rounds_type")}
+                options={DailyRoundTypes}
+                placeholder={t("show_all")}
+                optionLabel={(o) => t(`ROUNDS_TYPE__${o}`)}
+                optionValue={(o) => o}
+              />
+              <TextFormField
+                {...field("taken_at_after")}
+                label="Measured after"
+                type="datetime-local"
+                max={dayjs().format("YYYY-MM-DDTHH:mm")}
+              />
+              <TextFormField
+                {...field("taken_at_before")}
+                label="Measured before"
+                type="datetime-local"
+                max={dayjs().format("YYYY-MM-DDTHH:mm")}
+              />
 
-                <PopoverButton>
-                  <ButtonV2
-                    variant="secondary"
-                    onClick={() => {
-                      setFilter({});
-                      props.onApply({});
-                    }}
-                    border
-                    className="w-full"
-                  >
-                    {t("clear")}
-                  </ButtonV2>
-                </PopoverButton>
-                <PopoverButton>
-                  <ButtonV2
-                    variant="primary"
-                    onClick={() => props.onApply(filter)}
-                    border
-                    className="w-full"
-                  >
-                    {t("apply")}
-                  </ButtonV2>
-                </PopoverButton>
-              </div>
+              <PopoverButton>
+                <ButtonV2
+                  variant="secondary"
+                  onClick={() => {
+                    setFilter({});
+                    props.onApply({});
+                  }}
+                  border
+                  className="w-full"
+                >
+                  {t("clear")}
+                </ButtonV2>
+              </PopoverButton>
+              <PopoverButton>
+                <ButtonV2
+                  variant="primary"
+                  onClick={() => props.onApply(filter)}
+                  border
+                  className="w-full"
+                >
+                  {t("apply")}
+                </ButtonV2>
+              </PopoverButton>
             </div>
-          </PopoverPanel>
-        </Transition>
-      </Popover>
-    </div>
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
   );
 }

src/Components/Facility/Consultations/DailyRoundsList.tsx

@@ -5,23 +5,21 @@ import { useTranslation } from "react-i18next";
 import LoadingLogUpdateCard from "./DailyRounds/LoadingCard";
 import routes from "../../../Redux/api";
 import PaginatedList from "../../../CAREUI/misc/PaginatedList";
-import DailyRoundsFilter from "./DailyRoundsFilter";
 import { ConsultationModel } from "../models";
 import { useSlugs } from "../../../Common/hooks/useSlug";
 
 import Timeline, { TimelineNode } from "../../../CAREUI/display/Timeline";
-import { useState } from "react";
 import { QueryParams } from "../../../Utils/request/types";
 import { UserRole } from "../../../Common/constants";
 
 interface Props {
   consultation: ConsultationModel;
+  query: QueryParams;
 }
 
-export default function DailyRoundsList({ consultation }: Props) {
+export default function DailyRoundsList({ consultation, query }: Props) {
   const [consultationId] = useSlugs("consultation");
   const { t } = useTranslation();
-  const [query, setQuery] = useState<QueryParams>();
 
   return (
     <PaginatedList
@@ -31,14 +29,6 @@ export default function DailyRoundsList({ consultation }: Props) {
     >
       {() => (
         <>
-          <div className="m-1 flex flex-1 justify-end">
-            <DailyRoundsFilter
-              onApply={(query) => {
-                setQuery(query);
-              }}
-            />
-          </div>
-
           <div className="flex max-h-screen min-h-full w-full flex-col gap-4">
             <div className="flex flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
               <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">