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

package/src/patient-registration/client-registry/existing-client/mapper-utils.ts

@@ -0,0 +1,419 @@
+import dayjs from 'dayjs';
+import { HieAttributeType, type HieClient, HieIdentificationType } from '../types';
+import {
+  type AmrsClient,
+  type CustomRelationship,
+  IdentifierTypesUuids,
+  PersonAttributeTypeUuids,
+  RelationshipTypeUuids,
+} from './types';
+
+export const nameFields = ['givenName', 'middleName', 'familyName'];
+
+export const addressFields = [
+  'country',
+  'countyDistrict',
+  'address2',
+  'address7',
+  'cityVillage',
+  'longitude',
+  'latitude',
+];
+
+export const personSyncFields = [...nameFields, 'gender', 'birthdate', ...addressFields];
+
+export const identifiersSyncFields = () => Object.keys(HieIdentificationType);
+
+export const attributesSyncFields = () => Object.keys(HieAttributeType);
+
+export const getIdentifierUuid = (identifier: string) => {
+  let val = '';
+  switch (identifier) {
+    case HieIdentificationType.AlienID:
+      val = IdentifierTypesUuids.ALIEN_ID_UUID;
+      break;
+    case HieIdentificationType.HouseholdNumber:
+      val = IdentifierTypesUuids.HOUSE_HOLD_NUMBER_UUID;
+      break;
+    case HieIdentificationType.MandateNumber:
+      val = IdentifierTypesUuids.MANDATE_NUMBER_UUID;
+      break;
+    case HieIdentificationType.Cr:
+      val = IdentifierTypesUuids.CLIENT_REGISTRY_NO_UUID;
+      break;
+    case HieIdentificationType.NationalID:
+      val = IdentifierTypesUuids.NATIONAL_ID_UUID;
+      break;
+    case HieIdentificationType.RefugeeID:
+      val = IdentifierTypesUuids.REFUGEE_ID_UUID;
+      break;
+    case HieIdentificationType.SHANumber:
+      val = IdentifierTypesUuids.SHA_UUID;
+      break;
+    case HieIdentificationType.TemporaryDependantID:
+      val = IdentifierTypesUuids.TEMPORARY_DEPENDANT_ID_UUID;
+      break;
+    default:
+      val = '';
+  }
+  return val;
+};
+
+export const getAttributeUuid = (attribute: string) => {
+  let val = '';
+  switch (attribute) {
+    case HieAttributeType.Citizenship:
+      val = PersonAttributeTypeUuids.CITIZENSHIP_UUID;
+      break;
+    case HieAttributeType.CivilStatus:
+      val = PersonAttributeTypeUuids.CIVIL_STATUS_UUID;
+      break;
+    case HieAttributeType.Email:
+      val = PersonAttributeTypeUuids.CONTACT_EMAIL_ADDRESS_UUID;
+      break;
+    case HieAttributeType.KRAPin:
+      val = PersonAttributeTypeUuids.KRA_PIN_UUID;
+      break;
+    case HieAttributeType.Phone:
+      val = PersonAttributeTypeUuids.CONTACT_PHONE_NUMBER_UUID;
+      break;
+    case HieAttributeType.PlaceOfBirth:
+      val = PersonAttributeTypeUuids.PLACE_OF_BIRTH_UUID;
+      break;
+    case HieAttributeType.Cr:
+      val = PersonAttributeTypeUuids.CLIENT_REGISTRY_ID_UUID;
+      break;
+    default:
+      val = '';
+  }
+  return val;
+};
+
+export const getAmrsRelationshipTypeUuid = (relationshipType: string) => {
+  let relationShipTypeUuid = '';
+  switch (relationshipType) {
+    case 'Spouse':
+      relationShipTypeUuid = RelationshipTypeUuids.SPOUSE_UUID;
+      break;
+    case 'Child':
+      relationShipTypeUuid = RelationshipTypeUuids.PARENT_CHILD_UUID;
+      break;
+    default:
+      relationShipTypeUuid = RelationshipTypeUuids.OTHER_NON_CODED_UUID;
+  }
+
+  return relationShipTypeUuid;
+};
+
+export const patientObjFields = [...personSyncFields, ...identifiersSyncFields()];
+
+const sanitizeValue = (value: unknown) => {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  return value;
+};
+
+export const mapFieldValue = (field: string, hieData: HieClient, amrsPerson: AmrsClient): Array<string> => {
+  let arr = [];
+  switch (field) {
+    case 'givenName':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredName?.givenName), sanitizeValue(hieData?.first_name)];
+      break;
+    case 'middleName':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredName?.middleName), sanitizeValue(hieData?.middle_name)];
+      break;
+    case 'familyName':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredName?.familyName), sanitizeValue(hieData?.last_name)];
+      break;
+    case 'gender':
+      arr = [sanitizeValue(amrsPerson?.person?.gender), sanitizeValue(hieData?.gender)];
+      break;
+    case 'birthdate':
+      arr = [
+        dayjs(sanitizeValue(amrsPerson?.person?.birthdate) + '', 'YYYY-MM-DD', true).isValid()
+          ? dayjs(sanitizeValue(amrsPerson?.person?.birthdate) + '').format('YYYY-MM-DD')
+          : sanitizeValue(amrsPerson?.person?.birthdate),
+        sanitizeValue(hieData?.date_of_birth),
+      ];
+      break;
+    case 'country':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.country), sanitizeValue(hieData?.country)];
+      break;
+    case 'countyDistrict':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.countyDistrict), sanitizeValue(hieData?.county)];
+      break;
+    case 'address2':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.address2), sanitizeValue(hieData?.sub_county)];
+      break;
+    case 'address7':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.address7), sanitizeValue(hieData?.ward)];
+      break;
+    case 'cityVillage':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.cityVillage), sanitizeValue(hieData?.village_estate)];
+      break;
+    case 'longitude':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.longitude), sanitizeValue(hieData?.longitude)];
+      break;
+    case 'latitude':
+      arr = [sanitizeValue(amrsPerson?.person?.preferredAddress?.latitude), sanitizeValue(hieData?.latitude)];
+      break;
+    case 'NationalID':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.NationalID),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find((v) => v.identification_type === HieIdentificationType.NationalID)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'SHANumber':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.SHANumber),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find((v) => v.identification_type === HieIdentificationType.SHANumber)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'HouseholdNumber':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.HouseholdNumber),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications?.find((v) => v.identification_type === HieIdentificationType.HouseholdNumber)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'RefugeeID':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.RefugeeID),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find((v) => v.identification_type === HieIdentificationType.RefugeeID)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'AlienID':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.AlienID),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find((v) => v.identification_type === HieIdentificationType.AlienID)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'MandateNumber':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.MandateNumber),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find((v) => v.identification_type === HieIdentificationType.MandateNumber)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'Cr':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.Cr),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find((v) => v.identification_type === HieIdentificationType.Cr)
+            ?.identification_number,
+        ),
+      ];
+      break;
+    case 'TemporaryDependantID':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.identifiers?.find(
+            (v) => v.identifierType.uuid === getIdentifierUuid(HieIdentificationType.TemporaryDependantID),
+          )?.identifier,
+        ),
+        sanitizeValue(
+          hieData?.other_identifications.find(
+            (v) => v.identification_type === HieIdentificationType.TemporaryDependantID,
+          )?.identification_number,
+        ),
+      ];
+      break;
+    case 'PlaceOfBirth':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.attributes.find(
+            (v) => v.attributeType.uuid === getAttributeUuid(HieAttributeType.PlaceOfBirth),
+          )?.value,
+        ),
+        sanitizeValue(hieData?.place_of_birth),
+      ];
+      break;
+    case 'CivilStatus':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.attributes.find(
+            (v) => v.attributeType.uuid === getAttributeUuid(HieAttributeType.CivilStatus),
+          )?.value,
+        ),
+        sanitizeValue(hieData?.civil_status),
+      ];
+      break;
+    case 'Email':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.attributes.find((v) => v.attributeType.uuid === getAttributeUuid(HieAttributeType.Email))
+            ?.value,
+        ),
+        sanitizeValue(hieData?.email),
+      ];
+      break;
+    case 'Phone':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.attributes.find((v) => v.attributeType.uuid === getAttributeUuid(HieAttributeType.Phone))
+            ?.value,
+        ),
+        sanitizeValue(hieData?.phone),
+      ];
+      break;
+    case 'KRAPin':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.attributes.find((v) => v.attributeType.uuid === getAttributeUuid(HieAttributeType.KRAPin))
+            ?.value,
+        ),
+        sanitizeValue(hieData?.kra_pin),
+      ];
+      break;
+    case 'Citizenship':
+      arr = [
+        sanitizeValue(
+          amrsPerson?.person?.attributes.find(
+            (v) => v.attributeType.uuid === getAttributeUuid(HieAttributeType.Citizenship),
+          )?.value,
+        ),
+        sanitizeValue(hieData?.citizenship),
+      ];
+      break;
+    default:
+      arr = ['', ''];
+  }
+  return arr;
+};
+
+export function getPatientRelationshipPayload(amrsPerson: AmrsClient, relationshipType: string, dependantUuid: string) {
+  const startDate = dayjs().format('YYYY-MM-DDTHH:mm:ss.SSSZZ');
+  const patientRelationshipPayload = {
+    personA: amrsPerson.person.uuid,
+    relationshipType: getAmrsRelationshipTypeUuid(relationshipType),
+    personB: dependantUuid,
+    startDate: startDate,
+  };
+  return patientRelationshipPayload;
+}
+
+export function mapAmrsPatientRelationship(uuid: string, relationships: Array<any>) {
+  const relationshipsArr: Array<CustomRelationship> = [];
+  if (relationships) {
+    for (const relationship of relationships) {
+      if (uuid === relationship?.personA?.uuid) {
+        const relation = {
+          uuid: relationship?.uuid,
+          display: relationship?.personB?.display,
+          relative: relationship?.personB?.display,
+          relatedPersonUuid: relationship?.personB?.uuid,
+          relationshipType: relationship?.relationshipType?.bIsToA,
+          relationshipTypeUuId: relationship?.relationshipType?.uuid,
+          relationshipTypeName: relationship?.relationshipType?.display,
+          relatedPerson: relationship?.personB,
+        };
+        relationshipsArr.push(relation);
+      } else {
+        const relation = {
+          uuid: relationship?.uuid,
+          display: relationship?.personA?.display,
+          relative: relationship?.personA?.display,
+          relatedPersonUuid: relationship?.personA?.uuid,
+          relationshipType: relationship?.relationshipType?.aIsToB,
+          relatedPerson: relationship?.personA,
+          relationshipTypeUuId: relationship?.relationshipType?.uuid,
+          relationshipTypeName: relationship?.relationshipType?.display,
+        };
+        relationshipsArr.push(relation);
+      }
+    }
+  }
+  return relationshipsArr;
+}
+
+export function getPatientAttributes(hieClient: HieClient) {
+  const attributes = [];
+  if (hieClient.place_of_birth.length > 0) {
+    attributes.push({
+      value: hieClient.place_of_birth,
+      attributeType: getAttributeUuid(HieAttributeType.PlaceOfBirth),
+    });
+  }
+  if (hieClient.phone.length > 0) {
+    attributes.push({
+      value: hieClient.phone,
+      attributeType: getAttributeUuid(HieAttributeType.Phone),
+    });
+  }
+  if (hieClient.email.length > 0) {
+    attributes.push({
+      value: hieClient.email,
+      attributeType: getAttributeUuid(HieAttributeType.Email),
+    });
+  }
+  if (hieClient.kra_pin.length > 0) {
+    attributes.push({
+      value: hieClient.kra_pin,
+      attributeType: getAttributeUuid(HieAttributeType.KRAPin),
+    });
+  }
+  if (hieClient.civil_status.length > 0) {
+    attributes.push({
+      value: this.getAmrsConceptUuidFromField(hieClient.civil_status),
+      attributeType: getAttributeUuid(HieAttributeType.CivilStatus),
+    });
+  }
+  if (hieClient.id) {
+    attributes.push({
+      value: hieClient.id,
+      attributeType: getAttributeUuid(HieAttributeType.Cr),
+    });
+  }
+  if (hieClient.citizenship) {
+    attributes.push({
+      value: hieClient.citizenship,
+      attributeType: getAttributeUuid(HieAttributeType.Citizenship),
+    });
+  }
+  return attributes;
+}

