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

package/src/registry/utils/mask-data.ts

@@ -0,0 +1,21 @@
+export const maskValue = (value: string): string => {
+  let arrValue = value.split('');
+  for (let i = 0; i < value.length; i++) {
+    if (i % 2 === 0) {
+      arrValue[i] = '*';
+    }
+  }
+  const maskedValue = arrValue.join('');
+  return maskedValue;
+};
+
+export const maskExceptFirstAndLast = (value: string): string => {
+  let arrValue = value.split('');
+  for (let i = 0; i < value.length; i++) {
+    if (!(i == 0 || i === value.length - 1)) {
+      arrValue[i] = '*';
+    }
+  }
+  const maskedValue = arrValue.join('');
+  return maskedValue;
+};

package/src/resources/hie-amrs-automatic-registration.service.ts

@@ -0,0 +1,16 @@
+import { type Patient } from '@openmrs/esm-framework';
+import { type HieClient } from '../registry/types';
+import { generateAmrsPersonPayload } from '../registry/utils/hie-client-adapter';
+import { createPatient, generatePatientIdentifiers } from './patient-resource';
+
+export async function registerHieClientInAmrs(client: HieClient, identifierLocation: string): Promise<Patient> {
+  const createPersonPayload = generateAmrsPersonPayload(client);
+  const identifiers = await generatePatientIdentifiers(identifierLocation, client);
+  const resp = await createPatient({
+    person: createPersonPayload,
+    identifiers: identifiers,
+  });
+
+  const res = await resp.json();
+  return res;
+}

package/src/resources/identifier-types.ts

@@ -0,0 +1,27 @@
+const HOUSE_HOLD_NUMBER_UUID = 'bb74b20e-dcee-4f59-bdf1-2dffc3abf106';
+const SHA_UUID = 'cf5362b2-8049-4442-b3c6-36f870e320cb';
+const CLIENT_REGISTRY_NO_UUID = 'e88dc246-3614-4ee3-8141-1f2a83054e72';
+const NATIONAL_ID_UUID = '58a47054-1359-11df-a1f1-0026b9348838';
+const PROVIDER_NATIONAL_ID_UUID = '4550df92-c684-4597-8ab8-d6b10eabdcfb';
+const REFUGEE_ID_UUID = '465e81af-8d69-47e9-9127-53a94adc75fb';
+const MANDATE_NUMBER_UUID = 'aae2d097-20ba-43ca-9b71-fd8296068f39';
+const ALIEN_ID_UUID = '12f5b147-3403-4a73-913d-7ded9ffec094';
+const TEMPORARY_DEPENDANT_ID_UUID = 'a3d34214-93e8-4faf-bf4d-0272eee079eb';
+const AMRS_UNIVERSAL_ID_UUID = '58a4732e-1359-11df-a1f1-0026b9348838';
+const UPI_NUMBER_UUID = 'cba702b9-4664-4b43-83f1-9ab473cbd64d';
+const BIRTH_CERTIFICATE_NUMBER_UUID = '7924e13b-131a-4da8-8efa-e294184a1b0d';
+
+export const IdentifierTypesUuids = {
+  HOUSE_HOLD_NUMBER_UUID,
+  SHA_UUID,
+  CLIENT_REGISTRY_NO_UUID,
+  NATIONAL_ID_UUID,
+  PROVIDER_NATIONAL_ID_UUID,
+  REFUGEE_ID_UUID,
+  MANDATE_NUMBER_UUID,
+  ALIEN_ID_UUID,
+  TEMPORARY_DEPENDANT_ID_UUID,
+  AMRS_UNIVERSAL_ID_UUID,
+  UPI_NUMBER_UUID,
+  BIRTH_CERTIFICATE_NUMBER_UUID,
+};

package/src/resources/patient-resource.ts

