@ampath/esm-dha-workflow-app 4.0.0-next.4 → 4.0.0-next.41

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/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,169 @@
+import {
+  Button,
+  Link,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { type QueueEntryResult } from '../../registry/types';
+import React, { useState } from 'react';
+import styles from './queue-list.component.scss';
+import { QueueEntryPriority, QueueEntryStatus, type TagColor } from '../../types/types';
+
+interface QueueListProps {
+  queueEntries: QueueEntryResult[];
+  handleMovePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleTransitionPatient: (queueEntryResult: QueueEntryResult) => void;
+  handleServePatient: (queueEntryResult: QueueEntryResult) => void;
+  handleSignOff: (queueEntryResult: QueueEntryResult) => void;
+  handleRemovePatient: (queueEntryResult: QueueEntryResult) => void;
+  showComingFromCol: boolean;
+}
+
+const QueueList: React.FC<QueueListProps> = ({
+  queueEntries,
+  handleMovePatient,
+  handleTransitionPatient,
+  handleServePatient,
+  handleSignOff,
+  handleRemovePatient,
+  showComingFromCol,
+}) => {
+  const [checkIn, setCheckIn] = useState<boolean>(false);
+  const handleCheckin = () => {
+    setCheckIn((prev) => !prev);
+  };
+  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 getTagTypeByPriority = (priority: string): TagColor => {
+    let type: TagColor;
+    switch (priority) {
+      case QueueEntryPriority.Emergency:
+        type = 'red';
+        break;
+      case QueueEntryPriority.Normal:
+        type = 'blue';
+        break;
+      default:
+        type = 'gray';
+    }
+    return type;
+  };
+  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>Coming From</TableHeader>
+                <TableHeader>Ticket</TableHeader>
+                <TableHeader>Status</TableHeader>
+                <TableHeader>Priority</TableHeader>
+                <TableHeader>Wait Time</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} {val.given_name}
+                      </Link>
+                    ) : (
+                      <>
+                        {val.family_name} {val.middle_name} {val.given_name}
+                      </>
+                    )}
+                  </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" type={getTagTypeByPriority(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="Move" 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;

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

@@ -0,0 +1,58 @@
+import { Stack, InlineLoading, Tag, OverflowMenu } from "@carbon/react";
+import { isDesktop, useLayoutType } from "@openmrs/esm-framework";
+import dayjs from "dayjs";
+import React, { useEffect, useState } from "react";
+import { MetricsCard, MetricsCardHeader, MetricsCardBody } from "../metrics/metrics-cards/metrics-card.component";
+import { ActionButton } from "../action-button.component";
+import { ActionOverflowMenuItem } from "../action-overflow-menu-item.component";
+import { useTranslation } from "react-i18next";
+import { type QueueEntryAction } from "../../config-schema";
+import { useQueueEntries } from "../service-queues.resource";
+
+interface RoomProps {
+    checkedInRoomUuids: Array<string>;
+    queueUuid: string;
+    overflowMenuKeys: QueueEntryAction[];
+    defaultMenuKey: QueueEntryAction;
+}
+
+export const Room: React.FC<RoomProps> = ({ queueUuid, overflowMenuKeys, checkedInRoomUuids = [], defaultMenuKey = 'move' }) => {
+    const { t } = useTranslation();
+    const { queueEntries, isLoading } = useQueueEntries(queueUuid);
+    const layout = useLayoutType();
+    const [checkedIn, setCheckedIn] = useState(false);
+
+    useEffect(() => {
+        if(checkedInRoomUuids.includes(queueUuid)) {
+            setCheckedIn(true);
+        } else {
+            setCheckedIn(false);
+        }
+    }, [checkedInRoomUuids, queueUuid]);
+
+    return <Stack as="div">
+        {
+            isLoading ? (<InlineLoading />) : queueEntries?.data?.results.map((queueEntry, index) => (
+                <MetricsCard key={index}>
+                    <MetricsCardHeader title={queueEntry.display} />
+                    <MetricsCardBody>
+                        <p>{`${t('visitTime', 'Visit time')} : ${dayjs(queueEntry.startedAt).format('YYYY-MM-DD HH:mm')}`}</p>
+                        <Tag type="blue" size="sm">
+                            {queueEntry.priority?.display}
+                        </Tag>
+                        {
+                            checkedIn ? <>
+                                <ActionButton key={defaultMenuKey} actionKey={defaultMenuKey} queueEntry={queueEntry} />
+                                <OverflowMenu aria-label="Actions menu" size={isDesktop(layout) ? 'sm' : 'lg'} align="left" flipped>
+                                    {overflowMenuKeys.map((actionKey) => (
+                                        <ActionOverflowMenuItem key={actionKey} actionKey={actionKey} queueEntry={queueEntry} />
+                                    ))}
+                                </OverflowMenu>
+                            </> : <></>
+                        }
+                    </MetricsCardBody>
+                </MetricsCard>
+            ))
+        }
+    </Stack>
+}

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

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

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

