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

package/src/side-nav-menu/nav-link-config.ts

@@ -0,0 +1,82 @@
+export const navLinksConfig = [
+  {
+    to: 'dashboard',
+    title: 'Dashboard',
+  },
+  {
+    to: 'registry',
+    title: 'Registry',
+  },
+  {
+    to: 'appointments',
+    title: 'Appointments',
+  },
+  {
+    to: 'triage',
+    title: 'Triage',
+  },
+  {
+    to: 'consultation',
+    title: 'Consultation',
+  },
+  {
+    to: 'mch',
+    title: 'MCH',
+    children: [
+      {
+        to: 'triage',
+        title: 'Triage',
+      },
+      {
+        to: 'consultation',
+        title: 'Consultation',
+      },
+    ],
+  },
+  {
+    to: 'admissions',
+    title: 'Admissions',
+  },
+  {
+    to: 'procedures',
+    title: 'Procedures',
+  },
+  {
+    to: 'radiology-imaging',
+    title: 'Radiology and Imaging',
+  },
+  {
+    to: 'laboratory',
+    title: 'Laboratory',
+  },
+  {
+    to: 'pharmacy',
+    title: 'Pharmacy',
+  },
+  {
+    to: 'mortuary',
+    title: 'Mortuary',
+  },
+  {
+    to: 'accounting',
+    title: 'Accounting',
+  },
+  {
+    to: 'registers',
+    title: 'Registers',
+  },
+  {
+    to: 'reports',
+    title: 'Reports',
+  },
+  {
+    to: 'bookings',
+    title: 'Bookings',
+    children: [
+      {
+        to: 'daily',
+        title: 'Daily',
+      },
+    ],
+  },
+];

package/src/side-nav-menu/nav-links.tsx

@@ -1,20 +1,40 @@
-import { SideNavMenuItem } from '@carbon/react';
 import React from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { navLinksConfig } from './nav-link-config';
