(feat) O3-3797: Add the Encounter List Table and Tabs to Patient Chart

packages/esm-patient-chart-app/src/config-schema.ts

@@ -133,6 +133,21 @@ export const esmPatientChartSchema = {
     _default: '/etl-latest/etl/patient/',
     _description: 'Custom URL to load resources required for showing recommended visit types',
   },
+  trueConceptUuid: {
+    _type: Type.String,
+    _description: 'Default concept uuid for true in forms',
+    _default: '1065AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  falseConceptUuid: {
+    _type: Type.String,
+    _description: 'Default concept uuid for false in forms',
+    _default: '1066AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  otherConceptUuid: {
+    _type: Type.String,
+    _description: 'Default concept uuid for other in forms',
+    _default: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
 };
 
 export interface ChartConfig {
@@ -161,4 +176,7 @@ export interface ChartConfig {
     uuid: string;
   }>;
   visitDiagnosisConceptUuid: string;
+  trueConceptUuid: string;
+  falseConceptUuid: string;
+  otherConceptUuid: string;
 }

packages/esm-patient-chart-app/src/constants.ts

@@ -1,3 +1,5 @@
+export const clinicalFormsWorkspace = 'clinical-forms-workspace';
+export const formEntryWorkspace = 'patient-form-entry-workspace';
 export const spaRoot = window['getOpenmrsSpaBase']();
 export const basePath = '/patient/:patientUuid/chart';
 export const dashboardPath = `${basePath}/:view/*`;

packages/esm-patient-chart-app/src/encounter-list/components/encounter-list-tabs.component.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import { useConfig, usePatient, useVisit } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { EncounterList } from './encounter-list.component';
+import { getMenuItemTabsConfiguration } from '../utils/encounter-list-config-builder';
+import styles from './encounter-list-tabs.scss';
+import { filter } from '../utils/helpers';
+import { type Encounter } from '../types';
+
+interface EncounterListTabsComponentProps {
+  patientUuid: string;
+}
+
+const EncounterListTabsComponent: React.FC<EncounterListTabsComponentProps> = ({ patientUuid }) => {
+  const config = useConfig();
+  const { tabDefinitions = [] } = config;
+  const configConcepts = {
+    trueConceptUuid: config.trueConceptUuid,
+    falseConceptUuid: config.falseConceptUuid,
+    otherConceptUuid: config.otherConceptUuid,
+  };
+  const { t } = useTranslation();
+  const tabsConfig = getMenuItemTabsConfiguration(tabDefinitions, configConcepts);
+  const patient = usePatient(patientUuid);
+  const { currentVisit } = useVisit(patientUuid);
+  const tabFilters = useMemo(() => {
+    return tabsConfig.map((tab) => ({
+      name: tab.name,
+      filter: tab.hasFilter ? (encounter: Encounter) => filter(encounter, tab.formList?.[0]?.uuid) : null,
+    }));
+  }, [tabsConfig]);
+
+  return (
+    <div className={styles.tabContainer}>
+      <Tabs>
+        <TabList contained>
+          {tabsConfig.map((tab) => (
+            <Tab key={tab.name}>{t(tab.name)}</Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {tabsConfig.map((tab) => {
+            const tabFilter = tabFilters.find((t) => t.name === tab.name)?.filter;
+
+            return (
+              <TabPanel key={tab.name}>
+                <EncounterList
+                  filter={tabFilter}
+                  patientUuid={patientUuid}
+                  formList={tab.formList}
+                  columns={tab.columns}
+                  encounterType={tab.encounterType}
+                  launchOptions={tab.launchOptions}
+                  headerTitle={tab.headerTitle}
+                  description={tab.description}
+                  currentVisit={currentVisit}
+                  deathStatus={patient?.patient?.deceasedBoolean}
+                />
+              </TabPanel>
+            );
+          })}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default EncounterListTabsComponent;

packages/esm-patient-chart-app/src/encounter-list/components/encounter-list-tabs.scss

@@ -0,0 +1,7 @@
+.tabContainer div[role='tabpanel'] {
+  padding: 0 !important;
+}
+
+.tabContainer li button {
+  width: 100% !important;
+}