@@ -0,0 +1,62 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type HieClient, type CreatePatientDto, HieIdentificationType } from '../registry/types';
+import { IdentifierTypesUuids } from './identifier-types';
+import { getAmrsIdentifierTypeUuid } from '../registry/utils/hie-client-adapter';
+import { getSubDomainUrl } from '../shared/utils/get-base-url';
+
+export async function createPatient(payload: CreatePatientDto) {
+  return await openmrsFetch(`${restBaseUrl}/patient`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export const generatePatientIdentifiers = async (identifierLocation: string, client: HieClient) => {
+  const amrsUniverSalId = await generateAmrsUniversalIdentifier();
+  const identifiers = generateAmrsCreatePatientIdentifiersPayload(client, identifierLocation);
+  identifiers.push({
+    identifierType: IdentifierTypesUuids.AMRS_UNIVERSAL_ID_UUID,
+    identifier: amrsUniverSalId,
+    location: identifierLocation,
+    preferred: true,
+  });
+  return identifiers;
+};
+
+export function generateAmrsCreatePatientIdentifiersPayload(hieClient: HieClient, identifierLocation: string) {
+  const identifiers = [];
+  // add CR number
+  identifiers.push({
+    identifierType: getAmrsIdentifierTypeUuid(HieIdentificationType.Cr),
+    identifier: hieClient.id,
+    location: identifierLocation,
+  });
+
+  // add main identifier
+  identifiers.push({
+    identifierType: getAmrsIdentifierTypeUuid(hieClient.identification_type),
+    identifier: hieClient.identification_number,
+    location: identifierLocation,
+  });
+  return identifiers;
+}
+
+export async function generateAmrsUniversalIdentifier() {
+  const subDomainUrl = await getSubDomainUrl();
+  const abortController = new AbortController();
+  const resp = await openmrsFetch(`${subDomainUrl}/amrs-id-generator/generateidentifier`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: {
+      user: 1,
+    },
+    signal: abortController.signal,
+  });
+  const data = await resp.json();
+  return data['identifier'] ?? '';
+}

package/src/resources/patient-search.resource.ts

@@ -0,0 +1,22 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type PatientSearchResponse } from '../registry/types';
+
+export async function searchPatientByCrNumber<T>(cr_id: string): Promise<PatientSearchResponse> {
+  const url = `${restBaseUrl}/patient`;
+  const params = {
+    q: cr_id,
+    v: 'full',
+    includeDead: 'true',
+    limit: '10',
+    totalCount: 'true',
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const response = await openmrsFetch(`${url}?${queryString}`);
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json();
+}

package/src/resources/queue.resource.ts

@@ -0,0 +1,60 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type QueueEntryDto, type ServiceQueueApiResponse } from '../registry/types';
+import { getLocationByUuid } from '../shared/services/location.resource';
+
+export async function fetchServiceQueuesByLocationUuid<T>(locationUuid: string): Promise<ServiceQueueApiResponse> {
+  const url = `${restBaseUrl}/queue`;
+  const params = {
+    v: 'custom:(uuid,display,name,description,service:(uuid,display),allowedPriorities:(uuid,display),allowedStatuses:(uuid,display),location:(uuid,display))',
+    location: locationUuid,
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const response = await openmrsFetch(`${url}?${queryString}`);
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json();
+}
+
+export async function createQueueEntry(createQueueEntryDto: QueueEntryDto) {
+  const url = `${restBaseUrl}/visit-queue-entry`;
+  const response = await openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(createQueueEntryDto),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json();
+}
+
+export async function getFacilityServiceQueues(locationUuid: string) {
+  const currentLocation = await getLocationByUuid(locationUuid);
+  if (!currentLocation) return;
+  const parentLocation = currentLocation.parentLocation;
+  //get child locations
+  if (!parentLocation) return;
+  const parentLocationDetail = await getLocationByUuid(parentLocation.uuid);
+  const childLocations = parentLocationDetail.childLocations ?? [];
+  const childLocationUuids =
+    childLocations.map((c) => {
+      return c.uuid;
+    }) ?? [];
+  let sqs = [];
+  if (childLocationUuids.length > 0) {
+    for (let i = 0; i < childLocationUuids.length; i++) {
+      const s = await fetchServiceQueuesByLocationUuid(childLocationUuids[i]);
+      sqs = [...sqs, ...s.results];
+    }
+  }
+  return sqs;
+}

package/src/resources/visit.resource.ts

@@ -0,0 +1,38 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { EndVisitDto, type CreateVisitDto } from '../registry/types';
+
+export async function createVisit(createVisitDto: CreateVisitDto) {
+  const url = `${restBaseUrl}/visit`;
+  const response = await openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(createVisitDto),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json();
+}
+
+export async function endVisit(visitUuid: string, endVisitDto: EndVisitDto) {
+  const url = `${restBaseUrl}/visit/${visitUuid}`;
+  const response = await openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(endVisitDto),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json();
+}

package/src/root.component.tsx

@@ -1,38 +1,48 @@
-/**
- * From here, the application is pretty typical React, but with lots of
- * support from `@openmrs/esm-framework`. Check out `Greeter` to see
- * usage of the configuration system, and check out `PatientGetter` to
- * see data fetching using the OpenMRS FHIR API.
- *
- * Check out the Config docs:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- */
-
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Boxes } from './boxes/slot/boxes.component';
-import Greeter from './greeter/greeter.component';
-import PatientGetter from './patient-getter/patient-getter.component';
-import Resources from './resources/resources.component';
 import styles from './root.scss';
