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

package/src/service-queues/service-queue/stats/stat-card/stat-card.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './stat-card.component.scss';
+
+interface StatCardProps {
+  title: string;
+  count: number;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ title, count }) => {
+  if (!title) {
+    return <></>;
+  }
+  return (
+    <div className={styles.statsCard}>
+      <div className={styles.statsCardHeader}>
+        <h5>{title}</h5>
+        <h1>{count}</h1>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;

package/src/service-queues/service-queue/stats/stat-details/stat-details.component.scss

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

package/src/service-queues/service-queue/stats/stat-details/stat-details.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './stat-details.component.scss';
+import { type QueueEntryResult } from '../../../../registry/types';
+import StatCard from '../stat-card/stat-card.component';
+
+interface StatDetailsProps {
+  queueEntries: QueueEntryResult[];
+}
+
+const StatDetails: React.FC<StatDetailsProps> = ({ queueEntries }) => {
+  if (!queueEntries) {
+    return 'No queue entry records';
+  }
+  const getCategoryTotal = (categories: string[]) => {
+    let total = 0;
+    queueEntries.forEach((q) => {
+      if (categories.includes(q.status)) {
+        total += 1;
+      }
+    });
+    return total;
+  };
+  const patientsInWaiting = getCategoryTotal(['WAITING']);
+  const patientsAttendedTo = getCategoryTotal(['IN SERVICE', 'COMPLETED']);
+
+  return (
+    <div className={styles.statsSection}>
+      <StatCard title="Patients in waiting" count={patientsInWaiting ?? 0} />
+      <StatCard title="Patients attended to" count={patientsAttendedTo ?? 0} />
+    </div>
+  );
+};
+
+export default StatDetails;

package/src/service-queues/service-queue.scss

@@ -0,0 +1,27 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.menuItem {
+  max-width: none;
+}
+
+.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: 25rem;
+  max-width: 35rem;
+}
+
+.cardHeaderStack {
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}

package/src/service-queues/service-queue.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+import React, { useMemo } from 'react';
+import MetricsContainer from './metrics/metrics-container.component';
+import QueueRoom from './queue-room.component';
+import { type QueueEntryAction } from '../config-schema';
+
+interface ServiceQueueProps {
+  isTriage: boolean;
+}
+const ServiceQueue: React.FC<ServiceQueueProps> = ({ isTriage }) => {
+  const roomParams = useMemo(() => {
+    return isTriage ? {
+      serviceUuid: 'triage-service-uuid',
+      overflowMenuKeys: ['call', 'transition', 'edit', 'remove', 'undo'] as QueueEntryAction[],
+      defaultMenuKey: 'call' as QueueEntryAction
+    } : {
+      serviceUuid: '7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2',
+      overflowMenuKeys: ['move', 'transition', 'signOff', 'edit', 'remove', 'undo'] as QueueEntryAction[],
+      defaultMenuKey: 'move' as QueueEntryAction
+    };
+  }
+    , [isTriage]);
+
+  return (<>
+    <MetricsContainer />
+    <QueueRoom serviceUuid={roomParams.serviceUuid} overflowMenuKeys={roomParams.overflowMenuKeys} defaultMenuKey={roomParams.defaultMenuKey}/>
+  </>
+  );
+};
+
+export default ServiceQueue;

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

@@ -0,0 +1,177 @@
+import { type Encounter, formatDate, openmrsFetch, parseDate, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import {
+  type QueueEntryResponse,
+  type Identifer,
+  type MappedEncounter,
+  type MappedVisitQueueEntry,
+  type QueueEntry,
+} from '../types/types';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import { type QueueEntryResult } from '../registry/types';
+import { getEtlBaseUrl } from '../shared/utils/get-base-url';
+
+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,
+});
+
+export function useQueueEntries(queue: string) {
+  // const queueEntryBaseUrl = `${restBaseUrl}/queue-entry?` +
+  // `isEnded=false&service=7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2&location=18c343eb-b353-462a-9139-b16606e6b6c2`;
+  const queueEntryBaseUrl = `${restBaseUrl}/queue-entry?` + `isEnded=false&queue=${queue}`;
+  const {
+    data,
+    isValidating,
+    isLoading,
+    error: pageError,
+  } = useSWR<QueueEntryResponse, Error>(queueEntryBaseUrl, openmrsFetch);
+
+  const queueEntries = useMemo(() => data, [data]);
+
+  return {
+    queueEntries,
+    isLoading,
+  };
+}
+
+export function useQueues(service: string = '7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2') {
+  const currentUserSession = useSession();
+  const location = currentUserSession?.sessionLocation?.uuid;
+
+  const customRepresentation = 'custom:(uuid,display,name)';
+
+  const apiUrl =
+    `${restBaseUrl}/queue?&service=${service}` +
+    (location ? `&location=${location}` : '') +
+    `&v=${customRepresentation}`;
+
+  const { data, isLoading } = useSWR<
+    {
+      data: {
+        results: Array<{
+          uuid: string;
+          display: string;
+          name: string;
+        }>;
+      };
+    },
+    Error
+  >(service ? apiUrl : null, openmrsFetch);
+
+  return { data, isLoading };
+}
+
+export function useQueue(service: string = '7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2') {
+  const currentUserSession = useSession();
+  const location = currentUserSession?.sessionLocation?.uuid;
+
+  const customRepresentation = 'custom:(uuid,display,name)';
+
+  const apiUrl =
+    `${restBaseUrl}/queue?&service=${service}` +
+    (location ? `&location=${location}` : '') +
+    `&v=${customRepresentation}`;
+
+  const { data, isLoading } = useSWR<
+    {
+      data: {
+        results: Array<{
+          uuid: string;
+          display: string;
+          name: string;
+        }>;
+      };
+    },
+    Error
+  >(service ? apiUrl : null, openmrsFetch);
+
+  return { data, isLoading };
+}
+
+export async function getServiceQueueByLocationUuid(
+  serviceUuid: string,
+  locationUuid: string,
+): Promise<QueueEntryResult[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const queueEntryUrl = `${etlBaseUrl}/queue-entry`;
+  const params = {
+    locationUuid: locationUuid,
+    serviceUuid: serviceUuid,
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const response = await openmrsFetch(`${queueEntryUrl}?${queryString}`);
+  const result = await response.json();
+  return result.data;
+}
+
+export async function closeQueueEntry(entryQueueUuid: string): Promise<QueueEntryResult[]> {
+  const queueEntryUrl = `${restBaseUrl}/queue-entry/${entryQueueUuid}`;
+  const params = {
+    endedAt: new Date().toISOString(),
+  };
+  const response = await openmrsFetch(queueEntryUrl, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  });
+  const result = await response.json();
+  return result.data;
+}

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

