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

package/src/bookings/types/index.ts

@@ -0,0 +1,68 @@
+export type BookingFilter = {
+  startDate: string;
+  department: string;
+  locationUuids: string;
+};
+
+export type BookingDto = BookingFilter & {
+  startIndex: string;
+  limit: string;
+};
+
+export type DailyBookingsResult = {
+  ccc_number: string;
+  ovcid_id: string;
+  upi_number: string;
+  program: string;
+  rtc_date: string;
+  med_pick_up_date: string;
+  arv_first_regimen_start_date: string;
+  hiv_disclosure_status: string;
+  height: number;
+  weight: number;
+  stage: number;
+  patient_categorization: string;
+  service_delivery_model: string;
+  dsd_model: string;
+  cd4_date: string;
+  cd4_results: number;
+  patient_uuid: string;
+  gender: string;
+  birthdate: string;
+  age: number;
+  person_name: string;
+  identifiers: string;
+  phone_number: string;
+  latest_rtc_date: string;
+  latest_vl: number;
+  vl_category: string;
+  latest_vl_date: string;
+  last_appointment: string;
+  visit_type: string;
+  cur_meds: string;
+  previous_vl: number;
+  previous_vl_date: string;
+  nearest_center: string;
+  covid_19_vaccination_status: string;
+  sms_consent_provided: string;
+  sms_receive_time: string;
+  sms_delivery_status: string;
+  tb_screening_date: string;
+  patient_category: string;
+  tb_screening_result: string;
+  cervical_screening_date: string;
+  cervical_screening_method: string;
+  cervical_screening_result: string;
+};
+
+export type DailyBookingsReponse = {
+  schemas: any;
+  sqlQuery: string;
+  result: DailyBookingsResult[];
+};
+
+export enum DailyBookingType {
+  Appointments = 'daily-appointments',
+  Visits = 'daily-visits',
+  HasNotReturned = 'daily-has-not-returned',
+}

package/src/config-schema.ts

@@ -1,39 +1,96 @@
 import { Type, validator } from '@openmrs/esm-framework';
 
-/**
- * This is the config schema. It expects a configuration object which
- * looks like this:
- *
- * ```json
- * { "casualGreeting": true, "whoToGreet": ["Mom"] }
- * ```
- *
- * In OpenMRS Microfrontends, all config parameters are optional. Thus,
- * all elements must have a reasonable default. A good default is one
- * that works well with the reference application.
- *
- * To understand the schema below, please read the configuration system
- * documentation:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- * Note especially the section "How do I make my module configurable?"
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
- * and the Schema Reference
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
- */
 export const configSchema = {
-  casualGreeting: {
-    _type: Type.Boolean,
-    _default: false,
-    _description: 'Whether to use a casual greeting (or a formal one).',
+  concepts: {
+    defaultPriorityConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: false,
+      _description: 'The UUID of the default priority for the queues eg Not urgent.',
+    },
+    defaultStatusConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
+      _description: 'The UUID of the default status for the queues eg Waiting.',
+    },
+    defaultTransitionStatus: {
+      _type: Type.ConceptUuid,
+      _default: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
+      _description: 'The UUID of the default status for attending a service in the queues eg In Service.',
+    },
+    systolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    diastolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    emergencyPriorityConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: false,
+      _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
+    },
+    generalPatientNoteConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description:
+        'The UUID of the free text note field intended to capture unstructured description of the patient encounter',
+    },
+    heightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    historicalObsConceptUuid: {
+      _type: Type.Array,
+      _default: ['161643AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+      _description: 'The Uuids of the obs that are displayed on the previous visit modal',
+      _elements: {
+        _type: Type.ConceptUuid,
+      },
+    },
+    oxygenSaturationUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    pulseUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    problemListConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '1284AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    respiratoryRateUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    temperatureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    visitDiagnosesConceptUuid: {
+      _type: Type.ConceptUuid,
+      _default: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    weightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+  },
+  subDomainUrl: {
+    _type: Type.String,
+    _description: 'Subdomain e.g training,staging',
+    _default: '',
+  },
+  etlBaseUrl: {
+    _type: Type.String,
+    _description: 'ETL Endpoint',
+    _default: '',
   },
