Grouped Medicine Administrations in Prescriptions Table (#6176)

* Grouped Administrations in Prescriptions Table

* fix dependency change issue

* fix refresh logic

* sort discontinued down

src/CAREUI/display/SubHeading.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+import CareIcon from "../icons/CareIcon";
+import RecordMeta from "./RecordMeta";
+
+interface Props {
+  title: ReactNode;
+  lastModified?: string;
+  className?: string;
+  options?: ReactNode;
+}
+
+export default function SubHeading(props: Props) {
+  return (
+    <div className="flex flex-wrap items-center justify-between py-2">
+      <div className="flex items-center">
+        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+          {props.title}
+        </span>
+        {props.lastModified && (
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+            <CareIcon className="care-l-history-alt text-sm" />
+            <RecordMeta time={props.lastModified} prefix="Last modified" />
+          </div>
+        )}
+      </div>
+      {props.options && (
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:justify-end">
+          {props.options}
+        </div>
+      )}
+    </div>
+  );
+}

src/Common/hooks/useRangePagination.ts

@@ -0,0 +1,112 @@
+import { useEffect, useMemo, useState } from "react";
+
+interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+interface Props {
+  bounds: DateRange;
+  perPage: number;
+  slots?: number;
+  defaultEnd?: boolean;
+}
+
+const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
+  const [currentRange, setCurrentRange] = useState(
+    getInitialBounds(bounds, perPage, props.defaultEnd)
+  );
+
+  useEffect(() => {
+    setCurrentRange(getInitialBounds(bounds, perPage, props.defaultEnd));
+  }, [bounds, perPage, props.defaultEnd]);
+
+  const next = () => {
+    const { end } = currentRange;
+    const deltaBounds = bounds.end.valueOf() - bounds.start.valueOf();
+    const deltaCurrent = end.valueOf() - bounds.start.valueOf();
+
+    if (deltaCurrent + perPage > deltaBounds) {
+      setCurrentRange({
+        start: new Date(bounds.end.valueOf() - perPage),
+        end: bounds.end,
+      });
+    } else {
+      setCurrentRange({
+        start: new Date(end.valueOf()),
+        end: new Date(end.valueOf() + perPage),
+      });
+    }
+  };
+
+  const previous = () => {
+    const { start } = currentRange;
+    const deltaCurrent = start.valueOf() - bounds.start.valueOf();
+
+    if (deltaCurrent - perPage < 0) {
+      setCurrentRange({
+        start: bounds.start,
+        end: new Date(bounds.start.valueOf() + perPage),
+      });
+    } else {
+      setCurrentRange({
+        start: new Date(start.valueOf() - perPage),
+        end: new Date(start.valueOf()),
+      });
+    }
+  };
+
+  const slots = useMemo(() => {
+    if (!props.slots) {
+      return [];
+    }
+
+    const slots: DateRange[] = [];
+    const { start } = currentRange;
+    const delta = perPage / props.slots;
+
+    for (let i = 0; i < props.slots; i++) {
+      slots.push({
+        start: new Date(start.valueOf() + delta * i),
+        end: new Date(start.valueOf() + delta * (i + 1)),
+      });
+    }
+
+    return slots;
+  }, [currentRange, props.slots, perPage]);
+
+  return {
+    currentRange,
+    hasNext: currentRange.end < bounds.end,
+    hasPrevious: currentRange.start > bounds.start,
+    previous,
+    next,
+    slots,
+  };
+};
+
+export default useRangePagination;
+
+const getInitialBounds = (
+  bounds: DateRange,
+  perPage: number,
+  defaultEnd?: boolean
+) => {
+  const deltaBounds = bounds.end.valueOf() - bounds.start.valueOf();
+
+  if (deltaBounds < perPage) {
+    return bounds;
+  }
+
+  if (defaultEnd) {
+    return {
+      start: new Date(bounds.end.valueOf() - perPage),
+      end: bounds.end,
+    };
+  }
+
+  return {
+    start: bounds.start,
+    end: new Date(bounds.start.valueOf() + perPage),
+  };
+};

src/Components/Facility/ConsultationDetails.tsx

@@ -35,7 +35,6 @@ import { FileUpload } from "../Patient/FileUpload";
 import HL7PatientVitalsMonitor from "../VitalsMonitor/HL7PatientVitalsMonitor";
 import InvestigationTab from "./Investigations/investigationsTab";
 import { make as Link } from "../Common/components/Link.bs";
-import MedicineAdministrationsTable from "../Medicine/MedicineAdministrationsTable";
 import { NeurologicalTable } from "./Consultations/NeurologicalTables";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import { NursingPlot } from "./Consultations/NursingPlot";
@@ -57,13 +56,13 @@ import { useTranslation } from "react-i18next";
 import { triggerGoal } from "../Common/Plausible";
 import useVitalsAspectRatioConfig from "../VitalsMonitor/useVitalsAspectRatioConfig";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import PrescriptionAdministrationsTable from "../Medicine/PrescriptionAdministrationsTable";
 
 const Loading = lazy(() => import("../Common/Loading"));
 const PageTitle = lazy(() => import("../Common/PageTitle"));
 const symptomChoices = [...SYMPTOM_CHOICES];
 
 export const ConsultationDetails = (props: any) => {
-  const [medicinesKey, setMedicinesKey] = useState(0);
   const { t } = useTranslation();
   const { facilityId, patientId, consultationId } = props;
   const tab = props.tab.toUpperCase();
@@ -1150,30 +1149,17 @@ export const ConsultationDetails = (props: any) => {
           </div>
         )}
         {tab === "MEDICINES" && (
-          <div>
-            <div className="mt-4">
-              <PrescriptionsTable
-                key={medicinesKey}
-                consultation_id={consultationId}
-                onChange={() => setMedicinesKey((k) => k + 1)}
-                readonly={!!consultationData.discharge_date}
-              />
-            </div>
-            <div className="mt-8">
-              <PrescriptionsTable
-                key={medicinesKey}
-                consultation_id={consultationId}
-                is_prn
-                onChange={() => setMedicinesKey((k) => k + 1)}
-                readonly={!!consultationData.discharge_date}
-              />
-            </div>
-            <div className="mt-8">
-              <MedicineAdministrationsTable
-                key={medicinesKey}
-                consultation_id={consultationId}
-              />
-            </div>
+          <div className="my-4 flex flex-col gap-16">
+            <PrescriptionAdministrationsTable
+              consultation_id={consultationId}
+              readonly={!!consultationData.discharge_date}
+              prn={false}
+            />
+            <PrescriptionAdministrationsTable
+              consultation_id={consultationId}
+              prn={true}
+              readonly={!!consultationData.discharge_date}
+            />
           </div>
         )}
         {tab === "FILES" && (

src/Components/Medicine/AdministerMedicine.tsx

@@ -53,7 +53,7 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
         setIsLoading(false);
         props.onClose(true);
       }}
-      className="w-full max-w-4xl"
+      className="w-full md:max-w-4xl"
     >
       <div className="mt-4 flex flex-col gap-8">
         <PrescriptionDetailCard

src/Components/Medicine/DiscontinuePrescription.tsx

@@ -38,7 +38,7 @@ export default function DiscontinuePrescription(props: Props) {
         setIsDiscontinuing(false);
         props.onClose(true);
       }}
-      className="w-full max-w-4xl"
+      className="w-full md:max-w-4xl"
     >
       <div className="mt-4 flex flex-col gap-8">
         <PrescriptionDetailCard