Merge pull request #53 from its-kios09/hie-dependants

feat:  added dependant view UI

packages/esm-patient-registration-app/src/client-registry/hie-client-registry/dependants/dependants.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '../modal/confirm-hie.scss';
+import PatientInfo from '../patient-info/patient-info.component';
+
+const DependentInfo: React.FC<{ dependents: any[] }> = ({ dependents }) => {
+  const { t } = useTranslation();
+
+  if (dependents && dependents.length > 0) {
+    return (
+      <div>
+        <span className={styles.header}>{t('dependants', 'Dependants')}</span>
+        {dependents.map((dependent, index) => {
+          const name = dependent?.name?.text;
+          const relationship =
+            dependent?.relationship?.[0]?.coding?.[0]?.display || t('unknownRelationship', 'Unknown');
+          const nationalID = dependent?.extension?.find(
+            (ext) =>
+              ext.url === 'http://cr.tiberbu.app/fhir/StructureDefinition/dependants-id-number' &&
+              ext.valueIdentifier?.type?.coding?.[0]?.code === 'national-id',
+          )?.valueIdentifier?.value;
+          const birthCertificate = dependent?.extension?.find(
+            (ext) =>
+              ext.url === 'http://cr.tiberbu.app/fhir/StructureDefinition/dependants-id-number' &&
+              ext.valueIdentifier?.type?.coding?.[0]?.code === 'birth-certificate-number',
+          )?.valueIdentifier?.value;
+
+          const primaryIdentifier = nationalID || birthCertificate;
+          const identifierLabel = nationalID
+            ? t('nationalID', 'National ID')
+            : t('birthCertificate', 'Birth Certificate');
+
+          return (
+            <div key={index} className={styles.dependentInfo}>
+              <PatientInfo label={t('name', 'Name')} value={name} />
+              <PatientInfo label={t('relationship', 'Relationship')} value={relationship} />
+              <PatientInfo label={identifierLabel} value={primaryIdentifier} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default DependentInfo;

packages/esm-patient-registration-app/src/client-registry/hie-client-registry/modal/confirm-hie.modal.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalHeader, ModalFooter, Accordion, AccordionItem, CodeSnippet } from '@carbon/react';
-import styles from './confirm-hie.scss';
 import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
 import { type HIEPatient } from '../hie-types';
 import capitalize from 'lodash-es/capitalize';
+import styles from './confirm-hie.scss';
+import PatientInfo from '../patient-info/patient-info.component';
+import DependentInfo from '../dependants/dependants.component';
 import { getPatientName, maskData } from '../hie-resource';
 
-const PatientInfo: React.FC<{ label: string; value: string | (() => React.ReactNode) }> = ({ label, value }) => {
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '0.25fr 0.75fr', margin: '0.25rem' }}>
-      <span style={{ minWidth: '5rem', fontWeight: 'bold' }}>{label}</span>
-      <span>{typeof value === 'function' ? value() : value}</span>
-    </div>
-  );
-};
-
 interface HIEConfirmationModalProps {
   closeModal: () => void;
   patient: HIEPatient;
@@ -37,36 +30,43 @@ const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal,
         <span className={styles.header}>{t('hieModal', 'HIE Patient Record Found')}</span>
       </ModalHeader>
       <ModalBody>
-        <div style={{ display: 'flex', margin: '1rem' }}>
+        <div className={styles.patientDetails}>
           <ExtensionSlot
-            style={{ display: 'flex', alignItems: 'center' }}
+            className={styles.patientPhotoContainer}
             name="patient-photo-slot"
             state={{ patientName: `${maskData(givenName)} . ${maskData(middleName)} . ${maskData(familyName)}` }}
           />
-          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
+          <div className={styles.patientInfoContainer}>
             <PatientInfo label={t('healthID', 'HealthID')} value={patient?.id} />
             <PatientInfo
               label={t('patientName', 'Patient name')}
-              value={() => (
+              customValue={
                 <span className={styles.patientNameValue}>
                   <p>{maskData(givenName)}</p>
                   <span>&bull;</span>
                   <p>{maskData(middleName)}</p>
                   <span>&bull;</span>
                   <p>{maskData(familyName)}</p>
                 </span>
-              )}
+              }
             />
+
             <PatientInfo label={t('age', 'Age')} value={age(patient?.birthDate)} />
             <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.birthDate))} />
             <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
             <PatientInfo
               label={t('maritalStatus', 'Marital status')}
               value={patient?.maritalStatus?.coding?.map((m) => m.code).join('')}
             />
-            <PatientInfo label={t('dependents', 'Dependents')} value="--" />
+
+            {(!patient?.contact || patient?.contact.length === 0) && (
+              <PatientInfo label={t('dependents', 'Dependents')} value="--" />
+            )}
           </div>
         </div>
+
+        <DependentInfo dependents={patient?.contact} />
+
         <div>
           <Accordion>
             <AccordionItem title={t('viewFullResponse', 'View full response')}>

packages/esm-patient-registration-app/src/client-registry/hie-client-registry/modal/confirm-hie.scss

@@ -6,8 +6,37 @@
   @include type.type-style('heading-03');
 }
 
