@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20 → 5.4.2-pre.26

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"clinical-workflow-triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"clinical-workflow-triage","slot":"clinical-workflow-triage-dashboard-slot","title":"clinical-workflow-triage"}},{"name":"clinical-workflow-triage-dashboard","component":"triageDashboard","slot":"clinical-workflow-triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false},{"name":"patient-scoreboard-link","component":"patientScoreboardLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"patient-scoreboard","title":"Patient Scoreboard","path":"patient-scoreboard","slot":"patient-scoreboard-slot"}},{"name":"patient-scoreboard","component":"patientScoreboard","slot":"patient-scoreboard-slot","online":true,"offline":false}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"workspaces2":[{"name":"clinical-workflow-patient-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"clinical-workflow-window"}],"workspaceWindows2":[{"name":"clinical-workflow-window","group":"clinical-workflow-group","width":"wider","canMaximize":true}],"workspaceGroups2":[{"name":"clinical-workflow-group","overlay":true,"persistence":"closable"}],"version":"5.4.2-pre.20"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"clinical-workflow-triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"clinical-workflow-triage","slot":"clinical-workflow-triage-dashboard-slot","title":"clinical-workflow-triage"}},{"name":"clinical-workflow-triage-dashboard","component":"triageDashboard","slot":"clinical-workflow-triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false},{"name":"patient-scoreboard-link","component":"patientScoreboardLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"patient-scoreboard","title":"Patient Scoreboard","path":"patient-scoreboard","slot":"patient-scoreboard-slot"}},{"name":"patient-scoreboard","component":"patientScoreboard","slot":"patient-scoreboard-slot","online":true,"offline":false},{"name":"past-visits-detail-overview-shadow","slot":"patient-chart-encounters-dashboard-slot","component":"pastVisitsDetailOverviewShadow","order":0,"meta":{"title":"Visits","view":"visits"},"online":true,"offline":true}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"workspaces2":[{"name":"clinical-workflow-patient-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"clinical-workflow-window"},{"name":"visit-notes-form-shadow-workspace","component":"visitNotesFormWorkspace","window":"visit-note-shadow"}],"workspaceWindows2":[{"name":"clinical-workflow-window","group":"clinical-workflow-group","width":"wider","canMaximize":true},{"name":"visit-note-shadow","group":"patient-chart","icon":"visitNoteActionButton","order":3}],"workspaceGroups2":[{"name":"clinical-workflow-group","overlay":true,"persistence":"closable"}],"version":"5.4.2-pre.26"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palladium-ethiopia/esm-clinical-workflow-app",
-  "version": "5.4.2-pre.20",
+  "version": "5.4.2-pre.26",
   "description": "Express workflow app for OpenMRS 3",
   "keywords": [
     "openmrs",

package/src/config-schema.ts

@@ -1,4 +1,5 @@
 import { Type } from '@openmrs/esm-framework';
+import notesConfigSchema, { type VisitNoteConfigObject } from './patient-notes/visit-note-config-schema';
 
 export const configSchema = {
   triageLocationForms: {
@@ -46,6 +47,54 @@ export const configSchema = {
     _description: 'Patient attribute type UUID for Medico Legal Cases',
     _default: '',
   },
+  diagnosisConceptClass: {
+    _type: Type.UUID,
+    _default: '8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+    _description: 'The concept class UUID for diagnoses',
+  },
+  isPrimaryDiagnosisRequired: {
+    _type: Type.Boolean,
+    _default: true,
+    _description: 'Indicates whether a primary diagnosis is required when submitting a visit note',
+  },
+  visitNoteConfig: notesConfigSchema,
+  disableEmptyTabs: {
+    _type: Type.Boolean,
+    _default: false,
+    _description: 'Disable notes/tests/medications/encounters tabs when empty',
+  },
+  encounterEditableDuration: {
+    _type: Type.Number,
+    _default: 0,
+    _description:
+      'The number of minutes an encounter is editable after it is created. 0 means the encounter is editable forever.',
+  },
+  encounterEditableDurationOverridePrivileges: {
+    _type: Type.Array,
+    _elements: {
+      _type: Type.String,
+    },
+    _default: [],
+    _description:
+      'The privileges that allow users to edit encounters even after the editable duration (set by `encounterEditableDuration`) has expired. Any privilege in the list is sufficient to edit the encounter.',
+  },
+  notesConceptUuids: {
+    _type: Type.Array,
+    _elements: {
+      _type: Type.ConceptUuid,
+    },
+    _default: ['162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+  },
+  showAllEncountersTab: {
+    _type: Type.Boolean,
+    _description: 'Shows the All Encounters Tab of Patient Visits section in Patient Chart',
+    _default: true,
+  },
+  drugOrderTypeUUID: {
+    _type: Type.UUID,
+    _description: "UUID for the 'Drug' order type to fetch medications",
+    _default: '131168f4-15f5-102d-96e4-000c29c2a5d7',
+  },
 };
 
 export type ClinicalWorkflowConfig = {
@@ -67,3 +116,52 @@ export type ClinicalWorkflowConfig = {
   defaultIdentifierTypeUuid: string;
   medicoLegalCasesAttributeTypeUuid: string;
 };
+
+export interface VisitNoteConfig {
+  diagnosisConceptClass: string;
+  isPrimaryDiagnosisRequired: boolean;
+  visitNoteConfig: VisitNoteConfigObject;
+}
+
+export interface ChartConfig {
+  defaultFacilityUrl: string;
+  disableChangingVisitLocation: boolean;
+  disableEmptyTabs: boolean;
+  encounterEditableDuration: number;
+  encounterEditableDurationOverridePrivileges: Array<string>;
+  freeTextFieldConceptUuid: string;
+  logo: {
+    alt: string;
+    name: string;
+    src: string;
+  };
+  notesConceptUuids: string[];
+  offlineVisitTypeUuid: string;
+  restrictByVisitLocationTag: boolean;
+  showAllEncountersTab: boolean;
+  showRecommendedVisitTypeTab: boolean;
+  showServiceQueueFields: boolean; // used by extension from esm-service-queues-app
+  showUpcomingAppointments: boolean; // used by extension from esm-appointments-app
+  visitTypeResourceUrl: string;
+  visitAttributeTypes: Array<{
+    displayInThePatientBanner: boolean;
+    required: boolean;
+    showWhenExpression?: string;
+    uuid: string;
+  }>;
+  visitDiagnosisConceptUuid: string;
+  requireActiveVisitForEncounterTile: boolean;
+  trueConceptUuid: string;
+  falseConceptUuid: string;
+  tileDefinitions: Array<{
+    title: string;
+    columns: Array<{
+      title: string;
+      concept: string;
+      encounterType: string;
+      hasSummary?: boolean;
+    }>;
+  }>;
+  otherConceptUuid: string;
+  drugOrderTypeUUID: string;
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getGlobalStore, getSyncLifecycle } from '@openmrs/esm-framework';
 import { createDashboardLink } from './createDashboardLink';
 import { configSchema } from './config-schema';
 import { dashboardMeta } from './dashboard.meta';
@@ -6,6 +6,8 @@ import MRUDashboard from './mru/dashboard.component';
 import { spaBasePath } from './constants';
 import BillingInformationWorkspace from './mru/billing-information/billing-information.workspace';
 import PatientScoreboard from './patient-scoreboard/patient-scoreboard.component';
+import visitNotesActionButtonExtension from './patient-notes/visit-note-action-button.extension';
+import pastVisitsOverviewComponent from './patient-chart/visit/visits-widget/visit-detail-overview.component';
 
 const moduleName = '@ethiopia/esm-clinical-workflow-app';
 
@@ -16,6 +18,23 @@ const options = {
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
+
+  // Remove the core visit-note workspace window since we're providing a custom one
+  const workspace2Store = getGlobalStore<any>('workspace2');
+  const removeCoreButton = () => {
+    const state = workspace2Store.getState();
+    if (state.registeredWindowsByName['visit-note']) {
+      const newWindows = { ...state.registeredWindowsByName };
+      delete newWindows['visit-note'];
+      workspace2Store.setState({
+        registeredWindowsByName: newWindows,
+      });
+    }
+  };
+
+  // Try immediately and also subscribe to handle cases where the core module registers later
+  removeCoreButton();
+  workspace2Store.subscribe(removeCoreButton);
 }
 
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
@@ -49,3 +68,15 @@ export const patientScoreboardLink = getSyncLifecycle(
 );
 
 export const patientScoreboard = getSyncLifecycle(PatientScoreboard, options);
+
+export const visitNoteActionButton = getSyncLifecycle(visitNotesActionButtonExtension, options);
+
+export const visitNotesFormWorkspace = getAsyncLifecycle(
+  () => import('./patient-notes/visit-notes-form-shadow.workspace'),
+  options,
+);
+
+export const pastVisitsDetailOverviewShadow = getSyncLifecycle(pastVisitsOverviewComponent, {
+  featureName: 'visits-detail-overview',
+  moduleName,
+});

package/src/patient-chart/clinical-views/hooks/useEncountersByVisit.ts

@@ -0,0 +1,13 @@
+import { type Encounter, restBaseUrl, useOpenmrsFetchAll } from '@openmrs/esm-framework';
+
+export function useEncountersByVisit(patientUuid: string, visitUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounterType:(uuid,display),encounterProviders:(provider:(person:(display))),encounterDatetime,visit:(uuid))';
+  const url = `${restBaseUrl}/encounter?patient=${patientUuid}&order=desc&visit=${visitUuid}&v=${customRepresentation}`;
+  const { data: encounters, ...rest } = useOpenmrsFetchAll<Encounter>(url);
+
+  return {
+    encounters,
+    ...rest,
+  };
+}

package/src/patient-chart/constants.ts

@@ -0,0 +1,11 @@
+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/*`;
+export const spaBasePath = `${window.spaBase}${basePath}`;
+export const moduleName = '@openmrs/esm-patient-chart-app';
+export const patientChartWorkspaceSlot = 'patient-chart-workspace-slot';
+export const patientChartWorkspaceHeaderSlot = 'patient-chart-workspace-header-slot';
+export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+export const jsonSchemaResourceName = 'JSON schema';

package/src/patient-chart/visit/visit-history-table/diagnosis-tags.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { CheckmarkFilled, Help } from '@carbon/react/icons';
+import { type Diagnosis } from '@openmrs/esm-emr-api';
+import styles from './diagnosis-tags.module.scss';
+
+interface DiagnosisTagsProps {
+  diagnoses: Array<Diagnosis>;
+}
+
+export const DiagnosisTags: React.FC<DiagnosisTagsProps> = ({ diagnoses = [] }) => {
+  if (!diagnoses || diagnoses.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.diagnosesText}>
+      {diagnoses.map((diagnosis, index) => {
+        const { uuid, display, certainty = 'PROVISIONAL', rank } = diagnosis;
+        const color = rank === 1 ? 'red' : 'blue';
+        const displayText = display.length > 30 ? `${display.substring(0, 30)}...` : display;
+        const certaintyText = certainty === 'CONFIRMED' ? 'Confirmed' : 'Presumed';
+        const fullTooltip = `${display} (${certaintyText})`;
+
+        return (
+          /* The title goes here on the wrapper */
+          <div key={uuid || index} className={styles.tagWrapper} title={fullTooltip}>
+            <Tag className={styles.tag} type={color}>
+              <span className={styles.tagContent}>
+                <span className={styles.textLabel}>{displayText}</span>
+                {certainty === 'CONFIRMED' ? (
+                  <CheckmarkFilled size={14} className={`${styles.tagIcon} ${styles.confirmedIcon}`} />
+                ) : (
+                  <Help size={14} className={`${styles.tagIcon} ${styles.presumedIcon}`} />
+                )}
+              </span>
+            </Tag>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/patient-chart/visit/visit-history-table/diagnosis-tags.module.scss

@@ -0,0 +1,57 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.diagnosesText {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-05;
+}
+
+.tagWrapper {
+  display: inline-flex;
+  /* Makes the wrapper behave like the tag for the mouse */
+  height: fit-content;
+  width: fit-content;
+}
+
+.tag {
+  max-width: layout.rem(320px);
+  margin: 0 !important;
+  /* Prevents internal Carbon elements from stealing hover event */
+  pointer-events: none;
+
+  :global(.cds--tag__label) {
+    display: flex;
+    align-items: center;
+    max-width: 100%;
+  }
+}
+
+.tagContent {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02; 
+  width: 100%;
+}
+
+.textLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tagIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.confirmedIcon {
+  color: colors.$green-60;
+}
+
+.presumedIcon {
+  color: colors.$orange-60;
+}

package/src/patient-chart/visit/visit-history-table/visit-actions-cell.component.tsx

@@ -0,0 +1,20 @@
+import { ExtensionSlot, type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './visit-actions-cell.scss';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitActionsCell: React.FC<Props> = ({ visit, patient }) => {
+  return (
+    <ExtensionSlot
+      name="visit-detail-overview-actions"
+      className={styles.visitActions}
+      state={{ patientUuid: visit.patient.uuid, patient, visit, compact: true }}
+    />
+  );
+};
+
+export default VisitActionsCell;

package/src/patient-chart/visit/visit-history-table/visit-actions-cell.scss

@@ -0,0 +1,4 @@
+.visitActions {
+  display: flex;
+  align-items: center;
+}

package/src/patient-chart/visit/visit-history-table/visit-date-cell.component.tsx

@@ -0,0 +1,19 @@
+import { formatDate, type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitDateCell: React.FC<Props> = ({ visit }) => {
+  const { t } = useTranslation();
+  const { startDatetime, stopDatetime } = visit;
+  const fromDate = formatDate(new Date(startDatetime));
+  const toDate = stopDatetime ? formatDate(new Date(stopDatetime)) : null;
+
+  return <>{toDate ? t('fromDateToDate', '{{fromDate}} - {{toDate}}', { fromDate, toDate }) : fromDate}</>;
+};
+
+export default VisitDateCell;

package/src/patient-chart/visit/visit-history-table/visit-diagnoses-cell-with-certainty.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { type Visit } from '@openmrs/esm-framework';
+import { DiagnosisTags } from './diagnosis-tags.component';
+import { useTranslation } from 'react-i18next';
+import styles from './visit-diagnoses-cell-with-certainty.module.scss';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitDiagnosisCell: React.FC<Props> = ({ visit }) => {
+  const { t } = useTranslation();
+  const diagnoses = visit.encounters
+    .flatMap((enc) => enc.diagnoses)
+    .filter((d) => !d.voided)
+    .sort((a, b) => a.rank - b.rank);
+
+  if (!diagnoses.length) {
+    return null;
+  }
+
+  return (
+    <div className={styles.cell}>
+      <DiagnosisTags diagnoses={diagnoses} />
+    </div>
+  );
+};
+
+export default VisitDiagnosisCell;

package/src/patient-chart/visit/visit-history-table/visit-diagnoses-cell-with-certainty.module.scss

@@ -0,0 +1,16 @@
+.cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.certaintyRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.certaintyTag {
+  font-size: 0.625rem;
+  padding: 0 0.375rem;
+}

package/src/patient-chart/visit/visit-history-table/visit-history-table.component.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { ErrorState, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { usePaginatedVisits } from '../visits-widget/visit.resource';
+import VisitActionsCell from './visit-actions-cell.component';
+import VisitDateCell from './visit-date-cell.component';
+import VisitDiagnosisCell from './visit-diagnoses-cell-with-certainty.component';
+import VisitSummary from '../visits-widget/past-visits-components/visit-summary.component';
+import VisitTypeCell from './visit-type-cell.component';
+import styles from './visit-history-table.scss';
+
+interface VisitHistoryTableProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+/**
+ * This show a list of visit histories in the visit tab in patient chart
+ */
+const VisitHistoryTable: React.FC<VisitHistoryTableProps> = ({ patientUuid, patient }) => {
+  const defaultPageSize = 10;
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const { data: visits, currentPage, error, isLoading, totalCount, goTo } = usePaginatedVisits(patientUuid, pageSize);
+  const { t } = useTranslation();
+  const desktopLayout = isDesktop(useLayoutType());
+
+  // TODO: make this configurable
+  const columns = [
+    { key: 'visitDate', header: t('date', 'Date'), CellComponent: VisitDateCell },
+    { key: 'visitType', header: t('visitType', 'Visit type'), CellComponent: VisitTypeCell },
+    { key: 'diagnoses', header: t('diagnoses', 'Diagnoses'), CellComponent: VisitDiagnosisCell },
+    { key: 'actions', header: '', CellComponent: VisitActionsCell },
+  ];
+
+  const layout = useLayoutType();
+
+  const rowData = visits?.map((visit) => {
+    const row: Record<string, JSX.Element | string> = { id: visit.uuid };
+    for (const { key, CellComponent } of columns) {
+      row[key] = <CellComponent key={key} visit={visit} patient={patient} />;
+    }
+    return row;
+  });
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" compact={isDesktop(layout)} zebra />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('pastVisits', 'Past visits')} />;
+  }
+
+  if (visits.length === 0) {
+    return (
+      <div className={styles.emptyStateContainer}>
+        <EmptyState headerTitle={t('pastVisits', 'Past visits')} displayText={t('visits', 'visits')} />
+      </div>
+    );
+  }
+  return (
+    <div className={styles.container}>
+      {/* @ts-ignore */}
+      <DataTable headers={columns} rows={rowData} size={desktopLayout ? 'sm' : 'lg'} useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps, getExpandHeaderProps, getRowProps, getExpandedRowProps }) => (
+          <>
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                    {headers.map((header) => (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          className: header.key === 'actions' ? styles.actionsColumn : '',
+                        })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, i) => {
+                    const visit = visits[i];
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => {
+                            return <TableCell key={cell.id}>{cell?.value}</TableCell>;
+                          })}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow {...getExpandedRowProps({ row })} colSpan={headers.length + 2}>
+                            <VisitSummary visit={visit} patientUuid={patientUuid} />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <Pagination
+              forwardText={t('nextPage', 'Next page')}
+              backwardText={t('previousPage', 'Previous page')}
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={totalCount}
+              onChange={({ pageSize, page }) => {
+                setPageSize(pageSize);
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          </>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default VisitHistoryTable;

package/src/patient-chart/visit/visit-history-table/visit-history-table.scss

@@ -0,0 +1,25 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: layout.$spacing-05 0;
+  border: 1px solid $ui-03;
+
+  // fixes padding of encounters table within the expanded visit table row
+  :global(tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td) {
+    padding-inline-start: layout.$spacing-05;
+  }
+}
+
+.emptyStateContainer {
+  text-align: center;
+  margin: layout.$spacing-05 0;
+}
+
+.actionsColumn {
+  width: 1% !important; // fixes the width of action column to fit content
+}
+
+.hiddenRow {
+  display: none;
+}

package/src/patient-chart/visit/visit-history-table/visit-type-cell.component.tsx

@@ -0,0 +1,15 @@
+import { type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitTypeCell: React.FC<Props> = ({ visit }) => {
+  const { visitType } = visit;
+
+  return <>{visitType.display}</>;
+};
+
+export default VisitTypeCell;

package/src/patient-chart/visit/visits-widget/encounter-observations/encounter-observations.component.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SkeletonText } from '@carbon/react';
+import { type Obs, useConfig } from '@openmrs/esm-framework';
+import styles from './styles.scss';
+
+interface EncounterObservationsProps {
+  observations: Array<Obs>;
+}
+
+const EncounterObservations: React.FC<EncounterObservationsProps> = ({ observations }) => {
+  const { t } = useTranslation();
+  const { obsConceptUuidsToHide = [] } = useConfig();
+
+  function getAnswerFromDisplay(display: string): string {
+    const colonIndex = display.indexOf(':');
+    if (colonIndex === -1) {
+      return '';
+    } else {
+      return display.substring(colonIndex + 1).trim();
+    }
+  }
+
+  const filteredObservations = !!obsConceptUuidsToHide.length
+    ? observations?.filter((obs) => {
+        return !obsConceptUuidsToHide.includes(obs?.concept?.uuid);
+      })
+    : observations;
+
+  if (!filteredObservations || filteredObservations.length == 0) {
+    return (
+      <div className={styles.observation}>
+        <p>{t('noObservationsFound', 'No observations found')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.observation}>
+      {filteredObservations?.map((obs, index) => {
+        if (obs.groupMembers) {
+          return (
+            <React.Fragment key={index}>
+              <span className={styles.parentConcept}>{obs.concept.display}</span>
+              <span />
+              {obs.groupMembers.map((member) => (
+                <React.Fragment key={index}>
+                  <span className={styles.childConcept}>{member.concept.display}</span>
+                  <span>{getAnswerFromDisplay(member.display)}</span>
+                </React.Fragment>
+              ))}
+            </React.Fragment>
+          );
+        } else {
+          return (
+            <React.Fragment key={index}>
+              <span>{obs.concept.display}</span>
+              <span>{getAnswerFromDisplay(obs.display)}</span>
+            </React.Fragment>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default EncounterObservations;

package/src/patient-chart/visit/visits-widget/encounter-observations/index.ts

@@ -0,0 +1,3 @@
+import EncounterObservations from './encounter-observations.component';
+
+export default EncounterObservations;