Group medicine administration by 4 hours + Support for archiving medicines + Administration Activity View + migrate useDispatch to useQuery

src/CAREUI/display/RecordMeta.tsx

@@ -1,5 +1,10 @@
 import CareIcon from "../icons/CareIcon";
-import { formatDateTime, isUserOnline, relativeTime } from "../../Utils/utils";
+import {
+  formatDateTime,
+  formatName,
+  isUserOnline,
+  relativeTime,
+} from "../../Utils/utils";
 import { ReactNode } from "react";
 
 interface Props {
@@ -30,7 +35,7 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
           <span className="flex items-center gap-1">
             by
             <CareIcon className="care-l-user" />
-            {user.first_name} {user.last_name}
+            {formatName(user)}
             {isOnline && (
               <div className="h-1.5 w-1.5 rounded-full bg-primary-400" />
             )}
@@ -48,9 +53,7 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
         {user && inlineUser && <span>by</span>}
         {user && <CareIcon className="care-l-user" />}
         {user && inlineUser && (
-          <span className="font-medium">
-            {user.first_name} {user.last_name}
-          </span>
+          <span className="font-medium">{formatName(user)}</span>
         )}
       </div>
     );

src/CAREUI/display/Timeline.tsx

@@ -0,0 +1,158 @@
+import { createContext, useContext } from "react";
+import { PerformedByModel } from "../../Components/HCX/misc";
+import { classNames, formatName } from "../../Utils/utils";
+import CareIcon, { IconName } from "../icons/CareIcon";
+import RecordMeta from "./RecordMeta";
+
+export interface TimelineEvent<TType = string> {
+  type: TType;
+  timestamp: string;
+  by: PerformedByModel | undefined;
+  icon: IconName;
+  notes?: string;
+  cancelled?: boolean;
+}
+
+interface TimelineProps {
+  className: string;
+  children: React.ReactNode | React.ReactNode[];
+  name: string;
+}
+
+const TimelineContext = createContext("");
+
+export default function Timeline({ className, children, name }: TimelineProps) {
+  return (
+    <div className={className}>
+      <ol role="list" className="space-y-6">
+        <TimelineContext.Provider value={name}>
+          {children}
+        </TimelineContext.Provider>
+      </ol>
+    </div>
+  );
+}
+
+interface TimelineNodeProps {
+  event: TimelineEvent;
+  title?: React.ReactNode;
+  /**
+   * Used to add a suffix to the auto-generated title. Will be ignored if `title` is provided.
+   */
+  titleSuffix?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+  name?: string;
+  isLast: boolean;
+}
+
+export const TimelineNode = (props: TimelineNodeProps) => {
+  const name = useContext(TimelineContext);
+
+  return (
+    <li className="relative flex gap-x-4">
+      <div
+        className={classNames(
+          props.isLast ? "h-6" : "-bottom-6",
+          "absolute left-0 top-0 flex w-6 justify-center"
+        )}
+      >
+        <div className="w-px bg-gray-300" />
+      </div>
+
+      <div
+        className={classNames(
+          props.className,
+          "group flex w-full flex-col items-start gap-y-1"
+        )}
+      >
+        <div className="relative flex w-full justify-between gap-x-4">
+          <div
+            className={classNames(
+              "flex w-full gap-x-4",
+              props.event.cancelled && "line-through"
+            )}
+          >
+            {props.title || (
+              <TimelineNodeTitle event={props.event}>
+                <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600">
+                  {props.event.by && (
+                    <span className="font-medium text-gray-900">
+                      {formatName(props.event.by)}{" "}
+                    </span>
+                  )}
+                  {props.titleSuffix
+                    ? props.titleSuffix
+                    : `${props.event.type} the ${props.name || name}.`}
+                </p>
+                {props.actions && (
+                  <TimelineNodeActions>{props.actions}</TimelineNodeActions>
+                )}
+                <RecordMeta
+                  className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                  time={props.event.timestamp}
+                />
+              </TimelineNodeTitle>
+            )}
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col items-start gap-y-2 pl-10">
+          <TimelineNodeNotes>{props.event.notes}</TimelineNodeNotes>
+          {props.children}
+        </div>
+      </div>
+    </li>
+  );
+};
+
+interface TimelineNodeTitleProps {
+  children: React.ReactNode | React.ReactNode[];
+  event: TimelineEvent;
+}
+
+export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
+  return (
+    <>
+      <div className="relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500">
+        <CareIcon
+          className="text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white"
+          aria-hidden="true"
+          icon={props.event.icon}
+        />
+      </div>
+
+      <div className="flex w-full flex-wrap justify-between gap-2">
+        {props.children}
+      </div>
+    </>
+  );
+};
+
+export const TimelineNodeActions = (props: {
+  children: React.ReactNode | React.ReactNode[];
+}) => {
+  return <div className="flex justify-end gap-2">{props.children}</div>;
+};
+
+interface TimelineNodeNotesProps {
+  children?: React.ReactNode | React.ReactNode[];
+  icon?: IconName;
+}
+
+export const TimelineNodeNotes = ({
+  children,
+  icon = "l-notes",
+}: TimelineNodeNotesProps) => {
+  if (!children) {
+    return;
+  }
+
+  return (
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
+      <CareIcon icon={icon} className="text-lg text-gray-700" />
+      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    </div>
+  );
+};

