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

package/src/service-queues/metrics/metrics-cards/metrics-card.scss

@@ -0,0 +1,106 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tileContainer {
+  border: 1px solid $ui-03;
+  min-height: 7.875rem;
+  height: 100%;
+  padding: layout.$spacing-05;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: layout.$spacing-03;
+}
+
+.headerLabelContainer {
+  display: flex;
+  height: layout.$spacing-07;
+  align-items: center;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+
+    label {
+      @include type.type-style('heading-compact-01');
+      color: $text-02;
+      margin-right: layout.$spacing-03;
+    }
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: layout.$spacing-05;
+  }
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: $interactive-01;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.metricsContainer {
+  display: flex;
+  gap: layout.$spacing-07;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+
+.metricItem {
+  display: inline-block;
+  flex-direction: column;
+}
+
+.metricLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin-bottom: layout.$spacing-02;
+}
+
+.metricValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+  margin: 0;
+}
+
+.mainItem {
+  margin-right: layout.$spacing-07;
+}
+
+.smallItem {
+  flex-direction: row;
+}
+
+.smallValue {
+  font-size: 1rem !important;
+  margin-top: layout.$spacing-02;
+}
+
+.red {
+  color: colors.$red-50;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .link {
+    svg {
+      margin-right: layout.$spacing-03;
+      margin-left: unset;
+      transform: scale(-1, 1);
+    }
+  }
+}

package/src/service-queues/metrics/metrics-cards/waiting-patients.extension.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
+import { getServiceQueueByLocationUuid } from '../../service-queues.resource';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+import { useSession } from '@openmrs/esm-framework';
+import { type QueueEntryResult } from '../../../registry/types';
+
+export default function WaitingPatientsExtension() {
+  const { t } = useTranslation();
+  const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const consultationServiceUuid = QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID;
+  useEffect(() => {
+    getConsultationEntryQueues();
+  }, []);
+
+  const getConsultationEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
+    setConsultationQueueEntries(res);
+  };
+
+  const waitingPatientsCount = consultationQueueEntries?.filter((p) => p.status === 'WAITING').length ?? 0;
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsInWaiting', 'Patients in waiting')} />
+      <MetricsCardBody>
+        <MetricsCardItem label={t('patients', 'Patients')} value={waitingPatientsCount ? waitingPatientsCount : '--'} />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

package/src/service-queues/metrics/metrics-container.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './metrics-container.scss';
+import AttendedToPatientsExtension from './metrics-cards/attended-patients.extension';
+import WaitingPatientsExtension from './metrics-cards/waiting-patients.extension';
+
+export interface Service {
+  display: string;
+  uuid?: string;
+}
+
+function MetricsContainer() {
+  return (
+    <>
+      <div className={styles.cardContainer}>
+        <WaitingPatientsExtension />
+        <AttendedToPatientsExtension />;
+      </div>
+    </>
+  );
+}
+
+export default MetricsContainer;

package/src/service-queues/metrics/metrics-container.scss

@@ -0,0 +1,36 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  padding: layout.$spacing-05;
+  flex-flow: row wrap;
+  gap: layout.$spacing-05;
+  align-items: stretch;
+}
+
+.cardContainer > * {
+  flex: 1 0 0%;
+  min-width: 16rem;
+}
+
+// If we're on tablet and the screen is too small for 3 cards across
+// @TODO: This will do nonsense things if there are not exactly 3 cards
+@media (max-width: calc(layout.$spacing-05 * 4 + 18.75rem * 3)) {
+  :global(.omrs-breakpoint-lt-desktop) {
+    .cardContainer > *:has(:global(.cardWithChildren)) {
+      order: 999;
+    }
+  }
+}
+
+// If we're on desktop and the screen is too small for the left nav bar
+// plus 3 cards across
+@media (max-width: calc(16rem + layout.$spacing-05 * 4 + 18.75rem * 3)) {
+  :global(.omrs-breakpoint-gt-tablet) {
+    .cardContainer > *:has(:global(.cardWithChildren)) {
+      order: 999;
+    }
+  }
+}