+import { SideNavMenu } from '@carbon/react';
 
 interface NavLinksProps {}
 const NavLinks: React.FC<NavLinksProps> = () => {
   return (
     <>
-      <SideNavMenuItem href="consultation/dashboard">Dashboard</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Registration</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Appointments</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Triage</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Consultation</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Laboratory</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Bookings</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Reports</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Registers</SideNavMenuItem>
-      <SideNavMenuItem href="consultation/registry">Appointments</SideNavMenuItem>
+      {navLinksConfig.map((n) => {
+        if (n.children && n.children.length > 0) {
+          return (
+            <SideNavMenu title={n.title}>
+              {n.children.map((c) => {
+                return (
+                  <ConfigurableLink
+                    to={`${window.getOpenmrsSpaBase()}home/${n.to}/${c.to}`}
+                    className={classNames('cds--side-nav__link', '')}
+                  >
+                    {c.title}
+                  </ConfigurableLink>
+                );
+              })}
+            </SideNavMenu>
+          );
+        } else {
+          return (
+            <ConfigurableLink
+              to={`${window.getOpenmrsSpaBase()}home/${n.to}`}
+              className={classNames('cds--side-nav__link', '')}
+            >
+              {n.title}
+            </ConfigurableLink>
+          );
+        }
+      })}
     </>
   );
 };

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../service-queues/metrics/metrics-cards/metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues/service-queues.resource';
+import { type QueueEntryResult } from '../../registry/types';
+
+export default function TriageAttendedToPatientsExtension() {
+  const { t } = useTranslation();
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
+  useEffect(() => {
+    getTriageEntryQueues();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+
+  const attendedToPatientsCount = triageQueueEntries?.filter((p) => p.status === 'COMPLETED').length ?? 0;
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsAttendedTo', 'Patients attended to')} />
+      <MetricsCardBody>
+        <MetricsCardItem
+          label={t('patients', 'Patients')}
+          value={attendedToPatientsCount ? attendedToPatientsCount : '--'}
+        />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

package/src/triage/metrics/metrics.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/triage/metrics/triage-metrics.component.tsx

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

package/src/triage/metrics/waiting-patients.extension.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../service-queues/metrics/metrics-cards/metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues/service-queues.resource';
+import { type QueueEntryResult } from '../../registry/types';
+
+export default function TriageWaitingPatientsExtension() {
+  const { t } = useTranslation();
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
+  useEffect(() => {
+    getTriageEntryQueues();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+
+  const waitingPatientsCount = triageQueueEntries?.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/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;
+}

package/src/triage/triage.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ServiceQueueComponent from '../service-queues/service-queue/service-queue.component';
+import { QUEUE_SERVICE_UUIDS } from '../shared/constants/concepts';
+
+interface TriageProps {}
+const Triage: React.FC<TriageProps> = () => {
+  return (
+    <>
+      <div>
+        <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID} title="Triage" />
+      </div>
+    </>
+  );
+};
+export default Triage;

package/src/triage/triage.resource.ts

@@ -0,0 +1,19 @@
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+import { type Patient } from './types';
+export default function useTriagePatients(locationUuid: string) {
+  const { data, error, isLoading } = useSWR(
+    `${restBaseUrl}/queue-entry?v=custom:(uuid,display,queue:(display,uuid,location:(display,uuid)),status:(display),patient:(uuid,person:(gender,age)))&totalCount=true&isEnded=false&location=${locationUuid}`,
+    (url: string) =>
+      openmrsFetch<{
+        results: Array<Patient>;
+      }>(url).then((res) => res.data.results),
+  );
+
+  return {
+    patients: data,
+    isLoading,
+    isError: error,
+  };
+}

package/src/triage/types.ts

@@ -0,0 +1,16 @@
+export interface Patient {
+  uuid: string;
+  middle_name: string;
+  given_name: string;
+  family_name: string;
+  queue_room: string;
+  status: string | number;
+  patient_name: string;
+  patient_uuid: string;
+  priority: string | number;
+}
+
+export interface Room {
+  name: string;
+  patients: Patient[];
+}

package/src/types/types.ts

@@ -0,0 +1,128 @@
+import {
+  type Visit,
+  type Concept,
+  type Patient,
+  type OpenmrsResource,
+  type Obs,
+  type FetchResponse,
+} from '@openmrs/esm-framework';
+
+export interface QueueEntry {
+  uuid: string;
+  display: string;
+  endedAt: string;
+  locationWaitingFor: Location;
+  patient: Patient;
+  priority: Concept;
+  priorityComment: string | null;
+  providerWaitingFor: Provider;
+  queue: Queue;
+  startedAt: string;
+  status: Concept;
+  visit: Visit;
+  sortWeight: number;
+  queueComingFrom: Queue;
+  previousQueueEntry: QueueEntry;
+}
+
+export interface Provider {
+  uuid: string;
+  display: string;
+  comments: string;
+  response?: string;
+  person: OpenmrsResource;
+  location: string;
+  serviceType: string;
+}
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: Location;
+  service: Concept;
+  allowedPriorities: Array<Concept>;
+  allowedStatuses: Array<Concept>;
+}
+
+export interface Identifer {
+  identifier: string;
+  display: string;
+  uuid: string;
+  identifierType: {
+    uuid: string;
+    display: string;
+  };
+}
+
+interface Encounter {
+  diagnoses?: Array<any>;
+  encounterDatetime?: string;
+  encounterProviders?: Array<{ provider?: { person?: { display?: string } } }>;
+  encounterType?: { display: string; uuid: string };
+  obs?: Array<Obs>;
+  uuid: string;
+  voided?: boolean;
+}
+
+export interface MappedEncounter extends Omit<Encounter, 'encounterType' | 'provider'> {
+  encounterType: string;
+  provider: string;
+}
+
+export interface MappedVisitQueueEntry {
+  id: string;
+  encounters: Array<MappedEncounter>;
+  name: string;
+  patientAge: string;
+  patientDob: string;
+  patientGender: string;
+  patientUuid: string;
+  queue: Queue;
+  priority: Concept;
+  priorityComment: string;
+  status: Concept;
+  startedAt: Date;
+  endedAt: Date;
+  visitType: string;
+  visitUuid: string;
+  visitTypeUuid: string;
+  queueUuid: string;
+  queueEntryUuid: string;
+  queueLocation: string;
+  sortWeight: number;
+  visitQueueNumber: string;
+  identifiers: Array<Identifer>;
+  queueComingFrom: string;
+}
+
+export type QueueEntryResponse = FetchResponse<{
+  results: Array<QueueEntry>;
+  links: Array<{
+    rel: 'prev' | 'next';
+    uri: string;
+  }>;
+  totalCount: number;
+}>;
+
+export type TransitionQueueEntryDto = {
+  queueEntryToTransition: string;
+  newQueue?: string;
+  newStatus?: string;
+  newPriority?: string;
+  newPriorityComment?: string;
+};
+
+export type TagColor = 'green' | 'gray' | 'blue' | 'red';
+
+export enum QueueEntryStatus {
+  Completed = 'COMPLETED',
+  Waiting = 'WAITING',
+  InService = 'IN SERVICE',
+}
+
+export enum QueueEntryPriority {
+  Emergency = 'EMERGENCY',
+  Normal = 'NORMAL',
+}