@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2351 → 5.4.2-pre.2356

package/src/index.ts

@@ -1,58 +1,51 @@
 import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+
 import { inPatientClinicalEncounterDashboardMeta } from './clinical-encounter/clinical-encounter-dashboard-meta';
-import ClinicalEncounterDashboard from './clinical-encounter/dashboard/clinical-encounter-dashboard.component';
-import ClinicalViewSection from './clinical-view-group/clinical-view-section.component';
-import { createDashboardGroup } from './clinical-view-group/createDashboardGroup';
-import { configSchema } from './config-schema';
-import BirthDateCalculator from './relationships/modals/birthdate-calculator.modal';
-import ContactList from './contact-list/contact-list.component';
-import ContactListForm from './contact-list/contact-list.workspace';
 import {
   caseEncounterDashboardMeta,
   caseManagementDashboardMeta,
   contactListDashboardMeta,
-  familyHistoryDashboardMeta,
-  morgueDeceasedDetailsDashboardMeta,
-  otherRelationshipsDashboardMeta,
   peerCalendarDashboardMeta,
   relationshipsDashboardMeta,
-} from './dashboard.meta';
-import FamilyHistory from './family-partner-history/family-history.component';
+  specialClinicsDashboardMeta,
+} from './dashboard/dashboard.meta';
+import { maternalAndChildHealthDashboardMeta } from './maternal-and-child-health/mch-dashboard.meta';
+import { hivCareAndTreatmentDashboardMeta } from './specialized-clinics/hiv-care-and-treatment-services/hiv-care-and-treatment-dashboard.meta';
+import { inPatientMeta } from './in-patient/in-patient.meta';
+
+import ClinicalEncounterDashboard from './clinical-encounter/dashboard/clinical-encounter-dashboard.component';
+import BirthDateCalculator from './relationships/modals/birthdate-calculator.modal';
+import ContactListForm from './contact-list/contact-list.workspace';
+import ContactDashboard from './contact-list/contact-dashboard.component';
+import ContactListUpdateForm from './contact-list/forms/contact-list-update.workspace';
+
 import AntenatalCare from './maternal-and-child-health/antenatal-care.component';
 import LabourDelivery from './maternal-and-child-health/labour-delivery.component';
-import {
-  antenatalDashboardMeta,
-  labourAndDeliveryDashboardMeta,
-  maternalAndChildHealthNavGroup,
-  postnatalDashboardMeta,
-} from './maternal-and-child-health/mch-dashboard.meta';
 import PostnatalCare from './maternal-and-child-health/postnatal-care.component';
-import GenericDashboard from './specialized-clinics/generic-nav-links/generic-dashboard.component';
-import GenericNavLinks from './specialized-clinics/generic-nav-links/generic-nav-links.component';
-import DefaulterTracing from './specialized-clinics/hiv-care-and-treatment-services/defaulter-tracing/defaulter-tracing.component';
-import {
-  defaulterTracingDashboardMeta,
-  hivCareAndTreatmentNavGroup,
-  htsDashboardMeta,
-} from './specialized-clinics/hiv-care-and-treatment-services/hiv-care-and-treatment-dashboard.meta';
-import HivTestingEncountersList from './specialized-clinics/hiv-care-and-treatment-services/hiv-testing-services/views/hiv-testing/hiv-testing-services.component';
-import { specialClinicsNavGroup } from './specialized-clinics/special-clinic-dashboard.meta';
-import { createLeftPanelLink } from './left-panel-link.component';
+import MaternalAndChildDashboard from './maternal-and-child-health/maternal-and-child.component';
+import Partograph from './maternal-and-child-health/partography/partograph.component';
+
+import HivCareAndTreatment from './specialized-clinics/hiv-care-and-treatment-services/hiv-care-and-treatment.component';
+
+import Relationships from './relationships/relationships.component';
+import FamilyRelationshipForm from './family-partner-history/family-relationship.workspace';
+import DeleteRelationshipConfirmDialog from './relationships/modals/delete-relationship-dialog.modal';
+
 import WrapComponent from './case-management/wrap/wrap.component';
 import CaseManagementForm from './case-management/workspace/case-management.workspace';
-import Relationships from './relationships/relationships.component';
 import CaseEncounterOverviewComponent from './case-management/encounters/case-encounter-overview.component';
-import FamilyRelationshipForm from './family-partner-history/family-relationship.workspace';
+import EndRelationshipWorkspace from './case-management/workspace/case-management-workspace.component';
+
 import InPatient from './in-patient/in-patient.component';
-import { inPatientMeta } from './in-patient/in-patient.meta';
+
 import PeerCalendar from './peer-calendar/peer-calendar.component';
 import PeerForm from './peer-calendar/forms/peer-form.workspace';
 import FormEntryWorkspace from './peer-calendar/forms/form-entry.workspace';
