@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2202 → 5.4.2-pre.2223

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

@@ -1,13 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ComboButton, MenuItem, DataTableSkeleton } from '@carbon/react';
-import {
-  CardHeader,
-  EmptyState,
-  launchPatientWorkspace,
-  useVisitOrOfflineVisit,
-} from '@openmrs/esm-patient-common-lib';
-import { useConfig, useVisit, evaluateAsBoolean } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+import { useConfig, useVisit, evaluateAsBoolean, launchWorkspace } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 import { BedManagementConfig } from '../config-schema';
 import { usePatientEncounters } from './in-patient.resource';
@@ -41,7 +36,7 @@ const InPatient: React.FC<InPatientProps> = ({ patientUuid, patient }) => {
   });
 
   const handleLaunchForm = (form: { label: string; uuid: string }) => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: form.label,
       mutateForm: () => mutate(),
       formInfo: {

package/src/maternal-and-child-health/maternal-health-component.scss

@@ -1,8 +1,9 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetContainer {
-  background-color: $ui-background;
+  background-color: colors.$white;
 }
 
 .widgetHeaderContainer {
@@ -52,7 +53,7 @@
 }
 
 .widgetCard {
-  background-color: $ui-background;
+  background-color: colors.$white;
   border: 1px solid $ui-03;
   position: relative;
 }

package/src/maternal-and-child-health/partography/labour-delivery.scss

@@ -1,9 +1,11 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '../../root.scss';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '../../root.scss';
 
 .widgetContainer {
-  background-color: $ui-background;
+  background-color: colors.$white;
   border: 1px solid #e0e0e0;
   margin-bottom: 1rem;
 }
@@ -48,7 +50,7 @@
   }
 }
 .widgetCard {
-  background-color: $ui-background;
+  background-color: colors.$white;
   border: 1px solid $ui-03;
 }
 
@@ -82,11 +84,11 @@
 
     &:global(.cds--btn--tertiary:focus) {
       background-color: $interactive-01;
-      color: $ui-background;
+      color: colors.$white;
     }
 
     &:global(.cds--btn--tertiary:hover) {
-      color: $ui-background;
+      color: colors.$white;
       background-color: $interactive-01;
     }
 

package/src/maternal-and-child-health/partography/partograph-chart.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .label01 {
   @include type.type-style('label-01');

package/src/maternal-and-child-health/partography/partograph.component.tsx

@@ -15,14 +15,8 @@ import {
   Button,
 } from '@carbon/react';
 import { Add, ChartLineSmooth } from '@carbon/react/icons';
-import {
-  EmptyDataIllustration,
-  ErrorState,
-  CardHeader,
-  launchPatientWorkspace,
-  EmptyState,
-} from '@openmrs/esm-patient-common-lib';
-import { formatDate, isDesktop, parseDate, useLayoutType } from '@openmrs/esm-framework';
+import { EmptyDataIllustration, ErrorState, CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import { formatDate, isDesktop, launchWorkspace, parseDate, useLayoutType } from '@openmrs/esm-framework';
 import styles from './labour-delivery.scss';
 import { usePartograph } from '../../hooks/usePartograph';
 import dayjs from 'dayjs';
@@ -108,7 +102,7 @@ const Partograph: React.FC<PartographyProps> = ({ patientUuid }) => {
     }) ?? [];
 
   const handleAddHistory = () => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: headerTitle,
       mutateForm: () => {
         mutate();
@@ -204,9 +198,9 @@ const Partograph: React.FC<PartographyProps> = ({ patientUuid }) => {
                                 <TableHeader
                                   {...getHeaderProps({
                                     header,
-                                    isSortable: header.isSortable,
+                                    isSortable: true,
                                   })}>
-                                  {header.header?.content ?? header.header}
+                                  {header.header}
                                 </TableHeader>
                               ))}
                             </TableRow>

package/src/peer-calendar/forms/peer-form.workspace.tsx