@@ -0,0 +1,28 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type ServiceQueue } from '../registry/types';
+import { type TransitionQueueEntryDto } from '../types/types';
+
+export async function getServiceQueueByLocation(locationUuid: string): Promise<ServiceQueue[]> {
+  const params = {
+    v: 'custom:(uuid,name)',
+    location: locationUuid,
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const queueEntryUrl = `${restBaseUrl}/queue`;
+  const response = await openmrsFetch(`${queueEntryUrl}?${queryString}`);
+  const result = await response.json();
+  return result.results;
+}
+
+export async function transitionQueueEntry(transitionQueueEntryDto: TransitionQueueEntryDto) {
+  const url = `${restBaseUrl}/queue-entry/transition`;
+  const resp = await openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(transitionQueueEntryDto),
+  });
+  const res = await resp.json();
+  return res;
+}

package/src/shared/constants/civil-status.ts

@@ -0,0 +1,29 @@
+const SEPARATED_UUID = 'a899aba0-1350-11df-a1f1-0026b9348838';
+const NEVER_MARRIED_UUID = 'a899ac7c-1350-11df-a1f1-0026b9348838';
+const DIVORCED_UUID = 'a899ad58-1350-11df-a1f1-0026b9348838';
+const WIDOWED_UUID = 'a899ae34-1350-11df-a1f1-0026b9348838';
+const MARRIED_UUID = 'a8aa76b0-1350-11df-a1f1-0026b9348838';
+const LIVING_WITH_PARTNER_UUID = 'a899af10-1350-11df-a1f1-0026b9348838';
+const FRIEND_UUID = 'a8aaf07c-1350-11df-a1f1-0026b9348838';
+const NOT_APPLICABLE_UUID = 'a89ad3a4-1350-11df-a1f1-0026b9348838';
+const POLYGAMOUS_UUID = 'a8b03712-1350-11df-a1f1-0026b9348838';
+const PARTNER_UUID = 'a89ebd3e-1350-11df-a1f1-0026b9348838';
+const CASUAL_SEX_PARTNER_UUID = '7831f002-331d-4f07-bf91-6bb65cd31050';
+const OTHER_UUID = 'a8aaf3e2-1350-11df-a1f1-0026b9348838';
+const SINGLE_UUID = 'a899ac7c-1350-11df-a1f1-0026b9348838';
+
+export const CivilStatusUids = {
+  SEPARATED_UUID,
+  NEVER_MARRIED_UUID,
+  DIVORCED_UUID,
+  WIDOWED_UUID,
+  MARRIED_UUID,
+  LIVING_WITH_PARTNER_UUID,
+  FRIEND_UUID,
+  NOT_APPLICABLE_UUID,
+  POLYGAMOUS_UUID,
+  PARTNER_UUID,
+  CASUAL_SEX_PARTNER_UUID,
+  SINGLE_UUID,
+  OTHER_UUID,
+};

