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

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 [];
+}