-.body {
-  @include type.type-style('body-01');
+.patientInfo {
+  display: grid;
+  grid-template-columns: 0.25fr 0.75fr;
+  margin: 0.25rem;
+}
+
+.patientInfoLabel {
+  min-width: 5rem;
+  font-weight: bold;
+}
+
+.dependentInfo {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.patientDetails {
+  display: flex;
+  margin: 1rem;
+}
+
+.patientPhotoContainer {
+  display: flex;
+  align-items: center;
+}
+
+.patientInfoContainer {
+  width: 100%;
+  margin-left: 0.625rem;
 }
 
 .patientNameValue {

packages/esm-patient-registration-app/src/client-registry/hie-client-registry/patient-info/patient-info.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '../modal/confirm-hie.scss';
+
+const PatientInfo: React.FC<{ label: string; value?: string; customValue?: JSX.Element }> = ({
+  label,
+  value,
+  customValue,
+}) => {
+  return (
+    <div className={styles.patientInfo}>
+      <span className={styles.patientInfoLabel}>{label}</span>
+      <span>{value || customValue || '--'}</span>
+    </div>
+  );
+};
+
+export default PatientInfo;

packages/esm-patient-registration-app/translations/en.json

@@ -4,6 +4,7 @@
   "age": "Age",
   "allFieldsRequiredText": "All fields are required unless marked optional",
   "autoGeneratedPlaceholderText": "Auto-generated",
+  "birthCertificate": "Birth Certificate",
   "birthdayNotInTheFuture": "Birthday cannot be in future",
   "birthdayNotOver140YearsAgo": "Birthday cannot be more than 140 years ago",
   "birthdayRequired": "Birthday is required",
@@ -45,6 +46,7 @@
   "deleteIdentifierTooltip": "Delete",
   "deleteRelationshipTooltipText": "Delete",
   "demographicsSection": "Basic Info",
+  "dependants": "Dependants",
   "dependents": "Dependents",
   "discard": "Discard",
   "dobToggleLabelText": "Date of Birth Known?",
@@ -84,7 +86,9 @@
   "male": "Male",
   "maritalStatus": "Marital status",
   "middleNameLabelText": "Middle Name",
+  "name": "Name",
   "nationalId": "National ID",
+  "nationalID": "National ID",
   "negativeMonths": "Estimated months cannot be negative",
   "negativeYears": "Estimated years cannot be negative",
   "no": "No",
@@ -138,6 +142,7 @@
   "unableToFetch": "Unable to fetch person attribute type - {{personattributetype}}",
   "unknown": "Unknown",
   "unknownPatientAttributeType": "Patient attribute type has unknown format {{personAttributeTypeFormat}}",
+  "unknownRelationship": "Unknown",
   "updatePatient": "Update patient",
   "updatePatientErrorSnackbarTitle": "Patient Details Update Failed",
   "updatePatientSuccessSnackbarSubtitle": "The patient's information has been successfully updated",