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

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/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,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;