@@ -80,7 +80,7 @@ const PeerForm: React.FC<PeerFormProps> = ({ closeWorkspace }) => {
             render={({ field }) => (
               <Dropdown
                 ref={field.ref}
-                invalid={form.formState.errors[field.name]?.message}
+                invalid={!!form.formState.errors[field.name]?.message}
                 invalidText={form.formState.errors[field.name]?.message}
                 id="relationship"
                 titleText={t('relationshipType', 'RelationshipbType')}
@@ -105,7 +105,7 @@ const PeerForm: React.FC<PeerFormProps> = ({ closeWorkspace }) => {
             render={({ field }) => (
               <Dropdown
                 ref={field.ref}
-                invalid={form.formState.errors[field.name]?.message}
+                invalid={!!form.formState.errors[field.name]?.message}
                 invalidText={form.formState.errors[field.name]?.message}
                 id="peerEducator"
                 titleText={t('peerEducator', 'Peer Educator')}
@@ -132,16 +132,16 @@ const PeerForm: React.FC<PeerFormProps> = ({ closeWorkspace }) => {
                 value={field.value}
                 onChange={field.onChange}
                 dateFormat="d/m/Y"
-                id="startDate"
                 datePickerType="single"
-                invalid={form.formState.errors[field.name]?.message}
+                invalid={!!form.formState.errors[field.name]?.message}
                 invalidText={form.formState.errors[field.name]?.message}>
                 <DatePickerInput
-                  invalid={form.formState.errors[field.name]?.message}
+                  invalid={!!form.formState.errors[field.name]?.message}
                   invalidText={form.formState.errors[field.name]?.message}
                   placeholder="mm/dd/yyyy"
                   labelText={t('startDate', 'Start Date')}
-                  size={'xl'}
+                  size="lg"
+                  id="startDate"
                 />
               </DatePicker>
             )}
@@ -156,16 +156,16 @@ const PeerForm: React.FC<PeerFormProps> = ({ closeWorkspace }) => {
                 value={field.value}
                 onChange={field.onChange}
                 dateFormat="d/m/Y"
-                id="endDate"
                 datePickerType="single"
-                invalid={form.formState.errors[field.name]?.message}
+                invalid={!!form.formState.errors[field.name]?.message}
                 invalidText={form.formState.errors[field.name]?.message}>
                 <DatePickerInput
-                  invalid={form.formState.errors[field.name]?.message}
+                  invalid={!!form.formState.errors[field.name]?.message}
                   invalidText={form.formState.errors[field.name]?.message}
                   placeholder="mm/dd/yyyy"
                   labelText={t('endDate', 'End Date')}
-                  size="xl"
+                  size="lg"
+                  id="endDate"
                 />
               </DatePicker>
             )}
@@ -173,7 +173,7 @@ const PeerForm: React.FC<PeerFormProps> = ({ closeWorkspace }) => {
         </Column>
       </Stack>
       <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('discard', 'Discard')}
         </Button>
         <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>

package/src/peer-calendar/header/reporting-period-input.component.tsx

@@ -22,6 +22,7 @@ const ReportingPeriodInput: React.FC<ReportingPeriodInputProps> = ({
       <Column className={styles.reportingPeriodInput}>Select Period:</Column>
       <Column className={styles.reportingPeriodInput}>
         <Dropdown
+          titleText={t('reportingMonth', 'Reporting month')}
           type="inline"
           id="reportingMonth"
           autoAlign={true}
@@ -36,6 +37,7 @@ const ReportingPeriodInput: React.FC<ReportingPeriodInputProps> = ({
       </Column>
       <Column className={styles.reportingPeriodInput}>
         <Dropdown
+          titleText={t('reportingYear', 'Reporting year')}
           type="inline"
           autoAlign={true}
           id="reportingYear"
@@ -45,7 +47,7 @@ const ReportingPeriodInput: React.FC<ReportingPeriodInputProps> = ({
           initialSelectedItem={reportigPeriod?.year}
           label={t('reportingYear', 'Year')}
           items={years.map((r) => r)}
-          itemToString={(item) => years.find((r) => r === item) ?? ''}
+          itemToString={(item) => years.find((r) => r === item).toString() ?? ''}
         />
       </Column>
     </div>

package/src/peer-calendar/metrics/peer-calendar-metrics.component.tsx

@@ -1,7 +1,6 @@
 import { Button, Layer, Row, SkeletonPlaceholder } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
-import { useSession } from '@openmrs/esm-framework';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, useSession } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Peer, ReportingPeriod } from '../../types';
@@ -31,7 +30,7 @@ const PeerCalendarMetricsHeader: React.FC<PeerCalendarMetricsHeaderProps> = ({
 
   const { t } = useTranslation();
   const handleAddPeer = () => {
-    launchPatientWorkspace('peers-form', {});
+    launchWorkspace('peers-form', {});
   };
 
   if (isLoading) {

package/src/peer-calendar/table/generic-data-table.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetContainer {
   background-color: colors.$white-0;

package/src/peer-calendar/table/generic-data-table.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 
 type GenericDataTableProps = {
   headers: Array<{ key: string; header: string }>;
+  // TODO : Map row to correct carbon data-table row type
   rows: Array<Record<string, any>>;
   title: string;
   renderActionComponent?: () => ReactNode;
@@ -31,7 +32,7 @@ const GenericDataTable: React.FC<GenericDataTableProps> = ({ headers, rows, titl
   return (
     <div className={styles.widgetContainer}>
       <CardHeader title={title}>{renderActionComponent?.()}</CardHeader>
-      <DataTable useZebraStyles size="sm" rows={rows} headers={headers}>
+      <DataTable useZebraStyles size="sm" rows={rows as any} headers={headers}>
         {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
           <Table {...getTableProps()}>
             <TableHead>

package/src/peer-calendar/table/peer-calendar-table-filter.component.tsx

@@ -2,9 +2,11 @@ import { Dropdown } from '@carbon/react';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+type FilterStatus = 'completed' | 'pending' | 'all';
+
 type PeerCalendarTableFilterProps = {
   filterStatus?: 'completed' | 'pending' | 'all';
-  onUpdateFilterStatus: (status: 'completed' | 'pending' | 'all') => void;
+  onUpdateFilterStatus: (status: FilterStatus) => void;
 };
 
 const PeerCalendarTableFilter: React.FC<PeerCalendarTableFilterProps> = ({
@@ -13,13 +15,14 @@ const PeerCalendarTableFilter: React.FC<PeerCalendarTableFilterProps> = ({
 }) => {
   const { t } = useTranslation();
   const statuses = useMemo(() => ['completed', 'pending', 'all'], []);
-  const [_state, _setState] = useState<'completed' | 'pending' | 'all'>('completed');
+  const [_state, setSate] = useState<'completed' | 'pending' | 'all'>('completed');
   return (
     <div style={{ width: '200px' }}>
       <Dropdown
+        titleText={t('filterByStatue', 'Filter by status')}
         id="filterByStatus"
         onChange={(e) => {
-          onUpdateFilterStatus(e.selectedItem);
+          onUpdateFilterStatus(e.selectedItem as FilterStatus);
         }}
         selectedItem={filterStatus}
         label={t('filterByStatus', 'Filter by status')}

package/src/relationships/forms/baseline-info-form-section.component.tsx

@@ -1,6 +1,6 @@
 import { Column, Dropdown, RadioButton, RadioButtonGroup, SelectSkeleton } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import React, { useEffect, useMemo } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -11,45 +11,40 @@ import {
   getHivStatusBasedOnEnrollmentAndHTSEncounters,
 } from '../../contact-list/contact-list.resource';
 import usePersonAttributes from '../../hooks/usePersonAttributes';
-import { BOOLEAN_NO, BOOLEAN_YES, relationshipFormSchema } from '../relationship.resources';
+import useRelativeHivEnrollment from '../../hooks/useRelativeHivEnrollment';
+import useRelativeHTSEncounter from '../../hooks/useRelativeHTSEncounter';
+import {
+  BOOLEAN_NO,
+  BOOLEAN_YES,
+  HIV_EXPOSED_INFANT,
+  INFANT_AGE_THRESHOLD_IN_MONTHS,
+  relationshipFormSchema,
+} from '../relationship.resources';
 import {
   LIVING_WITH_PATIENT_CONCEPT_UUID,
   PARTNER_HIV_STATUS_CONCEPT_UUID,
   PNS_APROACH_CONCEPT_UUID,
 } from '../relationships-constants';
 import styles from './form.scss';
-import useRelativeHivEnrollment from '../../hooks/useRelativeHivEnrollment';
-import useRelativeHTSEncounter from '../../hooks/useRelativeHTSEncounter';
 
-const RelationshipBaselineInfoFormSection = () => {
+type RelationshipBaselineInfoFormSectionProps = {
+  patientAgeMonths?: number;
+  patientUuid?: string;
+};
+
+const RelationshipBaselineInfoFormSection: FC<RelationshipBaselineInfoFormSectionProps> = ({
+  patientAgeMonths = null,
+  patientUuid,
+}) => {
   const form = useFormContext<z.infer<typeof relationshipFormSchema>>();
-  const {
-    enrollment,
-    isLoading: enrollmentLoading,
-    error: enrollmentError,
-  } = useRelativeHivEnrollment(form.watch('personB'));
-  const {
-    encounters,
-    isLoading: encounterLoading,
-    error: encounterError,
-  } = useRelativeHTSEncounter(form.watch('personB'));
+  const { enrollment, isLoading: enrollmentLoading, error: enrollmentError } = useRelativeHivEnrollment(patientUuid);
+  const { encounters, isLoading: encounterLoading, error: encounterError } = useRelativeHTSEncounter(patientUuid);
   const hivStatusPersonB = getHivStatusBasedOnEnrollmentAndHTSEncounters(encounters, enrollment);
 
   const { t } = useTranslation();
-  const personUuid = form.watch('personB');
   const config = useConfig<ConfigObject>();
   const { setValue } = form;
-  const { attributes, isLoading } = usePersonAttributes(personUuid);
-
-  const hivStatus = useMemo(
-    () =>
-      Object.entries(contactListConceptMap[PARTNER_HIV_STATUS_CONCEPT_UUID].answers).map(([uuid, display]) => ({
-        label: display,
-        value: uuid,
-      })),
-    [],
-  );
-
+  const { attributes, isLoading } = usePersonAttributes(patientUuid);
   const pnsAproach = useMemo(
     () =>
       Object.entries(contactListConceptMap[PNS_APROACH_CONCEPT_UUID].answers).map(([uuid, display]) => ({
@@ -77,6 +72,26 @@ const RelationshipBaselineInfoFormSection = () => {
       (r) => r.uuid === observableRelationship && r.category.some((c) => c === 'sexual'),
     ) !== -1;
 
+  const hivStatus = useMemo(
+    () =>
+      Object.entries(contactListConceptMap[PARTNER_HIV_STATUS_CONCEPT_UUID].answers).reduce((prev, [uuid, display]) => {
+        if (
+          display === HIV_EXPOSED_INFANT &&
+          (patientAgeMonths === null || patientAgeMonths > INFANT_AGE_THRESHOLD_IN_MONTHS)
+        ) {
+          return prev;
+        }
+        return [
+          ...prev,
+          {
+            label: display,
+            value: uuid,
+          },
+        ];
+      }, []),
+    [patientAgeMonths],
+  );
+
   useEffect(() => {
     if ([observablePhysicalAssault, observableThreatened, observableSexualAssault].includes(BOOLEAN_YES)) {
       form.setValue('ipvOutCome', 'True');
@@ -196,7 +211,7 @@ const RelationshipBaselineInfoFormSection = () => {
                     '1. Has he/she ever hit, kicked, slapped, or otherwise physically hurt you?',
                   )}
                   {...field}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   className={styles.billingItem}>
                   <RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="physicalAssault_yes" />
@@ -214,7 +229,7 @@ const RelationshipBaselineInfoFormSection = () => {
                   id="threatened"
                   legendText={t('threatened', '2. Has he/she ever threatened to hurt you?')}
                   {...field}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   className={styles.billingItem}>
                   <RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="threatened_yes" />
@@ -235,7 +250,7 @@ const RelationshipBaselineInfoFormSection = () => {
                     '3.Has he/she ever forced you to do something sexually that made you feel uncomfortable?',
                   )}
                   {...field}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   className={styles.billingItem}>
                   <RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="sexualAssault_yes" />
@@ -256,7 +271,7 @@ const RelationshipBaselineInfoFormSection = () => {
                   ) : (
                     <Dropdown
                       ref={field.ref}
-                      invalid={error?.message}
+                      invalid={!!error?.message}
                       invalidText={error?.message}
                       id="ipvOutCome"
                       titleText={t('ipvOutCome', 'IPV Outcome')}

package/src/relationships/forms/form.scss

@@ -2,7 +2,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/layout';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .loading {
   display: flex;

package/src/relationships/forms/patient-search-create-form.tsx

@@ -74,6 +74,7 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
           name="mode"
           render={({ field }) => (
             <ContentSwitcher
+              size="md"
               selectedIndex={field.value == 'search' ? 0 : 1}
               onChange={(value) => {
                 let { index, name, text } = value;
@@ -128,7 +129,8 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               name="personBInfo.givenName"
               render={({ field, fieldState: { error } }) => (
                 <TextInput
-                  invalid={error?.message}
+                  id={field.name}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   {...field}
                   placeholder="First name"
@@ -143,7 +145,8 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               name="personBInfo.middleName"
               render={({ field, fieldState: { error } }) => (
                 <TextInput
-                  invalid={error?.message}
+                  id={field.name}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   {...field}
                   placeholder="Middle name"
@@ -158,7 +161,8 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               name="personBInfo.familyName"
               render={({ field, fieldState: { error } }) => (
                 <TextInput
-                  invalid={error?.message}
+                  id={field.name}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   {...field}
                   placeholder="Last name"
@@ -172,17 +176,15 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               control={form.control}
               name="personBInfo.gender"
               render={({ field, fieldState: { error } }) => (
-                <>
-                  <RadioButtonGroup
-                    name="personBInfo.gender"
-                    legendText={t('sex', 'Sex')}
-                    {...field}
-                    invalid={error?.message}
-                    invalidText={error?.message}>
-                    <RadioButton labelText={t('male', 'Male')} value="M" id="M" />
-                    <RadioButton labelText={t('female', 'Female')} value="F" id="F" />
-                  </RadioButtonGroup>
-                </>
+                <RadioButtonGroup
+                  name="personBInfo.gender"
+                  legendText={t('sex', 'Sex')}
+                  {...field}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}>
+                  <RadioButton labelText={t('male', 'Male')} value="M" id="M" />
+                  <RadioButton labelText={t('female', 'Female')} value="F" id="F" />
+                </RadioButtonGroup>
               )}
             />
           </Column>
@@ -194,15 +196,16 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
                 <DatePicker
                   datePickerType="single"
                   {...field}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   className={styles.datePickerInput}>
                   <DatePickerInput
-                    invalid={error?.message}
+                    id={field.name}
+                    invalid={!!error?.message}
                     invalidText={error?.message}
                     placeholder="mm/dd/yyyy"
                     labelText={t('dateOfBirth', 'Date of birth')}
-                    size="xl"
+                    size="lg"
                   />
                 </DatePicker>
               )}
@@ -219,7 +222,7 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
                 render={({ field, fieldState: { error } }) => (
                   <Dropdown
                     ref={field.ref}
-                    invalid={error?.message}
+                    invalid={!!error?.message}
                     invalidText={error?.message}
                     id="maritalStatus"
                     titleText={t('maritalStatus', 'Marital status')}
@@ -242,7 +245,8 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               name="personBInfo.address"
               render={({ field, fieldState: { error } }) => (
                 <TextInput
-                  invalid={error?.message}
+                  id={field.name}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   {...field}
                   placeholder="Physical Address/Landmark"
@@ -258,7 +262,8 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               render={({ field, fieldState: { error } }) => (
                 <TextInput
                   {...field}
-                  invalid={error?.message}
+                  id={field.name}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   placeholder="Phone number"
                   labelText={t('phoneNumber', 'Phone number')}

package/src/relationships/modals/birthdate-calculator.modal.tsx

@@ -46,12 +46,13 @@ const BirthDateCalculator = ({ onClose, props: { date, onBirthDateChange } }) =>
           <Column>
             <Layer>
               <TextInput
+                id="age"
                 placeholder="age"
                 labelText={t('age', 'Age')}
                 type="number"
                 min={5}
                 value={formState.age}
-                onChange={(e) => setFormState({ ...formState, age: e.target.value })}
+                onChange={(e) => setFormState({ ...formState, age: parseInt(e.target.value) })}
               />
             </Layer>
           </Column>
@@ -61,7 +62,7 @@ const BirthDateCalculator = ({ onClose, props: { date, onBirthDateChange } }) =>
                 datePickerType="single"
                 value={formState.fromDate}
                 onChange={([date]) => setFormState({ ...formState, fromDate: date })}>
-                <DatePickerInput placeholder="mm/dd/yyyy" labelText={t('onDate', 'On Date')} size="xl" />
+                <DatePickerInput id="onDate" placeholder="mm/dd/yyyy" labelText={t('onDate', 'On Date')} size="lg" />
               </DatePicker>
             </Layer>
           </Column>

package/src/relationships/relationship.resources.ts

@@ -1,5 +1,5 @@
-import { openmrsFetch, restBaseUrl, Session, showModal, showSnackbar } from '@openmrs/esm-framework';
-import { mutate } from 'swr';
+import { FetchResponse, openmrsFetch, restBaseUrl, Session, showModal, showSnackbar } from '@openmrs/esm-framework';
+import useSWR, { mutate } from 'swr';
 import { z } from 'zod';
 import { Patient } from '../types';
 import { ConfigObject } from '../config-schema';
@@ -7,6 +7,8 @@ import omit from 'lodash/omit';
 
 export const BOOLEAN_YES = '1065';
 export const BOOLEAN_NO = '1066';
+export const HIV_EXPOSED_INFANT = 'HIV exposed infant';
+export const INFANT_AGE_THRESHOLD_IN_MONTHS = 24;
 
 export const relationshipUpdateFormSchema = z
   .object({
@@ -230,3 +232,17 @@ export const saveRelationship = async (
     throw error;
   }
 };
+
+export const usePatientBirthdate = (patientUuid?: string) => {
+  const customRep = 'custom:(person:(birthdate))';
+  const url = `${restBaseUrl}/patient/${patientUuid}?v=${customRep}`;
+  const { data, error, isLoading } = useSWR<FetchResponse<{ person: { birthdate: string } }>>(
+    patientUuid ? url : null,
+    openmrsFetch,
+  );
+  return {
+    isLoading,
+    error,
+    birthdate: data?.data?.person?.birthdate,
+  };
+};

package/src/relationships/tabs/relationships-tabs-component.tsx

@@ -12,8 +12,8 @@ interface RelationshipsTabProps {
 export const RelationshipsTab: React.FC<RelationshipsTabProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   return (
-    <main>
-      <Tabs className={styles.relationshipTabs}>
+    <main className={styles.relationshipTabs}>
+      <Tabs>
         <TabList className={styles.relationshipTablist} aria-label="List tabs" contained>
           <Tab className={styles.relationshipTab}>{t('family', 'Family')}</Tab>
           <Tab className={styles.relationshipTab}>{t('pnsContacts', 'PNS Contacts')}</Tab>

package/src/relationships/tabs/relationships-tabs.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .relationshipTabs {
   grid-column: span 2;

package/src/root.scss

@@ -1,12 +1,11 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 $ui-01: #f4f4f4;
 $ui-02: #ffffff;
 $ui-03: #e0e0e0;
 $ui-05: #161616;
-$ui-background: #ffffff;
 $color-gray-70: #525252;
 $color-blue-60-2: #0f62fe;
 $color-yellow-50: #feecae;