@ampath/esm-dha-workflow-app 4.0.0-next.25 → 4.0.0-next.27

package/src/registry/modal/send-to-triage/send-to-triage.modal.scss

@@ -28,4 +28,7 @@
     flex-direction: row;
     column-gap: 5px;
     margin-top: 15px;
+}
+.greenBtn{
+    background-color: #28a745;
 }

package/src/registry/modal/send-to-triage/send-to-triage.modal.tsx

@@ -252,7 +252,7 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
             <div className={styles.actionSection}>
               {patients.length > 0 ? (
                 <div className={styles.btnContainer}>
-                  <Button kind="secondary" onClick={sendToTriage}>
+                  <Button className={styles.greenBtn} onClick={sendToTriage}>
                     {loading ? <InlineLoading description="Sending To Triage..." /> : 'Send To Triage'}
                   </Button>
                 </div>

package/src/registry/registry.component.tsx

@@ -135,6 +135,9 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   };
   const onSendToTriageModalClose = (modalCloseResp?: { success: boolean }) => {
     setDisplaytriageModal(false);
+    if (modalCloseResp && modalCloseResp.success) {
+      navigate('/triage');
+    }
   };
   const handleSendToTriageModalSubmit = () => {};
   const getPatient = (): HieClient => {

package/src/registry/types/index.ts

@@ -287,6 +287,8 @@ export type CreatePatientDto = {
 export type QueueEntryResult = {
   name: string;
   queue_entry_id: number;
+  priority_comment: string;
+  wait_time_in_min: number;
   queue_entry_uuid: string;
   service_uuid: string;
   location_id: number;
@@ -303,4 +305,5 @@ export type QueueEntryResult = {
   middle_name: string;
   status: string;
   visit_uuid: string;
+  queue_coming_from: string;
 };

package/src/service-queues/modals/sign-off/sign-off.modal.tsx

@@ -4,6 +4,7 @@ import { type EndVisitDto, type QueueEntryResult } from '../../../registry/types
 import styles from './sign-off.modal.scss';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { endVisit } from '../../../resources/visit.resource';
+import { closeQueueEntry } from '../../service-queues.resource';
 
 interface SignOffEntryModalProps {
   open: boolean;
@@ -21,6 +22,7 @@ const SignOffEntryModal: React.FC<SignOffEntryModalProps> = ({
   const signOffEntry = async () => {
     const payload = getEndVisitPayload();
     try {
+      await removePatientFromQueue(currentQueueEntry);
       await endVisit(currentQueueEntry.visit_uuid, payload);
       showAlert('success', 'Visit Ended successfully', '');
       onSuccessfullSignOff();
@@ -40,6 +42,14 @@ const SignOffEntryModal: React.FC<SignOffEntryModalProps> = ({
       stopDatetime: new Date().toISOString(),
     };
   };
+  const removePatientFromQueue = async (currentQueueEntry: QueueEntryResult) => {
+    try {
+      await closeQueueEntry(currentQueueEntry.queue_entry_uuid);
+      showAlert('success', 'Patient removal from queue successfully!', '');
+    } catch (e) {
+      showAlert('error', 'Patient removal from queue failed!', '');
+    }
+  };
   return (
     <>
       <Modal

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

@@ -22,6 +22,7 @@ interface QueueListProps {
   handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
   handleServePatient: (queueEntryResult: QueueEntryResult) => void;
   handleSignOff: (queueEntryResult: QueueEntryResult) => void;
+  handleRemovePatient: (queueEntryResult: QueueEntryResult) => void;
 }
 
 const QueueList: React.FC<QueueListProps> = ({
@@ -30,6 +31,7 @@ const QueueList: React.FC<QueueListProps> = ({
   handleTransitionPatient,
   handleServePatient,
   handleSignOff,
+  handleRemovePatient,
 }) => {
   const [checkIn, setCheckIn] = useState<boolean>(false);
   const handleCheckin = () => {
@@ -70,21 +72,21 @@ const QueueList: React.FC<QueueListProps> = ({
     <>
       <div className={styles.queueListLayout}>
         <div className={styles.actionHeader}>
-          {checkIn ? (
-            <>
-              <Button kind="danger" onClick={handleCheckin}>
-                {' '}
-                Check Out
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button kind="primary" onClick={handleCheckin}>
-                {' '}
-                Check In
-              </Button>
-            </>
-          )}
+          <>
+            {checkIn ? (
+              <>
+                <Button kind="danger" onClick={handleCheckin}>
+                  Check Out
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button kind="primary" onClick={handleCheckin}>
+                  Check In
+                </Button>
+              </>
+            )}
+          </>
         </div>
         <div className={styles.tableSection}>
           <Table>
@@ -92,9 +94,11 @@ const QueueList: React.FC<QueueListProps> = ({
               <TableRow>
                 <TableHeader>No</TableHeader>
                 <TableHeader>Name</TableHeader>
+                <TableHeader>Coming From</TableHeader>
                 <TableHeader>Ticket</TableHeader>
                 <TableHeader>Status</TableHeader>
                 <TableHeader>Priority</TableHeader>
+                <TableHeader>Wait Time</TableHeader>
                 <TableHeader>Action</TableHeader>
               </TableRow>
             </TableHead>
@@ -113,6 +117,7 @@ const QueueList: React.FC<QueueListProps> = ({
                       </>
                     )}
                   </TableCell>
+                  <TableCell>{val.queue_coming_from}</TableCell>
                   <TableCell>{val.queue_entry_id}</TableCell>
                   <TableCell>
                     <Tag size="md" type={getTagTypeByStatus(val.status)}>
@@ -124,6 +129,7 @@ const QueueList: React.FC<QueueListProps> = ({
                       {val.priority}
                     </Tag>
                   </TableCell>
+                  <TableCell>{`${val.wait_time_in_min} minute(s)`}</TableCell>
                   <TableCell>
                     {val.status === QueueEntryStatus.Waiting ? (
                       <>
@@ -139,7 +145,7 @@ const QueueList: React.FC<QueueListProps> = ({
                               <OverflowMenuItem itemText="Move" onClick={() => handleMovePatient(val)} />
                               <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(val)} />
                               <OverflowMenuItem itemText="Sign Off" onClick={() => handleSignOff(val)} />
-                              <OverflowMenuItem itemText="Remove Patient" />
+                              <OverflowMenuItem itemText="Remove Patient" onClick={() => handleRemovePatient(val)} />
                             </OverflowMenu>
                           </>
                         ) : (

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

@@ -5,3 +5,10 @@
     padding: 15px 15px;
     row-gap: 15px;
 }
+.headerAction{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    justify-content: flex-end;
+    padding: 10px 10px;
+}

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { type QueueEntryResult } from '../../registry/types';
-import { useSession } from '@openmrs/esm-framework';
-import { getServiceQueueByLocationUuid } from '../service-queues.resource';
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { closeQueueEntry, getServiceQueueByLocationUuid } 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';
 import MovePatientModal from '../modals/move/move-patient.component';
@@ -10,6 +10,7 @@ import TransitionPatientModal from '../modals/transition/transition-patient.comp
 import ServePatientModal from '../modals/serve/serve-patient.comppnent';
 import StatDetails from './stats/stat-details/stat-details.component';
 import SignOffEntryModal from '../modals/sign-off/sign-off.modal';
+import { endVisit } from '../../resources/visit.resource';
 
 interface ServiceQueueComponentProps {
   serviceTypeUuid: string;
@@ -23,6 +24,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
   const [displayTransitionModal, setDisplayTransitionModal] = useState<boolean>(false);
   const [displayServeModal, setDisplayServeModal] = useState<boolean>(false);
   const [displaySignOffModal, setDisplaySignOffModal] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
   const session = useSession();
   const locationUuid = session.sessionLocation.uuid;
 
@@ -47,8 +49,10 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
   }, []);
 
   const getEntryQueues = async () => {
+    setLoading(true);
     const res = await getServiceQueueByLocationUuid(serviceTypeUuid, locationUuid);
     setQueueEntries(res);
+    setLoading(false);
   };
 
   if (!groupedByRoom) {
@@ -62,7 +66,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
     setDisplayMoveModal(false);
     setDisplayTransitionModal(false);
     setDisplayServeModal(false);
-    getEntryQueues();
+    handleRefresh();
   };
 
   const handleTransitionPatient = (queueEntry: QueueEntryResult) => {
@@ -93,6 +97,37 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
 
   const onSuccessfullSignOff = () => {
     setDisplaySignOffModal(false);
+    handleRefresh();
+  };
+
+  const handleRefresh = () => {
+    getEntryQueues();
+  };
+
+  const handleRemovePatient = async (queueEntryResult: QueueEntryResult) => {
+    try {
+      await closeQueueEntry(queueEntryResult.queue_entry_uuid);
+      showSnackbar({
+        kind: 'success',
+        title: 'Patient removal from queue successfully!',
+        subtitle: '',
+      });
+      await endVisit(queueEntryResult.visit_uuid, {
+        stopDatetime: new Date().toISOString(),
+      });
+      showSnackbar({
+        kind: 'success',
+        title: 'Visit Ended successfully!',
+        subtitle: '',
+      });
+      handleRefresh();
+    } catch (e) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Patient removal from queue failed!',
+        subtitle: e.message ?? '',
+      });
+    }
   };
 
   if (!serviceTypeUuid) {
@@ -114,6 +149,11 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
             <></>
           )}
         </div>
+        <div className={styles.headerAction}>
+          <Button kind="tertiary" onClick={handleRefresh} disabled={loading}>
+            {loading ? <InlineLoading description="Refreshing..." /> : 'Refresh'}
+          </Button>
+        </div>
 
         <div className={styles.contentSection}>
           <Tabs>
@@ -135,6 +175,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
                           handleTransitionPatient={handleTransitionPatient}
                           handleServePatient={handleServePatient}
                           handleSignOff={handleSignOff}
+                          handleRemovePatient={handleRemovePatient}
                         />
                       }
                     </TabPanel>

package/src/service-queues/service-queues.resource.ts

@@ -158,3 +158,19 @@ export async function getServiceQueueByLocationUuid(
   const result = await response.json();
   return result.data;
 }
+
+export async function closeQueueEntry(entryQueueUuid: string): Promise<QueueEntryResult[]> {
+  const queueEntryUrl = `${restBaseUrl}/queue-entry/${entryQueueUuid}`;
+  const params = {
+    endedAt: new Date().toISOString(),
+  };
+  const response = await openmrsFetch(queueEntryUrl, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  });
+  const result = await response.json();
+  return result.data;
+}