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

package/src/service-queues/extensions/service-queue-patient-banner/service-queue-patient-banner.scss

@@ -0,0 +1,30 @@
+.bannerLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 5px;
+}
+.sectionContent{
+    display: flex;
+    flex-direction: row;
+    column-gap: 15px;
+    justify-content: center;
+    align-items: center;
+}
+.transferBtn{
+    background-color: #FF5F1F;
+    color: #FFF;
+}
+.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;
+}

package/src/service-queues/extensions/service-queue-patient-banner/service-queue-patient-banner.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styles from './service-queue-patient-banner.scss';
+import { Button, Tag } from '@carbon/react';
+import { getTagClassByPriority } from '../../../shared/utils/get-tag-type';
+import { useSession } from '@openmrs/esm-framework';
+import { getActiveQueueEntryByPatientUuid } from '../../service-queues.resource';
+import { type QueueEntry } from '../../../types/types';
+import MovePatientModal from '../../modals/move/move-patient.component';
+
+interface ServiceQueuePatientBannerProps {
+  renderedFrom: string;
+  patientUuid: string;
+}
+const ServiceQueuePatientBanner: React.FC<ServiceQueuePatientBannerProps> = ({ renderedFrom, patientUuid }) => {
+  const session = useSession();
+  const location = session.sessionLocation;
+  const [currentQueueEntry, setCurrentQueueEntry] = useState<QueueEntry>();
+  const [showTransferModal, setShowTransferModal] = useState<boolean>(false);
+  const isPatientChart = renderedFrom === 'patient-chart';
+  const getPatientCurrentServiceQueue = useCallback(async () => {
+    if (!patientUuid || !isPatientChart) return null;
+
+    try {
+      const resp = await getActiveQueueEntryByPatientUuid(patientUuid);
+      if (resp.length > 0) {
+        setCurrentQueueEntry(resp[0]);
+      } else {
+        setCurrentQueueEntry(null);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, [patientUuid]);
+  useEffect(() => {
+    getPatientCurrentServiceQueue();
+  }, [patientUuid]);
+
+  const redirectToRegistryPage = () => {
+    window.location.href = `${window.spaBase}/home/registry`;
+  };
+
+  const handleTransferModalClose = () => {
+    setShowTransferModal(false);
+  };
+  const displayTransferModal = () => {
+    setShowTransferModal(true);
+  };
+
+  const handleTransferSuccess = () => {
+    handleTransferModalClose();
+    redirectToRegistryPage();
+  };
+
+  function getPriorityDisplayName(name: string) {
+    if (name === 'NORMAL PRIORITY') {
+      return 'PRIORITY';
+    } else if (name === 'NOT URGENT') {
+      return 'NON URGENT PRIORITY';
+    } else {
+      return name;
+    }
+  }
+
+  if (!isPatientChart) {
+    return null;
+  }
+  return (
+    <>
+      {currentQueueEntry ? (
+        <>
+          <div className={styles.bannerLayout}>
+            <div className={styles.sectionContent}>
+              <div>
+                <span>{currentQueueEntry.queue.display}</span>
+              </div>
+              <div>
+                <Tag size="md" className={styles[getTagClassByPriority(currentQueueEntry.priority.display)]}>
+                  {getPriorityDisplayName(currentQueueEntry.priority.display)}
+                </Tag>
+              </div>
+              <div>
+                <Button className={styles.transferBtn} size="xs" onClick={displayTransferModal}>
+                  Assign To
+                </Button>
+              </div>
+            </div>
+          </div>
+          {showTransferModal && location ? (
+            <>
+              <MovePatientModal
+                open={showTransferModal}
+                currentQueueEntryUuid={currentQueueEntry.uuid}
+                locationUuid={location.uuid}
+                onModalClose={handleTransferModalClose}
+                onTransferSuccess={handleTransferSuccess}
+              />
+            </>
+          ) : (
+            <></>
+          )}
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+export default ServiceQueuePatientBanner;

package/src/service-queues/modals/daily-report-patient-list/daily-report-patient-list.scss

@@ -0,0 +1,26 @@
+.checkedInlLayout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+
+    .actionHeaderSection {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        width: 100%;
+        column-gap: 15px;
+
+        .searchInput {
+            width: 40%;
+        }
+    }
+
+    .serveModalContentSection {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 10px;
+    }
+
+}

package/src/service-queues/modals/daily-report-patient-list/daily-report-patient-list.tsx

@@ -0,0 +1,110 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Modal,
+  ModalBody,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  TextInput,
+} from '@carbon/react';
+import styles from './daily-report-patient-list.scss';
+import { type ServiceQueueReportPatientList } from '../../../shared/types';
+
+interface DailyReportPatientListModalProps {
+  open: boolean;
+  onModalClose: () => void;
+  patientList: ServiceQueueReportPatientList[];
+}
+
+const DailyReportPatientListModal: React.FC<DailyReportPatientListModalProps> = ({
+  open,
+  onModalClose,
+  patientList,
+}) => {
+  const [searchString, setSearchString] = useState<string>();
+  const filteredPatientList = useMemo(() => filterQueueBySearchString(), [patientList, searchString]);
+
+  function filterQueueBySearchString(): ServiceQueueReportPatientList[] {
+    if (!searchString) {
+      return patientList;
+    }
+    return patientList.filter((p) => {
+      return p.person_name.trim().toLowerCase().includes(searchString.trim().toLowerCase());
+    });
+  }
+
+  const handlePatientListSearch = (searchTerm: string) => {
+    setSearchString(searchTerm);
+  };
+  return (
+    <>
+      <Modal
+        modalHeading="Checked In Patient List"
+        open={open}
+        size="lg"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={onModalClose}
+        primaryButtonText="Close"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.checkedInlLayout}>
+            <div className={styles.actionHeaderSection}>
+              <div className={styles.searchInput}>
+                <TextInput
+                  id="queue-search"
+                  labelText=""
+                  onChange={(e) => handlePatientListSearch(e.target.value)}
+                  placeholder="Enter patient name to filter"
+                />
+              </div>
+            </div>
+            <div className={styles.serveModalContentSection}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableHeader>No</TableHeader>
+                    <TableHeader>Name</TableHeader>
+                    <TableHeader>Age</TableHeader>
+                    <TableHeader>Gender</TableHeader>
+                    <TableHeader>Phone Number</TableHeader>
+                    <TableHeader>Identifiers</TableHeader>
+                    <TableHeader>Queue Room</TableHeader>
+                    <TableHeader>Current Queue Room</TableHeader>
+                    <TableHeader>Status</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {filteredPatientList.map((val, index) => (
+                    <TableRow id={`${val.queue_entry_id}`}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{val.person_name}</TableCell>
+                      <TableCell>{val.age}</TableCell>
+                      <TableCell>{val.gender}</TableCell>
+                      <TableCell>{val.phone_number}</TableCell>
+                      <TableCell>{val.identifiers}</TableCell>
+                      <TableCell>{val.queue_room_name}</TableCell>
+                      <TableCell>{val.current_queue_room ?? ''}</TableCell>
+                      <TableCell>
+                        <Tag size="md" type={val.served_status === 'SERVED' ? 'blue' : 'gray'}>
+                          {val.served_status}
+                        </Tag>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default DailyReportPatientListModal;

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

@@ -25,7 +25,7 @@
 .formControl{
     display: flex;
     flex-direction: column;
-    width: 45%;
+    width: 100%;
 }
 .actionSection{
     display: flex;

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;
 }