@ampath/esm-dha-workflow-app 4.0.0-next.14 → 4.0.0-next.16

package/src/hooks/useQueueEntries.ts

@@ -0,0 +1,35 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import useSWR from 'swr';
+import { useSWRConfig } from 'swr/_internal';
+import { type QueueEntryResponse } from "../types/types";
+import { useMemo } from "react";
+
+export function useMutateQueueEntries() {
+    const { mutate } = useSWRConfig();
+
+    return {
+        mutateQueueEntries: () => {
+            return mutate((key) => {
+                return (
+                    typeof key === 'string' &&
+                    (key.includes(`${restBaseUrl}/queue-entry`) || key.includes(`${restBaseUrl}/visit-queue-entry`))
+                );
+            }).then(() => {
+                window.dispatchEvent(new CustomEvent('queue-entry-updated'));
+            });
+        },
+    };
+}
+
+export function useQueueEntries() {
+    const queueEntryBaseUrl = `${restBaseUrl}/queue-entry?` +
+    `isEnded=false&service=7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2&location=18c343eb-b353-462a-9139-b16606e6b6c2`;
+    const { data, isValidating, isLoading, error: pageError } = useSWR<QueueEntryResponse, Error>(queueEntryBaseUrl, openmrsFetch);
+
+    const queueEntries = useMemo(() => data, [data]);
+
+    return {
+        queueEntries,
+        isLoading
+    }
+}

package/src/index.ts

@@ -7,7 +7,7 @@
 import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 
