@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2539 → 5.4.2-pre.2543

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"hiv-care-and-treatment-dashboard-link","component":"hivCareAndTreatmentLink","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","path":"hiv-care-and-treatment-dashboard","layoutMode":"anchored"}},{"name":"hiv-care-and-treatment-dashboard","slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","component":"hivCareAndTreatment","order":0,"online":true,"offline":false},{"name":"relationship-dashboard-link","component":"relationshipsLink","order":24,"online":true,"offline":false,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-relationship-slot","path":"relationships","layoutMode":"anchored"}},{"name":"relationship-dashboard","slot":"patient-chart-relationship-slot","component":"relationships","order":0,"online":true,"offline":false},{"name":"clinical-encounter-dashboard-link","component":"clinicalEncounterLink","order":25,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored"}},{"name":"clinical-encounter-dashboard","slot":"patient-chart-clinical-encounter-slot","component":"clinicalEncounter","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-dashboard-link","component":"maternalAndChildHealthDashboardLink","order":26,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-maternal-and-child-health-slot","path":"maternal-and-child-health","layoutMode":"anchored"}},{"name":"maternal-and-child-health-dashboard","slot":"patient-chart-maternal-and-child-health-slot","component":"maternalAndChildHealthDashboard","order":0,"online":true,"offline":false},{"name":"contact-list-dashboard-link","component":"contactListLink","order":27,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-contact-list-slot","path":"contact-list","layoutMode":"anchored"}},{"name":"contact-list-dashboard","slot":"patient-chart-contact-list-slot","component":"contactList","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","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","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":"special-clinics-dashboard-link","component":"specialClinicsDashboardLink","order":15,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-special-clinics-slot","path":"special-clinics","layoutMode":"anchored"}},{"name":"special-clinics-dashboard","slot":"patient-chart-special-clinics-slot","component":"specialClinicsDashboard","order":0,"online":true,"offline":false}],"modals":[{"name":"birth-date-calculator","component":"birthDateCalculator"},{"name":"relationship-delete-confirm-dialog","component":"relationshipDeleteConfirmialog"},{"name":"end-relationship-dialog","component":"endRelationshipModal"}],"workspaces":[{"name":"contact-list-form","component":"contactListForm","title":"Contact List Form","type":"form"},{"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.2539"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"hiv-care-and-treatment-dashboard-link","component":"hivCareAndTreatmentLink","slot":"patient-chart-dashboard-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","path":"hiv-care-and-treatment-dashboard","layoutMode":"anchored"}},{"name":"hiv-care-and-treatment-dashboard","slot":"patient-chart-hiv-care-and-treatment-dashboard-slot","component":"hivCareAndTreatment","order":0,"online":true,"offline":false},{"name":"relationship-dashboard-link","component":"relationshipsLink","order":24,"online":true,"offline":false,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-relationship-slot","path":"relationships","layoutMode":"anchored"}},{"name":"relationship-dashboard","slot":"patient-chart-relationship-slot","component":"relationships","order":0,"online":true,"offline":false},{"name":"clinical-encounter-dashboard-link","component":"clinicalEncounterLink","order":25,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored"}},{"name":"clinical-encounter-dashboard","slot":"patient-chart-clinical-encounter-slot","component":"clinicalEncounter","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-dashboard-link","component":"maternalAndChildHealthDashboardLink","order":26,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-maternal-and-child-health-slot","path":"maternal-and-child-health","layoutMode":"anchored"}},{"name":"maternal-and-child-health-dashboard","slot":"patient-chart-maternal-and-child-health-slot","component":"maternalAndChildHealthDashboard","order":0,"online":true,"offline":false},{"name":"maternal-and-child-health-partograph","slot":"maternal-and-child-health-partograph-slot","component":"partograph","order":0,"online":true,"offline":false},{"name":"contact-list-dashboard-link","component":"contactListLink","order":27,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-contact-list-slot","path":"contact-list","layoutMode":"anchored"}},{"name":"contact-list-dashboard","slot":"patient-chart-contact-list-slot","component":"contactList","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","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","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":"special-clinics-dashboard-link","component":"specialClinicsDashboardLink","order":15,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-special-clinics-slot","path":"special-clinics","layoutMode":"anchored"}},{"name":"special-clinics-dashboard","slot":"patient-chart-special-clinics-slot","component":"specialClinicsDashboard","order":0,"online":true,"offline":false}],"modals":[{"name":"birth-date-calculator","component":"birthDateCalculator"},{"name":"relationship-delete-confirm-dialog","component":"relationshipDeleteConfirmialog"},{"name":"end-relationship-dialog","component":"endRelationshipModal"}],"workspaces":[{"name":"contact-list-form","component":"contactListForm","title":"Contact List Form","type":"form"},{"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.2543"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-clinical-view-app",
-  "version": "5.4.2-pre.2539",
+  "version": "5.4.2-pre.2543",
   "description": "Patient clinical view microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-clinical-view-app.js",
   "main": "src/index.ts",

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

@@ -4,8 +4,7 @@ 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';
-
+import { ExtensionSlot } from '@openmrs/esm-framework';
 type MaternalAndChildDashboardProps = {
   patientUuid: string;
 };
@@ -32,7 +31,7 @@ const MaternalAndChildDashboard: React.FC<MaternalAndChildDashboardProps> = ({ p
             <LabourDelivery patientUuid={patientUuid} />
           </TabPanel>
           <TabPanel>
-            <Partograph patientUuid={patientUuid} />
+            <ExtensionSlot name="maternal-and-child-health-partograph-slot" state={{ patientUuid }} />
           </TabPanel>
         </TabPanels>
       </Tabs>

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

@@ -0,0 +1,16 @@
+import { EmptyState } from '@openmrs/esm-patient-common-lib/src';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const CervicalDilation = () => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState
+      headerTitle={t('cervicalDilation', 'Cervical Dilation')}
+      displayText={t('cervicalDilation', 'Cervical Dilation')}
+      launchForm={() => {}}
+    />
+  );
+};
+
+export default CervicalDilation;

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

@@ -0,0 +1,16 @@
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ContractionLevel = () => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState
+      headerTitle={t('contractionLevel', 'Contraction level')}
+      displayText={t('contractionLevel', 'Contraction level')}
+      launchForm={() => {}}
+    />
+  );
+};
+
+export default ContractionLevel;

