@ampath/esm-dha-workflow-app 4.0.0-next.10 → 4.0.0-next.12

package/src/registry/modal/send-to-triage/send-to-triage.modal.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  InlineLoading,
+  Modal,
+  ModalBody,
+  Select,
+  SelectItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import styles from './send-to-triage.modal.scss';
+import {
+  type VisitType,
+  type Patient,
+  useVisitTypes,
+  useSession,
+  showSnackbar,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { type CreateVisitDto, type QueueEntryDto, type ServiceQueue } from '../../types';
+import { createQueueEntry, fetchServiceQueuesByLocationUuid } from '../../../resources/queue.resource';
+import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
+import { createVisit } from '../../../resources/visit.resource';
+
+interface SendToTriageModalProps {
+  patients: Patient[];
+  open: boolean;
+  onModalClose: (modalCloseResp?: { success: boolean }) => void;
+  onSubmit: () => void;
+}
+
+const SendToTriageModal: React.FC<SendToTriageModalProps> = ({ patients, open, onModalClose, onSubmit }) => {
+  const [selectedPatient, setSelectedPatient] = useState<Patient>();
+  const [selectedVisitType, setSelectedVisitType] = useState<string>();
+  const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>();
+  const [selectedServiceQueue, setSelectedServiceQueue] = useState<string>();
+  const [selectedPriority, setSelectedPriority] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const visitTypes = useVisitTypes();
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  useEffect(() => {
+    getServiceQueues();
+  }, [patients]);
+  if (!patients) {
+    return <>No Client data</>;
+  }
+  const registerOnAfyaYangu = () => {
+    window.open('https://afyayangu.go.ke/', '_blank');
+  };
+  const sendToTriage = async () => {
+    setLoading(true);
+    try {
+      const newVisit = await createPatientVisit();
+      if (newVisit) {
+        const addToTriageQueueDto: QueueEntryDto = generateAddToTriageDto(newVisit.uuid);
+        const queueEntryResp = await createQueueEntry(addToTriageQueueDto);
+        if (queueEntryResp) {
+          showAlert('success', 'Patient has succesfully been moved to the Triage queue', '');
+          onModalClose({ success: true });
+        }
+      }
+    } catch (error) {
+      showAlert('error', 'Error creating visit', '');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const generateAddToTriageDto = (newVisitUuid: string): QueueEntryDto => {
+    const payload: QueueEntryDto = {
+      visit: {
+        uuid: newVisitUuid,
+      },
+      queueEntry: {
+        status: {
+          uuid: QUEUE_STATUS_UUIDS.WAITING_UUID,
+        },
+        priority: {
+          uuid: selectedPriority,
+        },
+        queue: {
+          uuid: selectedServiceQueue,
+        },
+        patient: {
+          uuid: selectedPatient.uuid,
+        },
+        startedAt: new Date().toISOString(),
+        sortWeight: 0,
+      },
+    };
+    return payload;
+  };
+  const onPatientSelect = (patient: Patient) => {
+    setSelectedPatient(patient);
+  };
+  const getServiceQueues = async () => {
+    const resp = await fetchServiceQueuesByLocationUuid(locationUuid);
+    if (resp && resp.results) {
+      setServiceQueues(resp.results);
+    }
+  };
+  const visitTypeChangeHandler = ($event: any) => {
+    const vt = $event.target.value as unknown as string;
+    setSelectedVisitType(vt);
+  };
+  const serviceChangeHandler = ($event: any) => {
+    const sq = $event.target.value as unknown as string;
+    setSelectedServiceQueue(sq);
+  };
+  const priorityChangeHandler = (priorityUuid: string) => {
+    setSelectedPriority(priorityUuid);
+  };
+  const createPatientVisit = async () => {
+    const visitDto = getCreateVisitDto();
+    if (!isValidCreateVisitDto(visitDto)) {
+      return false;
+    }
+
+    const result = await createVisit(visitDto);
+    if (result) {
+      showAlert('success', 'Visit has been created succesfully', '');
+      return result;
+    } else {
+      showAlert('error', 'Error creating patient visit', '');
+      throw new Error('Error creating patient visit');
+    }
+  };
+  const isValidCreateVisitDto = (createVisitDto: CreateVisitDto): boolean => {
+    if (!createVisitDto.location) {
+      showAlert('error', 'Missing location in create visits', '');
+      return false;
+    }
+    if (!createVisitDto.patient) {
+      showAlert('error', 'Please select a patient', '');
+      return false;
+    }
+
+    if (!createVisitDto.visitType) {
+      showAlert('error', 'Please select a visit', '');
+      return false;
+    }
+    return true;
+  };
+  const getCreateVisitDto = (): CreateVisitDto => {
+    return {
+      visitType: selectedVisitType,
+      location: locationUuid,
+      startDatetime: null,
+      stopDatetime: null,
+      patient: selectedPatient?.uuid ?? '',
+    };
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={() => onModalClose({ success: false })}
+        onRequestClose={() => onModalClose({ success: false })}
+        onRequestSubmit={registerOnAfyaYangu}
+        primaryButtonText="Register on Afya Yangu"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.clientDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Send To Triage</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <div className={styles.patientSelect}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableHeader>No</TableHeader>
+                      <TableHeader>Name</TableHeader>
+                      <TableHeader>DOB</TableHeader>
+                      <TableHeader>Select Patient</TableHeader>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {patients.map((p, index) => (
+                      <TableRow key={p.uuid}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>{p.person.preferredName.display}</TableCell>
+                        <TableCell>{p.person.birthdate}</TableCell>
+                        <TableCell>
+                          <Checkbox id={p.uuid} labelText="" onChange={() => onPatientSelect(p)} />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className={styles.formSection}>
+                <div className={styles.formRow}>
+                  <div className={styles.formControl}>
+                    <Select id="visit-type" labelText="Select a Visit Type" onChange={visitTypeChangeHandler}>
+                      <SelectItem value="" text="Select" />;
+                      {visitTypes &&
+                        visitTypes.map((vt) => {
+                          return <SelectItem value={vt.uuid} text={vt.display} />;
+                        })}
+                    </Select>
+                  </div>
+                  <div className={styles.formControl}>
+                    <Select id="service" labelText="Select a Service" onChange={serviceChangeHandler}>
+                      <SelectItem value="" text="Select" />;
+                      {serviceQueues &&
+                        serviceQueues.map((sq) => {
+                          return <SelectItem value={sq.uuid} text={sq.display} />;
+                        })}
+                    </Select>
+                  </div>
+                </div>
+                <div className={styles.formRow}>
+                  <div className={styles.formControl}>
+                    <Select
+                      id="priority"
+                      labelText="Select Priority"
+                      onChange={($event) => priorityChangeHandler($event.target.value)}
+                    >
+                      <SelectItem value="" text="Select" />;
+                      <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="NORMAL" />;
+                      <SelectItem value={QUEUE_PRIORITIES_UUIDS.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className={styles.actionSection}>
+              <div className={styles.btnContainer}>
+                <Button kind="primary" onClick={sendToTriage}>
+                  {loading ? <InlineLoading description="Sending To Triage..." /> : 'Send To Triage'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default SendToTriageModal;

package/src/registry/registry.component.scss

@@ -26,6 +26,7 @@
     flex-direction: row;
     width: 100%;
     column-gap: 5px;
+    margin-top: 10px;
 }
 .formControl{
     width: 30%;
@@ -60,4 +61,12 @@
     flex-direction: row;
     width: 30%;
     column-gap: 5px;
+}
+.formBtn{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+}
+.registrySearchBtn{
+    height: 30px;
 }

package/src/registry/registry.component.tsx

@@ -17,23 +17,29 @@ import React, { useState } from 'react';
 import styles from './registry.component.scss';
 import { type HieClient, IDENTIFIER_TYPES, type IdentifierType, type RequestCustomOtpDto } from './types';
 import { fetchClientRegistryData } from './registry.resource';
-import { showSnackbar, useLeftNav, useSession } from '@openmrs/esm-framework';
+import { type Patient, showSnackbar, useSession } from '@openmrs/esm-framework';
 import OtpVerificationModal from './modal/otp-verification-modal/otp-verification-modal';
 import { maskExceptFirstAndLast, maskValue } from './utils/mask-data';
 import ClientDetailsModal from './modal/client-details-modal/client-details-modal';
-import NavLinks from '../side-nav-menu/nav-links';
+import { searchPatientByCrNumber } from '../resources/patient-search.resource';
+import SendToTriageModal from './modal/send-to-triage/send-to-triage.modal';
+import { useNavigate } from 'react-router-dom';
+
 interface RegistryComponentProps {}
 const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
   const [identifierValue, setIdentifierValue] = useState('');
   const [loading, setLoading] = useState<boolean>(false);
   const [client, setClient] = useState<HieClient>();
+  const [amrsPatients, setAmrsPatient] = useState<Patient[]>();
   const [selectedPatient, setSelectedPatient] = useState<string>('principal');
   const [displayOtpModal, setDisplayOtpModal] = useState<boolean>(false);
   const [displayClientDetailsModal, setDisplayClientDetailsModal] = useState<boolean>(false);
+  const [displaytriageModal, setDisplaytriageModal] = useState<boolean>(false);
   const [requestCustomOtpDto, setRequestCustomOtpDto] = useState<RequestCustomOtpDto>();
   const session = useSession();
   const locationUuid = session.sessionLocation.uuid;
+  const navigate = useNavigate();
 
   const handleSearchPatient = async () => {
     setLoading(true);
@@ -101,10 +107,25 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const handleClientDetailsSubmit = () => {
     return;
   };
+  const handleEmergencyRegistration = () => {
+    window.location.href = `${window.spaBase}/patient-registration`;
+  };
+  const handleSendClientToTriage = async (crId: string) => {
+    onClientDetailsModalClose();
+    const resp = await searchPatientByCrNumber(crId);
+    if (resp.totalCount > 0) {
+      setAmrsPatient(resp.results);
+      setDisplaytriageModal(true);
+    }
+  };
+  const onSendToTriageModalClose = (modalCloseResp?: { success: boolean }) => {
+    setDisplaytriageModal(false);
+    if (modalCloseResp && modalCloseResp.success) {
+      navigate('/triage');
+    }
+  };
+  const handleSendToTriageModalSubmit = () => {};
   return (
-    /*
-      To be refactored ton use gloab-nav-slot
-    */
     <>
       <div className={styles.registryLayout}>
         <div className={styles.mainContent}>
@@ -134,10 +155,27 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
                   placeholder={`Enter ${identifierType.toLowerCase()} value`}
                 />
               </div>
+            </div>
+            <div className={styles.formRow}>
               <div className={styles.formControl}>
-                <Button kind="primary" onClick={handleSearchPatient} disabled={loading}>
-                  {loading ? <InlineLoading description="Searching..." /> : 'Search'}
-                </Button>
+                <div className={styles.formBtn}>
+                  <Button
+                    className={styles.registrySearchBtn}
+                    kind="primary"
+                    onClick={handleSearchPatient}
+                    disabled={loading}
+                  >
+                    {loading ? <InlineLoading description="Searching..." /> : 'Search'}
+                  </Button>
+                  <Button
+                    className={styles.registrySearchBtn}
+                    kind="secondary"
+                    onClick={handleEmergencyRegistration}
+                    disabled={loading}
+                  >
+                    Emergency Registration
+                  </Button>
+                </div>
               </div>
             </div>
             {client ? (
@@ -249,11 +287,25 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
                         open={displayClientDetailsModal}
                         onModalClose={onClientDetailsModalClose}
                         onSubmit={handleClientDetailsSubmit}
+                        onSendClientToTriage={handleSendClientToTriage}
                       />{' '}
                     </>
                   ) : (
                     <></>
                   )}
+
+                  {client && displaytriageModal ? (
+                    <>
+                      <SendToTriageModal
+                        patients={amrsPatients}
+                        open={displaytriageModal}
+                        onModalClose={onSendToTriageModalClose}
+                        onSubmit={handleSendToTriageModalSubmit}
+                      />
+                    </>
+                  ) : (
+                    <></>
+                  )}
                 </div>
               </div>
             ) : (

package/src/registry/registry.resource.ts

@@ -1,3 +1,4 @@
+import { HIE_BASE_URL } from '../shared/constants';
 import {
   type ClientRegistrySearchRequest,
   type RequestCustomOtpDto,
@@ -6,8 +7,6 @@ import {
   type ValidateHieCustomOtpDto,
 } from './types';
 
-const HIE_BASE_URL = 'https://staging.ampath.or.ke/hie';
-
 export type ClientRegistrySearchResponse = any[];
 
 async function postJson<T>(url: string, payload: unknown): Promise<T> {

package/src/registry/types/index.ts

@@ -1,3 +1,5 @@
+import { Location, type Patient } from '@openmrs/esm-framework';
+
 export type IdentifierType = 'National ID' | 'Alien ID' | 'Passport' | 'Mandate Number' | 'Refugee ID';
 
 export const IDENTIFIER_TYPES: IdentifierType[] = [
@@ -158,3 +160,64 @@ export interface HieClient {
   is_agent: number;
   agent_id: string;
 }
+
+export type PatientSearchResponse = {
+  results: Patient[];
+  totalCount: number;
+};
+
+export type QueuePriority = {
+  uuid: string;
+  display: string;
+};
+export type QueueStatus = {
+  uuid: string;
+  display: string;
+};
+export type ServiceQueue = {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  service: {
+    uuid: string;
+    display: string;
+  };
+  allowedPriorities: QueuePriority[];
+  allowedStatuses: QueueStatus[];
+  location: Location;
+};
+
+export type ServiceQueueApiResponse = {
+  results: ServiceQueue[];
+};
+
+export type QueueEntryDto = {
+  visit: {
+    uuid: string;
+  };
+  queueEntry: {
+    status: {
+      uuid: string;
+    };
+    priority: {
+      uuid: string;
+    };
+    queue: {
+      uuid: string;
+    };
+    patient: {
+      uuid: string;
+    };
+    startedAt: string;
+    sortWeight: number;
+  };
+};
+
+export type CreateVisitDto = {
+  visitType: string;
+  location: string;
+  startDatetime: null | string;
+  stopDatetime: null | string;
+  patient: string;
+};

package/src/registry/utils/error-handler.ts

@@ -0,0 +1,4 @@
+export function generateErrorMessage(error: any): string[] {
+  const errors: string[] = [];
+  return errors;
+}

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,37 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type QueueEntryDto, type ServiceQueueApiResponse } from '../registry/types';
+
+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();
+}

package/src/resources/visit.resource.ts

@@ -0,0 +1,20 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { 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();
+}

package/src/root.component.tsx

@@ -14,7 +14,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 />} />
         </Routes>
       </main>
       <WorkspaceContainer contextKey="home" />

package/src/shared/constants/concepts.ts

@@ -0,0 +1,17 @@
+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';
+
+export const QUEUE_PRIORITIES_UUIDS = {
+  NORMAL_PRIORITY_UUID,
+  EMERGENCY_PRIORITY_UUID,
+};
+
+export const QUEUE_STATUS_UUIDS = {
+  WAITING_UUID,
+  IN_SERVICE_UUID,
+  COMPLETED_UUID,
+};

package/src/shared/constants/index.ts

@@ -0,0 +1,2 @@
+export const HIE_BASE_URL = 'https://staging.ampath.or.ke/hie';
+export const OPENMRS_BASE_URL = 'https://staging.ampath.or.ke/openmrs/ws/rest/v1';