@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

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

@@ -1,4 +1,4 @@
-import { Button, Modal, ModalBody, Select, SelectItem, TextArea } from '@carbon/react';
+import { Button, InlineLoading, Modal, ModalBody, Select, SelectItem, TextArea } from '@carbon/react';
 import React, { useEffect, useState } from 'react';
 import styles from './move-patient.component.scss';
 import { type ServiceQueue } from '../../../registry/types';
@@ -10,20 +10,21 @@ interface MovePatientModalProps {
   open: boolean;
   onModalClose: () => void;
   locationUuid: string;
-  serviceUuid: string;
   currentQueueEntryUuid: string;
+  onTransferSuccess?: () => void;
 }
 const MovePatientModal: React.FC<MovePatientModalProps> = ({
   open,
   onModalClose,
   locationUuid,
-  serviceUuid,
   currentQueueEntryUuid,
+  onTransferSuccess,
 }) => {
   const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>([]);
   const [selectedComment, setSelectedComment] = useState<string>();
   const [selectedPriority, setSelectedPriority] = useState<string>();
   const [selectedNewService, setSelectedNewService] = useState<ServiceQueue>();
+  const [loading, setLoading] = useState<boolean>(false);
   useEffect(() => {
     getQueues();
   }, [locationUuid]);
@@ -38,13 +39,18 @@ const MovePatientModal: React.FC<MovePatientModalProps> = ({
     setServiceQueues(res);
   };
   const transtionQueueEntry = async () => {
+    if (loading) {
+      showAlert('error', 'Trsnefering patient', 'Transfering patient...please wait');
+    }
+    setLoading(true);
     const payload = getTransitionQueueEntryPayload();
     try {
       const resp = await transitionQueueEntry(payload);
-      showAlert('success', 'Cleint succesfully moved', '');
-      onModalClose();
+      showAlert('success', 'Client succesfully moved', '');
+      onTransferSuccess();
     } catch (e) {
       showAlert('error', e.message, '');
+      setLoading(false);
     }
   };
 
@@ -69,23 +75,24 @@ const MovePatientModal: React.FC<MovePatientModalProps> = ({
   const priorityChangeHandler = (priorityUuid: string) => {
     setSelectedPriority(priorityUuid);
   };
-  const handleCommentChange = (comment: string) => {};
+  const handleCommentChange = (comment: string) => {
+    setSelectedComment(comment);
+  };
+  const placeHolderFunction = () => {};
   return (
     <>
       <Modal
+        modalHeading="Transfer Client"
         open={open}
         size="md"
         onSecondarySubmit={() => onModalClose()}
         onRequestClose={() => onModalClose()}
-        onRequestSubmit={transtionQueueEntry}
-        primaryButtonText="Move"
+        onRequestSubmit={loading ? placeHolderFunction : transtionQueueEntry}
+        primaryButtonText={loading ? <InlineLoading description="Assign To..." /> : 'Assign To'}
         secondaryButtonText="Cancel"
       >
         <ModalBody>
           <div className={styles.modelLayout}>
-            <div className={styles.sectionHeader}>
-              <h4>Move Client</h4>
-            </div>
             <div className={styles.formSection}>
               <div className={styles.formRow}>
                 <div className={styles.formControl}>
@@ -96,11 +103,17 @@ const MovePatientModal: React.FC<MovePatientModalProps> = ({
                   >
                     <SelectItem value="" text="" />;
                     {serviceQueues &&
-                      serviceQueues.map((vt) => {
-                        return <SelectItem value={vt.uuid} text={vt.name} />;
-                      })}
+                      serviceQueues
+                        .filter((qe) => {
+                          return qe.uuid !== currentQueueEntryUuid;
+                        })
+                        .map((vt) => {
+                          return <SelectItem value={vt.uuid} text={`${vt.name} (${vt.location.display})`} />;
+                        })}
                   </Select>
                 </div>
+              </div>
+              <div className={styles.formRow}>
                 <div className={styles.formControl}>
                   <Select
                     id="priority"
@@ -108,7 +121,8 @@ const MovePatientModal: React.FC<MovePatientModalProps> = ({
                     onChange={(e) => priorityChangeHandler(e.target.value)}
                   >
                     <SelectItem value="" text="Select" />;
-                    <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="NORMAL" />;
+                    <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="PRIORITY" />;
+                    <SelectItem value={QUEUE_PRIORITIES_UUIDS.NOT_URGENT_PRIORITY_UUID} text="NON URGENT" />;
                     <SelectItem value={QUEUE_PRIORITIES_UUIDS.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
                   </Select>
                 </div>
@@ -117,11 +131,11 @@ const MovePatientModal: React.FC<MovePatientModalProps> = ({
                 <div className={styles.formControl}>
                   <TextArea
                     enableCounter
-                    helperText="Comment"
+                    helperText=""
                     id="comment"
                     labelText="Comment"
                     maxCount={500}
-                    placeholder="Comment"
+                    placeholder=""
                     onChange={(e) => handleCommentChange(e.target.value)}
                     rows={4}
                   />

package/src/service-queues/queue-list/check-in.service.ts

@@ -0,0 +1,26 @@
+export const CHECKIN_KEY = 'checkin';
+export const checkInRoom = (providerUuid: string, queueRoom: string) => {
+  const checkInVal = formatCheckinValue(providerUuid, queueRoom);
+  localStorage.setItem(CHECKIN_KEY, checkInVal);
+};
+
+const formatCheckinValue = (providerUuid: string, queueRoom: string): string => {
+  return (queueRoom + providerUuid).replaceAll(' ', '');
+};
+
+export const getCheckinValue = (): string | null => {
+  return localStorage.getItem(CHECKIN_KEY) ?? null;
+};
+
+export const checkOutRoom = () => {
+  localStorage.removeItem(CHECKIN_KEY);
+};
+
+export const isCheckedIn = (providerUuid: string, queueRoom): boolean => {
+  if (!providerUuid || !queueRoom) {
+    return false;
+  }
+  const checkInVal = formatCheckinValue(providerUuid, queueRoom);
+  const cachedCheckedInVal = getCheckinValue();
+  return checkInVal === cachedCheckedInVal;
+};

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

@@ -10,10 +10,47 @@
     flex-direction: row;
     justify-content: flex-end;
     width: 100%;
+    column-gap: 10px;
+    .filters{
+        display: flex;
+        flex-direction: row;
+        width: 80%;
+        column-gap: 15px;
+        .filter{
+            width: 45%;
+        }
+    }
+    .actionBtns{
+        display: flex;
+        flex-direction: row;
+        width: 20%;
+        column-gap: 15px;
+    }
 }
 .tableSection{
     display: flex;
     flex-direction: column;
     width: 100%;
     row-gap: 10px;
+}
+
+
+
+.nonUrgentTag{
+    background-color:rgb(167, 240, 186);
+    color:rgb(14, 96, 39);
+}
+.emergencyTag{
+    background-color:#da1e28;
+    color:#FFF;
+}
+.priorityTag{
+    background-color:rgb(248,237,98);
+    color:brown;
+}
+.flaggedPatient{
+    color: orange;
+}
+.unflaggedPatient{
+    color: black;
 }

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

@@ -1,5 +1,6 @@
 import {
   Button,
+  ComboBox,
   Link,
   OverflowMenu,
   OverflowMenuItem,
@@ -10,13 +11,23 @@ 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';
 
 interface QueueListProps {
+  queueRoom: string;
   queueEntries: QueueEntryResult[];
   handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
   handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
@@ -24,9 +35,11 @@ interface QueueListProps {
   handleSignOff: (queueEntryResult: QueueEntryResult) => void;
   handleRemovePatient: (queueEntryResult: QueueEntryResult) => void;
   showComingFromCol: boolean;
+  handleClearQueue: (queueEntryResults: QueueEntryResult[]) => void;
 }
 
 const QueueList: React.FC<QueueListProps> = ({
+  queueRoom,
   queueEntries,
   handleMovePatient,
   handleTransitionPatient,
@@ -34,10 +47,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 +179,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 +272,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 +284,23 @@ const QueueList: React.FC<QueueListProps> = ({
               </TableRow>
             </TableHead>
             <TableBody>
-              {queueEntries.map((val, index) => (
-                <TableRow>
+              {filteredQueueEntries.map((val, index) => (
+                <TableRow id={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 +309,53 @@ 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 ? (
+                  {val.hide_in_queue === 0 ? (
+                    <>
+                      <TableCell>
+                        {val.status === QueueEntryStatus.Waiting && val.hide_in_queue === 0 ? (
                           <>
-                            <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>
+                            <Button
+                              kind="ghost"
+                              disabled={!checkIn}
+                              onClick={() => handleServePatient(val)}
+                            >
+                              Call
+                            </Button>
                           </>
                         ) : (
-                          <></>
+                          <>
+                            {checkIn ? (
+                              <>
+                                <OverflowMenu aria-label="overflow-menu">
+                                  <OverflowMenuItem itemText="Assign To" 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>
+                      </TableCell>
+                    </>
+                  ) : (
+                    <>
+                      <TableCell></TableCell>
+                    </>
+                  )}
                 </TableRow>
               ))}
             </TableBody>