package/src/shared/constants/concepts.ts

@@ -0,0 +1,30 @@
+const NORMAL_PRIORITY_UUID = 'bbd99c12-67e9-4381-8b4c-1f231e86f8e2';
+const EMERGENCY_PRIORITY_UUID = '8e86ff12-ec83-41e8-a534-bb410739d880';
+
+const WAITING_UUID = '89d01aa5-0ab0-4626-934b-37766b4cd779';
+const IN_SERVICE_UUID = 'f9cf5768-508f-45de-8d40-eaf6ea3f3b02';
+const COMPLETED_UUID = 'a89c1ef8-1350-11df-a1f1-0026b9348838';
+
+const TRIAGE_SERVICE_UUID = '2d4472e2-d7ab-4430-8e0e-a9ffcd809bf4';
+const CLINICAL_CONSULTATION_SERVICE_UUID = '7f7ec7ad-cdd7-4ed9-bc2e-5c5bd9f065b2';
+
+const MCH_TRIAGE_SERVICE_UUID = '7e4452bf-f9b7-4977-a21f-1c8b94831bac';
+const MCH_CLINICAL_CONSULTATION_SERVICE_UUID = '0026e273-5f8c-46b5-8bb4-0d8301d50321';
+
+export const QUEUE_PRIORITIES_UUIDS = {
+  NORMAL_PRIORITY_UUID,
+  EMERGENCY_PRIORITY_UUID,
+};
+
+export const QUEUE_STATUS_UUIDS = {
+  WAITING_UUID,
+  IN_SERVICE_UUID,
+  COMPLETED_UUID,
+};
+
+export const QUEUE_SERVICE_UUIDS = {
+  TRIAGE_SERVICE_UUID,
+  CLINICAL_CONSULTATION_SERVICE_UUID,
+  MCH_TRIAGE_SERVICE_UUID,
+  MCH_CLINICAL_CONSULTATION_SERVICE_UUID,
+};

package/src/shared/constants/index.ts

@@ -0,0 +1 @@
+

package/src/shared/constants/person-attributes.ts