-  whoToGreet: {
-    _type: Type.Array,
-    _default: ['World'],
-    _description: 'Who should be greeted. Names will be separated by a comma and space.',
-    _elements: {
-      _type: Type.String,
-    },
-    _validators: [validator((v) => v.length > 0, 'At least one person must be greeted.')],
+  hieBaseUrl: {
+    _type: Type.String,
+    _description: 'HIE Endpoint',
+    _default: '',
   },
 };
 
@@ -41,3 +98,46 @@ export type Config = {
   casualGreeting: boolean;
   whoToGreet: Array<string>;
 };
+
+export interface ConfigObject {
+  // priorityConfigs: Array<PriorityConfig>;
+  appointmentStatuses: Array<string>;
+  // biometrics: BiometricsConfigObject;
+  concepts: {
+    defaultPriorityConceptUuid: string;
+    defaultStatusConceptUuid: string;
+    defaultTransitionStatus: string;
+    diastolicBloodPressureUuid: string;
+    emergencyPriorityConceptUuid: string;
+    generalPatientNoteConceptUuid: string;
+    heightUuid: string;
+    historicalObsConceptUuid: Array<string>;
+    oxygenSaturationUuid: string;
+    pulseUuid: string;
+    problemListConceptUuid: string;
+    respiratoryRateUuid: string;
+    systolicBloodPressureUuid: string;
+    temperatureUuid: string;
+    visitDiagnosesConceptUuid: string;
+    weightUuid: string;
+  };
+  defaultInitialServiceQueue: string;
+  contactAttributeType: string;
+  customPatientChartUrl: string;
+  defaultIdentifierTypes: Array<string>;
+  dashboardTitle: {
+    key: string;
+    value: string;
+  };
+  // queueTables: TablesConfig;
+  showRecommendedVisitTypeTab: boolean;
+  visitQueueNumberAttributeUuid: string | null;
+  visitTypeResourceUrl: string;
+  subDomainUrl: string;
+  etlBaseUrl: string;
+  hieBaseUrl: string;
+  // vitals: VitalsConfigObject;
+}
+
+const queueEntryActions = ['move', 'call', 'edit', 'transition', 'signOff', 'remove', 'delete', 'undo'] as const;
+export type QueueEntryAction = (typeof queueEntryActions)[number];

package/src/dashboard/dashboard.component.scss

@@ -0,0 +1,7 @@
+.container {
+    margin: 3rem;
+}
+.tabText {
+    font-size: 20px;
+}
+

