@ampath/esm-dha-workflow-app 4.0.0-next.17 → 4.0.0-next.19

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

@@ -0,0 +1,35 @@
+.modelLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 15px 15px;
+}
+.formSection{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.sectionHeader{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.formRow{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.formControl{
+    display: flex;
+    flex-direction: column;
+    width: 45%;
+}
+.actionSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}

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

@@ -0,0 +1,138 @@
+import { Button, 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';
+import { getServiceQueueByLocation, transitionQueueEntry } from '../../service.resource';
+import { type TransitionQueueEntryDto } from '../../../types/types';
+import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
+import { showSnackbar } from '@openmrs/esm-framework';
+interface MovePatientModalProps {
+  open: boolean;
+  onModalClose: () => void;
+  locationUuid: string;
+  serviceUuid: string;
+  currentQueueEntryUuid: string;
+}
+const MovePatientModal: React.FC<MovePatientModalProps> = ({
+  open,
+  onModalClose,
+  locationUuid,
+  serviceUuid,
+  currentQueueEntryUuid,
+}) => {
+  const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>([]);
+  const [selectedComment, setSelectedComment] = useState<string>();
+  const [selectedPriority, setSelectedPriority] = useState<string>();
+  const [selectedNewService, setSelectedNewService] = useState<ServiceQueue>();
+  useEffect(() => {
+    getQueues();
+  }, [locationUuid]);
+  const serviceChangeHandler = (serviceQueueUuid: string) => {
+    const serviceQueue = serviceQueues.find((sq) => {
+      return sq.uuid === serviceQueueUuid;
+    });
+    setSelectedNewService(serviceQueue);
+  };
+  const getQueues = async () => {
+    const res = await getServiceQueueByLocation(locationUuid);
+    setServiceQueues(res);
+  };
+  const transtionQueueEntry = async () => {
+    const payload = getTransitionQueueEntryPayload();
+    try {
+      const resp = await transitionQueueEntry(payload);
+      showAlert('success', 'Cleint succesfully moved', '');
+      onModalClose();
+    } catch (e) {
+      showAlert('error', e.message, '');
+    }
+  };
+
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const getTransitionQueueEntryPayload = (): TransitionQueueEntryDto => {
+    const payload: TransitionQueueEntryDto = {
+      queueEntryToTransition: currentQueueEntryUuid,
+      newQueue: selectedNewService.uuid,
+      newStatus: QUEUE_STATUS_UUIDS.WAITING_UUID,
+      newPriority: selectedPriority,
+      newPriorityComment: selectedComment,
+    };
+
+    return payload;
+  };
+  const priorityChangeHandler = (priorityUuid: string) => {
+    setSelectedPriority(priorityUuid);
+  };
+  const handleCommentChange = (comment: string) => {};
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={transtionQueueEntry}
+        primaryButtonText="Move"
+        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}>
+                  <Select
+                    id="service-queue"
+                    labelText="Select the new Queue"
+                    onChange={(e) => serviceChangeHandler(e.target.value)}
+                  >
+                    <SelectItem value="" text="" />;
+                    {serviceQueues &&
+                      serviceQueues.map((vt) => {
+                        return <SelectItem value={vt.uuid} text={vt.name} />;
+                      })}
+                  </Select>
+                </div>
+                <div className={styles.formControl}>
+                  <Select
+                    id="priority"
+                    labelText="Select a Priority"
+                    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.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
+                  </Select>
+                </div>
+              </div>
+              <div className={styles.formRow}>
+                <div className={styles.formControl}>
+                  <TextArea
+                    enableCounter
+                    helperText="Comment"
+                    id="comment"
+                    labelText="Comment"
+                    maxCount={500}
+                    placeholder="Comment"
+                    onChange={(e) => handleCommentChange(e.target.value)}
+                    rows={4}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default MovePatientModal;

package/src/service-queues/modals/serve/serve-patient.comppnent.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Modal, ModalBody } from '@carbon/react';
+import { type QueueEntryResult } from '../../../registry/types';
+import styles from './serve-patient.comppnent.scss';
+import { type TransitionQueueEntryDto } from '../../../types/types';
+import { QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
+import { transitionQueueEntry } from '../../service.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+
+interface ServePatientModal {
+  open: boolean;
+  onModalClose: () => void;
+  currentQueueEntry: QueueEntryResult;
+  onSuccessfullServe: () => void;
+}
+
+const ServePatientModal: React.FC<ServePatientModal> = ({
+  open,
+  onModalClose,
+  currentQueueEntry,
+  onSuccessfullServe,
+}) => {
+  const servePatient = async () => {
+    const payload = getServePatientPayload();
+    try {
+      await transitionQueueEntry(payload);
+      showAlert('success', 'Cleint succesfully served', '');
+      onSuccessfullServe();
+    } catch (e) {
+      showAlert('error', e.message, '');
+    }
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const getServePatientPayload = (): TransitionQueueEntryDto => {
+    const payload: TransitionQueueEntryDto = {
+      queueEntryToTransition: currentQueueEntry.queue_entry_uuid,
+      newQueue: currentQueueEntry.service_uuid,
+      newStatus: QUEUE_STATUS_UUIDS.IN_SERVICE_UUID,
+    };
+
+    return payload;
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={servePatient}
+        primaryButtonText="Serve"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.serveModalLayout}>
+            <div className={styles.serveModalSectionHeader}>
+              <h4>Serve Client</h4>
+            </div>
+            <div className={styles.serveModalContentSection}>
+              <div className={styles.formRow}>
+                <p>
+                  Name: {currentQueueEntry.family_name} {currentQueueEntry.family_name}
+                </p>
+                <p>Ticket No: {currentQueueEntry.queue_entry_id}</p>
+                <p>Status: {currentQueueEntry.status}</p>
+                <p>Priority: {currentQueueEntry.priority}</p>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ServePatientModal;

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

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { Modal, ModalBody, Select, SelectItem, TextArea } from '@carbon/react';
+import styles from './transition-patient.component.scss';
+import { type QueueEntryResult } from '../../../registry/types';
+import { transitionQueueEntry } from '../../service.resource';
+import { type TransitionQueueEntryDto } from '../../../types/types';
+import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
+import { showSnackbar } from '@openmrs/esm-framework';
+interface TransitionPatientModalProps {
+  open: boolean;
+  onModalClose: () => void;
+  currentQueueEntry: QueueEntryResult;
+}
+const TransitionPatientModal: React.FC<TransitionPatientModalProps> = ({ open, onModalClose, currentQueueEntry }) => {
+  const [selectedComment, setSelectedComment] = useState<string>();
+  const [selectedPriority, setSelectedPriority] = useState<string>();
+  const [selectedStatus, setSelectedStatus] = useState<string>();
+
+  const statusChangeHandler = (statusUuid: string) => {
+    setSelectedStatus(statusUuid);
+  };
+
+  const transtionQueueEntry = async () => {
+    const payload = getTransitionQueueEntryPayload();
+    try {
+      await transitionQueueEntry(payload);
+      showAlert('success', 'Cleint succesfully Transitioned', '');
+      onModalClose();
+    } catch (e) {
+      showAlert('error', e.message, '');
+    }
+  };
+
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const getTransitionQueueEntryPayload = (): TransitionQueueEntryDto => {
+    const payload: TransitionQueueEntryDto = {
+      queueEntryToTransition: currentQueueEntry.queue_entry_uuid,
+      newQueue: currentQueueEntry.service_uuid,
+      newStatus: selectedStatus,
+      newPriority: selectedPriority,
+      newPriorityComment: selectedComment,
+    };
+
+    return payload;
+  };
+  const priorityChangeHandler = (priorityUuid: string) => {
+    setSelectedPriority(priorityUuid);
+  };
+  const handleCommentChange = (comment: string) => {
+    setSelectedComment(comment);
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={transtionQueueEntry}
+        primaryButtonText="Transition"
+        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}>
+                  <Select
+                    id="queue-status"
+                    labelText="Select Queue Status"
+                    onChange={(e) => statusChangeHandler(e.target.value)}
+                  >
+                    <SelectItem value="" text="" />;
+                    <SelectItem value={QUEUE_STATUS_UUIDS.WAITING_UUID} text="IN WAITING" />;
+                    <SelectItem value={QUEUE_STATUS_UUIDS.IN_SERVICE_UUID} text="IN SERVICE" />;
+                    <SelectItem value={QUEUE_STATUS_UUIDS.COMPLETED_UUID} text="COMPLETED" />;
+                  </Select>
+                </div>
+                <div className={styles.formControl}>
+                  <Select
+                    id="priority"
+                    labelText="Select a Priority"
+                    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.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
+                  </Select>
+                </div>
+              </div>
+              <div className={styles.formRow}>
+                <div className={styles.formControl}>
+                  <TextArea
+                    enableCounter
+                    helperText="Comment"
+                    id="comment"
+                    labelText="Comment"
+                    maxCount={500}
+                    placeholder="Comment"
+                    onChange={(e) => handleCommentChange(e.target.value)}
+                    rows={4}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default TransitionPatientModal;

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

@@ -0,0 +1,19 @@
+.queueListLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 15px;
+    padding: 5px 5px;
+}
+.actionHeader{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 100%;
+}
+.tableSection{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+}

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

@@ -0,0 +1,117 @@
+import {
+  Button,
+  Link,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { type QueueEntryResult } from '../../registry/types';
+import React, { useState } from 'react';
+import styles from './queue-list.component.scss';
+
+interface QueueListProps {
+  queueEntries: QueueEntryResult[];
+  handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
+  handleServePatient: (queueEntryResult: QueueEntryResult) => void;
+}
+
+const QueueList: React.FC<QueueListProps> = ({
+  queueEntries,
+  handleMovePatient,
+  handleTransitionPatient,
+  handleServePatient,
+}) => {
+  const [checkIn, setCheckIn] = useState<boolean>(false);
+  const handleCheckin = () => {
+    setCheckIn((prev) => !prev);
+  };
+  return (
+    <>
+      <div className={styles.queueListLayout}>
+        <div className={styles.actionHeader}>
+          {checkIn ? (
+            <>
+              <Button kind="danger" onClick={handleCheckin}>
+                {' '}
+                Check Out
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button kind="primary" onClick={handleCheckin}>
+                {' '}
+                Check In
+              </Button>
+            </>
+          )}
+        </div>
+        <div className={styles.tableSection}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>No</TableHeader>
+                <TableHeader>Name</TableHeader>
+                <TableHeader>Ticket</TableHeader>
+                <TableHeader>Status</TableHeader>
+                <TableHeader>Priority</TableHeader>
+                <TableHeader>Action</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {queueEntries.map((val, index) => (
+                <TableRow>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>
+                    {checkIn ? (
+                      <Link href={`${window.spaBase}/patient/${val.patient_uuid}/chart/`}>
+                        {val.family_name} {val.middle_name}
+                      </Link>
+                    ) : (
+                      <>
+                        {val.family_name} {val.middle_name}
+                      </>
+                    )}
+                  </TableCell>
+                  <TableCell>{val.queue_entry_id}</TableCell>
+                  <TableCell>{val.status}</TableCell>
+                  <TableCell>{val.priority}</TableCell>
+                  <TableCell>
+                    {val.status === 'WAITING' ? (
+                      <>
+                        <Button kind="ghost" disabled={!checkIn} onClick={() => handleServePatient(val)}>
+                          Serve
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        {checkIn ? (
+                          <>
+                            <OverflowMenu aria-label="overflow-menu">
+                              <OverflowMenuItem itemText="Move" onClick={() => handleMovePatient(val)} />
+                              <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(val)} />
+                              <OverflowMenuItem itemText="Remove Patient" />
+                            </OverflowMenu>
+                          </>
+                        ) : (
+                          <></>
+                        )}
+                      </>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default QueueList;

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

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

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

@@ -0,0 +1,165 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { type QueueEntryResult } from '../../registry/types';
+import { useSession } from '@openmrs/esm-framework';
+import { getServiceQueueByLocationUuid } from '../service-queues.resource';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import QueueList from '../queue-list/queue-list.component';
+import styles from './service-queue.component.scss';
+import MovePatientModal from '../modals/move/move-patient.component';
+import TransitionPatientModal from '../modals/transition/transition-patient.component';
+import ServePatientModal from '../modals/serve/serve-patient.comppnent';
+
+interface ServiceQueueComponentProps {
+  serviceTypeUuid: string;
+  title: string;
+}
+
+const ServiceQueueComponent: React.FC<ServiceQueueComponentProps> = ({ serviceTypeUuid, title }) => {
+  const [queueEntries, setQueueEntries] = useState<QueueEntryResult[]>([]);
+  const [selectedQueueEntry, setSelectedQueueEntry] = useState<QueueEntryResult>();
+  const [displayMoveModal, setDisplayMoveModal] = useState<boolean>();
+  const [displayTransitionModal, setDisplayTransitionModal] = useState<boolean>();
+  const [displayServeModal, setDisplayServeModal] = useState<boolean>();
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+
+  const groupEntriesByRooms = () => {
+    const roomEntries = {};
+    if (!queueEntries || queueEntries.length === 0) return {};
+    queueEntries.forEach((qe) => {
+      const room = qe.queue_room;
+      if (!roomEntries[room]) {
+        roomEntries[room] = [qe];
+      } else {
+        roomEntries[room].push(qe);
+      }
+    });
+    return roomEntries;
+  };
+
+  const groupedByRoom: { [key: string]: QueueEntryResult[] } = useMemo(() => groupEntriesByRooms(), [queueEntries]);
+
+  useEffect(() => {
+    getEntryQueues();
+  }, []);
+
+  const getEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(serviceTypeUuid, locationUuid);
+    setQueueEntries(res);
+  };
+
+  if (!groupedByRoom) {
+    return <>No Data to Display</>;
+  }
+  const handleMovePatient = (queueEntry: QueueEntryResult) => {
+    setDisplayMoveModal(true);
+    setSelectedQueueEntry(queueEntry);
+  };
+  const handleModalCloes = () => {
+    setDisplayMoveModal(false);
+    setDisplayTransitionModal(false);
+    setDisplayServeModal(false);
+  };
+
+  const handleTransitionPatient = (queueEntry: QueueEntryResult) => {
+    setDisplayTransitionModal(true);
+    setSelectedQueueEntry(queueEntry);
+  };
+
+  const handleServePatient = (queueEntry: QueueEntryResult) => {
+    setDisplayServeModal(true);
+    setSelectedQueueEntry(queueEntry);
+  };
+
+  const navigateToPatientChart = () => {
+    if (selectedQueueEntry && selectedQueueEntry.patient_uuid) {
+      window.location.href = `${window.spaBase}/patient/${selectedQueueEntry.patient_uuid}/chart`;
+    }
+  };
+
+  const handleSuccessfullServe = () => {
+    handleModalCloes();
+    navigateToPatientChart();
+  };
+
+  if (!serviceTypeUuid) {
+    return <>No service type defined</>;
+  }
+
+  return (
+    <>
+      <div className={styles.consultationLayout}>
+        <div className={styles.headerSection}>
+          <h4>{title}</h4>
+        </div>
+        <div className={styles.contentSection}>
+          <Tabs>
+            <TabList contained>
+              {groupedByRoom &&
+                Object.keys(groupedByRoom).map((key) => {
+                  return <Tab>{key}</Tab>;
+                })}
+            </TabList>
+            <TabPanels>
+              {groupedByRoom &&
+                Object.keys(groupedByRoom).map((key) => {
+                  return (
+                    <TabPanel>
+                      {
+                        <QueueList
+                          queueEntries={groupedByRoom[key]}
+                          handleMovePatient={handleMovePatient}
+                          handleTransitionPatient={handleTransitionPatient}
+                          handleServePatient={handleServePatient}
+                        />
+                      }
+                    </TabPanel>
+                  );
+                })}
+            </TabPanels>
+          </Tabs>
+        </div>
+      </div>
+      {displayMoveModal && selectedQueueEntry ? (
+        <>
+          <MovePatientModal
+            open={displayMoveModal}
+            locationUuid={locationUuid}
+            serviceUuid={serviceTypeUuid}
+            onModalClose={handleModalCloes}
+            currentQueueEntryUuid={selectedQueueEntry.queue_entry_uuid}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+      {displayTransitionModal ? (
+        <>
+          <TransitionPatientModal
+            open={displayTransitionModal}
+            onModalClose={handleModalCloes}
+            currentQueueEntry={selectedQueueEntry}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+      {displayServeModal ? (
+        <>
+          <ServePatientModal
+            open={displayServeModal}
+            onModalClose={handleModalCloes}
+            currentQueueEntry={selectedQueueEntry}
+            onSuccessfullServe={handleSuccessfullServe}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default ServiceQueueComponent;