@@ -0,0 +1,33 @@
+const CONTACT_PHONE_NUMBER_UUID = '72a759a8-1359-11df-a1f1-0026b9348838';
+const CITIZENSHIP_UUID = '8d871afc-c2cc-11de-8d13-0010c6dffd0f';
+const CONTACT_EMAIL_ADDRESS_UUID = '2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa';
+const ALTERNATIVE_CONTACT_PHONE_NUMBER_UUID = 'c725f524-c14a-4468-ac19-4a0e6661c930';
+const KRA_PIN_UUID = 'ae683747-b3fc-4e5c-bad3-c3be743b248f';
+const CIVIL_STATUS_UUID = '8d871f2a-c2cc-11de-8d13-0010c6dffd0f';
+const CLIENT_REGISTRY_ID_UUID = 'e068e02b-faac-4baf-bd58-fe6e0c29a81f';
+const PLACE_OF_BIRTH_UUID = '8d8718c2-c2cc-11de-8d13-0010c6dffd0f';
+const EMAIL_UUID = '2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa';
+const HIGHEST_LEVEL_OF_EDUCATION_UUID = '352b0d51-63c6-47d0-a295-156bebee4fd5';
+const RELIGION_UUID = '4ae16101-cfba-4c08-9c9c-d848e6f609aa';
+const OCCUPATION_UUID = '9e86409f-9c20-42d0-aeb3-f29a4ca0a7a0';
+const NEXT_OF_KIN_CONTACT_PHONE_NUMBER_UUID = 'a657a4f1-9c0f-444b-a1fd-445bb91dd12d';
+const NEXT_OF_KIN_NAME_UUID = '72a75bec-1359-11df-a1f1-0026b9348838';
+const NEXT_OF_KIN_RELATIONSHIP_UUID = '5730994e-c267-426b-87b6-c152b606973d';
+
+export const PersonAttributeTypeUuids = {
+  CONTACT_PHONE_NUMBER_UUID,
+  CITIZENSHIP_UUID,
+  CONTACT_EMAIL_ADDRESS_UUID,
+  ALTERNATIVE_CONTACT_PHONE_NUMBER_UUID,
+  KRA_PIN_UUID,
+  CIVIL_STATUS_UUID,
+  CLIENT_REGISTRY_ID_UUID,
+  PLACE_OF_BIRTH_UUID,
+  EMAIL_UUID,
+  HIGHEST_LEVEL_OF_EDUCATION_UUID,
+  RELIGION_UUID,
+  OCCUPATION_UUID,
+  NEXT_OF_KIN_CONTACT_PHONE_NUMBER_UUID,
+  NEXT_OF_KIN_NAME_UUID,
+  NEXT_OF_KIN_RELATIONSHIP_UUID,
+};

package/src/shared/services/location.resource.ts