-import DeleteRelationshipConfirmDialog from './relationships/modals/delete-relationship-dialog.modal';
-import EndRelationshipWorkspace from './case-management/workspace/case-management-workspace.component';
-import Partograph from './maternal-and-child-health/partography/partograph.component';
-import ContactListUpdateForm from './contact-list/forms/contact-list-update.workspace';
+
+import { configSchema } from './config-schema';
+import SpecialClinicDashboard from './special-clinics/special-clinic.component';
+import { createDashboardLink as createDashboardLink2 } from './dashboard/createDashboardLink';
 
 const moduleName = '@kenyaemr/esm-patient-clinical-view-app';
 
@@ -63,90 +56,56 @@ const options = {
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-// Dashboard groups and links setup for the patient chart, leveraging the ESM framework lifecycle utilities
-
-// Special Clinics navigation group in the patient chart sidebar
-export const specialClinicsSideNavGroup = getSyncLifecycle(createDashboardGroup(specialClinicsNavGroup), options);
-
-// Link and view for clinical encounters in the patient chart
-export const inPatientClinicalEncounterLink = getSyncLifecycle(
-  createDashboardLink(inPatientClinicalEncounterDashboardMeta),
-  options,
-);
-export const inPatientClinicalEncounter = getSyncLifecycle(ClinicalEncounterDashboard, options);
-export const clinicalViewPatientDashboard = getSyncLifecycle(ClinicalViewSection, options);
-
-// Navigation group for HIV Care and Treatment in the patient chart sidebar
-export const hivCareAndTreatMentSideNavGroup = getSyncLifecycle(
-  createDashboardGroup(hivCareAndTreatmentNavGroup),
+export const hivCareAndTreatmentLink = getSyncLifecycle(
+  createDashboardLink2(hivCareAndTreatmentDashboardMeta),
   options,
 );
+export const hivCareAndTreatment = getSyncLifecycle(HivCareAndTreatment, options);
 
-// Dashboard links for HIV Care and Treatment services and views for clinical encounters
-export const defaulterTracingLink = getSyncLifecycle(createDashboardLink(defaulterTracingDashboardMeta), options);
-export const htsDashboardLink = getSyncLifecycle(createDashboardLink(htsDashboardMeta), options);
-export const htsClinicalView = getSyncLifecycle(HivTestingEncountersList, options);
-export const defaulterTracing = getSyncLifecycle(DefaulterTracing, options);
-
-// Dashboard links for Family History and the corresponding view in the patient chart
-export const familyHistory = getSyncLifecycle(FamilyHistory, options);
-export const familyHistoryLink = getSyncLifecycle(createDashboardLink(familyHistoryDashboardMeta), options);
-export const familyRelationshipForm = getSyncLifecycle(FamilyRelationshipForm, options);
-
-// Dashboard links for Other relationships and the corresponding view in the patient chart
-export const otherRelationshipsLink = getSyncLifecycle(createDashboardLink(otherRelationshipsDashboardMeta), options);
-
-// Relationships links for Family History and the corresponding view in the patient chart
 export const relationshipsLink = getSyncLifecycle(createDashboardLink(relationshipsDashboardMeta), options);
 export const relationships = getSyncLifecycle(Relationships, options);
 export const relationshipDeleteConfirmialog = getSyncLifecycle(DeleteRelationshipConfirmDialog, options);
+export const familyRelationshipForm = getSyncLifecycle(FamilyRelationshipForm, options);
+
+export const clinicalEncounterLink = getSyncLifecycle(
+  createDashboardLink(inPatientClinicalEncounterDashboardMeta),
+  options,
+);
+export const clinicalEncounter = getSyncLifecycle(ClinicalEncounterDashboard, options);
 
-// Contacts
-export const contactList = getSyncLifecycle(ContactList, options);
 export const contactListLink = getSyncLifecycle(createDashboardLink(contactListDashboardMeta), options);
+export const contactList = getSyncLifecycle(ContactDashboard, options);
 export const contactListForm = getSyncLifecycle(ContactListForm, options);
-export const birthDateCalculator = getSyncLifecycle(BirthDateCalculator, options);
 export const contactListUpdateForm = getSyncLifecycle(ContactListUpdateForm, options);
+export const birthDateCalculator = getSyncLifecycle(BirthDateCalculator, options);
 
-// Peer Clendar
 export const peerCalendar = getSyncLifecycle(PeerCalendar, options);
-export const peerCalendarDashboardLink = getSyncLifecycle(createLeftPanelLink(peerCalendarDashboardMeta), options);
+export const peerCalendarDashboardLink = getSyncLifecycle(createDashboardLink(peerCalendarDashboardMeta), options);
 export const peersForm = getSyncLifecycle(PeerForm, options);
+export const peerCalendarFormEntry = getSyncLifecycle(FormEntryWorkspace, options);
 
-// Navigation group for Maternal and Child Health in the patient chart sidebar
-export const maternalAndChildHealthSideNavGroup = getSyncLifecycle(
-  createDashboardGroup(maternalAndChildHealthNavGroup),
+export const maternalAndChildHealthDashboardLink = getSyncLifecycle(
+  createDashboardLink2(maternalAndChildHealthDashboardMeta),
   options,
 );
-
-// Views for Maternal and Child Health services like Antenatal Care, Postnatal Care, and Labour & Delivery
+export const maternalAndChildHealthDashboard = getSyncLifecycle(MaternalAndChildDashboard, options);
 export const antenatalCare = getSyncLifecycle(AntenatalCare, options);
 export const postnatalCare = getSyncLifecycle(PostnatalCare, options);
 export const labourAndDelivery = getSyncLifecycle(LabourDelivery, options);
 export const partograph = getSyncLifecycle(Partograph, options);
 
-// Case Management
-export const caseManagementDashboardLink = getSyncLifecycle(createLeftPanelLink(caseManagementDashboardMeta), options);
+export const caseManagementDashboardLink = getSyncLifecycle(createDashboardLink(caseManagementDashboardMeta), options);
 export const wrapComponent = getSyncLifecycle(WrapComponent, options);
 export const caseManagementForm = getSyncLifecycle(CaseManagementForm, options);
 export const caseEncounterDashboardLink = getSyncLifecycle(createDashboardLink(caseEncounterDashboardMeta), options);
-// export const caseEncounterHeader = getSyncLifecycle(CaseEncounterHeader, options);
 export const caseEncounterTable = getSyncLifecycle(CaseEncounterOverviewComponent, options);
-// Dashboard links for Maternal and Child Health services
-export const antenatalCareLink = getSyncLifecycle(createDashboardLink(antenatalDashboardMeta), options);
-export const postnatalCareLink = getSyncLifecycle(createDashboardLink(postnatalDashboardMeta), options);
-export const labourAndDeliveryLink = getSyncLifecycle(createDashboardLink(labourAndDeliveryDashboardMeta), options);
-
-export const genericNavLinks = getSyncLifecycle(GenericNavLinks, options);
-export const genericDashboard = getSyncLifecycle(GenericDashboard, options);
+export const endRelationshipWorkspace = getSyncLifecycle(EndRelationshipWorkspace, options);
 
 export const inPatientChartLink = getSyncLifecycle(createDashboardLink(inPatientMeta), options);
 export const inPatientChartDashboard = getSyncLifecycle(InPatient, options);
 
-export const peerCalendarFormEntry = getSyncLifecycle(FormEntryWorkspace, options);
-
-// Case management modal
-export const endRelationshipWorkspace = getSyncLifecycle(EndRelationshipWorkspace, options);
+export const specialClinicsDashboardLink = getSyncLifecycle(createDashboardLink(specialClinicsDashboardMeta), options);
+export const specialClinicsDashboard = getSyncLifecycle(SpecialClinicDashboard, options);
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);

package/src/maternal-and-child-health/labour-delivery.component.tsx

@@ -11,7 +11,6 @@ import {
 import { useConfig, formatDate, parseDate } from '@openmrs/esm-framework';
 import { ConfigObject } from '../config-schema';
 import { labourAndDeliveryConceptMap } from './concept-maps/labour-and-delivery-care-concepts-map';
-import Partograph from './partography/partograph.component';
 
 interface LabourDeliveryProps {
   patientUuid: string;

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

@@ -0,0 +1,43 @@
+import { Button, Checkbox, Layer, Tab, TabList, TabPanel, TabPanels, Tabs, TextInput } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import AntenatalCare from './antenatal-care.component';
+import PostnatalCare from './postnatal-care.component';
+import LabourDelivery from './labour-delivery.component';
+import Partograph from './partography/partograph.component';
+
+type MaternalAndChildDashboardProps = {
+  patientUuid: string;
+};
+
+const MaternalAndChildDashboard: React.FC<MaternalAndChildDashboardProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <Layer>
+      <Tabs>
+        <TabList contained>
+          <Tab>{t('antenatalCare', 'Antenatal Care')}</Tab>
+          <Tab>{t('postnatalCare', 'Postnatal Care')}</Tab>
+          <Tab>{t('labourAndDelivery', 'Labour & Delivery')}</Tab>
+          <Tab>{t('partograph', 'Partograph')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <AntenatalCare patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <PostnatalCare patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <LabourDelivery patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <Partograph patientUuid={patientUuid} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Layer>
+  );
+};
+
+export default MaternalAndChildDashboard;

package/src/maternal-and-child-health/mch-dashboard.meta.tsx

@@ -1,37 +1,8 @@
-export const antenatalDashboardMeta = {
-  slot: 'patient-chart-antenatal-dashboard-slot',
-  columns: 1,
-  title: 'Antenatal Care',
-  path: 'antenatal-care-dashboard',
-  moduleName: '@kenyaemr/esm-patient-clinical-view-app',
-  config: {},
-  icon: '',
-};
-
-export const postnatalDashboardMeta = {
-  slot: 'patient-chart-postnatal-dashboard-slot',
-  columns: 1,
-  title: 'Postnatal Care',
-  path: 'postnatal-care-dashboard',
-  moduleName: '@kenyaemr/esm-patient-clinical-view-app',
-  config: {},
-  icon: '',
-};
-
-export const labourAndDeliveryDashboardMeta = {
-  slot: 'patient-chart-labour-and-delivery-dashboard-slot',
-  columns: 1,
-  title: 'Labour & Delivery',
-  path: 'labour-and-delivery-dashboard',
-  moduleName: '@kenyaemr/esm-patient-clinical-view-app',
-  config: {},
-  icon: '',
-};
-
-export const maternalAndChildHealthNavGroup = {
+export const maternalAndChildHealthDashboardMeta = {
   title: 'Maternal & Child Health',
-  slotName: 'maternal-and-child-health-slot',
-  isExpanded: false,
+  slot: 'patient-chart-maternal-and-child-health-slot',
+  path: 'maternal-and-child-health',
+  icon: 'omrs-icon-pedestrian-family',
   showWhenExpression:
-    'patient.gender === "female" && (enrollment.includes("MCH - Child Services") || enrollment.includes("MCH - Mother Services"))',
+    'activePatientEnrollment.filter(enrollment => enrollment.program.name === "MCH - Mother Services").length > 0',
 };

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

@@ -1,8 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
-@use '../../root.scss';
 
 .widgetContainer {
   background-color: colors.$white;
@@ -24,10 +23,10 @@
 }
 
 .content {
-  @extend .productiveHeading01;
+  @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .desktopHeading,
@@ -62,7 +61,7 @@
 }
 .toggleButtons {
   width: fit-content;
-  margin: 0 spacing.$spacing-03;
+  margin: 0 layout.$spacing-03;
 
   button {
     color: $interactive-01;
@@ -103,14 +102,14 @@
   }
 }
 .tableViewToggle {
-  border-radius: spacing.$spacing-02 0 0 spacing.$spacing-02;
+  border-radius: layout.$spacing-02 0 0 layout.$spacing-02;
 
   &:global(.cds--btn--ghost) {
     border-right: 0;
   }
 }
 .chartViewToggle {
-  border-radius: 0 spacing.$spacing-02 spacing.$spacing-02 0;
+  border-radius: 0 layout.$spacing-02 layout.$spacing-02 0;
 
   &:global(.cds--btn--ghost) {
     border-left: 0;

package/src/root.scss

@@ -1,24 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '~@openmrs/esm-styleguide/src/vars' as *;
 
-$ui-01: #f4f4f4;
-$ui-02: #ffffff;
-$ui-03: #e0e0e0;
-$ui-05: #161616;
-$color-gray-70: #525252;
-$color-blue-60-2: #0f62fe;
-$color-yellow-50: #feecae;
-$inverse-support-03: #f1c21b;
-$warning-background: #fff8e1;
-$openmrs-background-grey: #f4f4f4;
-$danger: #da1e28;
-$interactive-01: #0f62fe;
-$brand-teal-01: #3197d9;
-$ohri-input-width: 22.313rem;
-$ohri-home-background: #ededed;
-$button-primary: #0078a6;
-
 .productiveHeading01 {
   @include type.type-style('heading-compact-01');
 }
@@ -70,50 +53,3 @@ $button-primary: #0078a6;
 .text02 {
   color: $text-02;
 }
-
-aside {
-  background-color: $ui-02 !important;
-}
-
-// Login Overrides
-
-div[class*='-esm-login__styles__center'] > img {
-  width: 140px; // design has 120px
-}
-
-:global(.tab-12rem) > button {
-  width: 12rem !important;
-}
-
-:global(.tab-14rem) > button {
-  width: 14rem !important;
-}
-
-:global(.tab-16rem) > button {
-  width: 16rem !important;
-}
-
-:global(.cds--overflow-menu) > div {
-  width: 15rem !important;
-}
-
-nav :global(.cds--accordion__title) {
-  color: #525252;
-  font-weight: 600 !important;
-}
-
-nav :global(.cds--accordion__content) {
-  padding-bottom: 0 !important;
-  padding-top: 0 !important;
-}
-
-nav :global(.cds--accordion__content) > a {
-  background-color: #cecece !important;
-  color: #161616 !important;
-  border-left-color: var(--brand-01) !important;
-  font: bolder;
-}
-
-:global(.cds--tab--list) button {
-  max-width: 16rem !important;
-}