@ampath/esm-patient-registration-app 9.2.0-next.18 → 9.2.0-next.20

package/src/patient-registration/client-registry/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/patient-registration/client-registry/constants/person-attribute-types.ts

@@ -0,0 +1,21 @@
+const CONTACT_PHONE_NUMBER_UUID = '72a759a8-1359-11df-a1f1-0026b9348838';
+const CITIZENSHIP_UUID = '72a759a8-1359-11df-a1f1-0026b9348838';
+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';
+
+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,
+};

package/src/patient-registration/client-registry/existing-client/client-dependants-comparison/client-dependants-comparison.component.tsx

@@ -0,0 +1,26 @@
+import { Accordion } from '@carbon/react';
+import React from 'react';
+import { type ClientDependantsComparisonProps } from '../types';
+import ClientDependantComparisonRows from './dependant-comparison-rows.component';
+
+const ClientDependantsComparison: React.FC<ClientDependantsComparisonProps> = ({
+  hieDependants,
+  amrsClient,
+  patientRelationships,
+}) => {
+  return (
+    <div>
+      <Accordion size="lg">
+        {hieDependants.map((dependant) => (
+          <ClientDependantComparisonRows
+            hieDependant={dependant}
+            amrsClient={amrsClient}
+            patientRelationships={patientRelationships}
+          />
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+export default ClientDependantsComparison;

package/src/patient-registration/client-registry/existing-client/client-dependants-comparison/dependant-comparison-rows.component.tsx

@@ -0,0 +1,153 @@
+import { AccordionItem, Row, Column, Select, SelectItem, Button } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createPerson, createRelationship, fetchAmrsPersonData } from '../existing-client.resource';
+import {
+  patientObjFields,
+  mapFieldValue,
+  getPatientAttributes,
+  personSyncFields,
+  nameFields,
+  addressFields,
+  getPatientRelationshipPayload,
+} from '../mapper-utils';
+import { type AmrsClient, type ClientDependantComparisonRowsProps } from '../types';
+import { type HieDependant } from '../../types';
+import ClientDetailsComparison from '../client-details-comparison/client-details-comparison.component';
+
+const ClientDependantComparisonRows: React.FC<ClientDependantComparisonRowsProps> = ({
+  hieDependant,
+  patientRelationships,
+  amrsClient,
+}) => {
+  const { t } = useTranslation();
+  const [amrsRelationExists, setAmrsRelationExists] = useState(false);
+  const [amrsDependantData, setAmrsDependantData] = useState<AmrsClient>();
+  const [selectedRelationship, setSelectedRelationship] = useState('');
+
+  const handleCreateDependant = async (dependantBody: HieDependant) => {
+    try {
+      const syncFields = {};
+      patientObjFields.forEach((field) => {
+        let fieldArr = mapFieldValue(field, dependantBody.result[0], amrsClient);
+        const hieFieldValue = fieldArr[1];
+        syncFields[field] = hieFieldValue;
+      });
+
+      // Person
+      const patientPayload = {};
+      const names = {};
+      const addresses = {};
+      const otherFields = {};
+      const attributes = getPatientAttributes(dependantBody.result[0]);
+      Object.entries(syncFields).forEach(([k, v]) => {
+        if (personSyncFields.includes(k)) {
+          // names
+          if (nameFields.includes(k)) {
+            names[k] = v;
+          }
+          // addresses
+          else if (addressFields.includes(k)) {
+            if (v) {
+              addresses[k] = v;
+            }
+          } else {
+            otherFields[k] = v;
+          }
+        }
+      });
+      Object.assign(
+        patientPayload,
+        otherFields,
+        { addresses: [addresses] },
+        { names: [names] },
+        { attributes: attributes },
+      );
+      const response = await createPerson(patientPayload);
+      if (response && response.data) {
+        showSnackbar({
+          kind: 'success',
+          title: 'Dependant created successfully.',
+        });
+        const relationshipPayload = getPatientRelationshipPayload(
+          amrsClient,
+          dependantBody.relationship,
+          response.data.uuid,
+        );
+        await createRelationship(relationshipPayload);
+        showSnackbar({
+          kind: 'success',
+          title: 'Dependant relationship created successfully.',
+        });
+      }
+    } catch (err) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error syncing patient data.',
+        subtitle: JSON.stringify(err),
+      });
+    }
+  };
+
+  const handleSelectAmrsDependant = async (e: any) => {
+    const uuid = e.target.value;
+    if (!uuid) {
+      setAmrsRelationExists(false);
+      setAmrsDependantData(null);
+    }
+    const response = await fetchAmrsPersonData(uuid);
+    if (response && response.data) {
+      setAmrsRelationExists(true);
+      setAmrsDependantData((prev) => ({ ...prev, person: response.data }));
+    } else {
+      setAmrsRelationExists(false);
+      setAmrsDependantData(null);
+      const relationshipUuid = patientRelationships.find((v) => v.relatedPersonUuid === uuid);
+      if (relationshipUuid && relationshipUuid.relationshipType) {
+        setSelectedRelationship(relationshipUuid.relationshipType);
+      }
+    }
+  };
+
+  const getDependantName = () => {
+    const name = hieDependant.result[0];
+    return `${name.first_name} ${name.middle_name} ${name.last_name} (${hieDependant.relationship})`;
+  };
+
+  return (
+    <>
+      <AccordionItem title={getDependantName()}>
+        <Row>
+          <Column>
+            <Select labelText={t('amrsDependants', 'AMRS dependants')} onChange={handleSelectAmrsDependant}>
+              <SelectItem text={t('selectAmrsRelation', 'Select AMRS relation')} value="" />
+              {patientRelationships.map((relationship) => (
+                <SelectItem
+                  text={`${relationship.display} (${relationship.relationshipType})`}
+                  value={relationship.relatedPerson.uuid}
+                />
+              ))}
+            </Select>
+          </Column>
+          {!amrsRelationExists ? (
+            <Column>
+              <Button onClick={() => handleCreateDependant(hieDependant)}>
+                {t('createDependant', 'Create dependant in AMRS')}
+              </Button>
+            </Column>
+          ) : null}
+        </Row>
+        <Row>
+          <ClientDetailsComparison
+            hieClient={hieDependant.result[0]}
+            amrsClient={amrsDependantData}
+            fromDependant={true}
+          />
+        </Row>
+      </AccordionItem>
+    </>
+  );
+};
+
+export default ClientDependantComparisonRows;

package/src/patient-registration/client-registry/existing-client/client-details-comparison/client-details-comparison.component.tsx

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { type ClientDetailsComparisonProps } from '../types';
+import {
+  Row,
+  Button,
+  InlineLoading,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  Checkbox,
+  TableBody,
+} from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { HieIdentificationType } from '../../types';
+import {
+  personSyncFields,
+  nameFields,
+  addressFields,
+  identifiersSyncFields,
+  getIdentifierUuid,
+  patientObjFields,
+  mapFieldValue,
+} from '../mapper-utils';
+import ComparisonTableRow from './comparison-table-row.component';
+import { updateAmrsPersonIdentifiers, updatePerson } from '../existing-client.resource';
+
+const ClientDetailsComparison: React.FC<ClientDetailsComparisonProps> = ({ hieClient, amrsClient, fromDependant }) => {
+  const [syncFields, setSyncFields] = useState<Array<Record<string, string>>>([]);
+  const [allChecked, setAllChecked] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const locationUuid = '18c343eb-b353-462a-9139-b16606e6b6c2';
+  const randomString = Math.random().toString(10).substring(2, 6).toUpperCase();
+
+  const handleFieldChange = (checked: boolean, field: string, value: string, multiple: boolean) => {
+    if (multiple) {
+      if (checked) {
+        setSyncFields((prev) => [...prev, { [field]: value }]);
+      } else {
+        setSyncFields([]);
+      }
+    } else {
+      if (checked) {
+        setSyncFields([...syncFields, { [field]: value }]);
+      } else {
+        setSyncFields((prev) => prev.filter((p) => !Object.keys(p).includes(field)));
+      }
+    }
+  };
+
+  const handleCheckAll = (e) => {
+    setAllChecked(e.target.checked);
+  };
+
+  const handleSync = async () => {
+    try {
+      const payload = {};
+      syncFields.forEach((field) => {
+        let key = Object.keys(field)[0];
+        payload[key] = field[key];
+      });
+
+      // Person
+      const patientPayload = {};
+      const names = {};
+      const addresses = {};
+      const otherFields = {};
+      Object.entries(payload).forEach(([k, v]) => {
+        if (personSyncFields.includes(k)) {
+          // names
+          if (nameFields.includes(k)) {
+            names[k] = v;
+          }
+          // addresses
+          else if (addressFields.includes(k)) {
+            if (v) {
+              addresses[k] = v;
+            }
+          } else {
+            otherFields[k] = v;
+          }
+        }
+      });
+      Object.assign(patientPayload, otherFields, { addresses: [addresses] }, { names: [names] });
+      await updatePerson(amrsClient.person.uuid, patientPayload);
+      showSnackbar({
+        kind: 'success',
+        title: 'Patient successfully synced.',
+      });
+
+      // Identifiers
+      Object.entries(payload).forEach(async ([k, v]) => {
+        if (identifiersSyncFields().includes(k)) {
+          if (v) {
+            const identifierUuid = getIdentifierUuid(HieIdentificationType[k]);
+            const identifierPayload = {
+              identifier: v,
+              location: locationUuid,
+              identifierType: identifierUuid,
+            };
+            try {
+              // Check if the identifier exists
+              if (amrsClient?.person?.identifiers?.find((i) => i.identifierType.uuid === identifierUuid)) {
+                // update to have the selected identifier
+                await updateAmrsPersonIdentifiers(
+                  amrsClient.person.uuid,
+                  identifierUuid + '',
+                  identifierPayload,
+                  fromDependant,
+                );
+              } else {
+                // create to have the blank identifier
+                await updateAmrsPersonIdentifiers(amrsClient.person.uuid, '', identifierPayload, fromDependant);
+              }
+            } catch (err) {
+              showSnackbar({
+                kind: 'error',
+                title: 'Error syncing patient identifiers.',
+              });
+            }
+          }
+        }
+      });
+      showSnackbar({
+        kind: 'success',
+        title: 'Patient identifiers successfully synced.',
+      });
+
+      setSyncFields([]);
+    } catch (err) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error syncing patient data.',
+        subtitle: JSON.stringify(err?.error?.message),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Field</TableHeader>
+            <TableHeader>AMRS Person</TableHeader>
+            <TableHeader>HIE Patient</TableHeader>
+            <TableHeader>
+              <Checkbox id={`cbox-multiple-${randomString}`} onChange={(e) => handleCheckAll(e)} />
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {patientObjFields.map((field) => {
+            const fieldValue = mapFieldValue(field, hieClient, amrsClient);
+            const amrsField = fieldValue[0];
+            const hieField = fieldValue[1];
+
+            return (
+              <ComparisonTableRow
+                label={field}
+                field={field}
+                amrsValue={amrsField}
+                hieValue={hieField}
+                onChange={handleFieldChange}
+                allChecked={allChecked}
+              />
+            );
+          })}
+        </TableBody>
+      </Table>
+      <Row>
+        {syncFields.length ? <Button onClick={handleSync}>Sync data</Button> : null}
+        {loading ? <InlineLoading description="Syncing patient details..." /> : null}
+      </Row>
+    </>
+  );
+};
+
+export default ClientDetailsComparison;

package/src/patient-registration/client-registry/existing-client/client-details-comparison/comparison-table-row.component.tsx

@@ -0,0 +1,42 @@
+import { TableRow, TableCell, Checkbox } from '@carbon/react';
+import React, { useState, useEffect } from 'react';
+import { type ComparisonTableRowProps } from '../types';
+
+const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
+  field,
+  label,
+  amrsValue,
+  hieValue,
+  onChange,
+  allChecked,
+}) => {
+  const [checked, setChecked] = useState(false);
+  const randomString = Math.random().toString(10).substring(2, 6).toUpperCase();
+  useEffect(() => {
+    onChange?.(allChecked, field, hieValue, true);
+    setChecked(allChecked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allChecked]);
+
+  return (
+    <TableRow>
+      <TableCell>
+        <p style={{ color: amrsValue!.trim().toUpperCase() == hieValue!.trim().toUpperCase() ? '' : 'red' }}>{label}</p>
+      </TableCell>
+      <TableCell>{amrsValue}</TableCell>
+      <TableCell>{hieValue}</TableCell>
+      <TableCell>
+        <Checkbox
+          id={`cbox-${randomString}`}
+          onChange={(e) => {
+            onChange(e.target.checked, field, hieValue, false);
+            setChecked(e.target.checked);
+          }}
+          checked={checked}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default ComparisonTableRow;

package/src/patient-registration/client-registry/existing-client/client-registry-verification-tag.component.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from '@carbon/react';
+import { age, usePatient } from '@openmrs/esm-framework';
+import { Formik } from 'formik';
+import ClientRegistryLookupSection from '../client-registry-search.component';
+
+const ClientRegistryVerificationTag = () => {
+  const { patient } = usePatient();
+  const [showCrBtn, setShowCrBtn] = useState(false);
+  const [showVerifyModal, setShowVerifyModal] = useState(false);
+  const [isClientVerified, setIsClientVerified] = useState(false);
+  const initialFormValues = {};
+
+  useEffect(() => {
+    if (patient && patient.birthDate) {
+      const ageArr = age(patient.birthDate).split(' ');
+      if (ageArr.includes('yrs')) {
+        const yrs = Number(ageArr[0]);
+        setShowCrBtn(yrs > 17);
+      }
+    }
+  }, [patient]);
+
+  const openVerifyModal = () => {
+    setShowVerifyModal(true);
+  };
+  const closeVerifyModal = () => {
+    setShowVerifyModal(false);
+  };
+
+  return showCrBtn ? (
+    <>
+      <Button kind="ghost" style={{ backgroundColor: 'purple', color: 'white' }} onClick={openVerifyModal}>
+        Verify CR
+      </Button>
+      {showVerifyModal ? (
+        <Formik enableReinitialize initialValues={initialFormValues} onSubmit={null}>
+          <ClientRegistryLookupSection
+            onClientVerified={() => setIsClientVerified(true)}
+            onModalClose={closeVerifyModal}
+            open={showVerifyModal}
+            isNewClient={false}
+          />
+        </Formik>
+      ) : (
+        <></>
+      )}
+    </>
+  ) : (
+    <></>
+  );
+};
+
+export default ClientRegistryVerificationTag;

package/src/patient-registration/client-registry/existing-client/existing-client-tab.component.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { Tabs, TabList, Tab, TabPanels, TabPanel, InlineLoading } from '@carbon/react';
+import { type HieClient } from '../types';
+import ClientDetailsComparison from './client-details-comparison/client-details-comparison.component';
+import { type CustomRelationship, type AmrsClient } from './types';
+import ClientDependantsComparison from './client-dependants-comparison/client-dependants-comparison.component';
+import { showSnackbar, usePatient } from '@openmrs/esm-framework';
+import { fetchAmrsPatientData, getRelationships } from './existing-client.resource';
+
+interface ExistingClientTabProps {
+  hieClient: HieClient;
+}
+
+const ExistingClientTab: React.FC<ExistingClientTabProps> = ({ hieClient }) => {
+  const [amrsClient, setAmrsClient] = useState<AmrsClient>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const { patientUuid } = usePatient();
+  const [relationships, setRelationships] = useState<Array<CustomRelationship>>([]);
+
+  useEffect(() => {
+    if (patientUuid) {
+      handleAmrsPersonDetails();
+      handleFetchPatientRelationships();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [patientUuid]);
+
+  const handleFetchPatientRelationships = async () => {
+    const resp = await getRelationships(patientUuid);
+    if (resp) {
+      setRelationships(resp);
+    }
+  };
+
+  const handleAmrsPersonDetails = async () => {
+    try {
+      setLoading(true);
+      const response = await fetchAmrsPatientData(patientUuid);
+      if (response) {
+        setAmrsClient(response.data);
+      }
+      showSnackbar({
+        kind: 'success',
+        title: 'AMRS person data fetched successfully.',
+      });
+    } catch (er) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching AMRS person data.',
+        subtitle: JSON.stringify(er),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return loading ? (
+    <InlineLoading description="Fetching existing client details..." />
+  ) : (
+    <Tabs>
+      <TabList contained>
+        <Tab>Patient</Tab>
+        <Tab>Dependants</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          {hieClient && <ClientDetailsComparison hieClient={hieClient} amrsClient={amrsClient} fromDependant={false} />}
+        </TabPanel>
+        <TabPanel>
+          {hieClient && hieClient.dependants ? (
+            <ClientDependantsComparison
+              hieDependants={hieClient.dependants}
+              amrsClient={amrsClient}
+              patientRelationships={relationships}
+            />
+          ) : (
+            <div>Dependants not found.</div>
+          )}
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default ExistingClientTab;

package/src/patient-registration/client-registry/existing-client/existing-client.resource.ts

@@ -0,0 +1,78 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AmrsClient } from './types';
+import { mapAmrsPatientRelationship } from './mapper-utils';
+
+export async function fetchAmrsPatientData(patientUuid: string) {
+  return await openmrsFetch<AmrsClient>(`${restBaseUrl}/patient/${patientUuid}?v=full`, {
+    method: 'GET',
+  }).catch((err) => {
+    console.error(err);
+  });
+}
+
+export async function updateAmrsPersonIdentifiers(
+  patientUuid: string,
+  identifierUuid: string,
+  payload: unknown,
+  fromDependant = false,
+) {
+  const resource = fromDependant ? 'person' : 'patient';
+  return await openmrsFetch(`${restBaseUrl}/${resource}/${patientUuid}/identifier/${identifierUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function fetchAmrsPersonData(personUuid: string) {
+  return await openmrsFetch(`${restBaseUrl}/person/${personUuid}?v=full`, {
+    method: 'GET',
+  }).catch((err) => {
+    console.error(err);
+  });
+}
+
+export async function updatePerson(patientUuid: string, payload: unknown) {
+  return await openmrsFetch<AmrsClient>(`${restBaseUrl}/person/${patientUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function createPerson(payload: unknown) {
+  return await openmrsFetch<AmrsClient>(`${restBaseUrl}/person`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function createRelationship(payload: unknown) {
+  return await openmrsFetch(`${restBaseUrl}/relationship`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function getRelationships(patientUuid: string) {
+  const response = await openmrsFetch(`${restBaseUrl}/relationship?person=${patientUuid}&v=full`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (response && response.data) {
+    return mapAmrsPatientRelationship(patientUuid, response.data.results);
+  }
+  return [];
+}