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

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"clinical-view-section","component":"clinicalViewPatientDashboard","slot":"patient-chart-dashboard-slot"},{"name":"family-history","slot":"patient-chart-family-history-slot","component":"familyHistory","order":0,"online":true,"offline":false},{"name":"relationships-link","component":"relationshipsLink","slot":"patient-chart-dashboard-slot","order":14,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-relationships-slot","path":"relationships","layoutMode":"anchored"}},{"name":"relationships","slot":"patient-chart-relationships-slot","component":"relationships","order":0,"online":true,"offline":false},{"name":"contact-list-form","component":"contactListForm"},{"name":"maternal-and-child-health-dashboard-group-link","slot":"clinical-view-section","component":"maternalAndChildHealthSideNavGroup"},{"name":"antenatal-care-dashboard-link","component":"antenatalCareLink","slot":"maternal-and-child-health-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-antenatal-care-dashboard-slot","path":"antenatal-care-dashboard","layoutMode":"anchored"}},{"name":"antenatal-care-dashboard","slot":"patient-chart-antenatal-care-dashboard-slot","component":"antenatalCare"},{"name":"postnatal-care-dashboard-link","component":"postnatalCareLink","slot":"maternal-and-child-health-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-postnatal-care-dashboard-slot","path":"postnatal-care-dashboard","layoutMode":"anchored"}},{"name":"postnatal-care-dashboard","slot":"patient-chart-postnatal-care-dashboard-slot","component":"postnatalCare"},{"name":"labour-and-delivery-dashboard-link","component":"labourAndDeliveryLink","slot":"maternal-and-child-health-slot","meta":{"fullWidth":true,"slot":"patient-chart-labour-and-delivery-dashboard-slot","path":"labour-and-delivery-dashboard","layoutMode":"anchored"}},{"name":"labour-and-delivery-dashboard","slot":"patient-chart-labour-and-delivery-dashboard-slot","component":"labourAndDelivery","meta":{"fullWidth":true}},{"name":"hiv-care-and-treatment-dashboard-group-link","slot":"special-clinics-slot","component":"hivCareAndTreatMentSideNavGroup"},{"name":"genericNavLinks","slot":"special-clinics-slot","component":"genericNavLinks","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-special-clinic-dashboard-slot","path":"special-clinics-dashboard","layoutMode":"anchored"}},{"name":"patient-chart-special-clinic-dashboard-slot","slot":"patient-chart-special-clinic-dashboard-slot","component":"genericDashboard"},{"name":"hts-dashboard-link","component":"htsDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hts-dashboard-slot","path":"hts-dashboard","layoutMode":"anchored"}},{"name":"hts-clinical-view","slot":"patient-chart-hts-dashboard-slot","component":"htsClinicalView","order":2,"online":true,"offline":false},{"name":"defaulter-tracing-dashboard-link","component":"defaulterTracingLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-defaulter-tracing-dashboard-slot","path":"defaulter-tracing-dashboard","layoutMode":"anchored"}},{"name":"defaulter-tracing-dashboard","slot":"patient-chart-defaulter-tracing-dashboard-slot","component":"defaulterTracing","order":3,"online":true,"offline":false},{"name":"special-clinics-dashboard-group-link","slot":"clinical-view-section","component":"specialClinicsSideNavGroup"},{"name":"clinical-encounter-link","component":"inPatientClinicalEncounterLink","slot":"clinical-view-section","order":40,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored"}},{"name":"clinical-encounter","slot":"patient-chart-clinical-encounter-slot","component":"inPatientClinicalEncounter","order":0,"online":true,"offline":false},{"component":"caseManagementDashboardLink","name":"case-management-dashboard-link","meta":{"name":"case-management","title":"Case Management","slot":"case-management-dashboard-slot","path":"/case-management"}},{"name":"in-patient-dashboard-link","component":"inPatientChartLink","slot":"patient-chart-dashboard-slot","order":7,"meta":{"slot":"patient-chart-in-patient-dashboard-slot","path":"in-patient","layoutMode":"anchored","columns":1,"columnSpan":1}},{"name":"in-patient-dashboard","slot":"patient-chart-in-patient-dashboard-slot","component":"inPatientChartDashboard","meta":{"fullWidth":false}},{"name":"wrap-component-view","slot":"case-management-dashboard-slot","component":"wrapComponent","order":2,"online":true,"offline":false},{"name":"case-encounter-link","component":"caseEncounterDashboardLink","slot":"patient-chart-dashboard-slot","order":14,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-case-encounter-slot","path":"case-management-encounters","layoutMode":"anchored"}},{"name":"case-encounter-table","slot":"patient-chart-case-encounter-slot","component":"caseEncounterTable","order":0,"online":true,"offline":false},{"component":"peerCalendarDashboardLink","name":"peer-calendar-dashboard-link","meta":{"name":"peer-calendar","title":"Peer Calendar","slot":"peer-calendar-dashboard-slot","path":"peer-management"}},{"name":"peer-calendar","slot":"peer-calendar-dashboard-slot","component":"peerCalendar","order":0,"online":true,"offline":false},{"name":"deceased-panel-dashboard-link","component":"deceasedPanelDashboardLink","slot":"patient-chart-dashboard-slot","order":15,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-deceased-panel-slot","path":"deceased-panel","layoutMode":"anchored"}},{"name":"deceased-details-tabs","slot":"patient-chart-deceased-panel-slot","component":"deceasedDetailsTabs","order":0,"online":true,"offline":false},{"name":"parto-graph-chart","slot":"patient-chart-labour-and-delivery-dashboard-slot","component":"partograph","meta":{"fullWidth":true}}],"modals":[{"name":"birth-date-calculator","component":"birthDateCalculator"},{"name":"relationship-delete-confirm-dialog","component":"relationshipDeleteConfirmialog"},{"name":"end-relationship-dialog","component":"endRelationshipModal"}],"workspaces":[{"name":"case-management-form","component":"caseManagementForm","title":"Case Management Form","type":"form"},{"name":"family-relationship-form","component":"familyRelationshipForm","title":"Family Relationship Form","type":"form"},{"name":"peers-form","component":"peersForm","title":"Add New Peer","type":"form"},{"name":"kenyaemr-cusom-form-entry-workspace","component":"peerCalendarFormEntry","title":"KVP Peer Educator Outreach Calendar","type":"form","width":"extra-wide","canMaximize":true,"canHide":true},{"name":"contact-list-update-form","component":"contactListUpdateForm","title":"Contact List Update Form","type":"form"},{"name":"other-relationship-form","component":"otherRelationshipsForm","title":"Other Relationships Form","type":"form"},{"name":"end-relationship-form","component":"endRelationshipWorkspace","title":"Discontinue relationship form","type":"form"}],"version":"5.4.2-pre.2202"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"clinical-view-section","component":"clinicalViewPatientDashboard","slot":"patient-chart-dashboard-slot"},{"name":"family-history","slot":"patient-chart-family-history-slot","component":"familyHistory","order":0,"online":true,"offline":false},{"name":"relationships-link","component":"relationshipsLink","slot":"patient-chart-dashboard-slot","order":14,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-relationships-slot","path":"relationships","layoutMode":"anchored"}},{"name":"relationships","slot":"patient-chart-relationships-slot","component":"relationships","order":0,"online":true,"offline":false},{"name":"contact-list-form","component":"contactListForm"},{"name":"maternal-and-child-health-dashboard-group-link","slot":"clinical-view-section","component":"maternalAndChildHealthSideNavGroup"},{"name":"antenatal-care-dashboard-link","component":"antenatalCareLink","slot":"maternal-and-child-health-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-antenatal-care-dashboard-slot","path":"antenatal-care-dashboard","layoutMode":"anchored"}},{"name":"antenatal-care-dashboard","slot":"patient-chart-antenatal-care-dashboard-slot","component":"antenatalCare"},{"name":"postnatal-care-dashboard-link","component":"postnatalCareLink","slot":"maternal-and-child-health-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-postnatal-care-dashboard-slot","path":"postnatal-care-dashboard","layoutMode":"anchored"}},{"name":"postnatal-care-dashboard","slot":"patient-chart-postnatal-care-dashboard-slot","component":"postnatalCare"},{"name":"labour-and-delivery-dashboard-link","component":"labourAndDeliveryLink","slot":"maternal-and-child-health-slot","meta":{"fullWidth":true,"slot":"patient-chart-labour-and-delivery-dashboard-slot","path":"labour-and-delivery-dashboard","layoutMode":"anchored"}},{"name":"labour-and-delivery-dashboard","slot":"patient-chart-labour-and-delivery-dashboard-slot","component":"labourAndDelivery","meta":{"fullWidth":true}},{"name":"hiv-care-and-treatment-dashboard-group-link","slot":"special-clinics-slot","component":"hivCareAndTreatMentSideNavGroup"},{"name":"genericNavLinks","slot":"special-clinics-slot","component":"genericNavLinks","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-special-clinic-dashboard-slot","path":"special-clinics-dashboard","layoutMode":"anchored"}},{"name":"patient-chart-special-clinic-dashboard-slot","slot":"patient-chart-special-clinic-dashboard-slot","component":"genericDashboard"},{"name":"hts-dashboard-link","component":"htsDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hts-dashboard-slot","path":"hts-dashboard","layoutMode":"anchored"}},{"name":"hts-clinical-view","slot":"patient-chart-hts-dashboard-slot","component":"htsClinicalView","order":2,"online":true,"offline":false},{"name":"defaulter-tracing-dashboard-link","component":"defaulterTracingLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-defaulter-tracing-dashboard-slot","path":"defaulter-tracing-dashboard","layoutMode":"anchored"}},{"name":"defaulter-tracing-dashboard","slot":"patient-chart-defaulter-tracing-dashboard-slot","component":"defaulterTracing","order":3,"online":true,"offline":false},{"name":"special-clinics-dashboard-group-link","slot":"clinical-view-section","component":"specialClinicsSideNavGroup"},{"name":"clinical-encounter-link","component":"inPatientClinicalEncounterLink","slot":"clinical-view-section","order":40,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored"}},{"name":"clinical-encounter","slot":"patient-chart-clinical-encounter-slot","component":"inPatientClinicalEncounter","order":0,"online":true,"offline":false},{"component":"caseManagementDashboardLink","name":"case-management-dashboard-link","meta":{"name":"case-management","title":"Case Management","slot":"case-management-dashboard-slot","path":"/case-management"}},{"name":"in-patient-dashboard-link","component":"inPatientChartLink","slot":"patient-chart-dashboard-slot","order":7,"meta":{"slot":"patient-chart-in-patient-dashboard-slot","path":"in-patient","layoutMode":"anchored","columns":1,"columnSpan":1}},{"name":"in-patient-dashboard","slot":"patient-chart-in-patient-dashboard-slot","component":"inPatientChartDashboard","meta":{"fullWidth":false}},{"name":"wrap-component-view","slot":"case-management-dashboard-slot","component":"wrapComponent","order":2,"online":true,"offline":false},{"name":"case-encounter-link","component":"caseEncounterDashboardLink","slot":"patient-chart-dashboard-slot","order":14,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-case-encounter-slot","path":"case-management-encounters","layoutMode":"anchored"}},{"name":"case-encounter-table","slot":"patient-chart-case-encounter-slot","component":"caseEncounterTable","order":0,"online":true,"offline":false},{"component":"peerCalendarDashboardLink","name":"peer-calendar-dashboard-link","meta":{"name":"peer-calendar","title":"Peer Calendar","slot":"peer-calendar-dashboard-slot","path":"peer-management"}},{"name":"peer-calendar","slot":"peer-calendar-dashboard-slot","component":"peerCalendar","order":0,"online":true,"offline":false},{"name":"deceased-panel-dashboard-link","component":"deceasedPanelDashboardLink","slot":"patient-chart-dashboard-slot","order":15,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-deceased-panel-slot","path":"deceased-panel","layoutMode":"anchored"}},{"name":"deceased-details-tabs","slot":"patient-chart-deceased-panel-slot","component":"deceasedDetailsTabs","order":0,"online":true,"offline":false},{"name":"parto-graph-chart","slot":"patient-chart-labour-and-delivery-dashboard-slot","component":"partograph","meta":{"fullWidth":true}}],"modals":[{"name":"birth-date-calculator","component":"birthDateCalculator"},{"name":"relationship-delete-confirm-dialog","component":"relationshipDeleteConfirmialog"},{"name":"end-relationship-dialog","component":"endRelationshipModal"}],"workspaces":[{"name":"case-management-form","component":"caseManagementForm","title":"Case Management Form","type":"form"},{"name":"family-relationship-form","component":"familyRelationshipForm","title":"Family Relationship Form","type":"form"},{"name":"peers-form","component":"peersForm","title":"Add New Peer","type":"form"},{"name":"kenyaemr-cusom-form-entry-workspace","component":"peerCalendarFormEntry","title":"KVP Peer Educator Outreach Calendar","type":"form","width":"extra-wide","canMaximize":true,"canHide":true},{"name":"contact-list-update-form","component":"contactListUpdateForm","title":"Contact List Update Form","type":"form"},{"name":"other-relationship-form","component":"otherRelationshipsForm","title":"Other Relationships Form","type":"form"},{"name":"end-relationship-form","component":"endRelationshipWorkspace","title":"Discontinue relationship form","type":"form"}],"version":"5.4.2-pre.2223"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-clinical-view-app",
-  "version": "5.4.2-pre.2202",
+  "version": "5.4.2-pre.2223",
   "description": "Patient clinical view microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-clinical-view-app.js",
   "main": "src/index.ts",
