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

package/src/registry/registry.component.tsx

@@ -1,7 +1,274 @@
-import React from 'react';
+import {
+  Button,
+  Dropdown,
+  InlineLoading,
+  RadioButton,
+  RadioButtonGroup,
+  SideNav,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TextInput,
+} from '@carbon/react';
+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 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';
 interface RegistryComponentProps {}
 const RegistryComponent: React.FC<RegistryComponentProps> = () => {
-  return <>Registry Component</>;
+  const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
+  const [identifierValue, setIdentifierValue] = useState('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [client, setClient] = useState<HieClient>();
+  const [selectedPatient, setSelectedPatient] = useState<string>('principal');
+  const [displayOtpModal, setDisplayOtpModal] = useState<boolean>(false);
+  const [displayClientDetailsModal, setDisplayClientDetailsModal] = useState<boolean>(false);
+  const [requestCustomOtpDto, setRequestCustomOtpDto] = useState<RequestCustomOtpDto>();
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+
+  const handleSearchPatient = async () => {
+    setLoading(true);
+    try {
+      const payload = {
+        identificationNumber: identifierValue,
+        identificationType: identifierType,
+        locationUuid,
+      };
+
+      if (!isValidCustomSmsPayload(payload)) return false;
+
+      setRequestCustomOtpDto(payload);
+
+      const result = await fetchClientRegistryData(payload);
+      const patients = Array.isArray(result) ? result : [];
+
+      if (patients.length === 0) throw new Error('No matching patient found in Client Registry.');
+
+      const patient = patients[0];
+      setClient(patient);
+      showAlert('success', 'Client Data Loaded', 'Patient fetched successfully');
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to fetch client data';
+      showAlert('error', 'Fetch Failed', errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const isValidCustomSmsPayload = (payload: RequestCustomOtpDto): boolean => {
+    if (!payload.identificationNumber) {
+      showAlert('error', 'Please enter a valid identification number', '');
+      return false;
+    }
+    if (!payload.identificationType) {
+      showAlert('error', 'Please enter a valid identification type', '');
+      return false;
+    }
+    if (!payload.locationUuid) {
+      showAlert('error', 'No default location selected', '');
+      return false;
+    }
+    return true;
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const handleSelectedPatient = (sp: string) => {
+    setSelectedPatient(sp);
+  };
+  const handleOtpVerification = () => {
+    setDisplayOtpModal(true);
+  };
+  const handleModelClose = () => {
+    setDisplayOtpModal(false);
+    setDisplayClientDetailsModal(true);
+  };
+  const onClientDetailsModalClose = () => {
+    setDisplayClientDetailsModal(false);
+  };
+  const handleClientDetailsSubmit = () => {
+    return;
+  };
+  return (
+    /*
+      To be refactored ton use gloab-nav-slot
+    */
+    <>
+      <div className={styles.registryLayout}>
+        <div className={styles.sideNavLayout}>
+          <SideNav isFixedNav expanded={true} aria-label="Side navigation">
+            <NavLinks />
+          </SideNav>
+        </div>
+        <div className={styles.mainContent}>
+          <div className={styles.registryHeader}>
+            <h4>Client Registry</h4>
+            <p>Please enter identification number to begin</p>
+          </div>
+          <div className={styles.registryContent}>
+            <div className={styles.formRow}>
+              <div className={styles.formControl}>
+                <Dropdown
+                  id="identifier-type-dropdown"
+                  label="Identifier Type"
+                  titleText="Select Identifier Type"
+                  items={IDENTIFIER_TYPES}
+                  selectedItem={identifierType}
+                  onChange={({ selectedItem }) => setIdentifierType(selectedItem as IdentifierType)}
+                />
+              </div>
+
+              <div className={styles.formControl}>
+                <TextInput
+                  id="identifier-value"
+                  labelText={`${identifierType} Value`}
+                  value={identifierValue}
+                  onChange={(e) => setIdentifierValue(e.target.value)}
+                  placeholder={`Enter ${identifierType.toLowerCase()} value`}
+                />
+              </div>
+              <div className={styles.formControl}>
+                <Button kind="primary" onClick={handleSearchPatient} disabled={loading}>
+                  {loading ? <InlineLoading description="Searching..." /> : 'Search'}
+                </Button>
+              </div>
+            </div>
+            {client ? (
+              <div className={styles.formRow}>
+                <div className={styles.hieData}>
+                  <div className={styles.selectionHeader}>
+                    <h5>Please select one patient and request patient to share the OTP sent</h5>
+                  </div>
+                  <div className={styles.patientSelect}>
+                    <div className={styles.patientSelectRadio}>
+                      <RadioButtonGroup
+                        defaultSelected="principal"
+                        legendText="Patient"
+                        onChange={(v) => handleSelectedPatient(v as string)}
+                        name="radio-button-default-group"
+                      >
+                        <RadioButton id="principal" labelText="Principal" value="principal" />
+                        <RadioButton id="dependants" labelText="Dependants" value="dependants" />
+                      </RadioButtonGroup>
+                    </div>
+                    <div className={styles.patientConfirmSelection}>
+                      <div className={styles.btnContainer}>
+                        <Button kind="primary" onClick={handleOtpVerification}>
+                          {' '}
+                          Confirm
+                        </Button>
+                      </div>
+                      <div className={styles.btnContainer}>
+                        <Button kind="secondary">Cancel</Button>
+                      </div>
+                    </div>
+                  </div>
+                  {selectedPatient === 'principal' ? (
+                    <>
+                      <Table>
+                        <TableHead>
+                          <TableRow>
+                            <TableHeader>Name</TableHeader>
+                            <TableHeader>CR</TableHeader>
+                            <TableHeader>Phone No</TableHeader>
+                            <TableHeader>ID No</TableHeader>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          <TableRow>
+                            <TableCell>
+                              {client.first_name} {maskExceptFirstAndLast(client.middle_name)}{' '}
+                              {maskExceptFirstAndLast(client.last_name)}
+                            </TableCell>
+                            <TableCell>{maskValue(client.id)}</TableCell>
+                            <TableCell>{maskValue(client.phone)}</TableCell>
+                            <TableCell>{maskValue(client.identification_number)}</TableCell>
+                          </TableRow>
+                        </TableBody>
+                      </Table>
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                  {selectedPatient === 'dependants' ? (
+                    <>
+                      <Table>
+                        <TableHead>
+                          <TableRow>
+                            <TableHeader>Name</TableHeader>
+                            <TableHeader>CR</TableHeader>
+                            <TableHeader>Relationship</TableHeader>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {client.dependants.map((d) => {
+                            const dependant = d.result[0];
+                            const relationship = d.relationship;
+                            return (
+                              <>
+                                <TableRow>
+                                  <TableCell>
+                                    {dependant.first_name} {maskExceptFirstAndLast(dependant.middle_name)}{' '}
+                                    {maskExceptFirstAndLast(dependant.last_name)}
+                                  </TableCell>
+                                  <TableCell>{maskValue(dependant.id)}</TableCell>
+                                  <TableCell>{relationship}</TableCell>
+                                </TableRow>
+                              </>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    </>
+                  ) : (
+                    <></>
+                  )}
+
+                  {displayOtpModal ? (
+                    <OtpVerificationModal
+                      requestCustomOtpDto={requestCustomOtpDto}
+                      phoneNumber={client.phone}
+                      open={displayOtpModal}
+                      onModalClose={handleModelClose}
+                    />
+                  ) : (
+                    <></>
+                  )}
+
+                  {client && displayClientDetailsModal ? (
+                    <>
+                      <ClientDetailsModal
+                        client={client}
+                        open={displayClientDetailsModal}
+                        onModalClose={onClientDetailsModalClose}
+                        onSubmit={handleClientDetailsSubmit}
+                      />{' '}
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default RegistryComponent;

package/src/registry/registry.resource.ts

@@ -0,0 +1,58 @@
+import {
+  type ClientRegistrySearchRequest,
+  type RequestCustomOtpDto,
+  type RequestCustomOtpResponse,
+  type ValidateCustomOtpResponse,
+  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> {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export async function requestCustomOtp(payload: RequestCustomOtpDto): Promise<RequestCustomOtpResponse> {
+  const url = `${HIE_BASE_URL}/client/send-custom-otp`;
+  const formattedPayload = {
+    identificationNumber: payload.identificationNumber,
+    identificationType: payload.identificationType,
+    locationUuid: payload.locationUuid,
+  };
+  return postJson<RequestCustomOtpResponse>(url, formattedPayload);
+}
+
+export async function validateCustomOtp(payload: ValidateHieCustomOtpDto): Promise<ValidateCustomOtpResponse> {
+  const url = `${HIE_BASE_URL}/client/validate-custom-otp`;
+  const formattedPayload = {
+    sessionId: payload.sessionId,
+    otp: payload.otp,
+    locationUuid: payload.locationUuid,
+  };
+  return postJson<ValidateCustomOtpResponse>(url, formattedPayload);
+}
+
+export async function fetchClientRegistryData(
+  payload: ClientRegistrySearchRequest,
+): Promise<ClientRegistrySearchResponse> {
+  const url = `${HIE_BASE_URL}/client/search`;
+  const formattedPayload = {
+    identificationNumber: payload.identificationNumber,
+    identificationType: payload.identificationType,
+    locationUuid: payload.locationUuid,
+  };
+  return postJson<ClientRegistrySearchResponse>(url, formattedPayload);
+}

package/src/registry/types/index.ts

@@ -0,0 +1,160 @@
+export type IdentifierType = 'National ID' | 'Alien ID' | 'Passport' | 'Mandate Number' | 'Refugee ID';
+
+export const IDENTIFIER_TYPES: IdentifierType[] = [
+  'National ID',
+  'Alien ID',
+  'Passport',
+  'Mandate Number',
+  'Refugee ID',
+];
+
+export interface ValidateCustomOtpResponse {
+  message: string;
+  isValid?: boolean;
+}
+
+export type ClientRegistrySearchRequest = {
+  identificationNumber: string | number;
+  identificationType: string;
+  locationUuid: string;
+};
+
+export interface RequestCustomOtpResponse {
+  message: string;
+  sessionId: string;
+  maskedPhone: string;
+}
+
+export interface ValidateHieCustomOtpDto {
+  sessionId: string;
+  otp: number | string;
+  locationUuid: string;
+}
+
+export interface ValidateCustomOtpResponse {
+  message: string;
+  isValid?: boolean;
+}
+
+export type RequestCustomOtpDto = {
+  identificationNumber: string | number;
+  identificationType: string;
+  locationUuid: string;
+};
+
+export interface RequestCustomOtpResponse {
+  message: string;
+  sessionId: string;
+  maskedPhone: string;
+}
+
+export interface ValidateHieCustomOtpDto {
+  sessionId: string;
+  otp: number | string;
+  locationUuid: string;
+}
+
+export enum HieIdentificationType {
+  NationalID = 'National ID',
+  SHANumber = 'SHA Number',
+  HouseholdNumber = 'Household Number',
+  RefugeeID = 'Refugee ID',
+  AlienID = 'Alien ID',
+  MandateNumber = 'Mandate Number',
+  Cr = 'id',
+  TemporaryDependantID = 'Temporary Dependant ID',
+}
+
+export interface HieIdentifications {
+  identification_number: string;
+  identification_type: HieIdentificationType;
+}
+
+export interface HieDependant {
+  date_added: string;
+  relationship: string;
+  total: number;
+  result: HieClient[];
+}
+
+export interface AlternateContact {
+  contact_type: string;
+  contact_id: string;
+  contact_name: string;
+  relationship: string;
+  remarks: string;
+}
+
+export interface HieClient {
+  resourceType: string;
+  id: string;
+  meta: {
+    versionId: string;
+    creationTime: string;
+    lastUpdated: string;
+    source: string;
+  };
+  originSystem: {
+    system: string;
+    record_id: string;
+  };
+  title: string;
+  first_name: string;
+  middle_name: string;
+  last_name: string;
+  gender: string;
+  date_of_birth: string;
+  place_of_birth: string;
+  person_with_disability: number;
+  citizenship: string;
+  kra_pin: string;
+  preferred_primary_care_network: string;
+  employment_type: string;
+  domestic_worker_type: string;
+  civil_status: string;
+  identification_type: HieIdentificationType;
+  identification_number: string;
+  other_identifications: HieIdentifications[];
+  dependants: HieDependant[];
+  is_alive: number;
+  deceased_datetime: string;
+  phone: string;
+  biometrics_verified: number;
+  biometrics_score: number;
+  email: string;
+  country: string;
+  county: string;
+  sub_county: string;
+  ward: string;
+  village_estate: string;
+  building_house_no: string;
+  latitude: string;
+  longitude: string;
+  province_state_country: string;
+  zip_code: string;
+  identification_residence: string;
+  employer_name: string;
+  employer_pin: string;
+  disability_category: string;
+  disability_subcategory: string;
+  disability_cause: string;
+  in_lawful_custody: string;
+  admission_remand_number: string;
+  document_uploads: any[];
+  alternative_contacts: AlternateContact[];
+  gross_income: number;
+  gross_income_currency: string;
+  postal_address: string;
+  estimated_contribution: number;
+  estimated_annual_contribution: number;
+  city: string;
+  id_serial: string;
+  learning_institution_code: string;
+  learning_institution_name: string;
+  grade_level: string;
+  admission_number: string;
+  expected_year_of_graduation: string;
+  unconfirmed_dependants: HieDependant[];
+  is_agent: number;
+  agent_id: string;
+}

package/src/registry/utils/hie-adapter.ts

@@ -0,0 +1,56 @@
+import { type HieIdentifications, type HieClient } from '../types';
+
+const clientDatailsFields = [
+  'id',
+  'other_identifications',
+  'first_name',
+  'middle_name',
+  'last_name',
+  'gender',
+  'date_of_birth',
+  'is_alive',
+  'deceased_datetime',
+  'phone',
+  'email',
+  'civil_status',
+  'place_of_birth',
+  'citizenship',
+  'country',
+  'county',
+  'sub_county',
+  'ward',
+  'village_estate',
+  'longitude',
+  'latitude',
+  'identification_type',
+];
+
+export function generateHieClientDetails(hieClient: HieClient) {
+  let data = {};
+  Object.keys(hieClient)
+    .filter((key) => {
+      return clientDatailsFields.includes(key);
+    })
+    .forEach((key) => {
+      if (key === 'other_identifications') {
+        const otherIds = generateOtherIdentifications(hieClient[key]);
+        data = {
+          ...data,
+          ...otherIds,
+        };
+      } else if (key === 'identification_type') {
+        data[hieClient['identification_type']] = hieClient.identification_number;
+      } else {
+        const value = hieClient[key];
+        data[key] = value;
+      }
+    });
+  return data;
+}
+function generateOtherIdentifications(hieIdentifications: HieIdentifications[]) {
+  const other = {};
+  hieIdentifications.forEach((id) => {
+    other[id.identification_type] = id.identification_number;
+  });
+  return other;
+}

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/root.component.tsx

@@ -15,24 +15,21 @@ 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 { useConfig, useLeftNav } from '@openmrs/esm-framework';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import RegistryComponent from './registry/registry.component';
 
 const Root: React.FC = () => {
   const { t } = useTranslation();
-
   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>
+    <main className="omrs-main-content">
+      <BrowserRouter basename={window.spaBase}>
+        <Routes>
+          <Route path="/workflow" element={<RegistryComponent />} />
+          <Route path="/workflow/registry" element={<RegistryComponent />} />
+        </Routes>
+      </BrowserRouter>
+    </main>
   );
 };
 

package/src/routes.json

@@ -1,19 +1,28 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {},
-   "extensions": [
+  "pages": [
+    {
+      "component": "root",
+      "route": "workflow",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
     {
       "component": "workflowRegistryLink",
       "name": "workflow-registry-link",
       "slot": "app-menu-slot",
       "online": true,
       "offline": true
-    }
-  ],
-  "pages": [
+    },
     {
-      "component": "registry",
-      "route": "workflow"
+      "component": "navLinks",
+      "name": "side-nav-workflow-link",
+      "slot": "global-nav-menu-slot",
+      "online": true,
+      "offline": true
     }
   ]
 }

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

@@ -5,16 +5,19 @@ 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>
+      <SideNavMenuItem id="1" href="workflow/registry">
+        Dashboard
+      </SideNavMenuItem>
+      <SideNavMenuItem id="2" href="workflow/registry">
+        Registration
+      </SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">Appointments</SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">Triage</SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">workflow</SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">Laboratory</SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">Bookings</SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">Reports</SideNavMenuItem>
+      <SideNavMenuItem href="workflow/registry">Registers</SideNavMenuItem>
     </>
   );
 };