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

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

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { type CreateQueueDto, type Queue } from '../../../../../types/types';
+import { Modal, ModalBody, Select, SelectItem, TextInput } from '@carbon/react';
+import styles from './edit-queue.modal.scss';
+import { QUEUE_SERVICE_UUIDS } from '../../../../../shared/constants/concepts';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { editQueue } from '../../../../service-queues.resource';
+
+interface EditQueueModalProps {
+  open: boolean;
+  queue: Queue;
+  onModalClose: () => void;
+}
+
+const EditQueueModal: React.FC<EditQueueModalProps> = ({ open, queue, onModalClose }) => {
+  const session = useSession();
+  const location = session.sessionLocation;
+  const [queueName, setQueueName] = useState<string>(queue.name);
+  const [description, setDescription] = useState<string>(queue.description);
+  const [queueService, setQueueService] = useState<string>();
+
+  const handleQueueName = (queueName: string) => {
+    setQueueName(queueName);
+  };
+  const handleQueueDescription = (queueDescription: string) => {
+    setDescription(queueDescription);
+  };
+  const handleQueueService = (queueServiceUuid: string) => {
+    setQueueService(queueServiceUuid);
+  };
+  if (!queue) {
+    return <>No Queue selected</>;
+  }
+  const handleUpdateQueue = async () => {
+    const payload = generateCreateQueuePayload();
+    if (isValidateEditQueueDto(payload)) {
+      const resp = await editQueue(queue.uuid, payload);
+      if (resp) {
+        showAlert('Queue updated successfully!', 'success');
+        onModalClose();
+      }
+    }
+  };
+  const generateCreateQueuePayload = (): CreateQueueDto => {
+    return {
+      name: queueName,
+      description: description,
+      service: {
+        uuid: queueService,
+      },
+      location: {
+        uuid: location.uuid,
+      },
+    };
+  };
+  const isValidateEditQueueDto = (payload: CreateQueueDto): boolean => {
+    if (!payload.name) {
+      showAlert('Please add the queue name', 'error');
+      return false;
+    }
+    if (!payload.description) {
+      showAlert('Please add the queue description', 'error');
+      return false;
+    }
+    if (!payload.service) {
+      showAlert('Please add the queue service', 'error');
+      return false;
+    } else {
+      if (!payload.service.uuid) {
+        showAlert('Please select as 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={handleUpdateQueue}
+        primaryButtonText="Update Queue"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.createQueueModalLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Create Service Queue</h4>
+            </div>
+            <div className={styles.createQueueModalContentSection}>
+              <div className={styles.createQueueModalFormRow}>
+                <div className={styles.createQueueModalFormControl}>
+                  <TextInput
+                    id="queue-name"
+                    labelText="Queue Name"
+                    value={queueName}
+                    onChange={(e) => handleQueueName(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" onChange={(e) => handleQueueService(e.target.value)}>
+                    <SelectItem value="" text="Select Service" />
+                    <SelectItem value={QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID} text="Triage Service" />
+                    <SelectItem
+                      value={QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID}
+                      text="Clinical Consultation Service"
+                    />
+                    <SelectItem
+                      value={QUEUE_SERVICE_UUIDS.MCH_TRIAGE_SERVICE_UUID}
+                      text="Maternal Child Health Triage Service"
+                    />
+                    <SelectItem
+                      value={QUEUE_SERVICE_UUIDS.MCH_CLINICAL_CONSULTATION_SERVICE_UUID}
+                      text="Maternal Child Health Consultation Service"
+                    />
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default EditQueueModal;

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

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

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

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+import { type Queue } from '../../../../types/types';
+import { Button, IconButton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { showNotification, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { deleteQueue, getQueuesByLocationUuid, useQueues } from '../../../service-queues.resource';
+import styles from './queue-list.scss';
+import CreateQueueModal from '../modal/create-queue/create-queue.modal';
+import { Add, Delete, Edit } from '@carbon/react/icons';
+import EditQueueModal from '../modal/edit-queue/edit-queue.modal';
+
+interface QueueListProps {}
+
+const AdminQueueList: React.FC<QueueListProps> = () => {
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [selectedQueue,setSelectedQueue] = useState<Queue>()
+  const [displayCreateQueueModal, setDisplayCreateQueueModal] = useState<boolean>(false);
+  const [displayEditQueueModal, setDisplayEditQueueModal] = useState<boolean>(false);
+  useEffect(() => {
+    fetchQueues();
+  }, [locationUuid]);
+
+  const fetchQueues = async () => {
+    const queues = await getQueuesByLocationUuid(locationUuid);
+    setQueues(queues);
+  };
+  const handleDeleteQueue = async (queueUuid: string) => {
+    await deleteQueue(queueUuid);
+    fetchQueues();
+    showAlert('Queue deleted successfully', 'success');
+  };
+  const handleCloseCreateQueueModal = () => {
+    setDisplayCreateQueueModal(false);
+  };
+  const handleCloseEditQueueModal = () => {
+    setDisplayEditQueueModal(false);
+    fetchQueues();
+  };
+  const handleEditQueue = async (queue: Queue) => {
+    setSelectedQueue(queue);
+    setDisplayEditQueueModal(true);
+  };
+  const handleAddQueue = async () => {
+    setDisplayCreateQueueModal(true);
+    fetchQueues();
+  };
+  const handleRefresh = ()=>{
+    fetchQueues();
+  }
+  const showAlert = (message: string, alertType: 'success' | 'error') => {
+    showSnackbar({
+      kind: alertType,
+      title: 'Queue Deleted',
+      subtitle: message,
+    });
+  };
+  return (
+    <>
+      <div className={styles.queueListLayout}>
+        <div className={styles.layoutHeader}>
+          <h4>Queue 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>Service</TableHeader>
+                <TableHeader>Action</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {queues.map((queue, index) => (
+                <TableRow key={queue.uuid}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>{queue.name}</TableCell>
+                  <TableCell>{queue.description}</TableCell>
+                  <TableCell>{(queue.location as any).name}</TableCell>
+                  <TableCell>{queue.service.display}</TableCell>
+                  <TableCell>
+                    <div className={styles.actionBtns}>
+                      <Delete onClick={() => handleDeleteQueue(queue.uuid)} className={styles.iconBtn} />
+                      <Edit onClick={() => handleEditQueue(queue)} className={styles.iconBtn} />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        <CreateQueueModal open={displayCreateQueueModal} onModalClose={handleCloseCreateQueueModal} />
+        {
+          selectedQueue && displayEditQueueModal ? (<EditQueueModal open={displayEditQueueModal} queue={selectedQueue} onModalClose={handleCloseEditQueueModal} />): (<></>)
+        }
+        
+      </div>
+    </>
+  );
+};
+
+export default AdminQueueList;

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

@@ -0,0 +1,6 @@
+.entryListLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+}

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

@@ -0,0 +1,137 @@
+import { formatDate, parseDate, showSnackbar, useSession } from '@openmrs/esm-framework';
+import React, { useEffect, useState } from 'react';
+import { deleteQueueEntry, endQueueEntry, getQueueEntryByLocationUuid } from '../../service-queues.resource';
+import { type QueueEntry } from '../../../types/types';
+import {
+  Link,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import styles from './queue-entry-list.component.scss';
+interface QueueEntryListProps {}
+const QueueEntryList: React.FC<QueueEntryListProps> = () => {
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const [queueEntryList, setQueueEntryList] = useState<QueueEntry[]>([]);
+
+  useEffect(() => {
+    if (locationUuid) {
+      getQueueEntryList(locationUuid);
+    }
+  }, [locationUuid]);
+
+  async function getQueueEntryList(locationUuid: string) {
+    const resp = await getQueueEntryByLocationUuid(locationUuid);
+    if (resp) {
+      setQueueEntryList(resp);
+    }
+  }
+  if (!queueEntryList || queueEntryList.length === 0) {
+    return <h4>No Data to display</h4>;
+  }
+  async function handleDeleteQueueEntry(queueEntry: QueueEntry) {
+    try {
+      await deleteQueueEntry(queueEntry.uuid);
+      showSnackbar({
+        kind: 'success',
+        title: 'Queue entry voided successfully',
+        subtitle: 'Queue entry voided successfully',
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error voiding Queue entry',
+        subtitle: error.message ?? 'An error occurred while voiding the queue entry',
+      });
+    } finally {
+      refreshData();
+    }
+  }
+  function refreshData() {
+    getQueueEntryList(locationUuid);
+  }
+  async function handleEndQueueEntry(queueEntry: QueueEntry) {
+    try {
+      const endedAt = queueEntry.visit.stopDatetime ? queueEntry.visit.stopDatetime : new Date().toISOString();
+      await endQueueEntry(queueEntry.uuid, endedAt);
+      showSnackbar({
+        kind: 'success',
+        title: 'Queue entry ended successfully',
+        subtitle: 'Queue entry ended successfully',
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error closing Queue entry',
+        subtitle: error.message ?? 'An error occurred while closing the queue entry',
+      });
+    } finally {
+      refreshData();
+    }
+  }
+  return (
+    <>
+      <div className={styles.entryListLayout}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>No</TableHeader>
+              <TableHeader>Name</TableHeader>
+              <TableHeader>Current Queue</TableHeader>
+              <TableHeader>Coming From</TableHeader>
+              <TableHeader>Status</TableHeader>
+              <TableHeader>Priority</TableHeader>
+              <TableHeader>Started At</TableHeader>
+              <TableHeader>Ended At</TableHeader>
+              <TableHeader>Visit End At</TableHeader>
+              <TableHeader>Action</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {queueEntryList &&
+              queueEntryList.map((val, index) => (
+                <TableRow id={val.uuid}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>
+                    {val.patient ? (
+                      <>
+                        <Link href={`${window.spaBase}/patient/${val.patient.uuid}/chart/`}>
+                          {val.patient ? val.patient.person.display : val.display}
+                        </Link>
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </TableCell>
+                  <TableCell>{val.queue.display}</TableCell>
+                  <TableCell>{val.queueComingFrom ? val.queueComingFrom.display : ''}</TableCell>
+                  <TableCell>{val.status.display}</TableCell>
+                  <TableCell>{val.priority.display}</TableCell>
+                  <TableCell>{val.startedAt ?? ''}</TableCell>
+                  <TableCell>{val.endedAt ? formatDate(parseDate(val.endedAt)) : ''}</TableCell>
+                  <TableCell>
+                    {val.visit && val.visit.stopDatetime ? formatDate(parseDate(val.visit.stopDatetime)) : ''}
+                  </TableCell>
+                  <TableCell>
+                    <>
+                      <OverflowMenu aria-label="overflow-menu">
+                        <OverflowMenuItem itemText="End" onClick={() => handleEndQueueEntry(val)} />
+                        <OverflowMenuItem itemText="Delete" onClick={() => handleDeleteQueueEntry(val)} />
+                      </OverflowMenu>
+                    </>
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+};
+export default QueueEntryList;

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

@@ -0,0 +1,31 @@
+.createQueueModalLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 15px 15px;
+    .sectionHeader{
+        display: flex;
+        flex-direction: column;
+        row-gap: 15px;
+        width: 100%;
+        padding-bottom: 15px;
+    }
+    .createQueueModalContentSection{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 10px;
+    }
+    .createQueueModalFormRow{
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        column-gap: 10px;
+    }
+    .createQueueModalFormControl{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+}

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;