From bc268bf5af247fab527e68e3a73cdb5bfd57d61c Mon Sep 17 00:00:00 2001
From: JOSHIK <joshikroshan4021@gmail.com>
Date: Mon, 30 Sep 2024 17:07:49 +0100
Subject: [PATCH 1/3] both sort buttons brought to the parent component

---
 .../ConsultationUpdatesTab.tsx                | 58 ++++++++++++++++++-
 .../ConsultationDetails/Events/EventsList.tsx | 14 +----
 .../Consultations/DailyRoundsList.tsx         | 10 ++--
 3 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index a1f898ee9c5..8714bfb4947 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -24,8 +24,11 @@ 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 SortDropdownMenu from "../../Common/SortDropdown";
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import { EVENTS_SORT_OPTIONS } from "../../../Common/constants";
+import DailyRoundsFilter from "../Consultations/DailyRoundsFilter";
 
 export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
   const [hl7SocketUrl, setHL7SocketUrl] = useState<string>();
@@ -33,6 +36,8 @@ 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 vitals = useVitalsAspectRatioConfig({
     default: undefined,
@@ -670,13 +675,60 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             onTabChange={(v) => setShowEvents(!!v)}
             currentTab={showEvents ? 1 : 0}
           />
+
+          {showEvents ? (
+            <EventListSortDropdown
+              eventsQuery={eventsQuery!}
+              setEventsQuery={setEventsQuery}
+            />
+          ) : (
+            <DailyRoundsSortDropdown
+              dailyRoundsQuery={dailyRoundsQuery!}
+              setDailyRoundsQuery={setDailyRoundsQuery}
+            />
+          )}
+
           {showEvents ? (
-            <EventsList />
+            <EventsList query={eventsQuery!} />
           ) : (
-            <DailyRoundsList consultation={props.consultationData} />
+            <DailyRoundsList
+              consultation={props.consultationData}
+              query={dailyRoundsQuery!}
+            />
           )}
         </div>
       </div>
     </div>
   );
 };
+
+function EventListSortDropdown({
+  eventsQuery,
+  setEventsQuery,
+}: {
+  eventsQuery: QueryParams;
+  setEventsQuery: (query: QueryParams) => void;
+}) {
+  return (
+    <SortDropdownMenu
+      options={EVENTS_SORT_OPTIONS}
+      selected={eventsQuery?.ordering?.toString()}
+      onSelect={setEventsQuery}
+    />
+  );
+}
+
+function DailyRoundsSortDropdown({
+  setDailyRoundsQuery,
+}: {
+  dailyRoundsQuery: QueryParams;
+  setDailyRoundsQuery: (query: QueryParams) => void;
+}) {
+  return (
+    <DailyRoundsFilter
+      onApply={(query) => {
+        setDailyRoundsQuery(query);
+      }}
+    />
+  );
+}
diff --git a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
index b3897dee145..d32f6d63604 100644
--- a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
+++ b/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">
diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
index 561a4f1a958..ecf665d9804 100644
--- a/src/Components/Facility/Consultations/DailyRoundsList.tsx
+++ b/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,13 +29,13 @@ export default function DailyRoundsList({ consultation }: Props) {
     >
       {() => (
         <>
-          <div className="m-1 flex flex-1 justify-end">
+          {/* <div className="m-1 flex flex-1 justify-end">
             <DailyRoundsFilter
               onApply={(query) => {
                 setQuery(query);
               }}
             />
-          </div>
+          </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">

From 6dd1e6053da566a4e950677038b76e615b4b680a Mon Sep 17 00:00:00 2001
From: JOSHIK <joshikroshan4021@gmail.com>
Date: Fri, 18 Oct 2024 12:15:29 +0100
Subject: [PATCH 2/3] achieved intented functionality

---
 .../ConsultationUpdatesTab.tsx                | 134 ++++++++++------
 .../Consultations/DailyRoundsFilter.tsx       | 147 +++++++++---------
 .../Consultations/DailyRoundsList.tsx         |   8 -
 3 files changed, 158 insertions(+), 131 deletions(-)

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 8714bfb4947..5dc9c32a430 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -25,10 +25,19 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import EncounterSymptomsCard from "../../Symptoms/SymptomsCard";
 import Tabs from "../../Common/components/Tabs";
 import { QueryParams } from "../../../Utils/request/types";
-import SortDropdownMenu from "../../Common/SortDropdown";
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
 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";
 
 export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
   const [hl7SocketUrl, setHL7SocketUrl] = useState<string>();
@@ -38,6 +47,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
   const [showEvents, setShowEvents] = useState(true);
   const [eventsQuery, setEventsQuery] = useState<QueryParams>();
   const [dailyRoundsQuery, setDailyRoundsQuery] = useState<QueryParams>();
+  const { t } = useTranslation();
 
   const vitals = useVitalsAspectRatioConfig({
     default: undefined,
@@ -656,37 +666,82 @@ 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}
-          />
-
-          {showEvents ? (
-            <EventListSortDropdown
-              eventsQuery={eventsQuery!}
-              setEventsQuery={setEventsQuery}
-            />
-          ) : (
-            <DailyRoundsSortDropdown
-              dailyRoundsQuery={dailyRoundsQuery!}
-              setDailyRoundsQuery={setDailyRoundsQuery}
+          <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 query={eventsQuery!} />
@@ -702,26 +757,9 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
   );
 };
 
-function EventListSortDropdown({
-  eventsQuery,
-  setEventsQuery,
-}: {
-  eventsQuery: QueryParams;
-  setEventsQuery: (query: QueryParams) => void;
-}) {
-  return (
-    <SortDropdownMenu
-      options={EVENTS_SORT_OPTIONS}
-      selected={eventsQuery?.ordering?.toString()}
-      onSelect={setEventsQuery}
-    />
-  );
-}
-
 function DailyRoundsSortDropdown({
   setDailyRoundsQuery,
 }: {
-  dailyRoundsQuery: QueryParams;
   setDailyRoundsQuery: (query: QueryParams) => void;
 }) {
   return (
diff --git a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
index f84705e0fa8..5777ba8427f 100644
--- a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
+++ b/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>
   );
 }
diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
index ecf665d9804..f85cef50960 100644
--- a/src/Components/Facility/Consultations/DailyRoundsList.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -29,14 +29,6 @@ export default function DailyRoundsList({ consultation, query }: 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">

From 52ba802b33501234a329f466a39e3e73e960a4fa Mon Sep 17 00:00:00 2001
From: JOSHIK <joshikroshan4021@gmail.com>
Date: Fri, 18 Oct 2024 12:41:56 +0100
Subject: [PATCH 3/3] included pluginMap file

---
 src/pluginMap.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/pluginMap.ts

diff --git a/src/pluginMap.ts b/src/pluginMap.ts
new file mode 100644
index 00000000000..02d889208f6
--- /dev/null
+++ b/src/pluginMap.ts
@@ -0,0 +1,3 @@
+import { PluginManifest } from "./pluginTypes";
+
+export const pluginMap: PluginManifest[] = [];