@@ -0,0 +1,9 @@
+import { type Location, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export async function getLocationByUuid(locationUuid: string): Promise<Location> {
+  const locationBaseUrl = `${restBaseUrl}/location`;
+  const locationUrl = `${locationBaseUrl}/${locationUuid}`;
+  const resp = await openmrsFetch(locationUrl);
+  const data = await resp.json();
+  return data ?? null;
+}

package/src/shared/ui/otp-input/otp-input.component.scss

@@ -0,0 +1,14 @@
+.otpDataInput{
+  width: 3rem;
+  height: 3rem;
+  text-align: center;
+}
+.otpInputContainer{
+   display: flex;
+   flex-direction: row;
+   column-gap: 5px;
+}
+.otpDataInputContainer{
+    width: 4rem;
+    height: 4rem;
+}

package/src/shared/ui/otp-input/otp-input.component.tsx

@@ -0,0 +1,90 @@
+import React, { useRef, useState } from 'react';
+import { TextInput } from '@carbon/react';
+import styles from './otp-input.component.scss';
+
+interface OTPInputProps {
+  onChange: (otp: string) => void;
+  otpLength: number;
+}
+
+const OTPInput: React.FC<OTPInputProps> = ({ onChange, otpLength }) => {
+  const [otp, setOtp] = useState(Array(otpLength).fill(''));
+  const inputsRef = useRef([]);
+
+  if (!otpLength) {
+    return <>OTP Length not defined</>;
+  }
+
+  const focusInput = (index) => {
+    if (inputsRef.current[index]) {
+      inputsRef.current[index].focus();
+    }
+  };
+
+  const handleChange = (value, index) => {
+    if (!/^\d?$/.test(value)) return;
+
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+
+    if (value && index < otpLength - 1) {
+      focusInput(index + 1);
+    }
+
+    onChange?.(newOtp.join(''));
+  };
+
+  const handleKeyDown = (e, index) => {
+    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+      focusInput(index - 1);
+    }
+  };
+
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, otpLength);
+
+    if (!pasted) return;
+
+    const newOtp = [...otp];
+    pasted.split('').forEach((digit, i) => {
+      newOtp[i] = digit;
+    });
+
+    setOtp(newOtp);
+    onChange?.(newOtp.join(''));
+    focusInput(pasted.length - 1);
+  };
+
+  return (
+    <div className={styles.otpInputContainer} onPaste={handlePaste}>
+      {otp.map((digit, index) => (
+        <div className={styles.otpDataInputContainer}>
+          <TextInput
+            className={styles.otpDataInput}
+            key={index}
+            id={`otp-${index}`}
+            value={digit}
+            labelText=""
+            hideLabel
+            maxLength={1}
+            inputMode="numeric"
+            pattern="[0-9]*"
+            ref={(el) => (inputsRef.current[index] = el)}
+            onChange={(e) => handleChange(e.target.value, index)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            style={{
+              height: '4rem',
+              width: '4rem',
+              borderStyle: 'solid grey',
+              backgroundColor: '#e5ebf7',
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OTPInput;

package/src/shared/ui/timer/timer.component.scss

@@ -0,0 +1,5 @@
+.timerData{
+   height: 3rem;
+   font-size: 30px;
+   color: #0055a5;
+}

package/src/shared/ui/timer/timer.component.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import styles from './timer.component.scss';
+
+interface TimerProps {
+  durationInSeconds: number;
+  resetTimer: () => void;
+  onTimeUp: () => void;
+}
+const Timer: React.FC<TimerProps> = ({ durationInSeconds, resetTimer, onTimeUp }) => {
+  const [timeLeft, setTimeLeft] = useState(durationInSeconds);
+
+  useEffect(() => {
+    if (timeLeft <= 0) {
+      onTimeUp?.();
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setTimeLeft((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [timeLeft]);
+
+  const convertToMinsAndSeconds = (timeInSeconds: number) => {
+    const min = Math.floor(timeInSeconds / 60);
+    const seconds = timeInSeconds % 60;
+    const formatedMin = min > 9 ? min : `0${min}`;
+    const formattedSec = seconds > 9 ? seconds : `0${seconds}`;
+    return `${formatedMin}:${formattedSec}`;
+  };
+  return (
+    <>
+      <div className={styles.timerData}>
+        <b>{convertToMinsAndSeconds(timeLeft)}</b>
+      </div>
+    </>
+  );
+};
+export default Timer;

package/src/shared/utils/get-base-url.ts

@@ -0,0 +1,17 @@
+import { getConfig } from '@openmrs/esm-framework';
+import { moduleName } from '../..';
+
+export async function getSubDomainUrl() {
+  const { subDomainUrl } = await getConfig(moduleName);
+  return subDomainUrl ?? null;
+}
+
+export async function getEtlBaseUrl() {
+  const { etlBaseUrl } = await getConfig(moduleName);
+  return etlBaseUrl ?? null;
+}
+
+export async function getHieBaseUrl() {
+  const { hieBaseUrl } = await getConfig(moduleName);
+  return hieBaseUrl ?? null;
+}