package/src/dashboard/dashboard.component.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+
+import styles from './dashboard.component.scss';
+import Overview from './overview/overview.component';
+import { getServiceQueueByLocationUuid } from '../service-queues/service-queues.resource';
+import { type QueueEntryResult } from '../registry/types';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../shared/constants/concepts';
+
+interface DashboardProps {}
+
+const Dashboard: React.FC<DashboardProps> = () => {
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
+  const consultationServiceUuid = QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID;
+  useEffect(() => {
+    getTriageEntryQueues();
+    getConsultationEntryQueues();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+  const getConsultationEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
+    setConsultationQueueEntries(res);
+  };
+  return (
+    <div className={styles.container}>
+      <Tabs>
+        <TabList contained scrollDebounceWait={200}>
+          <Tab>
+            <span className={styles.tabText}>Overview</span>
+          </Tab>
+          <Tab>
+            <span className={styles.tabText}>Pharmacy</span>
+          </Tab>
+          <Tab>
+            <span className={styles.tabText}>Labs</span>
+          </Tab>
+          <Tab>
+            <span className={styles.tabText}>Programs</span>
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Overview triageCount={triageQueueEntries} consultationCount={consultationQueueEntries} />
+          </TabPanel>
+          <TabPanel></TabPanel>
+          <TabPanel></TabPanel>
+          <TabPanel></TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/dashboard/overview/overview.component.scss

@@ -0,0 +1,70 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+.card {
+    border: 1px solid grey;
+    border-radius: 5px;
+    background-color: white;
+    font-weight: bold;
+    flex: 1 1 calc(33.33% - 1rem);
+  }
+}
+
+@media (max-width: 1024px) {
+  .container .card {
+    flex: 1 1 calc(50% - 1rem);
+  }
+}
+
+@media (max-width: 600px) {
+  .container .card {
+    flex: 1 1 100%;
+  }
+}
+
+
+h4 {
+    font-weight: bold;
+}
+
+.dropdownItem {
+    display: flex;
+    justify-self: flex-end;
+    width: 25%; 
+    min-width: 180px; 
+    max-width: 280px;
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+}
+
+.dropdownContainer {
+  .cds--list-box__menu-item__option {
+    font-weight: 600; 
+  }
+
+  .cds--list-box__field {
+    font-weight: 600; 
+  }
+}
+
+.queue {
+    color: palevioletred
+}
+.total {
+    color: gray;
+}
+
+.triage {
+    color: yelllow;
+}
+.consultation {
+    color: green;
+}
+
+.emergency {
+    color: red;
+}

package/src/dashboard/overview/overview.component.tsx

@@ -0,0 +1,107 @@
+import { FluidDropdown, Tile } from '@carbon/react';
+import React, { useState } from 'react';
+
+import styles from './overview.component.scss';
+import { type QueueEntryResult } from '../../registry/types';
+import PatientList from '../patient-list/patient-list.component';
+
+interface OverviewProps {
+  triageCount?: QueueEntryResult[];
+  consultationCount?: QueueEntryResult[];
+}
+
+const Overview: React.FC<OverviewProps> = ({ triageCount, consultationCount }) => {
+  const totalPatients: QueueEntryResult[] = [...triageCount, ...consultationCount];
+  const patientsInQueue = totalPatients.filter(
+    (patient) => patient.status === 'WAITING' || patient.status === 'IN SERVICE',
+  ).length;
+  const [selected, setSelected] = useState<string | null>(null);
+  const triagePatients = triageCount?.length ?? 0;
+  const consultationPatients = consultationCount?.length ?? 0;
+  const dropDownItems = [
+    'Total Patients',
+    'Triage Patients',
+    'Consultation Patients',
+    'Walk-In Patients',
+    'Emergency Patients',
+  ];
+
+  const handleDropdownChange = (data: { selectedItem: string }) => {
+    const value = data.selectedItem;
+    setSelected(value);
+  };
+
+  let selectedPatients: QueueEntryResult[] = [];
+
+  switch (selected) {
+    case 'Triage Patients':
+      selectedPatients = triageCount ?? [];
+      break;
+
+    case 'Consultation Patients':
+      selectedPatients = consultationCount ?? [];
+      break;
+    case 'Walk-In Patients':
+      selectedPatients = [];
+      break;
+    case 'Emergency Patients':
+      selectedPatients = [];
+      break;
+
+    case 'Total Patients':
+      selectedPatients = [...(triageCount ?? []), ...(consultationCount ?? [])];
+      break;
+
+    default:
+      selectedPatients = [...(triageCount ?? []), ...(consultationCount ?? [])];
+      break;
+  }
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Tile className={styles.card}>
+          <h4>Total Patients Today</h4>
+          <h5>Patients</h5>
+          <h4 className={styles.total}>{triagePatients + consultationPatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h4>Patients in Queue Today</h4>
+          <h5>Patients</h5>
+          <h4 className={styles.queue}>{patientsInQueue}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h4>Patients in Triage </h4>
+          <h5>Patients</h5>
+          <h4 className={styles.triage}>{triagePatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h4>Patients in Consultation </h4>
+          <h5>Patients</h5>
+          <h4 className={styles.consultation}>{consultationPatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h4>Walk-ins Today </h4>
+          <h5>Patients</h5>
+          <h4>0</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h4>Emergencies Today </h4>
+          <h5>Patients</h5>
+          <h4 className={styles.emergency}>0</h4>
+        </Tile>
+      </div>
+      <FluidDropdown
+        className={styles.dropdownItem}
+        id={''}
+        items={dropDownItems}
+        label={'Total Patients'}
+        titleText={''}
+        onChange={handleDropdownChange}
+      ></FluidDropdown>
+      <PatientList patients={selectedPatients} />
+    </>
+  );
+};
+
+export default Overview;

package/src/dashboard/patient-list/patient-list.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type QueueEntryResult } from '../../registry/types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+
+interface PatientListProps {
+  patients?: QueueEntryResult[];
+}
+
+const PatientList: React.FC<PatientListProps> = ({ patients }) => {
+  const layout = useLayoutType();
+  const desktop = isDesktop(layout);
+  return (
+    <Table size={desktop ? 'sm' : 'lg'}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>No</TableHeader>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Ticket</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Priority</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {patients?.map((patient, index) => {
+          return (
+            <TableRow>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{`${patient.given_name} ${patient.middle_name} ${patient.family_name}`}</TableCell>
+              <TableCell>{patient.queue_id}</TableCell>
+              <TableCell>{patient.status}</TableCell>
+              <TableCell>{patient.priority}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default PatientList;

package/src/hooks/useActions.ts

@@ -0,0 +1,165 @@
+import { restBaseUrl, showModal, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject, type QueueEntryAction } from '../config-schema';
+import { useMemo } from 'react';
+import { useSWRConfig } from 'swr';
+import { type QueueEntry } from '../types/types';
+import { mapVisitQueueEntryProperties, serveQueueEntry } from '../service-queues/service-queues.resource';
+
+type ActionProps = {
+  label: string;
+  text: string;
+  onClick: (queueEntry: QueueEntry) => void;
+  showIf?: (queueEntry: QueueEntry) => boolean;
+  isDelete?: boolean;
+};
+
+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 useActionPropsByKey() {
+  const {
+    concepts: { defaultStatusConceptUuid },
+    visitQueueNumberAttributeUuid,
+  } = useConfig<ConfigObject>();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+
+  // Map action strings to component props
+  const actionPropsByKey: Record<QueueEntryAction, ActionProps> = useMemo(() => {
+    return {
+      call: {
+        // t('call', 'Call'),
+        label: 'call',
+        text: 'Call',
+        onClick: async (queueEntry: QueueEntry) => {
+          const mappedQueueEntry = mapVisitQueueEntryProperties(queueEntry, visitQueueNumberAttributeUuid);
+          const callingQueueResponse = await serveQueueEntry(
+            mappedQueueEntry.queue.name,
+            mappedQueueEntry.visitQueueNumber,
+            'calling',
+          );
+          if (callingQueueResponse.ok) {
+            await mutateQueueEntries();
+            const dispose = showModal('call-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+              size: 'sm',
+            });
+          }
+        },
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.status.uuid === defaultStatusConceptUuid;
+        },
+      },
+      move: {
+        // t('move', 'Move'),
+        label: 'move',
+        text: 'Move',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('move-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      transition: {
+        // t('transition', 'Transition'),
+        label: 'transition',
+        text: 'Transition',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('transition-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      edit: {
+        // t('edit', 'Edit'),
+        label: 'edit',
+        text: 'Edit',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('edit-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      remove: {
+        // t('removePatient', 'Remove patient'),
+        label: 'removePatient',
+        text: 'Remove patient',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('remove-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+      },
+      delete: {
+        // t('deleteEntry', 'Delete entry'),
+        label: 'deleteEntry',
+        text: 'Delete entry',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('delete-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+        isDelete: true,
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.previousQueueEntry === null;
+        },
+      },
+      undo: {
+        // t('undoTransition', 'Undo transition'),
+        label: 'undoTransition',
+        text: 'Undo transition',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('undo-transition-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+        isDelete: true,
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.previousQueueEntry !== null;
+        },
+      },
+      signOff: {
+        // t('signOff', 'Sign off'),
+        label: 'signOff',
+        text: 'Sign off',
+        onClick: (queueEntry: QueueEntry) => {
+          const dispose = showModal('sign-off-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+            size: 'sm',
+          });
+        },
+        showIf: (queueEntry: QueueEntry) => {
+          return queueEntry.previousQueueEntry !== null;
+        },
+      },
+    };
+  }, [defaultStatusConceptUuid, visitQueueNumberAttributeUuid, mutateQueueEntries]);
+  return actionPropsByKey;
+}