package/src/service-queues/metrics/metrics.resource.ts

@@ -0,0 +1,65 @@
+import { useSession, type Visit, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+
+// export function useActiveVisits() {
+//   const currentUserSession = useSession();
+//   const startDate = dayjs().format('YYYY-MM-DD');
+//   const sessionLocation = currentUserSession?.sessionLocation?.uuid;
+
+//   const customRepresentation =
+//     'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),' +
+//     'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,' +
+//     'stopDatetime)&fromStartDate=' +
+//     startDate +
+//     '&location=' +
+//     sessionLocation;
+//   const url = `${restBaseUrl}/visit?includeInactive=false&v=${customRepresentation}`;
+//   const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+//     sessionLocation ? url : null,
+//     openmrsFetch,
+//   );
+
+//   // Create a Set to store unique patient UUIDs
+//   const uniquePatientUUIDs = new Set();
+
+//   data?.data?.results.forEach((visit) => {
+//     const patientUUID = visit.patient?.uuid;
+//     const isToday = dayjs(visit.startDatetime).isToday();
+//     if (patientUUID && isToday) {
+//       uniquePatientUUIDs.add(patientUUID);
+//     }
+//   });
+
+//   return {
+//     activeVisitsCount: uniquePatientUUIDs.size,
+//     isLoading,
+//     error,
+//     isValidating,
+//   };
+// }
+
+// Statuses: Waiting, Finished Service, In Service
+export function useServiceMetricsCount(status: string = 'Waiting', service: string = "7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2") {
+  const currentUserSession = useSession();
+  const location = currentUserSession?.sessionLocation?.uuid;
+
+  const apiUrl =
+    `${restBaseUrl}/queue-entry-metrics?status=${status}&isEnded=false` +
+    (service ? `&service=${service}` : '') +
+    (location ? `&location=${location}` : '');
+
+  const { data, isLoading } = useSWR<
+    {
+      data: {
+        count: number;
+      };
+    },
+    Error
+  >(service ? apiUrl : null, openmrsFetch);
+
+  return {
+    serviceCount: data ? data?.data?.count : 0,
+    isLoading
+  };
+}

package/src/service-queues/modals/daily-report-patient-list/daily-report-patient-list.scss

@@ -0,0 +1,26 @@
+.checkedInlLayout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+
+    .actionHeaderSection {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        width: 100%;
+        column-gap: 15px;
+
+        .searchInput {
+            width: 40%;
+        }
+    }
+
+    .serveModalContentSection {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 10px;
+    }
+
+}

package/src/service-queues/modals/daily-report-patient-list/daily-report-patient-list.tsx