@@ -0,0 +1,245 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { type QueueEntryResult } from '../../registry/types';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { closeQueueEntry, getServiceQueueByLocationUuid } from '../service-queues.resource';
+import { Button, InlineLoading, 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';
+import StatDetails from './stats/stat-details/stat-details.component';
+import SignOffEntryModal from '../modals/sign-off/sign-off.modal';
+import { endVisit } from '../../resources/visit.resource';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+
+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>(false);
+  const [displayTransitionModal, setDisplayTransitionModal] = useState<boolean>(false);
+  const [displayServeModal, setDisplayServeModal] = useState<boolean>(false);
+  const [displaySignOffModal, setDisplaySignOffModal] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  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 () => {
+    setLoading(true);
+    const res = await getServiceQueueByLocationUuid(serviceTypeUuid, locationUuid);
+    setQueueEntries(res);
+    setLoading(false);
+  };
+
+  if (!groupedByRoom) {
+    return <>No Data to Display</>;
+  }
+  const handleMovePatient = (queueEntry: QueueEntryResult) => {
+    setDisplayMoveModal(true);
+    setSelectedQueueEntry(queueEntry);
+  };
+  const handleModalCloes = () => {
+    setDisplayMoveModal(false);
+    setDisplayTransitionModal(false);
+    setDisplayServeModal(false);
+    handleRefresh();
+  };
+
+  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();
+  };
+
+  const handleSignOff = (queueEntry: QueueEntryResult) => {
+    setDisplaySignOffModal(true);
+    setSelectedQueueEntry(queueEntry);
+  };
+
+  const onSuccessfullSignOff = () => {
+    setDisplaySignOffModal(false);
+    handleRefresh();
+  };
+
+  const handleRefresh = () => {
+    getEntryQueues();
+  };
+
+  const handleRemovePatient = async (queueEntryResult: QueueEntryResult) => {
+    try {
+      await closeQueueEntry(queueEntryResult.queue_entry_uuid);
+      showSnackbar({
+        kind: 'success',
+        title: 'Patient removal from queue successfully!',
+        subtitle: '',
+      });
+      await endVisit(queueEntryResult.visit_uuid, {
+        stopDatetime: new Date().toISOString(),
+      });
+      showSnackbar({
+        kind: 'success',
+        title: 'Visit Ended successfully!',
+        subtitle: '',
+      });
+      handleRefresh();
+    } catch (e) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Patient removal from queue failed!',
+        subtitle: e.message ?? '',
+      });
+    }
+  };
+
+  if (!serviceTypeUuid) {
+    return <>No service type defined</>;
+  }
+
+  return (
+    <>
+      <div className={styles.consultationLayout}>
+        <div className={styles.headerSection}>
+          <h4>{title}</h4>
+        </div>
+        <div>
+          {queueEntries ? (
+            <>
+              <StatDetails queueEntries={queueEntries} />
+            </>
+          ) : (
+            <></>
+          )}
+        </div>
+        <div className={styles.headerAction}>
+          <Button kind="tertiary" onClick={handleRefresh} disabled={loading}>
+            {loading ? <InlineLoading description="Refreshing..." /> : 'Refresh'}
+          </Button>
+        </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}
+                          handleSignOff={handleSignOff}
+                          handleRemovePatient={handleRemovePatient}
+                          showComingFromCol={serviceTypeUuid !== QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID}
+                        />
+                      }
+                    </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}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+      {displaySignOffModal ? (
+        <>
+          <SignOffEntryModal
+            open={displaySignOffModal}
+            onModalClose={handleModalCloes}
+            currentQueueEntry={selectedQueueEntry}
+            onSuccessfullSignOff={onSuccessfullSignOff}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default ServiceQueueComponent;

package/src/service-queues/service-queue/stats/stat-card/stat-card.component.scss

@@ -0,0 +1,10 @@
+.statsCard{
+    display: flex;
+    flex-direction: column;
+    width: 40%;
+    row-gap: 5px;
+    border-radius: 12px;
+    border: 1px solid #d2d2d2;
+    height: 100px;
+    padding: 10px 10px;
+}