+import { useLeftNav, WorkspaceContainer } from '@openmrs/esm-framework';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import RegistryComponent from './registry/registry.component';
+import LeftPanel from './left-panel/left-panel.component';
+import Triage from './triage/triage.component';
+import LaboratoryComponent from './laboratory/laboratory.component';
+import AppointmentsComponent from './appointments/appointments.component';
+import PharmacyComponent from './pharmacy/pharmacy.component';
+import Consultation from './service-queues/consultation/consultation.component';
+import Dashboard from './dashboard/dashboard.component';
+import AccountingComponent from './accounting/accounting.component';
+import DailyBookings from './bookings/daily/daily-bookings.component';
+import MchTriage from './mch/queues/triage/mch-triage';
+import MchConsultation from './mch/queues/consultation/mch-consultation';
 
 const Root: React.FC = () => {
-  const { t } = useTranslation();
-
+  const spaBasePath = window.spaBase;
+  useLeftNav({
+    name: 'dha-workflow-slot',
+    basePath: spaBasePath,
+    mode: 'normal',
+  });
   return (
-    <div className={styles.container}>
-      <h3 className={styles.welcome}>{t('welcomeText', 'Welcome to the O3 Template app')}</h3>
-      <p className={styles.explainer}>
-        {t('explainer', 'The following examples demonstrate some key features of the O3 framework')}.
-      </p>
-      {/* Greeter: demonstrates the configuration system */}
-      <Greeter />
-      {/* Boxes: demonstrates the extension system */}
-      <Boxes />
-      {/* PatientGetter: demonstrates data fetching */}
-      <PatientGetter />
-      <Resources />
-    </div>
+    <BrowserRouter basename={`${window.spaBase}/home`}>
+      <LeftPanel />
+      <main className={styles.container}>
+        <Routes>
+          <Route path="dashboard" element={<Dashboard />} />
+          <Route path="registry" element={<RegistryComponent />} />
+          <Route path="consultation" element={<Consultation />} />
+          <Route path="triage" element={<Triage />} />
+          <Route path="laboratory" element={<LaboratoryComponent />} />
+          <Route path="pharmacy" element={<PharmacyComponent />} />
+          <Route path="appointments" element={<AppointmentsComponent />} />
+          <Route path="accounting" element={<AccountingComponent />} />
+          <Route path="bookings/daily" element={<DailyBookings />} />
+          <Route path="mch/triage" element={<MchTriage />} />
+          <Route path="mch/consultation" element={<MchConsultation />} />
+          <Route path="*" element={<RegistryComponent />} />
+        </Routes>
+      </main>
+      <WorkspaceContainer contextKey="home" />
+    </BrowserRouter>
   );
 };
 

package/src/root.scss

@@ -1,15 +1,11 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
-@use '@carbon/type';
 
 .container {
-  padding: layout.$spacing-07;
+  background-color: colors.$white-0;
+  height: calc(100vh - layout.$spacing-09);
 }
 
