@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.445

package/src/service-queues/queue-list/queue-list.component.tsx

@@ -1,5 +1,7 @@
 import {
   Button,
+  ComboBox,
+  InlineLoading,
   Link,
   OverflowMenu,
   OverflowMenuItem,
@@ -10,13 +12,24 @@ import {
   TableHeader,
   TableRow,
   Tag,
+  TextInput,
 } from '@carbon/react';
 import { type QueueEntryResult } from '../../registry/types';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styles from './queue-list.component.scss';
 import { QueueEntryPriority, QueueEntryStatus, type TagColor } from '../../types/types';
+import { getTagClassByPriority } from '../../shared/utils/get-tag-type';
+import { useSession } from '@openmrs/esm-framework';
+import { checkInRoom, checkOutRoom, isCheckedIn } from './check-in.service';
+import { userHasAccess } from '@openmrs/esm-framework';
+import {
+  getConsultationClearances,
+  type ConsultationClearance,
+} from '../../shared/services/consultation-clearance.resource';
+import { usePatientBill } from '../service-queues.resource';
 
 interface QueueListProps {
+  queueRoom: string;
   queueEntries: QueueEntryResult[];
   handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
   handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
@@ -24,9 +37,74 @@ interface QueueListProps {
   handleSignOff: (queueEntryResult: QueueEntryResult) => void;
   handleRemovePatient: (queueEntryResult: QueueEntryResult) => void;
   showComingFromCol: boolean;
+  handleClearQueue: (queueEntryResults: QueueEntryResult[]) => void;
+}
+
+interface QueueActionCellProps {
+  queueEntry: QueueEntryResult;
+  checkIn: boolean;
+  handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
+  handleServePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleSignOff: (queueEntryResult: QueueEntryResult) => void;
+  handleRemovePatient: (queueEntryResult: QueueEntryResult) => void;
 }
 
+const QueueActionCell: React.FC<QueueActionCellProps> = ({
+  queueEntry,
+  checkIn,
+  handleMovePatient,
+  handleTransitionPatient,
+  handleServePatient,
+  handleSignOff,
+  handleRemovePatient,
+}) => {
+  const { message: actionMessage, showQueueActions, isLoading } = usePatientBill(queueEntry.patient_uuid);
+
+  if (isLoading && !actionMessage) {
+    return (
+      <TableCell>
+        <InlineLoading description="Checking payment status..." />
+      </TableCell>
+    );
+  }
+
+  if (actionMessage) {
+    return (
+      <TableCell>
+        <Tag size="md" type='red'>
+          {actionMessage}
+        </Tag>
+      </TableCell>
+    );
+  }
+
+  if (queueEntry.status === QueueEntryStatus.Waiting) {
+    return (
+      <TableCell>
+        <Button kind="ghost" disabled={!checkIn || !showQueueActions} onClick={() => handleServePatient(queueEntry)}>
+          Call
+        </Button>
+      </TableCell>
+    );
+  }
+
+  return (
+    <TableCell>
+      {checkIn && showQueueActions ? (
+        <OverflowMenu aria-label="overflow-menu">
+          <OverflowMenuItem itemText="Assign To" onClick={() => handleMovePatient(queueEntry)} />
+          <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(queueEntry)} />
+          <OverflowMenuItem itemText="Sign Off" onClick={() => handleSignOff(queueEntry)} />
+          <OverflowMenuItem itemText="Remove Patient" onClick={() => handleRemovePatient(queueEntry)} />
+        </OverflowMenu>
+      ) : null}
+    </TableCell>
+  );
+};
+
 const QueueList: React.FC<QueueListProps> = ({
+  queueRoom,
   queueEntries,
   handleMovePatient,
   handleTransitionPatient,
@@ -34,10 +112,120 @@ const QueueList: React.FC<QueueListProps> = ({
   handleSignOff,
   handleRemovePatient,
   showComingFromCol,
+  handleClearQueue,
 }) => {
-  const [checkIn, setCheckIn] = useState<boolean>(false);
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid ?? '';
+
+  const [clearances, setClearances] = useState<ConsultationClearance[]>([]);
+  useEffect(() => {
+    getConsultationClearances(undefined, locationUuid).then(setClearances);
+  }, [locationUuid, queueEntries]);
+
+  // Match a queue entry to its consultation-clearance record (by CR number in the
+  // identifiers, else by name overlap).
+  const clearanceFor = (qe: QueueEntryResult): ConsultationClearance | undefined => {
+    const nameTokens = `${qe.family_name} ${qe.middle_name} ${qe.given_name}`
+      .toLowerCase()
+      .split(/\s+/)
+      .filter((t) => t && t !== 'null');
+    return clearances.find((c) => {
+      if (qe.identifiers && c.crNumber && qe.identifiers.includes(c.crNumber)) {
+        return true;
+      }
+      const cTokens = c.patientName.toLowerCase().split(/\s+/).filter(Boolean);
+      return cTokens.filter((t) => nameTokens.includes(t)).length >= 2;
+    });
+  };
+
+  const provider = session?.currentProvider ?? null;
+  const [checkIn, setCheckin] = useState<boolean>(isProviderCheckedIn());
+  const [selectedStatus, setSelectedStatus] = useState<string>('');
+
+  const [searchString, setSearchString] = useState<string>();
+  const urgentEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.Emergency),
+    [queueEntries],
+  );
+  const priorityEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.Priority),
+    [queueEntries],
+  );
+
+  const nonUrgentEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.NonUrgent),
+    [queueEntries],
+  );
+  const routineEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.Routine),
+    [queueEntries],
+  );
+  const urgent2Entries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.Urgent),
+    [queueEntries],
+  );
+  const veryUrgentEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.VeryUrgent),
+    [queueEntries],
+  );
+  const nullEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, null),
+    [queueEntries],
+  );
+  const sortedQueueEntries = useMemo(() => generatePatientWaitingList(), [queueEntries, selectedStatus]);
+  const filteredQueueEntries = useMemo(() => filterQueueBySearchString(), [queueEntries, searchString, selectedStatus]);
+  const canClearQueue = userHasAccess('O3 Clear Triage Queue', {
+    privileges: session.user?.privileges ?? [],
+    roles: session.user?.roles ?? [],
+  });
+  const statusOptions = [
+    {
+      text: 'ALL',
+      id: '',
+    },
+    {
+      text: 'IN SERVICE',
+      id: 'IN SERVICE',
+    },
+    {
+      text: 'WAITING',
+      id: 'WAITING',
+    },
+  ];
+  function generatePatientWaitingList() {
+    return [...veryUrgentEntries, ...urgentEntries, ...urgent2Entries, ...priorityEntries, ...nonUrgentEntries, ...routineEntries, ...nullEntries].filter((qe) => {
+      if (!selectedStatus) {
+        return true;
+      }
+      return qe.status === selectedStatus;
+    });
+  }
+
+  function sortQueueByPriorityAndWaitTime(queueEntries: QueueEntryResult[], priority: QueueEntryPriority | null) {
+    return queueEntries
+      .filter((q) => {
+        return q.priority === priority;
+      })
+      .sort((a, b) => {
+        return b.wait_time_in_min - a.wait_time_in_min;
+      });
+  }
+  function isProviderCheckedIn() {
+    if (!provider) {
+      return false;
+    }
+    return isCheckedIn(provider.uuid, queueRoom);
+  }
   const handleCheckin = () => {
-    setCheckIn((prev) => !prev);
+    if (!provider) {
+      return;
+    }
+    checkInRoom(provider.uuid, queueRoom);
+    setCheckin(isProviderCheckedIn());
+  };
+  const handleCheckout = () => {
+    checkOutRoom();
+    setCheckin(isProviderCheckedIn());
   };
   const getTagTypeByStatus = (status: string): TagColor => {
     let type: TagColor;
@@ -56,39 +244,92 @@ const QueueList: React.FC<QueueListProps> = ({
     }
     return type;
   };
-  const getTagTypeByPriority = (priority: string): TagColor => {
-    let type: TagColor;
-    switch (priority) {
-      case QueueEntryPriority.Emergency:
-        type = 'red';
-        break;
-      case QueueEntryPriority.Normal:
-        type = 'blue';
-        break;
-      default:
-        type = 'gray';
-    }
-    return type;
+  const clearQueue = () => {
+    handleClearQueue(sortedQueueEntries);
+  };
+  const handlQueueSearch = (searchTerm: string) => {
+    setSearchString(searchTerm);
   };
+  function filterQueueBySearchString(): QueueEntryResult[] {
+    if (!searchString) {
+      return sortedQueueEntries;
+    }
+    return sortedQueueEntries.filter((qe) => {
+      const fullName = `${qe.family_name} ${qe.middle_name} ${qe.given_name}`;
+      return fullName.trim().toLowerCase().includes(searchString.trim().toLowerCase());
+    });
+  }
+  function formatPatientName(qe: QueueEntryResult) {
+    return `${formatName(qe.family_name)} ${formatName(qe.middle_name)} ${formatName(qe.given_name)}`;
+  }
+  function formatName(name: string) {
+    if (name === 'NULL' || !name) {
+      return '';
+    } else {
+      return name;
+    }
+  }
+  function statusChangeHandler(selectedStatus: { selectedItem: { id: string; text: string } }) {
+    let status = '';
+    if (selectedStatus && selectedStatus.selectedItem) {
+      status = selectedStatus.selectedItem.id;
+    }
+
+    setSelectedStatus(status);
+  }
   return (
     <>
       <div className={styles.queueListLayout}>
         <div className={styles.actionHeader}>
-          <>
+          <div className={styles.filters}>
+            <div className={styles.filter}>
+              <ComboBox
+                onChange={statusChangeHandler}
+                id="queue-status-combobox"
+                items={statusOptions}
+                itemToString={(item) => (item ? item.text : '')}
+                titleText="Status"
+              />
+            </div>
+            <div className={styles.filter}>
+              <TextInput
+                id="queue-search"
+                labelText="Name"
+                onChange={(e) => handlQueueSearch(e.target.value)}
+                placeholder="Enter patient name to filter"
+              />
+            </div>
+          </div>
+          <div className={styles.actionBtns}>
             {checkIn ? (
               <>
-                <Button kind="danger" onClick={handleCheckin}>
-                  Check Out
-                </Button>
+                <div>
+                  <Button kind="secondary" onClick={handleCheckout}>
+                    Check Out
+                  </Button>
+                </div>
+                {sortedQueueEntries.length > 0 ? (
+                  <>
+                    <div>
+                      <Button kind="danger" onClick={clearQueue} disabled={!canClearQueue}>
+                        Clear Queue
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <></>
+                )}
               </>
             ) : (
               <>
-                <Button kind="primary" onClick={handleCheckin}>
-                  Check In
-                </Button>
+                <div>
+                  <Button kind="primary" onClick={handleCheckin}>
+                    Check In
+                  </Button>
+                </div>
               </>
             )}
-          </>
+          </div>
         </div>
         <div className={styles.tableSection}>
           <Table>
@@ -96,6 +337,9 @@ const QueueList: React.FC<QueueListProps> = ({
               <TableRow>
                 <TableHeader>No</TableHeader>
                 <TableHeader>Name</TableHeader>
+                <TableHeader>Age(Years)</TableHeader>
+                <TableHeader>Phone Number</TableHeader>
+                <TableHeader>Identifiers</TableHeader>
                 <TableHeader>Coming From</TableHeader>
                 <TableHeader>Ticket</TableHeader>
                 <TableHeader>Status</TableHeader>
@@ -105,20 +349,23 @@ const QueueList: React.FC<QueueListProps> = ({
               </TableRow>
             </TableHead>
             <TableBody>
-              {queueEntries.map((val, index) => (
-                <TableRow>
+              {filteredQueueEntries.map((val, index) => (
+                <TableRow id={val.queue_entry_uuid} key={val.queue_entry_uuid}>
                   <TableCell>{index + 1}</TableCell>
                   <TableCell>
-                    {checkIn ? (
-                      <Link href={`${window.spaBase}/patient/${val.patient_uuid}/chart/`}>
-                        {val.family_name} {val.middle_name} {val.given_name}
-                      </Link>
-                    ) : (
-                      <>
-                        {val.family_name} {val.middle_name} {val.given_name}
-                      </>
-                    )}
+                    <div className={val.hide_in_queue === 1 ? styles.flaggedPatient : styles.unflaggedPatient}>
+                      {checkIn && val.status !== QueueEntryStatus.Waiting ? (
+                        <Link href={`${window.spaBase}/patient/${val.patient_uuid}/chart/`}>
+                          {formatPatientName(val)}
+                        </Link>
+                      ) : (
+                        <>{formatPatientName(val)}</>
+                      )}
+                    </div>
                   </TableCell>
+                  <TableCell>{val.age ?? ''}</TableCell>
+                  <TableCell>{val.phone_number ?? ''}</TableCell>
+                  <TableCell>{val.identifiers ?? ''}</TableCell>
                   <TableCell>{showComingFromCol ? val.queue_coming_from : ''}</TableCell>
                   <TableCell>{val.queue_entry_id}</TableCell>
                   <TableCell>
@@ -127,35 +374,24 @@ const QueueList: React.FC<QueueListProps> = ({
                     </Tag>
                   </TableCell>
                   <TableCell>
-                    <Tag size="md" type={getTagTypeByPriority(val.priority)}>
+                    <Tag size="md" className={styles[getTagClassByPriority(val.priority)]}>
                       {val.priority}
                     </Tag>
                   </TableCell>
                   <TableCell>{`${val.wait_time_in_min} minute(s)`}</TableCell>
-                  <TableCell>
-                    {val.status === QueueEntryStatus.Waiting ? (
-                      <>
-                        <Button kind="ghost" disabled={!checkIn} onClick={() => handleServePatient(val)}>
-                          Serve
-                        </Button>
-                      </>
-                    ) : (
-                      <>
-                        {checkIn ? (
-                          <>
-                            <OverflowMenu aria-label="overflow-menu">
-                              <OverflowMenuItem itemText="Move" onClick={() => handleMovePatient(val)} />
-                              <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(val)} />
-                              <OverflowMenuItem itemText="Sign Off" onClick={() => handleSignOff(val)} />
-                              <OverflowMenuItem itemText="Remove Patient" onClick={() => handleRemovePatient(val)} />
-                            </OverflowMenu>
-                          </>
-                        ) : (
-                          <></>
-                        )}
-                      </>
-                    )}
-                  </TableCell>
+                  {val.hide_in_queue === 0 ? (
+                    <QueueActionCell
+                      queueEntry={val}
+                      checkIn={checkIn}
+                      handleMovePatient={handleMovePatient}
+                      handleTransitionPatient={handleTransitionPatient}
+                      handleServePatient={handleServePatient}
+                      handleSignOff={handleSignOff}
+                      handleRemovePatient={handleRemovePatient}
+                    />
+                  ) : (
+                    <TableCell></TableCell>
+                  )}
                 </TableRow>
               ))}
             </TableBody>

package/src/service-queues/service-queue/service-queue.component.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { type QueueEntryResult } from '../../registry/types';
 import { showSnackbar, useSession } from '@openmrs/esm-framework';
-import { closeQueueEntry, getServiceQueueByLocationUuid } from '../service-queues.resource';
+import {
+  closeQueueEntry,
+  getServiceQueueByLocationUuid,
+  getServiceQueueDailyPatientListReport,
+  getServiceQueueDailyReport,
+} from '../service-queues.resource';
 import { Button, InlineLoading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import QueueList from '../queue-list/queue-list.component';
 import styles from './service-queue.component.scss';
@@ -12,6 +17,10 @@ import StatDetails from './stats/stat-details/stat-details.component';
 import SignOffEntryModal from '../modals/sign-off/sign-off.modal';
 import { endVisit } from '../../resources/visit.resource';
 import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import ConfirmModal from '../../shared/ui/confirm-modal/confirm.modal';
+import { type ServiceQueueReportPatientList, type ServiceQueueDailyReport } from '../../shared/types';
+import DailyReportPatientListModal from '../modals/daily-report-patient-list/daily-report-patient-list';
+import FacilityAndWorkerSlot from '../../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
 
 interface ServiceQueueComponentProps {
   serviceTypeUuid: string;
@@ -20,11 +29,18 @@ interface ServiceQueueComponentProps {
 
 const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTypeUuid, title }) => {
   const [queueEntries, setQueueEntries] = useState<QueueEntryResult[]>([]);
+  const [queueEntryDailyReport, setQueueEntryDailyReport] = useState<ServiceQueueDailyReport[]>([]);
+  const [queueEntryDailyReportPatientList, setQueueEntryDailyReportPatientList] = useState<
+    ServiceQueueReportPatientList[]
+  >([]);
   const [selectedQueueEntry, setSelectedQueueEntry] = useState<QueueEntryResult>();
   const [displayMoveModal, setDisplayMoveModal] = useState<boolean>(false);
   const [displayTransitionModal, setDisplayTransitionModal] = useState<boolean>(false);
   const [displayServeModal, setDisplayServeModal] = useState<boolean>(false);
   const [displaySignOffModal, setDisplaySignOffModal] = useState<boolean>(false);
+  const [displayConfirmClearQueueModal, setDisplayConfirmClearQueueModal] = useState<boolean>(false);
+  const [queueEntryToClear, setQueueEntryToClear] = useState<QueueEntryResult[]>();
+  const [displayDailyReportPatientListModal, setDisplayDailyReportPatientListModal] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const session = useSession();
   const locationUuid = session.sessionLocation.uuid;
@@ -46,14 +62,43 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
   const groupedByRoom: { [key: string]: QueueEntryResult[] } = useMemo(() => groupEntriesByRooms(), [queueEntries]);
 
   useEffect(() => {
-    getEntryQueues();
-  }, []);
+    if (serviceTypeUuid && locationUuid) {
+      getEntryQueues();
+      getEntryQueueDailyReport();
+      fetchStatsPatientList();
+    }
+  }, [serviceTypeUuid, locationUuid]);
+
+
 
   const getEntryQueues = async () => {
     setLoading(true);
-    const res = await getServiceQueueByLocationUuid(serviceTypeUuid, locationUuid);
-    setQueueEntries(res);
-    setLoading(false);
+    try {
+      const res = await getServiceQueueByLocationUuid(serviceTypeUuid, locationUuid);
+      setQueueEntries(res);
+      setLoading(false);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching queue',
+        subtitle: 'An error occurred while fetching the queue. Please reload or contact support',
+      });
+    }
+  };
+
+  const getEntryQueueDailyReport = async () => {
+    setLoading(true);
+    try {
+      const res = await getServiceQueueDailyReport(serviceTypeUuid, locationUuid);
+      setQueueEntryDailyReport(res);
+      setLoading(false);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching queue daily report',
+        subtitle: 'An error occurred while fetching the queue daily report. Please reload or contact support',
+      });
+    }
   };
 
   if (!groupedByRoom) {
@@ -130,6 +175,72 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
       });
     }
   };
+  const handleClearQueue = async (queueEntries: QueueEntryResult[]) => {
+    setQueueEntryToClear(queueEntries);
+    setDisplayConfirmClearQueueModal(true);
+  };
+
+  const clearQueue = async () => {
+    for (let i = 0; i < queueEntryToClear.length; i++) {
+      const queueEntryResult = queueEntries[i];
+      await closeQueue(queueEntryResult);
+    }
+  };
+
+  const closeQueue = async (queueEntryResult: QueueEntryResult) => {
+    try {
+      await closeQueueEntry(queueEntryResult.queue_entry_uuid);
+      await endVisit(queueEntryResult.visit_uuid, {
+        stopDatetime: new Date().toISOString(),
+      });
+      showSnackbar({
+        kind: 'success',
+        title: 'Queue entry successfully closed',
+        subtitle: `Queue entry ${queueEntryResult.queue_id} successfully closed`,
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Queue entry close failrure',
+        subtitle: `Queue entry ${queueEntryResult.queue_id} could not be closed. Please retry of contact support`,
+      });
+    }
+  };
+
+  const handleConfirmClearQueue = () => {
+    setDisplayConfirmClearQueueModal(false);
+    clearQueue();
+    setQueueEntryToClear([]);
+    handleRefresh();
+  };
+
+  const handleCloseConfirmClearQueueModal = () => {
+    setDisplayConfirmClearQueueModal(false);
+    setQueueEntryToClear([]);
+  };
+
+  const fetchStatsPatientList = async () => {
+    try {
+      const resp = await getServiceQueueDailyPatientListReport(serviceTypeUuid, locationUuid);
+      setQueueEntryDailyReportPatientList(resp);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching patient list',
+        subtitle: 'An error ocuured while fetching the service queue checked in patient list',
+      });
+    }
+  };
+
+  const getStatsPatientList = () => {
+    showDailiyReportPatientListModal();
+  };
+  const handleCloseDailiyReportPatientListModal = () => {
+    setDisplayDailyReportPatientListModal(false);
+  };
+  const showDailiyReportPatientListModal = () => {
+    setDisplayDailyReportPatientListModal(true);
+  };
 
   if (!serviceTypeUuid) {
     return <>No service type defined</>;
@@ -144,7 +255,11 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
         <div>
           {queueEntries ? (
             <>
-              <StatDetails queueEntries={queueEntries} />
+              <StatDetails
+                queueEntries={queueEntries}
+                report={queueEntryDailyReport}
+                onStatDetailsRequest={getStatsPatientList}
+              />
             </>
           ) : (
             <></>
@@ -171,6 +286,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
                     <TabPanel>
                       {
                         <QueueList
+                          queueRoom={key}
                           queueEntries={groupedByRoom[key]}
                           handleMovePatient={handleMovePatient}
                           handleTransitionPatient={handleTransitionPatient}
@@ -178,6 +294,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
                           handleSignOff={handleSignOff}
                           handleRemovePatient={handleRemovePatient}
                           showComingFromCol={serviceTypeUuid !== QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID}
+                          handleClearQueue={handleClearQueue}
                         />
                       }
                     </TabPanel>
@@ -192,9 +309,9 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
           <MovePatientModal
             open={displayMoveModal}
             locationUuid={locationUuid}
-            serviceUuid={serviceTypeUuid}
             onModalClose={handleModalCloes}
             currentQueueEntryUuid={selectedQueueEntry.queue_entry_uuid}
+            onTransferSuccess={handleModalCloes}
           />
         </>
       ) : (
@@ -238,6 +355,32 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
       ) : (
         <></>
       )}
+
+      {displayConfirmClearQueueModal ? (
+        <>
+          <ConfirmModal
+            open={displayConfirmClearQueueModal}
+            onConfirm={handleConfirmClearQueue}
+            onModalClose={handleCloseConfirmClearQueueModal}
+            title="Clear Queue"
+            subtitle="You are about to clear the patient queue and their respective visits. Are you sure?"
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+      {displayDailyReportPatientListModal && queueEntryDailyReportPatientList ? (
+        <>
+          <DailyReportPatientListModal
+            open={displayDailyReportPatientListModal}
+            onModalClose={handleCloseDailiyReportPatientListModal}
+            patientList={queueEntryDailyReportPatientList}
+          />
+        </>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

package/src/service-queues/service-queue/stats/stat-details/stat-details.component.scss

@@ -4,4 +4,9 @@
     width: 100%;
     column-gap: 15px;
     margin-bottom: 15px;
+    .aggregate{
+        display: flex;
+        flex-direction: column;
+        width: 50%;
+    }
 }