package/src/patient-registration/client-registry/existing-client/types/index.ts

@@ -0,0 +1,185 @@
+import { type HieDependant, type HieClient } from '../../types';
+
+const HOUSE_HOLD_NUMBER_UUID = 'bb74b20e-dcee-4f59-bdf1-2dffc3abf106';
+const SHA_UUID = 'cf5362b2-8049-4442-b3c6-36f870e320cb';
+const CLIENT_REGISTRY_NO_UUID = 'e88dc246-3614-4ee3-8141-1f2a83054e72';
+const NATIONAL_ID_UUID = '58a47054-1359-11df-a1f1-0026b9348838';
+const PROVIDER_NATIONAL_ID_UUID = '4550df92-c684-4597-8ab8-d6b10eabdcfb';
+const REFUGEE_ID_UUID = '465e81af-8d69-47e9-9127-53a94adc75fb';
+const MANDATE_NUMBER_UUID = 'aae2d097-20ba-43ca-9b71-fd8296068f39';
+const ALIEN_ID_UUID = '12f5b147-3403-4a73-913d-7ded9ffec094';
+const TEMPORARY_DEPENDANT_ID_UUID = 'a3d34214-93e8-4faf-bf4d-0272eee079eb';
+const AMRS_UNIVERSAL_ID_UUID = '58a4732e-1359-11df-a1f1-0026b9348838';
+const UPI_NUMBER_UUID = 'cba702b9-4664-4b43-83f1-9ab473cbd64d';
+
+export const IdentifierTypesUuids = {
+  HOUSE_HOLD_NUMBER_UUID,
+  SHA_UUID,
+  CLIENT_REGISTRY_NO_UUID,
+  NATIONAL_ID_UUID,
+  PROVIDER_NATIONAL_ID_UUID,
+  REFUGEE_ID_UUID,
+  MANDATE_NUMBER_UUID,
+  ALIEN_ID_UUID,
+  TEMPORARY_DEPENDANT_ID_UUID,
+  AMRS_UNIVERSAL_ID_UUID,
+  UPI_NUMBER_UUID,
+};
+
+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,
+};
+
+const PARENT_CHILD_UUID = '7878d348-1359-11df-a1f1-0026b9348838';
+const AUNT_UNCLE_NIECE_NEPHEW_UUID = '7878dd3e-1359-11df-a1f1-0026b9348838';
+const SPOUSE_UUID = '7878df3c-1359-11df-a1f1-0026b9348838';
+const GRANDCHILD_GRANDPARENT_UUID = '7878e144-1359-11df-a1f1-0026b9348838';
+const GUARDIAN_CHILD_UUUD = '01bc0cf5-d428-427f-be13-305eb9cad7ba';
+const FOSTER_CHILD_FOSTER_PARENT_UUID = '7878e52c-1359-11df-a1f1-0026b9348838';
+const OTHER_NON_CODED_UUID = 'af78531e-98ab-41da-be3a-6a871ecbf8c0';
+
+export const RelationshipTypeUuids = {
+  PARENT_CHILD_UUID,
+  AUNT_UNCLE_NIECE_NEPHEW_UUID,
+  SPOUSE_UUID,
+  GRANDCHILD_GRANDPARENT_UUID,
+  GUARDIAN_CHILD_UUUD,
+  FOSTER_CHILD_FOSTER_PARENT_UUID,
+  OTHER_NON_CODED_UUID,
+};
+
+export interface AmrsClient {
+  uuid: string;
+  identifiers: Identifier[];
+  display: string;
+  person: {
+    uuid: string;
+    display: string;
+    gender: string;
+    age: number;
+    birthdate: string;
+    birthdateEstimated: boolean;
+    dead: boolean;
+    deathDate?: any;
+    causeOfDeath?: any;
+    preferredAddress: {
+      address1: string;
+      address2: string;
+      address3: string;
+      address4: string;
+      address5: string;
+      address6: string;
+      address7: string;
+      cityVillage: string;
+      country: string;
+      postalCode: string;
+      stateProvince: string;
+      countyDistrict: string;
+      latitude: string;
+      longitude: string;
+    };
+    preferredName: {
+      display: string;
+      uuid: string;
+      givenName: string;
+      middleName: string;
+      familyName: string;
+    };
+    attributes: Array<Attributes>;
+    identifiers: Identifier[];
+    voided: boolean;
+    birthtime?: any;
+    deathdateEstimated: boolean;
+    resourceVersion: string;
+  };
+  attributes: { value: string; attributeType: { uuid: string; display: string } }[];
+  voided: boolean;
+}
+
+export interface Address {
+  preferred: boolean;
+  address1: string;
+  cityVillage: string;
+  country: string;
+  postalCode: string;
+  stateProvince: string;
+}
+
+export interface Identifier {
+  uuid: string;
+  display: string;
+  identifier: string;
+  identifierType: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface Attributes {
+  uuid: string;
+  display: string;
+  value: {
+    uuid: string;
+    display: string;
+  };
+  attributeType: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface CustomRelationship {
+  uuid: string;
+  display: string;
+  relative: string;
+  relatedPersonUuid: string;
+  relationshipType: string;
+  relationshipTypeUuId: string;
+  relationshipTypeName: string;
+  relatedPerson: any;
+}
+
+export interface ClientDetailsComparisonProps {
+  hieClient: HieClient;
+  amrsClient: AmrsClient;
+  fromDependant?: boolean;
+}
+
+export interface ComparisonTableRowProps {
+  field: string;
+  label: string;
+  amrsValue: string;
+  hieValue: string;
+  onChange?(e: boolean, field: string, value: string, multiple: boolean): void;
+  allChecked: boolean;
+}
+
+export interface ClientDependantsComparisonProps {
+  hieDependants: Array<HieDependant>;
+  amrsClient: AmrsClient;
+  patientRelationships: Array<CustomRelationship>;
+}
+
+export interface ClientDependantComparisonRowsProps {
+  hieDependant: HieDependant;
+  patientRelationships: Array<CustomRelationship>;
+  amrsClient: AmrsClient;
+}

package/src/patient-registration/client-registry/{client-dependants → new-client/client-dependants}/list/client-depandants.component.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import { HieClient, type HieDependant } from '../../types';
 import { Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { type HieDependant } from '../../../types';
 
 interface ClientDependantsListProps {
   hieDependants: HieDependant[];

package/src/patient-registration/client-registry/{client-details → new-client/client-details}/client-details.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import { type HieClient } from '../types';
+import { type HieClient } from '../../types';
 import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
-import { generateHieClientDetails } from '../hie-client-adapter';
+import { generateHieClientDetails } from '../../hie-client-adapter';
 
 interface ClientdetailsProps {
   client: HieClient;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tabs, TabList, Tab, TabPanels, TabPanel, Button } from '@carbon/react';
+import { type HieClient } from '../types';
+import ClientDependantList from './client-dependants/list/client-depandants.component';
+import ClientDetails from './client-details/client-details';
+
+interface NewClientTabProps {
+  client: HieClient;
+  useHieData: () => void;
+}
+
+const NewClientTab: React.FC<NewClientTabProps> = ({ client, useHieData }) => {
+  return (
+    <>
+      <Tabs>
+        <TabList contained>
+          <Tab>Patient</Tab>
+          <Tab>Dependants</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>{client ? <ClientDetails client={client} /> : <></>}</TabPanel>
+          <TabPanel>{client.dependants ? <ClientDependantList hieDependants={client.dependants} /> : <></>}</TabPanel>
+        </TabPanels>
+      </Tabs>
+      <Button onClick={useHieData}>Use Data</Button>
+    </>
+  );
+};
+
+export default NewClientTab;

package/src/patient-registration/client-registry/types/index.ts

@@ -9,6 +9,16 @@ export enum HieIdentificationType {
   TemporaryDependantID = 'Temporary Dependant ID',
 }
 
+export enum HieAttributeType {
+  KRAPin = 'kra_pin',
+  CivilStatus = 'civil_status',
+  Email = 'email',
+  Phone = 'phone',
+  PlaceOfBirth = 'place_of_birth',
+  Citizenship = 'citizenship',
+  Cr = 'id',
+}
+
 export interface HieIdentifications {
   identification_number: string;
   identification_type: HieIdentificationType;

package/src/patient-registration/patient-registration.component.tsx

@@ -262,6 +262,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                         onClientVerified={() => setIsClientVerified(true)}
                         onModalClose={closeVerifyModal}
                         open={showVerifyModal}
+                        isNewClient={true}
                       />
                     </>
                   ) : (