@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

package/src/service-queues/admin/queue-room/modal/edit-queue-room/edit-queue-room.modal.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import { type QueueRoom, type CreateQueueRoomDto, type Queue } from '../../../../../types/types';
+import { Modal, ModalBody, Select, SelectItem, TextInput } from '@carbon/react';
+import styles from './edit-queue-room.modal.scss';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { editQueueRoom, getQueuesByLocationUuid } from '../../../../service-queues.resource';
+
+interface EditQueueRoomModalProps {
+  open: boolean;
+  queueRoom: QueueRoom;
+  onModalClose: () => void;
+}
+
+const EditQueueRoomModal: React.FC<EditQueueRoomModalProps> = ({ open, queueRoom, onModalClose }) => {
+  const session = useSession();
+  const location = session.sessionLocation;
+  const locationUuid = location.uuid;
+  const [queueRoomName, setQueueRoomName] = useState<string>(queueRoom.name);
+  const [description, setDescription] = useState<string>(queueRoom.description);
+  const [queueServiceUuid, setQueueServiceUuid] = useState<string>();
+  const [queues, setQueues] = useState<Queue[]>([]);
+
+  useEffect(() => {
+    fetchQueues();
+  }, [locationUuid]);
+  const fetchQueues = async () => {
+    const queues = await getQueuesByLocationUuid(locationUuid);
+    setQueues(queues);
+  };
+
+  const handleQueueRoomName = (queueRoomName: string) => {
+    setQueueRoomName(queueRoomName);
+  };
+  const handleQueueDescription = (queueDescription: string) => {
+    setDescription(queueDescription);
+  };
+  const handleQueueService = (queueServiceUuid: string) => {
+    setQueueServiceUuid(queueServiceUuid);
+  };
+  if (!queueRoom) {
+    return <>No Queue room selected</>;
+  }
+  const handleUpdateQueueRoom = async () => {
+    const payload = generateCreateQueueRoomPayload();
+    if (isValidateEditQueueRoomDto(payload)) {
+      const resp = await editQueueRoom(queueRoom.uuid, payload);
+      if (resp) {
+        showAlert('Queue updated successfully!', 'success');
+        onModalClose();
+      }
+    }
+  };
+  const generateCreateQueueRoomPayload = (): CreateQueueRoomDto => {
+    return {
+      name: queueRoomName,
+      description: description,
+      queue: {
+        uuid: queueServiceUuid,
+      },
+    };
+  };
+  const isValidateEditQueueRoomDto = (payload: CreateQueueRoomDto): boolean => {
+    if (!payload.name) {
+      showAlert('Please add the queue room name', 'error');
+      return false;
+    }
+    if (!payload.description) {
+      showAlert('Please add the queue room description', 'error');
+      return false;
+    }
+    if (!payload.queue) {
+      showAlert('Please add the queue service', 'error');
+      return false;
+    } else {
+      if (!payload.queue.uuid) {
+        showAlert('Please select a queue service', 'error');
+        return false;
+      }
+    }
+    return true;
+  };
+  const showAlert = (message: string, alertType: 'success' | 'error') => {
+    showSnackbar({
+      kind: alertType,
+      title: 'Queue Room Updated',
+      subtitle: message,
+    });
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={handleUpdateQueueRoom}
+        primaryButtonText="Update Queue Room"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.createQueueModalLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Update Queue Room</h4>
+            </div>
+            <div className={styles.createQueueModalContentSection}>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <TextInput
+                    id="queue-room-name"
+                    labelText="Queue Room Name"
+                    value={queueRoomName}
+                    onChange={(e) => handleQueueRoomName(e.target.value)}
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <TextInput
+                    id="description"
+                    value={description}
+                    labelText="Description"
+                    onChange={(e) => handleQueueDescription(e.target.value)}
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <Select id="service" labelText="Service Queue" onChange={(e) => handleQueueService(e.target.value)}>
+                    <SelectItem value="" text="Select Queue" />
+                    {queues.map((queue) => {
+                      return <SelectItem value={queue.uuid} text={queue.display} />;
+                    })}
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default EditQueueRoomModal;

package/src/service-queues/admin/queue-room/queue-room-list/queue-room-list.scss

@@ -0,0 +1,22 @@
+.queueRoomListLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    .layoutAction{
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        width: 100%;
+        column-gap: 5px;
+    }
+}
+
+.actionBtns{
+    display: flex;
+    flex-direction: row;
+    column-gap: 10px;
+}
+.iconBtn:hover {
+  cursor: pointer;
+}

package/src/service-queues/admin/queue-room/queue-room-list/queue-room-list.tsx

@@ -0,0 +1,120 @@
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import React, { useEffect, useState } from 'react';
+import { deleteQueueRoom, getQueueRoomsByLocationUuid } from '../../../service-queues.resource';
+import { type QueueRoom } from '../../../../types/types';
+import styles from './queue-room-list.scss';
+import { Button, IconButton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { Add, Delete, Edit } from '@carbon/react/icons';
+import EditQueueModal from '../../queue/modal/edit-queue/edit-queue.modal';
+import CreateQueueRoomModal from '../modal/create-queue-room/create-queue-room.modal';
+import EditQueueRoomModal from '../modal/edit-queue-room/edit-queue-room.modal';
+interface QueueRoomListProps {}
+const QueueRoomList: React.FC<QueueRoomListProps> = () => {
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const [queueRooms, setQueueRooms] = useState<QueueRoom[]>([]);
+  const [selectedQueueRoom, setSelectedQueueRoom] = useState<QueueRoom>();
+  const [displayCreateRoomQueueModal, setDisplayCreateQueueRoomModal] = useState<boolean>(false);
+  const [displayEditQueueRoomModal, setDisplayEditQueueRoomModal] = useState<boolean>(false);
+  useEffect(() => {
+    fetchQueueRooms();
+  }, [locationUuid]);
+
+  const fetchQueueRooms = async () => {
+    const queueRooms = await getQueueRoomsByLocationUuid(locationUuid);
+    setQueueRooms(queueRooms);
+  };
+  const handleDeleteQueueRoom = async (queueUuid: string) => {
+    await deleteQueueRoom(queueUuid);
+    fetchQueueRooms();
+    showAlert('Queue Room deleted successfully', 'success');
+  };
+  const handleCloseCreateQueueRoomModal = () => {
+    setDisplayCreateQueueRoomModal(false);
+  };
+  const handleCloseEditQueueRoomModal = () => {
+    setDisplayEditQueueRoomModal(false);
+    fetchQueueRooms();
+  };
+  const handleEditQueueRoom = async (queue: QueueRoom) => {
+    setSelectedQueueRoom(queue);
+    setDisplayEditQueueRoomModal(true);
+  };
+  const handleAddQueue = async () => {
+    setDisplayCreateQueueRoomModal(true);
+    fetchQueueRooms();
+  };
+  const handleRefresh = () => {
+    fetchQueueRooms();
+  };
+  const showAlert = (message: string, alertType: 'success' | 'error') => {
+    showSnackbar({
+      kind: alertType,
+      title: 'Queue Deleted',
+      subtitle: message,
+    });
+  };
+  return (
+    <>
+      <div className={styles.queueRoomListLayout}>
+        <div className={styles.layoutHeader}>
+          <h4>Queue Room Management</h4>
+        </div>
+        <div className={styles.layoutAction}>
+          <IconButton label="Add" onClick={() => handleAddQueue()}>
+            <Add />
+          </IconButton>
+          <Button kind="ghost" onClick={handleRefresh}>
+            Refresh
+          </Button>
+        </div>
+        <div>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>No</TableHeader>
+                <TableHeader>Name</TableHeader>
+                <TableHeader>Description</TableHeader>
+                <TableHeader>Location</TableHeader>
+                <TableHeader>Queue</TableHeader>
+                <TableHeader>Service</TableHeader>
+                <TableHeader>Action</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {queueRooms.map((queueRoom, index) => (
+                <TableRow key={queueRoom.uuid}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>{queueRoom.display}</TableCell>
+                  <TableCell>{queueRoom.description}</TableCell>
+                  <TableCell>{(queueRoom.queue.location.display as any).name}</TableCell>
+                  <TableCell>{queueRoom.queue.display}</TableCell>
+                  <TableCell>{queueRoom.queue.service.display}</TableCell>
+                  <TableCell>
+                    <div className={styles.actionBtns}>
+                      <Delete onClick={() => handleDeleteQueueRoom(queueRoom.uuid)} className={styles.iconBtn} />
+                      <Edit onClick={() => handleEditQueueRoom(queueRoom)} className={styles.iconBtn} />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        <CreateQueueRoomModal open={displayCreateRoomQueueModal} onModalClose={handleCloseCreateQueueRoomModal} />
+        {selectedQueueRoom && displayEditQueueRoomModal ? (
+          <>
+            <EditQueueRoomModal
+              open={displayEditQueueRoomModal}
+              queueRoom={selectedQueueRoom}
+              onModalClose={handleCloseEditQueueRoomModal}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+      </div>
+    </>
+  );
+};
+export default QueueRoomList;

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

@@ -0,0 +1,6 @@
+.queueDashboardLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    padding: 15px 15px;
+}

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

@@ -0,0 +1,34 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import React from 'react';
+import AdminQueueList from './queue/queue-list/queue-list';
+import styles from './service-queue-admin-dashboard.component.scss';
+import QueueRoomList from './queue-room/queue-room-list/queue-room-list';
+import QueueEntryList from './queue-entry/queue-entry-list.component';
+interface ServiceQueueAdminDashboardProps {}
+const ServiceQueueAdminDashboard: React.FC<ServiceQueueAdminDashboardProps> = () => {
+  return (
+    <>
+      <div className={styles.queueDashboardLayout}>
+        <Tabs>
+          <TabList contained>
+            <Tab>Service Queues</Tab>
+            <Tab>Queue Rooms</Tab>
+            <Tab>Queue Entries</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <AdminQueueList />
+            </TabPanel>
+            <TabPanel>
+              <QueueRoomList />
+            </TabPanel>
+            <TabPanel>
+              <QueueEntryList />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </>
+  );
+};
+export default ServiceQueueAdminDashboard;

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

@@ -1,13 +1,22 @@
 import React from 'react';
 import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
 import ServiceQueueComponent from '../service-queue/service-queue.component';
+import styles from './consultation.component.scss';
+import FacilityAndWorkerSlot from '../../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
 const Consultation: React.FC = () => {
   return (
     <>
+    <div className={styles.consultationLayout}>
+      <div>
+            <FacilityAndWorkerSlot />
+      </div>
+      <div>
       <ServiceQueueComponent
         serviceTypeUuid={QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID}
         title="Clinical Consultation"
       />
+      </div>
+    </div>
     </>
   );
 };

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;