-.welcome {
-  @include type.type-style('heading-04');
-  margin: layout.$spacing-05 0;
-}
-
-.explainer {
-  margin-bottom: layout.$spacing-07;
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
 }

package/src/routes.json

@@ -1,19 +1,58 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {},
-   "extensions": [
+  "pages": [
+    {
+      "component": "root",
+      "route": "home",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
     {
       "component": "workflowRegistryLink",
       "name": "workflow-registry-link",
       "slot": "app-menu-slot",
       "online": true,
       "offline": true
+    },
+    {
+      "component": "navLinks",
+      "name": "side-nav-workflow-links",
+      "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
+    },
+      {
+      "name": "metrics-card-patients-in-waiting",
+      "component": "triageWaitingPatientsExtension",
+      "slot": "triage-metrics-slot",
+      "order": 1
+    },
+    {
+      "name": "metrics-card-patients-attended-to",
+      "component": "triageAttendedToPatientsExtension",
+      "slot": "triage-metrics-slot",
+      "order": 2
     }
   ],
-  "pages": [
+  "modals": [
     {
-      "component": "registry",
-      "route": "workflow"
+      "name": "sign-off-queue-entry-modal",
+      "component": "signOffModal"
     }
   ]
 }

package/src/service-queues/action-button.component.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@carbon/react";
+import { useLayoutType, isDesktop } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { useActionPropsByKey } from "../hooks/useActions";
+import { type QueueEntryAction } from "../config-schema";
+import { type QueueEntry } from "../types/types";
+
+export function ActionButton({ actionKey, queueEntry }: { actionKey: QueueEntryAction; queueEntry: QueueEntry }) {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const actionPropsByKey = useActionPropsByKey();
+
+  const actionProps = actionPropsByKey[actionKey];
+  if (!actionProps) {
+    console.error(`Service queue table configuration uses unknown action in 'action.buttons': ${actionKey}`);
+    return null;
+  }
+
+  if (actionProps.showIf && !actionProps.showIf(queueEntry)) {
+    return null;
+  }
+
+  return (
+    <Button
+      key={actionKey}
+      kind="ghost"
+      aria-label={t(actionProps.label, actionProps.text)}
+      onClick={() => actionProps.onClick(queueEntry)}
+      size={isDesktop(layout) ? 'sm' : 'lg'}>
+      {t(actionProps.label, actionProps.text)}
+    </Button>
+  );
+}

package/src/service-queues/action-overflow-menu-item.component.tsx

@@ -0,0 +1,34 @@
+import { OverflowMenuItem } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { type QueueEntryAction } from "../config-schema";
+import { useActionPropsByKey } from "../hooks/useActions";
+import { type QueueEntry } from "../types/types";
+import styles from './service-queue.scss';
+
+export function ActionOverflowMenuItem({ actionKey, queueEntry }: { actionKey: QueueEntryAction; queueEntry: QueueEntry }) {
+  const { t } = useTranslation();
+  const actionPropsByKey = useActionPropsByKey();
+
+  const actionProps = actionPropsByKey[actionKey];
+  if (!actionProps) {
+    console.error(`Service queue table configuration uses unknown action in 'action.overflowMenu': ${actionKey}`);
+    return null;
+  }
+
+  if (actionProps.showIf && !actionProps.showIf(queueEntry)) {
+    return null;
+  }
+
+  return (
+    <OverflowMenuItem
+      key={actionKey}
+      className={styles.menuItem}
+      aria-label={t(actionProps.label, actionProps.text)}
+      hasDivider
+      isDelete={actionProps.isDelete}
+      onClick={() => actionProps.onClick(queueEntry)}
+      itemText={t(actionProps.label, actionProps.text)}
+    />
+  );
+}

package/src/service-queues/consultation/consultation.component.scss

@@ -0,0 +1,7 @@
+.consultationLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 15px 15px;
+    row-gap: 15px;
+}

package/src/service-queues/consultation/consultation.component.tsx

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

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

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues.resource';
+import { type QueueEntryResult } from '../../../registry/types';
+
+export default function AttendedToPatientsExtension() {
+  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 attendedToPatientsCount = consultationQueueEntries?.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/service-queues/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>
+  );
+};