@@ -48,5 +48,8 @@
     "react-i18next": "11.x",
     "react-router-dom": "6.x"
   },
+  "devDependencies": {
+    "webpack": "^5.99.9"
+  },
   "stableVersion": "5.4.1"
 }

package/src/autosuggest/autosuggest.component.tsx

@@ -1,4 +1,4 @@
-import { Layer, Search, type SearchProps } from '@carbon/react';
+import { Layer, Search } from '@carbon/react';
 import classNames from 'classnames';
 import React, { type HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
 import styles from './autosuggest.scss';
@@ -140,7 +140,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
     }
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e) => {
     const query = e.target.value;
     onSuggestionSelected(name, undefined);
 
@@ -154,7 +154,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
     }
   };
 
-  const handleClear = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleClear = () => {
     onSuggestionSelected(name, undefined);
   };
 

package/src/autosuggest/autosuggest.scss

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

package/src/autosuggest/patient-search-info.component.tsx

@@ -10,7 +10,7 @@ const PatientSearchInfo: React.FC<PatientSearchInfoProps> = ({ patient }) => {
   return (
     <Tile className={styles.patientInfo}>
       <div className={styles.patientAvatar} role="img">
-        <PatientPhoto patientUuid={patient.uuid} patientName={patient.person.display} size="small" />
+        <PatientPhoto patientUuid={patient.uuid} patientName={patient.person.display} />
       </div>
       <div className={styles.patientDetails}>
         <h2 className={styles.patientName}>{patient.person.display}</h2>

package/src/case-management/encounters/case-encounter-header.scss

@@ -1,7 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/colors';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetCard {
   height: layout.$spacing-10;

package/src/case-management/encounters/case-encounter-overview.component.tsx

@@ -1,11 +1,14 @@
 import { ComboBox, DataTableSkeleton, Dropdown, Layer, Pagination, Tile } from '@carbon/react';
-import { formatDate, showModal, showSnackbar, useConfig, useLayoutType, usePagination } from '@openmrs/esm-framework';
 import {
-  CardHeader,
-  EmptyDataIllustration,
-  launchPatientWorkspace,
-  usePaginationInfo,
-} from '@openmrs/esm-patient-common-lib';
+  formatDate,
+  launchWorkspace,
+  showModal,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { KeyedMutator } from 'swr';
@@ -30,7 +33,7 @@ const CaseEncounterHeader = ({ patientUuid, mutate, onFilterChange }: CaseEncoun
   const { caseManagementForms } = useConfig<ConfigObject>();
 
   const handleOpenOrEditClinicalEncounterForm = (formUuid: string, encounterUUID = '') => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'Clinical Encounter',
       mutateForm: mutate,
       formInfo: {
@@ -145,7 +148,7 @@ const CaseEncounterOverviewComponent = ({ patientUuid }: CaseEncounterOverviewCo
     const encounterTypeUuid = encounter.encounterType?.uuid ?? '';
     const formUuid = encounter.form?.uuid ?? '';
 
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle,
       mutateForm: mutateVisits,
       formInfo: {

package/src/case-management/header/case-management-header.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 *;
 
 .header {
   @include type.type-style('body-compact-02');

package/src/case-management/metrics/case-management-header.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .metricsContainer {
   display: flex;

package/src/case-management/table/case-management-list.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/case-management/tabs/case-management-tabs.component.tsx

@@ -21,8 +21,8 @@ const CaseManagementTabs: React.FC<CaseManagementTabsProps> = ({ setActiveTabInd
   };
 
   return (
-    <div data-id="case-management-list">
-      <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange} className={styles.tabs}>
+    <div className={styles.tabs} data-id="case-management-list">
+      <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange}>
         <div style={{ display: 'flex' }}>
           <TabList style={{ paddingLeft: '1rem' }} aria-label="case-management-tabs" contained>
             <Tab className={styles.tab}>

package/src/case-management/tabs/case-management-tabs.scss

@@ -1,7 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: 2rem 0;

package/src/case-management/workspace/case-management.scss

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

package/src/case-management/workspace/patient-info.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 *;
 
 .patientInfo {
   display: flex;

package/src/clinical-encounter/clinical-enc.component.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatDate, parseDate, useConfig } from '@openmrs/esm-framework';
+import { formatDate, launchWorkspace, parseDate, useConfig } from '@openmrs/esm-framework';
 import { AdmissionDate_UUID, PriorityOfAdmission_UUID, AdmissionWard_UUID } from '../utils/constants';
 import { getObsFromEncounter } from '../ui/encounter-list/encounter-list-utils';
-import { EmptyState, launchPatientWorkspace, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { OverflowMenu, OverflowMenuItem, InlineLoading } from '@carbon/react';
 import { ConfigObject } from '../config-schema';
 import SummaryCard from './summary/summary-card.component';
@@ -34,7 +34,7 @@ const ClinicalEncounter: React.FC<ClinicalEncounterProps> = ({
     formsList: { clinicalEncounterFormUuid },
   } = useConfig<ConfigObject>();
   const handleOpenOrEditClinicalEncounterForm = (encounterUUID = '') => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'Clinical Encounter',
       mutateForm: mutate,
       formInfo: {
@@ -60,7 +60,7 @@ const ClinicalEncounter: React.FC<ClinicalEncounterProps> = ({
       admittingDoctor: encounter.encounterProviders.length > 0 ? encounter.encounterProviders[0].provider.name : '',
       admissionWard: getObsFromEncounter(encounter, AdmissionWard_UUID),
       actions: (
-        <OverflowMenu aria-label="overflow-menu" flipped="false">
+        <OverflowMenu aria-label="overflow-menu" flipped={false}>
           <OverflowMenuItem
             onClick={() => handleOpenOrEditClinicalEncounterForm(encounter.uuid)}
             itemText={t('edit', 'Edit')}

package/src/clinical-encounter/dashboard/in-patient.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: 2rem 0;

package/src/clinical-encounter/summary/in-patient-medical-summary/in-patient-medical-summary.component.tsx

@@ -44,7 +44,7 @@ const InPatientSummary: React.FC<InPatientSummaryProps> = ({ patientUuid, encoun
       foetalPresentation: '',
       maternalCondition: '',
       actions: (
-        <OverflowMenu aria-label="overflow-menu" flipped="false">
+        <OverflowMenu aria-label="overflow-menu" flipped={false}>
           <OverflowMenuItem onClick={() => handleOpenOrEditMaternalForm(encounter.uuid)} itemText={t('edit', 'Edit')} />
           <OverflowMenuItem itemText={t('delete', 'Delete')} isDelete />
         </OverflowMenu>

package/src/clinical-encounter/summary/maternal-summary/maternal-summary.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
-import { EmptyState, launchPatientWorkspace, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, useConfig } from '@openmrs/esm-framework';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { OverflowMenu, OverflowMenuItem, DataTableSkeleton } from '@carbon/react';
 import { useClinicalEncounter } from '../../../hooks/useClinicalEncounter';
 import { ConfigObject } from '../../../config-schema';
@@ -54,7 +54,7 @@ const MaternalSummary: React.FC<MaternalSummaryProps> = ({ patientUuid }) => {
     ],
   );
   const handleOpenOrEditMaternalForm = (encounterUUID = '') => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'Clinical Encounter',
       mutateForm: mutate,
       formInfo: {
@@ -73,7 +73,7 @@ const MaternalSummary: React.FC<MaternalSummaryProps> = ({ patientUuid }) => {
       foetalPresentation: '',
       maternalCondition: '',
       actions: (
-        <OverflowMenu aria-label="overflow-menu" flipped="false">
+        <OverflowMenu aria-label="overflow-menu" flipped={false}>
           <OverflowMenuItem onClick={() => handleOpenOrEditMaternalForm(encounter.uuid)} itemText={t('edit', 'Edit')} />
           <OverflowMenuItem itemText={t('delete', 'Delete')} isDelete />
         </OverflowMenu>

package/src/clinical-encounter/summary/neonatal summary/neonatal-summary.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatDate } from '@openmrs/esm-framework';
+import { formatDate, launchWorkspace } from '@openmrs/esm-framework';
 import {
   MchEncounterType_UUID,
   ModeOfDelivery_UUID,
@@ -10,7 +10,7 @@ import {
   GivenVitaminK_UUID,
 } from '../../../utils/constants';
 import { getObsFromEncounter } from '../../../ui/encounter-list/encounter-list-utils';
-import { EmptyState, launchPatientWorkspace, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { OverflowMenu, OverflowMenuItem, InlineLoading } from '@carbon/react';
 import { useNeonatalSummary } from '../../../hooks/useNeonatalSummary';
 import SummaryCard from '../summary-card.component';
@@ -26,7 +26,7 @@ const NeonatalSummary: React.FC<NeonatalSummaryProps> = ({ patientUuid }) => {
   const { encounters, isLoading, error, mutate } = useNeonatalSummary(patientUuid, MchEncounterType_UUID);
 
   const handleOpenOrEditNeonatalSummaryForm = (encounterUUID = '') => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'Neonatal Summary',
       mutateForm: mutate,
       formInfo: {
@@ -52,7 +52,7 @@ const NeonatalSummary: React.FC<NeonatalSummaryProps> = ({ patientUuid }) => {
       babyGivenVitaminK: getObsFromEncounter(encounter, GivenVitaminK_UUID),
 
       actions: (
-        <OverflowMenu aria-label="overflow-menu" flipped="false">
+        <OverflowMenu aria-label="overflow-menu" flipped={false}>
           <OverflowMenuItem
             onClick={() => handleOpenOrEditNeonatalSummaryForm(encounter.uuid)}
             itemText={t('edit', 'Edit')}

package/src/clinical-encounter/summary/out-patient-summary/out-patient-summary.scss

@@ -1,7 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: 2rem 0;

package/src/clinical-encounter/summary/out-patient-summary/patient-medical-history.component.tsx

@@ -105,7 +105,7 @@ const OutPatientMedicalHistory: React.FC<OutPatientMedicalHistoryProps> = ({
         accidentOrTrauma: getObsFromEncounter(encounter, ACCIDENT_TRAUMA_UUID),
         finalDiagnosis: encounter.diagnoses.length > 0 ? encounter.diagnoses[0].diagnosis.coded.display : '--',
         actions: (
-          <OverflowMenu aria-label="overflow-menu" flipped="false">
+          <OverflowMenu aria-label="overflow-menu" flipped={false}>
             <OverflowMenuItem
               onClick={() => handleOpenOrEditClinicalEncounterForm(encounter.uuid)}
               itemText={t('edit', 'Edit')}
@@ -148,7 +148,7 @@ const OutPatientMedicalHistory: React.FC<OutPatientMedicalHistoryProps> = ({
         rows={tableRows}
         headers={tableHeader}
         render={({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
-          <TableContainer size="sm" {...getTableContainerProps()}>
+          <TableContainer {...getTableContainerProps()}>
             <Table size="sm" {...getTableProps()} aria-label="sample table">
               <TableHead>
                 <TableRow>

package/src/clinical-encounter/summary/out-patient-summary/patient-social-history.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatDate, parseDate, useConfig } from '@openmrs/esm-framework';
+import { formatDate, launchWorkspace, parseDate, useConfig } from '@openmrs/esm-framework';
 import {
   Alcohol_Use_UUID,
   Alcohol_Use_Duration_UUID,
@@ -9,7 +9,7 @@ import {
   Other_Substance_Abuse_UUID,
 } from '../../../utils/constants';
 import { getObsFromEncounter } from '../../../ui/encounter-list/encounter-list-utils';
-import { EmptyState, launchPatientWorkspace, ErrorState, CardHeader } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, ErrorState, CardHeader } from '@openmrs/esm-patient-common-lib';
 import {
   OverflowMenu,
   OverflowMenuItem,
@@ -52,7 +52,7 @@ const OutPatientSocialHistory: React.FC<OutPatientSocialHistoryProps> = ({
 
   const headerTitle = t('socialHistory', 'Social History');
   const handleOpenOrEditClinicalEncounterForm = (encounterUUID = '') => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'Social History',
       mutateForm: mutate(
         (key) => typeof key === 'string' && key.startsWith('/openmrs/ws/rest/v1/kenyaemr/flags'),
@@ -120,7 +120,7 @@ const OutPatientSocialHistory: React.FC<OutPatientSocialHistoryProps> = ({
         smokingDuration: getObsFromEncounter(encounter, Smoking_Duration_UUID),
         otherSubstanceAbuse: getObsFromEncounter(encounter, Other_Substance_Abuse_UUID),
         actions: (
-          <OverflowMenu aria-label="overflow-menu" flipped="false">
+          <OverflowMenu aria-label="overflow-menu" flipped={false}>
             <OverflowMenuItem
               onClick={() => handleOpenOrEditClinicalEncounterForm(encounter.uuid)}
               itemText={t('edit', 'Edit')}
@@ -163,7 +163,7 @@ const OutPatientSocialHistory: React.FC<OutPatientSocialHistoryProps> = ({
         rows={tableRows}
         headers={tableHeader}
         render={({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
-          <TableContainer size="sm" {...getTableContainerProps()}>
+          <TableContainer {...getTableContainerProps()}>
             <Table size="sm" {...getTableProps()} aria-label="sample table">
               <TableHead>
                 <TableRow>

package/src/clinical-encounter/summary/surgical summary/surgical-summary.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenu, OverflowMenuItem, InlineLoading } from '@carbon/react';
-import { formatDate, parseDate, useConfig } from '@openmrs/esm-framework';
-import { EmptyState, launchPatientWorkspace, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { formatDate, launchWorkspace, parseDate, useConfig } from '@openmrs/esm-framework';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { AdmissionDate_UUID, PriorityOfAdmission_UUID, AdmissionWard_UUID } from '../../../utils/constants';
 import { getObsFromEncounter } from '../../../ui/encounter-list/encounter-list-utils';
 import { ConfigObject } from '../../../config-schema';
@@ -14,7 +14,6 @@ import { KeyedMutator } from 'swr';
 interface SurgicalSummaryProps {
   patientUuid: string;
   formEntrySub?: any;
-  launchPatientWorkspace?: Function;
   encounters: OpenmrsEncounter[];
   isLoading: boolean;
   error: Error;
@@ -34,7 +33,7 @@ const ClinicalEncounter: React.FC<SurgicalSummaryProps> = ({
     formsList: { clinicalEncounterFormUuid },
   } = useConfig<ConfigObject>();
   const handleOpenOrEditClinicalEncounterForm = (encounterUUID = '') => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'Clinical Encounter',
       mutateForm: mutate,
       formInfo: {
@@ -59,7 +58,7 @@ const ClinicalEncounter: React.FC<SurgicalSummaryProps> = ({
       admittingDoctor: encounter.encounterProviders.length > 0 ? encounter.encounterProviders[0].display : '',
       admissionWard: getObsFromEncounter(encounter, AdmissionWard_UUID),
       actions: (
-        <OverflowMenu aria-label="overflow-menu" flipped="false">
+        <OverflowMenu aria-label="overflow-menu" flipped={false}>
           <OverflowMenuItem
             onClick={() => handleOpenOrEditClinicalEncounterForm(encounter.uuid)}
             itemText={t('edit', 'Edit')}

package/src/contact-list/contact-actions.component.tsx

@@ -1,7 +1,6 @@
 import { Button, ButtonSkeleton, Row } from '@carbon/react';
 import { Microscope } from '@carbon/react/icons';
-import { useConfig } from '@openmrs/esm-framework';
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, useConfig } from '@openmrs/esm-framework';
 import React from 'react';
 import { ConfigObject } from '../config-schema';
 import useRelativeHTSEncounter from '../hooks/useRelativeHTSEncounter';
@@ -24,15 +23,15 @@ const ContactActions: React.FC<ContactActionsProps> = ({ relativeUuid, baseLineH
   if (isLoading || encounterLoading) {
     return (
       <Row>
-        <ButtonSkeleton kind="tertiary" size="sm" hasIconOnly />
-        <ButtonSkeleton kind="tertiary" size="sm" hasIconOnly />
+        <ButtonSkeleton size="sm" />
+        <ButtonSkeleton size="sm" />
       </Row>
     );
   }
 
   const hivStatus = getHivStatusBasedOnEnrollmentAndHTSEncounters(encounters, enrollment);
   const handleLauchHTSInitialForm = () => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'HTS Initial form',
       formInfo: { encounterUuid: '9c0a7a57-62ff-4f75-babe-5835b0e921b7', formUuid: htsInitialTest },
     });

package/src/contact-list/contact-list-concept-map.ts

@@ -2,6 +2,7 @@ export const contactListConceptMap = {
   '1436AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': {
     display: 'Partner HIV Status:',
     answers: {
+      '166563AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': 'HIV exposed infant',
       '703AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': 'HIV Positive',
       '664AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': 'HIV Negative',
       '1067AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': 'Unknown',

package/src/contact-list/contact-list.component.tsx

@@ -234,9 +234,9 @@ const ContactList: React.FC<ContactListProps> = ({ patientUuid }) => {
                     <TableHeader
                       {...getHeaderProps({
                         header,
-                        isSortable: header.isSortable,
+                        isSortable: true,
                       })}>
-                      {header.header?.content ?? header.header}
+                      {header.header}
                     </TableHeader>
                   ))}
                 </TableRow>

package/src/contact-list/contact-list.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/contact-list/contact-list.workspace.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonSet, Column, DatePicker, DatePickerInput, Dropdown, Form, Stack } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { DefaultWorkspaceProps, useConfig, useSession } from '@openmrs/esm-framework';
+import { DefaultWorkspaceProps, parseDate, useConfig, useSession } from '@openmrs/esm-framework';
 import React, { useEffect, useMemo } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,8 @@ import RelationshipBaselineInfoFormSection from '../relationships/forms/baseline
 import PatientSearchCreate from '../relationships/forms/patient-search-create-form';
 import styles from './contact-list-form.scss';
 import { ContactListFormSchema, saveContact } from './contact-list.resource';
+import dayjs from 'dayjs';
+import { usePatientBirthdate } from '../relationships/relationship.resources';
 interface ContactListFormProps extends DefaultWorkspaceProps {
   patientUuid: string;
   props: any;
@@ -45,6 +47,21 @@ const ContactListForm: React.FC<ContactListFormProps> = ({ closeWorkspace, patie
         display: data!.find((r) => r.uuid === rel.uuid)?.display,
       }))
     : [];
+  const { isLoading: isPatientloading, birthdate } = usePatientBirthdate(personUuid);
+  const mode = form.watch('mode');
+  const dobCreateMode = form.watch('personBInfo.birthdate');
+  const patientAgeMonths = useMemo(() => {
+    let birthDate: Date | null = null;
+    if (mode === 'create') {
+      birthDate = dobCreateMode;
+    } else {
+      birthDate = birthdate ? parseDate(birthdate) : null;
+    }
+    if (birthDate) {
+      return dayjs().diff(birthDate, 'month');
+    }
+    return null;
+  }, [mode, dobCreateMode, birthdate]);
 
   const onSubmit = async (values: ContactListFormType) => {
     try {
@@ -67,20 +84,18 @@ const ContactListForm: React.FC<ContactListFormProps> = ({ closeWorkspace, patie
                 <DatePicker
                   className={styles.datePickerInput}
                   dateFormat="d/m/Y"
-                  id="startDate"
                   datePickerType="single"
                   {...field}
                   ref={undefined}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}>
                   <DatePickerInput
                     id={`startdate-input`}
-                    name="startdate-input"
-                    invalid={error?.message}
+                    invalid={!!error?.message}
                     invalidText={error?.message}
                     placeholder="mm/dd/yyyy"
                     labelText={t('startDate', 'Start Date')}
-                    size="xl"
+                    size="lg"
                   />
                 </DatePicker>
               )}
@@ -94,17 +109,17 @@ const ContactListForm: React.FC<ContactListFormProps> = ({ closeWorkspace, patie
                 <DatePicker
                   className={styles.datePickerInput}
                   dateFormat="d/m/Y"
-                  id="endDate"
                   datePickerType="single"
                   {...field}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}>
                   <DatePickerInput
-                    invalid={error?.message}
+                    id="endDate"
+                    invalid={!!error?.message}
                     invalidText={error?.message}
                     placeholder="mm/dd/yyyy"
                     labelText={t('endDate', 'End Date')}
-                    size="xl"
+                    size="lg"
                   />
                 </DatePicker>
               )}
@@ -117,7 +132,7 @@ const ContactListForm: React.FC<ContactListFormProps> = ({ closeWorkspace, patie
               render={({ field, fieldState: { error } }) => (
                 <Dropdown
                   ref={field.ref}
-                  invalid={error?.message}
+                  invalid={!!error?.message}
                   invalidText={error?.message}
                   id="relationshipToPatient"
                   titleText={t('relationToPatient', 'Relation to patient')}
@@ -133,11 +148,11 @@ const ContactListForm: React.FC<ContactListFormProps> = ({ closeWorkspace, patie
             />
           </Column>
 
-          <RelationshipBaselineInfoFormSection />
+          <RelationshipBaselineInfoFormSection patientAgeMonths={patientAgeMonths} patientUuid={personUuid} />
         </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}>