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

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

@@ -0,0 +1,80 @@
+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', 'Client 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
+        modalHeading="Serve Client"
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={servePatient}
+        primaryButtonText="Serve"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.serveModalLayout}>
+            <div className={styles.serveModalContentSection}>
+              <div className={styles.formRow}>
+                <p>
+                  Name: {currentQueueEntry.family_name} {currentQueueEntry.middle_name} {currentQueueEntry.given_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/sign-off/sign-off.modal.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Modal, ModalBody, TextInput } from '@carbon/react';
+import { type EndVisitDto, type QueueEntryResult } from '../../../registry/types';
+import styles from './sign-off.modal.scss';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { endVisit } from '../../../resources/visit.resource';
+import { closeQueueEntry } from '../../service-queues.resource';
+
+interface SignOffEntryModalProps {
+  open: boolean;
+  onModalClose: () => void;
+  currentQueueEntry: QueueEntryResult;
+  onSuccessfullSignOff: () => void;
+}
+
+const SignOffEntryModal: React.FC<SignOffEntryModalProps> = ({
+  open,
+  onModalClose,
+  currentQueueEntry,
+  onSuccessfullSignOff,
+}) => {
+  const signOffEntry = async () => {
+    const payload = getEndVisitPayload();
+    try {
+      await removePatientFromQueue(currentQueueEntry);
+      await endVisit(currentQueueEntry.visit_uuid, payload);
+      showAlert('success', 'Visit Ended successfully', '');
+      onSuccessfullSignOff();
+    } catch (e) {
+      showAlert('error', e.message, '');
+    }
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const getEndVisitPayload = (): EndVisitDto => {
+    return {
+      stopDatetime: new Date().toISOString(),
+    };
+  };
+  const removePatientFromQueue = async (currentQueueEntry: QueueEntryResult) => {
+    try {
+      await closeQueueEntry(currentQueueEntry.queue_entry_uuid);
+      showAlert('success', 'Patient removal from queue successfully!', '');
+    } catch (e) {
+      showAlert('error', 'Patient removal from queue failed!', '');
+    }
+  };
+  return (
+    <>
+      <Modal
+        modalHeading="Sign Off"
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={signOffEntry}
+        primaryButtonText="Sign Off"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.serveModalLayout}>
+            <div className={styles.serveModalContentSection}>
+              <div className={styles.formRow}>
+                <TextInput id="health-worker-id" labelText="Enter your Provider ID" onChange={() => {}} type="text" />
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default SignOffEntryModal;

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', 'Client 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/check-in.service.ts

@@ -0,0 +1,26 @@
+export const CHECKIN_KEY = 'checkin';
+export const checkInRoom = (providerUuid: string, queueRoom: string) => {
+  const checkInVal = formatCheckinValue(providerUuid, queueRoom);
+  localStorage.setItem(CHECKIN_KEY, checkInVal);
+};
+
+const formatCheckinValue = (providerUuid: string, queueRoom: string): string => {
+  return (queueRoom + providerUuid).replaceAll(' ', '');
+};
+
+export const getCheckinValue = (): string | null => {
+  return localStorage.getItem(CHECKIN_KEY) ?? null;
+};
+
+export const checkOutRoom = () => {
+  localStorage.removeItem(CHECKIN_KEY);
+};
+
+export const isCheckedIn = (providerUuid: string, queueRoom): boolean => {
+  if (!providerUuid || !queueRoom) {
+    return false;
+  }
+  const checkInVal = formatCheckinValue(providerUuid, queueRoom);
+  const cachedCheckedInVal = getCheckinValue();
+  return checkInVal === cachedCheckedInVal;
+};

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

@@ -0,0 +1,36 @@
+.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%;
+    column-gap: 10px;
+}
+.tableSection{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+}
+.searchInput{
+    width: 40%;
+}
+
+.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/queue-list/queue-list.component.tsx

@@ -0,0 +1,249 @@
+import {
+  Button,
+  Link,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  TextInput,
+} from '@carbon/react';
+import { type QueueEntryResult } from '../../registry/types';
+import React, { useMemo, useState } from 'react';
+import styles from './queue-list.component.scss';
+import { QueueEntryPriority, QueueEntryStatus, type TagColor } from '../../types/types';
+import { getTagClassByPriority } from '../../shared/utils/get-tag-type';
+import { useSession } from '@openmrs/esm-framework';
+import { checkInRoom, checkOutRoom, isCheckedIn } from './check-in.service';
+
+interface QueueListProps {
+  queueRoom: string;
+  queueEntries: QueueEntryResult[];
+  handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
+  handleServePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleSignOff: (queueEntryResult: QueueEntryResult) => void;
+  handleRemovePatient: (queueEntryResult: QueueEntryResult) => void;
+  showComingFromCol: boolean;
+  handleClearQueue: (queueEntryResults: QueueEntryResult[]) => void;
+}
+
+const QueueList: React.FC<QueueListProps> = ({
+  queueRoom,
+  queueEntries,
+  handleMovePatient,
+  handleTransitionPatient,
+  handleServePatient,
+  handleSignOff,
+  handleRemovePatient,
+  showComingFromCol,
+  handleClearQueue,
+}) => {
+  const session = useSession();
+  const provider = session.currentProvider;
+  const [checkIn, setCheckin] = useState<boolean>(isProviderCheckedIn());
+
+  const [searchString, setSearchString] = useState<string>();
+  const urgentEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.Emergency),
+    [queueEntries],
+  );
+  const priorityEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.Priority),
+    [queueEntries],
+  );
+
+  const nonUrgentEntries = useMemo(
+    () => sortQueueByPriorityAndWaitTime(queueEntries, QueueEntryPriority.NonUrgent),
+    [queueEntries],
+  );
+  const sortedQueueEntries = useMemo(() => generatePatientWaitingList(), [queueEntries]);
+  const filteredQueueEntries = useMemo(() => filterQueueBySearchString(), [queueEntries, searchString]);
+  function generatePatientWaitingList() {
+    return [...urgentEntries, ...priorityEntries, ...nonUrgentEntries];
+  }
+
+  function sortQueueByPriorityAndWaitTime(queueEntries: QueueEntryResult[], priority: QueueEntryPriority) {
+    return queueEntries
+      .filter((q) => {
+        return q.priority === priority;
+      })
+      .sort((a, b) => {
+        return b.wait_time_in_min - a.wait_time_in_min;
+      });
+  }
+  function isProviderCheckedIn() {
+    return isCheckedIn(provider.uuid, queueRoom);
+  }
+  const handleCheckin = () => {
+    checkInRoom(provider.uuid, queueRoom);
+    setCheckin(isProviderCheckedIn());
+  };
+  const handleCheckout = () => {
+    checkOutRoom();
+    setCheckin(isProviderCheckedIn());
+  };
+  const getTagTypeByStatus = (status: string): TagColor => {
+    let type: TagColor;
+    switch (status) {
+      case QueueEntryStatus.Completed:
+        type = 'green';
+        break;
+      case QueueEntryStatus.Waiting:
+        type = 'gray';
+        break;
+      case QueueEntryStatus.InService:
+        type = 'blue';
+        break;
+      default:
+        type = 'gray';
+    }
+    return type;
+  };
+  const clearQueue = () => {
+    handleClearQueue(sortedQueueEntries);
+  };
+  const handlQueueSearch = (searchTerm: string) => {
+    setSearchString(searchTerm);
+  };
+  function filterQueueBySearchString(): QueueEntryResult[] {
+    if (!searchString) {
+      return sortedQueueEntries;
+    }
+    return sortedQueueEntries.filter((qe) => {
+      const fullName = `${qe.family_name} ${qe.middle_name} ${qe.given_name}`;
+      return fullName.trim().toLowerCase().includes(searchString.trim().toLowerCase());
+    });
+  }
+  function formatPatientName(qe: QueueEntryResult) {
+    return `${formatName(qe.family_name)} ${formatName(qe.middle_name)} ${formatName(qe.given_name)}`;
+  }
+  function formatName(name: string) {
+    if (name === 'NULL' || !name) {
+      return '';
+    } else {
+      return name;
+    }
+  }
+  return (
+    <>
+      <div className={styles.queueListLayout}>
+        <div className={styles.actionHeader}>
+          <>
+            <div className={styles.searchInput}>
+              <TextInput
+                id="queue-search"
+                labelText=""
+                onChange={(e) => handlQueueSearch(e.target.value)}
+                placeholder="Enter patient name to filter"
+              />
+            </div>
+            {checkIn ? (
+              <>
+                <Button kind="secondary" onClick={handleCheckout}>
+                  Check Out
+                </Button>
+                {sortedQueueEntries.length > 0 ? (
+                  <>
+                    <Button kind="danger" onClick={clearQueue}>
+                      Clear Queue
+                    </Button>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </>
+            ) : (
+              <>
+                <Button kind="primary" onClick={handleCheckin}>
+                  Check In
+                </Button>
+              </>
+            )}
+          </>
+        </div>
+        <div className={styles.tableSection}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>No</TableHeader>
+                <TableHeader>Name</TableHeader>
+                <TableHeader>Age</TableHeader>
+                <TableHeader>Phone Number</TableHeader>
+                <TableHeader>Identifiers</TableHeader>
+                <TableHeader>Coming From</TableHeader>
+                <TableHeader>Ticket</TableHeader>
+                <TableHeader>Status</TableHeader>
+                <TableHeader>Priority</TableHeader>
+                <TableHeader>Wait Time</TableHeader>
+                <TableHeader>Action</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {filteredQueueEntries.map((val, index) => (
+                <TableRow id={val.queue_entry_uuid}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>
+                    {checkIn && val.status !== QueueEntryStatus.Waiting ? (
+                      <Link href={`${window.spaBase}/patient/${val.patient_uuid}/chart/`}>
+                        {formatPatientName(val)}
+                      </Link>
+                    ) : (
+                      <>{formatPatientName(val)}</>
+                    )}
+                  </TableCell>
+                  <TableCell>{val.age ?? ''}</TableCell>
+                  <TableCell>{val.phone_number ?? ''}</TableCell>
+                  <TableCell>{val.identifiers ?? ''}</TableCell>
+                  <TableCell>{showComingFromCol ? val.queue_coming_from : ''}</TableCell>
+                  <TableCell>{val.queue_entry_id}</TableCell>
+                  <TableCell>
+                    <Tag size="md" type={getTagTypeByStatus(val.status)}>
+                      {val.status}
+                    </Tag>
+                  </TableCell>
+                  <TableCell>
+                    <Tag size="md" className={styles[getTagClassByPriority(val.priority)]}>
+                      {val.priority}
+                    </Tag>
+                  </TableCell>
+                  <TableCell>{`${val.wait_time_in_min} minute(s)`}</TableCell>
+                  <TableCell>
+                    {val.status === QueueEntryStatus.Waiting ? (
+                      <>
+                        <Button kind="ghost" disabled={!checkIn} onClick={() => handleServePatient(val)}>
+                          Serve
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        {checkIn ? (
+                          <>
+                            <OverflowMenu aria-label="overflow-menu">
+                              <OverflowMenuItem itemText="Transfer" onClick={() => handleMovePatient(val)} />
+                              <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(val)} />
+                              <OverflowMenuItem itemText="Sign Off" onClick={() => handleSignOff(val)} />
+                              <OverflowMenuItem itemText="Remove Patient" onClick={() => handleRemovePatient(val)} />
+                            </OverflowMenu>
+                          </>
+                        ) : (
+                          <></>
+                        )}
+                      </>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default QueueList;

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { MetricsCard, MetricsCardBody } from './metrics/metrics-cards/metrics-card.component';
+import { Button, InlineLoading, Stack, Tag } from '@carbon/react';
+import styles from './service-queue.scss';
+import { useQueues } from './service-queues.resource';
+import { Room } from './room/room.component';
+import { type QueueEntryAction } from '../config-schema';
+
+interface QueueRoomProps {
+  serviceUuid: string;
+  overflowMenuKeys: QueueEntryAction[];
+  defaultMenuKey: QueueEntryAction;
+}
+
+const QueueRoom: React.FC<QueueRoomProps> = ({ serviceUuid, defaultMenuKey, overflowMenuKeys }) => {
+  const { data: queuesData, isLoading: isLoadingQueues } = useQueues(serviceUuid);
+  const [checkedInRoomUuids, setCheckedInRoomUuids] = useState([]);
+
+  return <Stack orientation='horizontal' gap={1} className={styles.cardContainer}>
+    {
+      isLoadingQueues ? <InlineLoading /> : queuesData.data.results.map((queue, index) => (
+        <MetricsCard key={index} >
+          <Stack as="div" orientation='horizontal' gap={4} className={styles.cardHeaderStack}>
+            <p>{queue.display}</p>
+            <Tag type="blue" size="sm">
+              0 patient(s)
+            </Tag>
+            <Button kind={checkedInRoomUuids.includes(queue.uuid) ? 'danger' : 'primary'} size='sm' onClick={() => setCheckedInRoomUuids((prev) => (prev.includes(queue.uuid) ? prev.filter(q => q !== queue.uuid) : [...prev, queue.uuid]))}> {!checkedInRoomUuids.includes(queue.uuid) ? 'Check in' : 'Check out'}</Button>
+          </Stack>
+          <MetricsCardBody>
+            <Room checkedInRoomUuids={checkedInRoomUuids} queueUuid={queue.uuid} overflowMenuKeys={overflowMenuKeys} defaultMenuKey={defaultMenuKey}/>
+          </MetricsCardBody>
+        </MetricsCard>
+      ))
+    }
+  </Stack>
+}
+
+export default QueueRoom;