@ampath/esm-dha-workflow-app 4.0.0-next.21 → 4.0.0-next.23

package/src/service-queues/modals/serve/serve-patient.comppnent.tsx

@@ -24,7 +24,7 @@ const ServePatientModal: React.FC<ServePatientModal> = ({
     const payload = getServePatientPayload();
     try {
       await transitionQueueEntry(payload);
-      showAlert('success', 'Cleint succesfully served', '');
+      showAlert('success', 'Client succesfully served', '');
       onSuccessfullServe();
     } catch (e) {
       showAlert('error', e.message, '');
@@ -49,6 +49,7 @@ const ServePatientModal: React.FC<ServePatientModal> = ({
   return (
     <>
       <Modal
+        modalHeading="Serve Client"
         open={open}
         size="md"
         onSecondarySubmit={() => onModalClose()}
@@ -59,13 +60,10 @@ const ServePatientModal: React.FC<ServePatientModal> = ({
       >
         <ModalBody>
           <div className={styles.serveModalLayout}>
-            <div className={styles.serveModalSectionHeader}>
-              <h4>Serve Client</h4>
-            </div>
             <div className={styles.serveModalContentSection}>
               <div className={styles.formRow}>
                 <p>
-                  Name: {currentQueueEntry.family_name} {currentQueueEntry.family_name}
+                  Name: {currentQueueEntry.family_name} {currentQueueEntry.middle_name} {currentQueueEntry.given_name}
                 </p>
                 <p>Ticket No: {currentQueueEntry.queue_entry_id}</p>
                 <p>Status: {currentQueueEntry.status}</p>

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Modal, ModalBody, TextInput } from '@carbon/react';
+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';
+
+interface SignOffEntryModalProps {
+  open: boolean;
+  onModalClose: () => void;
+  currentQueueEntry: QueueEntryResult;
+  onSuccessfullSignOff: () => void;
+}
+
+const SignOffEntryModal: React.FC<SignOffEntryModalProps> = ({
+  open,
+  onModalClose,
+  currentQueueEntry,
+  onSuccessfullSignOff,
+}) => {
+  const signOffEntry = async () => {
+    const payload = getEndVisitPayload();
+    try {
+      await endVisit(currentQueueEntry.visit_uuid, payload);
+      showAlert('success', 'Visit Ended successfully', '');
+      onSuccessfullSignOff();
+    } catch (e) {
+      showAlert('error', e.message, '');
+    }
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const getEndVisitPayload = (): EndVisitDto => {
+    return {
+      stopDatetime: new Date().toISOString(),
+    };
+  };
+  return (
+    <>
+      <Modal
+        modalHeading="Sign Off"
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={signOffEntry}
+        primaryButtonText="Sign Off"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.serveModalLayout}>
+            <div className={styles.serveModalContentSection}>
+              <div className={styles.formRow}>
+                <TextInput id="health-worker-id" labelText="Enter your Provider ID" onChange={() => {}} type="text" />
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default SignOffEntryModal;

package/src/service-queues/modals/transition/transition-patient.component.tsx

@@ -24,7 +24,7 @@ const TransitionPatientModal: React.FC<TransitionPatientModalProps> = ({ open, o
     const payload = getTransitionQueueEntryPayload();
     try {
       await transitionQueueEntry(payload);
-      showAlert('success', 'Cleint succesfully Transitioned', '');
+      showAlert('success', 'Client succesfully Transitioned', '');
       onModalClose();
     } catch (e) {
       showAlert('error', e.message, '');

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

@@ -9,16 +9,19 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tag,
 } from '@carbon/react';
 import { type QueueEntryResult } from '../../registry/types';
 import React, { useState } from 'react';
 import styles from './queue-list.component.scss';
+import { QueueEntryPriority, QueueEntryStatus, type TagColor } from '../../types/types';
 
 interface QueueListProps {
   queueEntries: QueueEntryResult[];
   handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
   handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
   handleServePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleSignOff: (queueEntryResult: QueueEntryResult) => void;
 }
 
 const QueueList: React.FC<QueueListProps> = ({
@@ -26,11 +29,43 @@ const QueueList: React.FC<QueueListProps> = ({
   handleMovePatient,
   handleTransitionPatient,
   handleServePatient,
+  handleSignOff,
 }) => {
   const [checkIn, setCheckIn] = useState<boolean>(false);
   const handleCheckin = () => {
     setCheckIn((prev) => !prev);
   };
+  const getTagTypeByStatus = (status: string): TagColor => {
+    let type: TagColor;
+    switch (status) {
+      case QueueEntryStatus.Completed:
+        type = 'green';
+        break;
+      case QueueEntryStatus.Waiting:
+        type = 'gray';
+        break;
+      case QueueEntryStatus.InService:
+        type = 'blue';
+        break;
+      default:
+        type = 'gray';
+    }
+    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;
+  };
   return (
     <>
       <div className={styles.queueListLayout}>
@@ -70,19 +105,27 @@ const QueueList: React.FC<QueueListProps> = ({
                   <TableCell>
                     {checkIn ? (
                       <Link href={`${window.spaBase}/patient/${val.patient_uuid}/chart/`}>
-                        {val.family_name} {val.middle_name}
+                        {val.family_name} {val.middle_name} {val.given_name}
                       </Link>
                     ) : (
                       <>
-                        {val.family_name} {val.middle_name}
+                        {val.family_name} {val.middle_name} {val.given_name}
                       </>
                     )}
                   </TableCell>
                   <TableCell>{val.queue_entry_id}</TableCell>
-                  <TableCell>{val.status}</TableCell>
-                  <TableCell>{val.priority}</TableCell>
                   <TableCell>
-                    {val.status === 'WAITING' ? (
+                    <Tag size="md" type={getTagTypeByStatus(val.status)}>
+                      {val.status}
+                    </Tag>
+                  </TableCell>
+                  <TableCell>
+                    <Tag size="md" type={getTagTypeByPriority(val.priority)}>
+                      {val.priority}
+                    </Tag>
+                  </TableCell>
+                  <TableCell>
+                    {val.status === QueueEntryStatus.Waiting ? (
                       <>
                         <Button kind="ghost" disabled={!checkIn} onClick={() => handleServePatient(val)}>
                           Serve
@@ -95,7 +138,7 @@ const QueueList: React.FC<QueueListProps> = ({
                             <OverflowMenu aria-label="overflow-menu">
                               <OverflowMenuItem itemText="Move" onClick={() => handleMovePatient(val)} />
                               <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(val)} />
-                              <OverflowMenuItem itemText="Sign off" onClick={handleCheckin} />
+                              <OverflowMenuItem itemText="Sign Off" onClick={() => handleSignOff(val)} />
                               <OverflowMenuItem itemText="Remove Patient" />
                             </OverflowMenu>
                           </>

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

@@ -4,4 +4,4 @@
     width: 100%;
     padding: 15px 15px;
     row-gap: 15px;
-}
+}

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

@@ -8,6 +8,8 @@ import styles from './service-queue.component.scss';
 import MovePatientModal from '../modals/move/move-patient.component';
 import TransitionPatientModal from '../modals/transition/transition-patient.component';
 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';
 
 interface ServiceQueueComponentProps {
   serviceTypeUuid: string;
@@ -17,9 +19,10 @@ interface ServiceQueueComponentProps {
 const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTypeUuid, title }) => {
   const [queueEntries, setQueueEntries] = useState<QueueEntryResult[]>([]);
   const [selectedQueueEntry, setSelectedQueueEntry] = useState<QueueEntryResult>();
-  const [displayMoveModal, setDisplayMoveModal] = useState<boolean>();
-  const [displayTransitionModal, setDisplayTransitionModal] = useState<boolean>();
-  const [displayServeModal, setDisplayServeModal] = useState<boolean>();
+  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 session = useSession();
   const locationUuid = session.sessionLocation.uuid;
 
@@ -59,6 +62,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
     setDisplayMoveModal(false);
     setDisplayTransitionModal(false);
     setDisplayServeModal(false);
+    getEntryQueues();
   };
 
   const handleTransitionPatient = (queueEntry: QueueEntryResult) => {
@@ -82,6 +86,15 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
     navigateToPatientChart();
   };
 
+  const handleSignOff = (queueEntry: QueueEntryResult) => {
+    setDisplaySignOffModal(true);
+    setSelectedQueueEntry(queueEntry);
+  };
+
+  const onSuccessfullSignOff = () => {
+    setDisplaySignOffModal(false);
+  };
+
   if (!serviceTypeUuid) {
     return <>No service type defined</>;
   }
@@ -92,6 +105,16 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
         <div className={styles.headerSection}>
           <h4>{title}</h4>
         </div>
+        <div>
+          {queueEntries ? (
+            <>
+              <StatDetails queueEntries={queueEntries} />
+            </>
+          ) : (
+            <></>
+          )}
+        </div>
+
         <div className={styles.contentSection}>
           <Tabs>
             <TabList contained>
@@ -111,6 +134,7 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
                           handleMovePatient={handleMovePatient}
                           handleTransitionPatient={handleTransitionPatient}
                           handleServePatient={handleServePatient}
+                          handleSignOff={handleSignOff}
                         />
                       }
                     </TabPanel>
@@ -158,6 +182,19 @@ const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTy
       ) : (
         <></>
       )}
+
+      {displaySignOffModal ? (
+        <>
+          <SignOffEntryModal
+            open={displaySignOffModal}
+            onModalClose={handleModalCloes}
+            currentQueueEntry={selectedQueueEntry}
+            onSuccessfullSignOff={onSuccessfullSignOff}
+          />
+        </>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

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

@@ -0,0 +1,10 @@
+.statsCard{
+    display: flex;
+    flex-direction: column;
+    width: 40%;
+    row-gap: 5px;
+    border-radius: 12px;
+    border: 1px solid #d2d2d2;
+    height: 100px;
+    padding: 10px 10px;
+}

package/src/service-queues/service-queue/stats/stat-card/stat-card.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './stat-card.component.scss';
+
+interface StatCardProps {
+  title: string;
+  count: number;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ title, count }) => {
+  if (!title) {
+    return <></>;
+  }
+  return (
+    <div className={styles.statsCard}>
+      <div className={styles.statsCardHeader}>
+        <h5>{title}</h5>
+        <h1>{count}</h1>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;

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

@@ -0,0 +1,7 @@
+.statsSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 15px;
+    margin-bottom: 15px;
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './stat-details.component.scss';
+import { type QueueEntryResult } from '../../../../registry/types';
+import StatCard from '../stat-card/stat-card.component';
+
+interface StatDetailsProps {
+  queueEntries: QueueEntryResult[];
+}
+
+const StatDetails: React.FC<StatDetailsProps> = ({ queueEntries }) => {
+  if (!queueEntries) {
+    return 'No queue entry records';
+  }
+  const getCategoryTotal = (categories: string[]) => {
+    let total = 0;
+    queueEntries.forEach((q) => {
+      if (categories.includes(q.status)) {
+        total += 1;
+      }
+    });
+    return total;
+  };
+  const patientsInWaiting = getCategoryTotal(['WAITING']);
+  const patientsAttendedTo = getCategoryTotal(['IN SERVICE', 'COMPLETED']);
+
+  return (
+    <div className={styles.statsSection}>
+      <StatCard title="Patients in waiting" count={patientsInWaiting ?? 0} />
+      <StatCard title="Patients attended to" count={patientsAttendedTo ?? 0} />
+    </div>
+  );
+};
+
+export default StatDetails;

package/src/triage/metrics/triage-metrics.component.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ExtensionSlot } from '@openmrs/esm-framework';
 import styles from './metrics.scss';
+import TriageWaitingPatientsExtension from './waiting-patients.extension';
+import TriageAttendedToPatientsExtension from './attended-patients.extension';
 
 export interface Service {
   display: string;
@@ -8,7 +10,12 @@ export interface Service {
 }
 
 function TriageMetricsContainer() {
-  return <ExtensionSlot name="triage-metrics-slot" className={styles.cardContainer} data-testid="clinic-metrics" />;
+  return (
+    <div className={styles.cardContainer}>
+      <TriageWaitingPatientsExtension />
+      <TriageAttendedToPatientsExtension />
+    </div>
+  );
 }
 
 export default TriageMetricsContainer;

package/src/triage/triage.component.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-
-import TriageMetricsContainer from './metrics/triage-metrics.component';
 import ServiceQueueComponent from '../service-queues/service-queue/service-queue.component';
 import { QUEUE_SERVICE_UUIDS } from '../shared/constants/concepts';
 
@@ -8,7 +6,6 @@ interface TriageProps {}
 const Triage: React.FC<TriageProps> = () => {
   return (
     <>
-      <TriageMetricsContainer />
       <div>
         <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID} title="Triage" />
       </div>

package/src/types/types.ts

@@ -113,3 +113,16 @@ export type TransitionQueueEntryDto = {
   newPriority?: string;
   newPriorityComment?: string;
 };
+
+export type TagColor = 'green' | 'gray' | 'blue' | 'red';
+
+export enum QueueEntryStatus {
+  Completed = 'COMPLETED',
+  Waiting = 'WAITING',
+  InService = 'IN SERVICE',
+}
+
+export enum QueueEntryPriority {
+  Emergency = 'EMERGENCY',
+  Normal = 'NORMAL',
+}