@ampath/esm-dha-workflow-app 4.0.0-next.15 → 4.0.0-next.151

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

@@ -0,0 +1,302 @@
+import {
+  Button,
+  ComboBox,
+  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';
+import { userHasAccess } from '@openmrs/esm-framework';
+
+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 [selectedStatus,setSelectedStatus] = useState<string>('');
+
+  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,selectedStatus]);
+  const filteredQueueEntries = useMemo(() => filterQueueBySearchString(), [queueEntries, searchString,selectedStatus]);
+  const canClearQueue = userHasAccess('O3 Clear Triage Queue',{
+    privileges: session.user?.privileges ?? [],
+    roles: session.user?.roles ?? []
+  });
+  const statusOptions = [
+        {
+          text: 'ALL',
+          id: '',
+        },
+        {
+          text: 'IN SERVICE',
+          id: 'IN SERVICE',
+        },
+        {
+          text: 'WAITING',
+          id: 'WAITING',
+        },
+  ];
+  function generatePatientWaitingList() {
+    return [...urgentEntries, ...priorityEntries, ...nonUrgentEntries].filter((qe)=>{
+       if(!selectedStatus){
+          return true;
+       }
+       return qe.status === selectedStatus;
+    });
+  }
+
+  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;
+    }
+  }
+  function statusChangeHandler(selectedStatus: { selectedItem: { id: string; text: string } }){
+    let status = '';
+    if(selectedStatus && selectedStatus.selectedItem){
+        status = selectedStatus.selectedItem.id;
+    }
+    
+    setSelectedStatus(status);
+  }
+  return (
+    <>
+      <div className={styles.queueListLayout}>
+        <div className={styles.actionHeader}>
+          <div className={styles.filters}>
+           <div className={styles.filter}>
+              <ComboBox
+                        onChange={statusChangeHandler}
+                        id="queue-status-combobox"
+                        items={statusOptions}
+                        itemToString={(item) => (item ? item.text : '')}
+                        titleText="Status"
+                />
+            </div>
+           <div className={styles.filter}>
+              <TextInput
+                id="queue-search"
+                labelText="Name"
+                onChange={(e) => handlQueueSearch(e.target.value)}
+                placeholder="Enter patient name to filter"
+              />
+            </div>
+           
+          </div>
+          <div className={styles.actionBtns}>
+            
+            {checkIn ? (
+              <>
+                <div>
+                <Button kind="secondary" onClick={handleCheckout}>
+                  Check Out
+                </Button>
+                </div>
+                {sortedQueueEntries.length > 0 ? (
+                  <>
+                  <div>
+                    <Button kind="danger" onClick={clearQueue} disabled={!canClearQueue}>
+                      Clear Queue
+                    </Button>
+                  </div>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </>
+            ) : (
+              <>
+              <div>
+                <Button kind="primary" onClick={handleCheckin}>
+                  Check In
+                </Button>
+              </div>
+              </>
+            )}
+          </div>
+        </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;

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;
+}