@@ -0,0 +1,108 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Modal,
+  ModalBody,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  TextInput,
+} from '@carbon/react';
+import styles from './daily-report-patient-list.scss';
+import { type ServiceQueueReportPatientList } from '../../../shared/types';
+
+interface DailyReportPatientListModalProps {
+  open: boolean;
+  onModalClose: () => void;
+  patientList: ServiceQueueReportPatientList[];
+}
+
+const DailyReportPatientListModal: React.FC<DailyReportPatientListModalProps> = ({
+  open,
+  onModalClose,
+  patientList,
+}) => {
+  const [searchString, setSearchString] = useState<string>();
+  const filteredPatientList = useMemo(() => filterQueueBySearchString(), [patientList, searchString]);
+
+  function filterQueueBySearchString(): ServiceQueueReportPatientList[] {
+    if (!searchString) {
+      return patientList;
+    }
+    return patientList.filter((p) => {
+      return p.person_name.trim().toLowerCase().includes(searchString.trim().toLowerCase());
+    });
+  }
+
+  const handlePatientListSearch = (searchTerm: string) => {
+    setSearchString(searchTerm);
+  };
+  return (
+    <>
+      <Modal
+        modalHeading="Checked In Patient List"
+        open={open}
+        size="lg"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={onModalClose}
+        primaryButtonText="Close"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.checkedInlLayout}>
+            <div className={styles.actionHeaderSection}>
+              <div className={styles.searchInput}>
+                <TextInput
+                  id="queue-search"
+                  labelText=""
+                  onChange={(e) => handlePatientListSearch(e.target.value)}
+                  placeholder="Enter patient name to filter"
+                />
+              </div>
+            </div>
+            <div className={styles.serveModalContentSection}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableHeader>No</TableHeader>
+                    <TableHeader>Name</TableHeader>
+                    <TableHeader>Age</TableHeader>
+                    <TableHeader>Gender</TableHeader>
+                    <TableHeader>Phone Number</TableHeader>
+                    <TableHeader>Identifiers</TableHeader>
+                    <TableHeader>Queue Room</TableHeader>
+                    <TableHeader>Status</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {filteredPatientList.map((val, index) => (
+                    <TableRow id={`${val.queue_entry_id}`}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{val.person_name}</TableCell>
+                      <TableCell>{val.age}</TableCell>
+                      <TableCell>{val.gender}</TableCell>
+                      <TableCell>{val.phone_number}</TableCell>
+                      <TableCell>{val.identifiers}</TableCell>
+                      <TableCell>{val.queue_room_name}</TableCell>
+                      <TableCell>
+                        <Tag size="md" type={val.served_status === 'SERVED' ? 'blue' : 'gray'}>
+                          {val.served_status}
+                        </Tag>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default DailyReportPatientListModal;

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: 100%;
+}
+.actionSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}

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

@@ -0,0 +1,152 @@
+import { Button, InlineLoading, 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;
+  currentQueueEntryUuid: string;
+  onTransferSuccess?: () => void;
+}
+const MovePatientModal: React.FC<MovePatientModalProps> = ({
+  open,
+  onModalClose,
+  locationUuid,
+  currentQueueEntryUuid,
+  onTransferSuccess,
+}) => {
+  const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>([]);
+  const [selectedComment, setSelectedComment] = useState<string>();
+  const [selectedPriority, setSelectedPriority] = useState<string>();
+  const [selectedNewService, setSelectedNewService] = useState<ServiceQueue>();
+  const [loading, setLoading] = useState<boolean>(false);
+  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 () => {
+    if (loading) {
+      showAlert('error', 'Trsnefering patient', 'Transfering patient...please wait');
+    }
+    setLoading(true);
+    const payload = getTransitionQueueEntryPayload();
+    try {
+      const resp = await transitionQueueEntry(payload);
+      showAlert('success', 'Client succesfully moved', '');
+      onTransferSuccess();
+    } catch (e) {
+      showAlert('error', e.message, '');
+      setLoading(false);
+    }
+  };
+
+  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) => {
+    setSelectedComment(comment);
+  };
+  const placeHolderFunction = () => {};
+  return (
+    <>
+      <Modal
+        modalHeading="Transfer Client"
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose()}
+        onRequestClose={() => onModalClose()}
+        onRequestSubmit={loading ? placeHolderFunction : transtionQueueEntry}
+        primaryButtonText={loading ? <InlineLoading description="Transfering..." /> : 'Transfer'}
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.modelLayout}>
+            <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
+                        .filter((qe) => {
+                          return qe.uuid !== currentQueueEntryUuid;
+                        })
+                        .map((vt) => {
+                          return <SelectItem value={vt.uuid} text={`${vt.name} (${vt.location.display})`} />;
+                        })}
+                  </Select>
+                </div>
+              </div>
+              <div className={styles.formRow}>
+                <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="PRIORITY" />;
+                    <SelectItem value={QUEUE_PRIORITIES_UUIDS.NOT_URGENT_PRIORITY_UUID} text="NON URGENT" />;
+                    <SelectItem value={QUEUE_PRIORITIES_UUIDS.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
+                  </Select>
+                </div>
+              </div>
+              <div className={styles.formRow}>
+                <div className={styles.formControl}>
+                  <TextArea
+                    enableCounter
+                    helperText=""
+                    id="comment"
+                    labelText="Comment"
+                    maxCount={500}
+                    placeholder=""
+                    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,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;