src/CAREUI/interactive/ScrollOverlay.tsx

@@ -0,0 +1,30 @@
+import useVisibility from "../../Utils/useVisibility";
+import { classNames } from "../../Utils/utils";
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  overlay: React.ReactNode;
+  disableOverlay?: boolean;
+}
+
+export default function ScrollOverlay(props: Props) {
+  const [bottomIsVisible, ref] = useVisibility();
+  const hasScrollContent = !props.disableOverlay && !bottomIsVisible;
+
+  return (
+    <div className={classNames("relative", props.className)}>
+      {props.children}
+
+      <div ref={ref as any} />
+      <div
+        className={classNames(
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0"
+        )}
+      >
+        {hasScrollContent && props.overlay}
+      </div>
+    </div>
+  );
+}

src/CAREUI/interactive/SlideOver.tsx

@@ -61,7 +61,7 @@ export default function SlideOver({
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-30"
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onClose={closeOnBackdropClick ? setOpen : () => {}}
       >

src/Components/Common/Dialog.tsx

@@ -26,7 +26,7 @@ const DialogModal = (props: DialogProps) => {
   return (
     <div>
       <Transition appear show={show} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <Dialog as="div" className="relative z-30" onClose={onClose}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"

src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx

@@ -1,20 +1,18 @@
 import { ConsultationTabProps } from "./index";
-import PrescriptionAdministrationsTable from "../../Medicine/PrescriptionAdministrationsTable";
 import PageTitle from "../../Common/PageHeadTitle";
+import MedicineAdministrationSheet from "../../Medicine/MedicineAdministrationSheet";
 
 export const ConsultationMedicinesTab = (props: ConsultationTabProps) => {
   return (
     <div className="my-4 flex flex-col gap-16">
       {/* eslint-disable-next-line i18next/no-literal-string */}
       <PageTitle title="Medicines" />
-      <PrescriptionAdministrationsTable
-        consultation_id={props.consultationId}
+      <MedicineAdministrationSheet
         readonly={!!props.consultationData.discharge_date}
-        prn={false}
+        is_prn={false}
       />
-      <PrescriptionAdministrationsTable
-        consultation_id={props.consultationId}
-        prn={true}
+      <MedicineAdministrationSheet
+        is_prn={true}
         readonly={!!props.consultationData.discharge_date}
       />
     </div>

src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx

@@ -232,7 +232,6 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         </div>
                         <div className="overflow-x-auto overflow-y-hidden">
                           <PrescriptionsTable
-                            consultation_id={props.consultationData.id ?? ""}
                             is_prn={false}
                             readonly
                             prescription_type="DISCHARGE"
@@ -241,7 +240,6 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <hr className="my-2 border border-gray-300"></hr>
                         <div className="overflow-x-auto overflow-y-hidden">
                           <PrescriptionsTable
-                            consultation_id={props.consultationData.id ?? ""}
                             is_prn
                             readonly
                             prescription_type="DISCHARGE"

src/Components/Facility/DischargeModal.tsx

@@ -12,7 +12,7 @@ import DateFormField from "../Form/FormFields/DateFormField";
 import DialogModal from "../Common/Dialog";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import { FieldLabel } from "../Form/FormFields/FormField";
-import { HCXActions, PrescriptionActions } from "../../Redux/actions";
+import { HCXActions } from "../../Redux/actions";
 import { HCXClaimModel } from "../HCX/models";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
@@ -183,8 +183,6 @@ const DischargeModal = ({
     });
   };
 
-  const prescriptionActions = PrescriptionActions(consultationData.id ?? "");
-
   const handleFacilitySelect = (selected: FacilityModel) => {
     setFacility(selected);
     const { id, name } = selected || {};
@@ -238,7 +236,7 @@ const DischargeModal = ({
               setSelected={(selected) =>
                 handleFacilitySelect(selected as FacilityModel)
               }
-              selected={facility}
+              selected={facility ?? null}
               showAll
               freeText
               multiple={false}
@@ -284,18 +282,11 @@ const DischargeModal = ({
 
             <div className="mb-4">
               <FieldLabel>Discharge Prescription Medications</FieldLabel>
-              <PrescriptionBuilder
-                actions={prescriptionActions}
-                prescription_type="DISCHARGE"
-              />
+              <PrescriptionBuilder prescription_type="DISCHARGE" />
             </div>
             <div className="mb-4">
               <FieldLabel>Discharge PRN Prescriptions</FieldLabel>
-              <PrescriptionBuilder
-                actions={prescriptionActions}
-                prescription_type="DISCHARGE"
-                is_prn
-              />
+              <PrescriptionBuilder prescription_type="DISCHARGE" is_prn />
             </div>
           </div>
         )}

src/Components/Form/FormFields/PhoneNumberFormField.tsx

@@ -138,7 +138,7 @@ const phoneNumberTypeIcons: Record<PhoneNumberType, string> = {
 const PhoneNumberTypesHelp = ({ types }: { types: PhoneNumberType[] }) => (
   <div className="flex gap-1">
     {types.map((type) => (
-      <span className="tooltip mt-1">
+      <span key={type} className="tooltip mt-1">
         <CareIcon
           className={classNames(
             `care-l-${phoneNumberTypeIcons[type]}`,