package/src/maternal-and-child-health/partography/descent-of-head.component.tsx

@@ -0,0 +1,16 @@
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const DescentOfHead = () => {
+  const { t } = useTranslation();
+  return (
+    <EmptyState
+      headerTitle={t('descentOfHead', 'Descent of Head')}
+      displayText={t('descentOfHead', 'Descent of Head')}
+      launchForm={() => {}}
+    />
+  );
+};
+
+export default DescentOfHead;

package/src/maternal-and-child-health/partography/foetal-heart-rate.component.tsx

@@ -0,0 +1,17 @@
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const FoetalHeartRate = () => {
+  const { t } = useTranslation();
+
+  return (
+    <EmptyState
+      headerTitle={t('foetalHeartRate', 'Foetal Heart Rate')}
+      displayText={t('foetalHeartRate', 'Foetal Heart Rate')}
+      launchForm={() => {}}
+    />
+  );
+};
+
+export default FoetalHeartRate;

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

@@ -3,6 +3,63 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+
+
+.expandedTabsParentContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: layout.$spacing-05;
+}
+
+.expandedTabsContainer {
+  display: flex;
+  flex-direction: row;
+
+  :global(.cds--tabs) {
+    margin: layout.$spacing-05 0;
+    width: 20%;
+    max-height: 100% !important;
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column !important;
+  }
+
+  :global(.cds--tab-content) {
+    margin: layout.$spacing-05 0;
+    width: 100% !important;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    border-bottom: 0 !important;
+    border-left: 3px solid $ui-03 !important;
+    padding: layout.$spacing-05;
+
+  }
+
+  :global(.cds--tabs__nav-item--selected) {
+    border-bottom: 0px !important;
+    border-left: 3px solid var(--brand-03) !important;
+  }
+
+  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0 !important;
+  }
+
+  > ul {
+    flex-direction: column !important;
+  }
+
+  > ul > li button {
+    width: 12rem !important;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    max-width: 12rem !important;
+  }
+}
+
+
 .widgetContainer {
   background-color: colors.$white;
   border: 1px solid #e0e0e0;

package/src/maternal-and-child-health/partography/membrane-amniotic-fluid-moulding.component.tsx

@@ -0,0 +1,17 @@
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const MembraneAmnioticFluidAndMoulding = () => {
+  const { t } = useTranslation();
+
+  return (
+    <EmptyState
+      headerTitle={t('membraneAmnioticFluidAndMoulding', 'Membrane Amniotic Fluid & Moulding')}
+      displayText={t('membraneAmnioticFluidAndMoulding', 'Membrane Amniotic Fluid & Moulding')}
+      launchForm={() => {}}
+    />
+  );
+};
+
+export default MembraneAmnioticFluidAndMoulding;

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

@@ -13,6 +13,18 @@ import {
   TableRow,
   Tile,
   Button,
+  Checkbox,
+  RadioButton,
+  RadioButtonGroup,
+  Stack,
+  Tab,
+  TabListVertical,
+  TabPanel,
+  TabPanels,
+  TabsVertical,
+  TextInput,
+  Tabs,
+  TabList,
 } from '@carbon/react';
 import { Add, ChartLineSmooth } from '@carbon/react/icons';
 import { EmptyDataIllustration, ErrorState, CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
@@ -21,7 +33,7 @@ import styles from './labour-delivery.scss';
 import { usePartograph } from '../../hooks/usePartograph';
 import dayjs from 'dayjs';
 import {
-  CervicalDilation,
+  CervicalDilation as cervicalDilation,
   DeviceRecorded,
   FetalHeartRate,
   PartographEncounterFormUuid,
@@ -29,6 +41,11 @@ import {
   descentOfHeadObj,
 } from '../../utils/constants';
 import PartographChart from './partograph-chart';
+import FoetalHeartRate from './foetal-heart-rate.component';
+import MembraneAmnioticFluidAndMoulding from './membrane-amniotic-fluid-moulding.component';
+import CervicalDilation from './cervical-dilation.component';
+import DescentOfHead from './descent-of-head.component';
+import ContractionLevel from './contraction-level.component';
 
 interface PartographyProps {
   patientUuid: string;
@@ -77,7 +94,7 @@ const Partograph: React.FC<PartographyProps> = ({ patientUuid }) => {
         date: formatDate(parseDate(encounter.obsDatetime.toString()), { mode: 'wide', time: true }),
         timeRecorded: dayjs(new Date(groupmembersObj[DeviceRecorded])).format('HH:mm'),
         fetalHeartRate: groupmembersObj[FetalHeartRate],
-        cervicalDilation: groupmembersObj[CervicalDilation],
+        cervicalDilation: groupmembersObj[cervicalDilation],
         descentOfHead: descentOfHeadObj[groupmembersObj[SurgicalProcedure]],
         contractionFrequency: '--', // TODO: get from obsGroup 163750AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         contractionDuration: '--', // TODO: get from obsGroup 163750AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
@@ -96,7 +113,7 @@ const Partograph: React.FC<PartographyProps> = ({ patientUuid }) => {
         id: `${encounter.uuid}`,
         date: encounter.obsDatetime,
         fetalHeartRate: groupmembersObj[FetalHeartRate],
-        cervicalDilation: groupmembersObj[CervicalDilation],
+        cervicalDilation: groupmembersObj[cervicalDilation],
         descentOfHead: descentOfHeadObj[groupmembersObj[SurgicalProcedure]],
       };
     }) ?? [];
@@ -122,110 +139,37 @@ const Partograph: React.FC<PartographyProps> = ({ patientUuid }) => {
     return <ErrorState headerTitle={headerTitle} error={error} />;
   }
 
-  if (encounters?.length === 0) {
-    return (
-      <Layer>
-        <Tile className={styles.tile}>
-          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
-            <h4>{headerTitle}</h4>
-          </div>
-          <EmptyDataIllustration />
-          <p className={styles.content}>There is no partograph data to display for this patient.</p>
-          <Button onClick={handleAddHistory} renderIcon={Add} kind="ghost">
-            {t('recordLabourDetails', 'Record labour details')}
-          </Button>
-        </Tile>
-      </Layer>
-    );
-  }
   return (
-    <>
-      {(() => {
-        if (encounters && encounters?.length) {
-          return (
-            <div className={styles.widgetCard}>
-              <CardHeader title={headerTitle}>
-                <div className={styles.backgroundDataFetchingIndicator}>
-                  <span>{isValidating ? isLoading : null}</span>
-                </div>
-                <div className={styles.vitalsHeaderActionItems}>
-                  <div className={styles.toggleButtons}>
-                    <Button
-                      className={styles.tableViewToggle}
-                      size="sm"
-                      kind={chartView ? 'ghost' : 'tertiary'}
-                      hasIconOnly
-                      renderIcon={(props) => <Table {...props} size={16} />}
-                      iconDescription={t('tableView', 'Table View')}
-                      onClick={() => setChartView(false)}
-                    />
-                    <Button
-                      className={styles.chartViewToggle}
-                      size="sm"
-                      kind={chartView ? 'tertiary' : 'ghost'}
-                      hasIconOnly
-                      renderIcon={(props) => <ChartLineSmooth {...props} size={16} />}
-                      iconDescription={t('chartView', 'Chart View')}
-                      onClick={() => setChartView(true)}
-                    />
-                  </div>
-                  <span className={styles.divider}>|</span>
-
-                  <Button
-                    kind="ghost"
-                    onClick={handleAddHistory}
-                    renderIcon={(props) => <Add {...props} size={16} />}
-                    iconDescription="Add vitals">
-                    {t('add', 'Add')}
-                  </Button>
-                </div>
-              </CardHeader>
-              {chartView ? (
-                <PartographChart partograpyComponents={chartData} />
-              ) : (
-                <DataTable
-                  useZebraStyles
-                  headers={headers}
-                  rows={tableRows}
-                  size="sm"
-                  render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => {
-                    return (
-                      <TableContainer {...getTableContainerProps()}>
-                        <Table {...getTableProps()}>
-                          <TableHead>
-                            <TableRow>
-                              {headers.map((header) => (
-                                <TableHeader
-                                  {...getHeaderProps({
-                                    header,
-                                    isSortable: true,
-                                  })}>
-                                  {header.header}
-                                </TableHeader>
-                              ))}
-                            </TableRow>
-                          </TableHead>
-                          <TableBody>
-                            {rows.map((row) => (
-                              <TableRow key={row.id}>
-                                {row.cells.map((cell) => (
-                                  <TableCell key={cell.id}>{cell.value ?? '--'}</TableCell>
-                                ))}
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      </TableContainer>
-                    );
-                  }}
-                />
-              )}
-            </div>
-          );
-        }
-        return <EmptyState displayText={displayText} headerTitle={headerTitle} />;
-      })()}
-    </>
+    <div className={styles.expandedTabsParentContainer}>
+      <div className={styles.expandedTabsContainer}>
+        <Tabs>
+          <TabList aria-label={t('tabList', 'Tab List')}>
+            <Tab>{t('foetalHeartRate', 'Foetal Heart Rate')}</Tab>
+            <Tab>{t('membraneAmnioticFluidAndMoulding', 'Membrane Amniotic Fluid & Moulding')}</Tab>
+            <Tab>{t('cervicalDilation', 'Cervical Dilation')}</Tab>
+            <Tab>{t('descentOfHead', 'Descent of Head')}</Tab>
+            <Tab>{t('contractionLevel', 'Contraction level')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={styles.orderTabs}>
+              <FoetalHeartRate />
+            </TabPanel>
+            <TabPanel className={styles.orderTabs}>
+              <MembraneAmnioticFluidAndMoulding />
+            </TabPanel>
+            <TabPanel className={styles.orderTabs}>
+              <CervicalDilation />
+            </TabPanel>
+            <TabPanel className={styles.orderTabs}>
+              <DescentOfHead />
+            </TabPanel>
+            <TabPanel className={styles.orderTabs}>
+              <ContractionLevel />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
   );
 };
 export default Partograph;

package/src/routes.json

@@ -8,6 +8,7 @@
     {
       "name": "hiv-care-and-treatment-dashboard-link",
       "component": "hivCareAndTreatmentLink",
+      "slot": "patient-chart-dashboard-slot",
       "meta": {
         "columns": 1,
         "columnSpan": 1,
@@ -86,6 +87,14 @@
       "online": true,
       "offline": false
     },
+    {
+      "name": "maternal-and-child-health-partograph",
+      "slot": "maternal-and-child-health-partograph-slot",
+      "component": "partograph",
+      "order": 0,
+      "online": true,
+      "offline": false
+    },
     {
       "name": "contact-list-dashboard-link",
       "component": "contactListLink",