@ampath/esm-dha-workflow-app 4.0.0-next.13 → 4.0.0-next.130

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

@@ -0,0 +1,137 @@
+import { Modal, ModalBody, SelectItem, Select, TextInput } from '@carbon/react';
+import React, { useEffect, useState } from 'react';
+import styles from './create-queue-room.modal.scss';
+import { useSession, showSnackbar } from '@openmrs/esm-framework';
+import { type Queue, type CreateQueueRoomDto } from '../../../../../types/types';
+import { createQueueRoom, getQueuesByLocationUuid } from '../../../../service-queues.resource';
+interface CreateQueueRoomModalProps {
+  open: boolean;
+  onModalClose: () => void;
+}
+
+const CreateQueueRoomModal: React.FC<CreateQueueRoomModalProps> = ({ open, onModalClose }) => {
+  const session = useSession();
+  const location = session.sessionLocation;
+  const locationUuid = location.uuid;
+  const [queueRoomName, setQueueRoomName] = useState<string>();
+  const [description, setDescription] = useState<string>();
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [selectedQueueServiceUuid, setSelectedQueueServiceUuid] = useState<string>();
+  useEffect(() => {
+    fetchQueues();
+  }, [locationUuid]);
+  const fetchQueues = async () => {
+    const queues = await getQueuesByLocationUuid(locationUuid);
+    setQueues(queues);
+  };
+  const handleQueueRoomName = (queueName: string) => {
+    setQueueRoomName(queueName);
+  };
+  const handleQueueRoomDescription = (queueDescription: string) => {
+    setDescription(queueDescription);
+  };
+  const handleQueueService = (queueServiceUuid: string) => {
+    setSelectedQueueServiceUuid(queueServiceUuid);
+  };
+  const handleCreateQueueRoom = async () => {
+    const payload = generateCreateQueueRoomPayload();
+    if (isValidateCreateQueueRoomDto(payload)) {
+      const resp = await createQueueRoom(payload);
+      if (resp) {
+        showAlert('Queue Room created successfully!', 'success');
+        onModalClose();
+      }
+    }
+  };
+  const generateCreateQueueRoomPayload = (): CreateQueueRoomDto => {
+    return {
+      name: queueRoomName,
+      description: description,
+      queue: {
+        uuid: selectedQueueServiceUuid,
+      },
+    };
+  };
+  const isValidateCreateQueueRoomDto = (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 Deleted',
+      subtitle: message,
+    });
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={handleCreateQueueRoom}
+        primaryButtonText="Create Queue Room"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.createQueueModalLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Create 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"
+                    onChange={(e) => handleQueueRoomName(e.target.value)}
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <TextInput
+                    id="description"
+                    labelText="Description"
+                    onChange={(e) => handleQueueRoomDescription(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 CreateQueueRoomModal;

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: queueRoom.name,
+      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.scss

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import ServiceQueueComponent from '../service-queue/service-queue.component';
+const Consultation: React.FC = () => {
+  return (
+    <>
+      <ServiceQueueComponent
+        serviceTypeUuid={QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID}
+        title="Clinical Consultation"
+      />
+    </>
+  );
+};
+
+export default Consultation;

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:rgb(255, 215, 217);
+    color:rgb(162, 25, 31);
+}
+.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}>
+                  Transfer
+                </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/metrics/metrics-cards/attended-patients.extension.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues.resource';
+import { type QueueEntryResult } from '../../../registry/types';
+
+export default function AttendedToPatientsExtension() {
+  const { t } = useTranslation();
+
+  const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const consultationServiceUuid = QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID;
+  useEffect(() => {
+    getConsultationEntryQueues();
+  }, []);
+
+  const getConsultationEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
+    setConsultationQueueEntries(res);
+  };
+
+  const attendedToPatientsCount = consultationQueueEntries?.filter((p) => p.status === 'COMPLETED').length ?? 0;
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsAttendedTo', 'Patients attended to')} />
+      <MetricsCardBody>
+        <MetricsCardItem
+          label={t('patients', 'Patients')}
+          value={attendedToPatientsCount ? attendedToPatientsCount : '--'}
+        />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}