-const moduleName = '@ampath/esm-dha-workflow-app';
+const moduleName = '@ampath/openmrs-esm-home-app.js';
 
 const options = {
   featureName: 'Consulation Workflow',
@@ -44,8 +44,18 @@ export const navLinks = getAsyncLifecycle(() => import('./side-nav-menu/nav-link
  */
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
 export const registry = getAsyncLifecycle(() => import('./registry/registry.component'), options);
+export const waitingPatientsExtension = getAsyncLifecycle(
+  () => import('./metrics/metrics-cards/waiting-patients.extension'),
+  options,
+);
+export const attendedToPatientsExtension = getAsyncLifecycle(
+  () => import('./metrics/metrics-cards/attended-patients.extension'),
+  options,
+);
 
 export const workflowRegistryLink = getAsyncLifecycle(() => import('./widgets/workflow-registry-link.extension'), {
   featureName: 'workflow-registry-link',
   moduleName,
 });
+
+export const triage = getAsyncLifecycle(() => import('./triage/triage.component'), options);

package/src/metrics/metrics-cards/attended-patients.extension.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
+import { useServiceMetricsCount } from '../metrics.resource';
+
+export default function AttendedToPatientsExtension() {
+  const { t } = useTranslation();
+  const { serviceCount, isLoading } = useServiceMetricsCount("COMPLETED");
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsAttendedTo', 'Patients attended to')} />
+      <MetricsCardBody>
+        <MetricsCardItem label={t('patients', 'Patients')} value={isLoading ? '--' : serviceCount ?? 0} />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

package/src/metrics/metrics-cards/metrics-card.component.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Layer, Tile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import styles from './metrics-card.scss';
+
+interface MetricsCardProps {
+  children?: React.ReactNode;
+}
+
+export const MetricsCard: React.FC<MetricsCardProps> = ({ children }) => {
+  return (
+    <Layer
+      className={classNames({
+        cardWithChildren: children,
+      })}>
+      <Tile className={styles.tileContainer}>{children}</Tile>
+    </Layer>
+  );
+};
+
+interface MetricsCardHeaderProps {
+  title: string;
+  children?: React.ReactNode;
+  link?: string;
+  linkText?: string;
+}
+
+export const MetricsCardHeader: React.FC<MetricsCardHeaderProps> = ({ title, children, link, linkText }) => {
+  return (
+    <div className={styles.tileHeader}>
+      <div className={styles.headerLabelContainer}>
+        <label className={styles.headerLabel}>{title}</label>
+        {children}
+      </div>
+      {link && (
+        <div className={styles.link}>
+          <ConfigurableLink className={styles.link} to={link}>
+            {linkText}
+          </ConfigurableLink>
+          <ArrowRight size={16} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface MetricsCardBodyProps {
+  children?: React.ReactNode;
+}
+
+export const MetricsCardBody: React.FC<MetricsCardBodyProps> = ({ children }) => {
+  return <div className={styles.metricsContainer}>{children}</div>;
+};
+
+interface MetricsCardItemProps {
+  label: string;
+  /** If the value is null, the item will not be rendered. */
+  value: number | string | null;
+  small?: boolean;
+  color?: 'default' | 'red';
+}
+
+export const MetricsCardItem: React.FC<MetricsCardItemProps> = ({ label, value, small, color }) => {
+  if (value === null) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(styles.metricItem, {
+        [styles.smallItem]: small,
+        [styles.mainItem]: !small,
+      })}>
+      <span className={styles.metricLabel}>{label}</span>
+      <p
+        className={classNames(styles.metricValue, {
+          [styles.red]: color === 'red',
+          [styles.smallValue]: small,
+        })}>
+        {value}
+      </p>
+    </div>
+  );
+};

package/src/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/metrics/metrics-cards/waiting-patients.extension.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
+import { useServiceMetricsCount } from '../metrics.resource';
+
+export default function WaitingPatientsExtension() {
+  const { t } = useTranslation();
+  const { serviceCount, isLoading } = useServiceMetricsCount("WAITING");
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsInWaiting', 'Patients in waiting')} />
+      <MetricsCardBody>
+        <MetricsCardItem label={t('patients', 'Patients')} value={isLoading ? '--' : serviceCount ?? 0} />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './metrics-container.scss';
+
+export interface Service {
+  display: string;
+  uuid?: string;
+}
+
+function MetricsContainer() {
+  return (
+    <ExtensionSlot name="clinic-metrics-slot" className={styles.cardContainer} data-testid="clinic-metrics" />
+  );
+}
+
+export default MetricsContainer;

package/src/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/metrics/metrics.resource.ts

@@ -0,0 +1,101 @@
+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
+  };
+}
+
+export function useConsultationQueues(service: string = "7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2", status: string = 'WAITING') {
+  const currentUserSession = useSession();
+  const location = currentUserSession?.sessionLocation?.uuid;
+
+  const customRepresentation =
+    'custom:(uuid,display,queue,status,patient:(uuid,display,person,identifiers:(uuid,display,identifier,identifierType)),' +
+    'visit:(uuid,display,startDatetime))'
+
+  const apiUrl =
+    `${restBaseUrl}/queue-entry?status=${status}&isEnded=false` +
+    (service ? `&service=${service}` : '') +
+    (location ? `&location=${location}` : '') +
+    `&v=${customRepresentation}`;
+
+  const { data, isLoading } = useSWR<
+    {
+      data: {
+        results: Array<{
+          patient: {
+            uuid: string;
+            display: string;
+          },
+          visit: {
+            uuid: string;
+            display: string;
+            startDatetime: string;
+          }
+        }>;
+      };
+    },
+    Error
+  >(service ? apiUrl : null, openmrsFetch);
+
+  return { data, isLoading };
+}

package/src/modals/sign-off-modal.scss

@@ -0,0 +1,7 @@
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.subHeading {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+}

package/src/modals/sign-off-modal.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+import { Button, ButtonSkeleton, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './sign-off-modal.scss';
+import { type QueueEntry } from '../types/types';
+
+interface SignOffModalProps {
+  queueEntries: Array<QueueEntry>;
+  closeModal: () => void;
+}
+
+const SignOffModal: React.FC<SignOffModalProps> = ({ queueEntries, closeModal }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSignOffRequest = useCallback(() => {
+    setIsSubmitting(true);
+  }, []);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('signOffMessage', 'Sign off message')}
+        title={t('signOffMessage', 'Sign off message')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'signOffMessage',
+            'Sign off message',
+          )}
+          .
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        {isSubmitting === true ? (
+          <ButtonSkeleton />
+        ) : (
+          <Button kind="danger" onClick={handleSignOffRequest}>
+            {t('signOff', 'SignOff')}
+          </Button>
+        )}
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default SignOffModal;

package/src/root.component.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import RegistryComponent from './registry/registry.component';
 import LeftPanel from './left-panel/left-panel.component';
 import Consultation from './consultation/consultation';
+import Triage from './triage/triage.component';
 
 const Root: React.FC = () => {
   return (
@@ -14,9 +15,9 @@ const Root: React.FC = () => {
         <Routes>
           <Route path="" element={<RegistryComponent />} />
           <Route path="registry" element={<RegistryComponent />} />
-          <Route path="triage" element={<Consultation />} />
           <Route path="consultation" element={<Consultation />} />
           <Route path="*" element={<RegistryComponent />} />
+          <Route path="triage" element={<Triage />} />
         </Routes>
       </main>
       <WorkspaceContainer contextKey="home" />

package/src/routes.json

@@ -23,6 +23,24 @@
       "slot": "dha-workflow-slot",
       "online": true,
       "offline": true
+    },
+    {
+      "name": "metrics-card-patients-in-waiting",
+      "component": "waitingPatientsExtension",
+      "slot": "clinic-metrics-slot",
+      "order": 1
+    },
+    {
+      "name": "metrics-card-patients-attended-to",
+      "component": "attendedToPatientsExtension",
+      "slot": "clinic-metrics-slot",
+      "order": 2
+    }
+  ],
+  "modals": [
+    {
+      "name": "sign-off-queue-entry-modal",
+      "component": "signOffModal"
     }
   ]
 }

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

@@ -0,0 +1,62 @@
+import { type Encounter, formatDate, openmrsFetch, parseDate, restBaseUrl } from "@openmrs/esm-framework";
+import { type Identifer, type MappedEncounter, type MappedVisitQueueEntry, type QueueEntry } from "../types/types";
+import dayjs from "dayjs";
+
+export function serveQueueEntry(servicePointName: string, ticketNumber: string, status: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/queueutil/assignticket`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      servicePointName,
+      ticketNumber,
+      status,
+    },
+  });
+}
+
+const mapEncounterProperties = (encounter: Encounter): MappedEncounter => ({
+  diagnoses: encounter.diagnoses,
+  encounterDatetime: encounter.encounterDatetime,
+  encounterType: encounter.encounterType.display,
+  obs: encounter.obs,
+  provider: encounter.encounterProviders[0]?.provider?.person?.display,
+  uuid: encounter.uuid,
+  voided: encounter.voided,
+});
+
+export const mapVisitQueueEntryProperties = (
+  queueEntry: QueueEntry,
+  visitQueueNumberAttributeUuid: string,
+): MappedVisitQueueEntry => ({
+  id: queueEntry.uuid,
+  encounters: queueEntry.visit?.encounters?.map(mapEncounterProperties),
+  name: queueEntry.display,
+  patientUuid: queueEntry.patient.uuid,
+  patientAge: queueEntry.patient.person?.age + '',
+  patientDob: queueEntry?.patient?.person?.birthdate
+    ? formatDate(parseDate(queueEntry.patient.person.birthdate), { time: false })
+    : '--',
+  patientGender: queueEntry.patient.person.gender,
+  queue: queueEntry.queue,
+  priority: queueEntry.priority,
+  priorityComment: queueEntry.priorityComment,
+  status: queueEntry.status,
+  startedAt: dayjs(queueEntry.startedAt).toDate(),
+  endedAt: queueEntry.endedAt ? dayjs(queueEntry.endedAt).toDate() : null,
+  visitType: queueEntry.visit?.visitType?.display,
+  queueLocation: (queueEntry?.queue as any)?.location?.uuid,
+  visitTypeUuid: queueEntry.visit?.visitType?.uuid,
+  visitUuid: queueEntry.visit?.uuid,
+  queueUuid: queueEntry.queue.uuid,
+  queueEntryUuid: queueEntry.uuid,
+  sortWeight: queueEntry.sortWeight,
+  visitQueueNumber: queueEntry.visit?.attributes?.find((e) => e?.attributeType?.uuid === visitQueueNumberAttributeUuid)
+    ?.value,
+  identifiers: queueEntry.patient?.identifiers as Identifer[],
+  queueComingFrom: queueEntry?.queueComingFrom?.name,
+});

package/src/triage/room/room.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { navigate } from '@openmrs/esm-framework';
+import { Button, Tile } from '@carbon/react';
+import { type Patient } from '../types';
+import styles from './room.scss';
+
+interface RoomProps {
+  locationUuid?: string;
+  name: string;
+  patients: Array<Patient>;
+}
+
+const Room: React.FC<RoomProps> = ({ name, locationUuid, patients }) => {
+  function openPatientChart(patientUuid: string) {
+    navigate({
+      to: `patient/${patientUuid}/chart`,
+    });
+  }
+  return (
+    <div className={styles.room}>
+      <h4 className={styles.roomName}>{name}</h4>
+
+      <div className={styles.container}>
+        {patients.map((patient) => (
+          <Tile key={patient.uuid}>
+            <h5>{patient.display}</h5>
+            <p className={styles.field}>Age: {patient.patient.person.age}</p>
+            <p className={styles.field}>Status: {patient.status.display}</p>
+            <Button onClick={() => openPatientChart(patient.patient.uuid)} size="sm" className={styles.button}>
+              Start
+            </Button>
+          </Tile>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Room;

package/src/triage/room/room.scss

@@ -0,0 +1,29 @@
+.container {
+    border: 1px solid #9e9e9e;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: fit-content;
+}
+
+.room {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 1rem;
+}
+
+.roomName {
+    margin-bottom: 0.5rem;
+    font-size: large;
+    font-weight: bold;
+}
+
+.field {
+    margin: 0.25rem 0 0;
+}
+
+.button {
+    margin-top: 0.5rem;
+}