@epcare/esm-report-builder 0.1.1-pre.15

package/e2e/core/global-setup.ts

@@ -0,0 +1,34 @@
+import { request, type FullConfig } from '@playwright/test';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { e2eBaseUrl, loginLocation, password, username } from './env';
+
+async function globalSetup(config: FullConfig) {
+  const storageStatePath = config.projects[0]?.use?.storageState as string | undefined;
+  if (!storageStatePath) return;
+
+  const requestContext = await request.newContext({ baseURL: e2eBaseUrl });
+
+  const authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+  const response = await requestContext.post('/ws/rest/v1/session', {
+    headers: {
+      Authorization: authHeader,
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    form: {
+      sessionLocation: loginLocation,
+    },
+    failOnStatusCode: false,
+  });
+
+  if (!response.ok()) {
+    throw new Error(`E2E authentication failed with status ${response.status()}. Check E2E_* variables and backend availability.`);
+  }
+
+  const state = await requestContext.storageState();
+  await fs.mkdir(path.dirname(storageStatePath), { recursive: true });
+  await fs.writeFile(storageStatePath, JSON.stringify(state, null, 2));
+  await requestContext.dispose();
+}
+
+export default globalSetup;

package/e2e/core/test.ts

@@ -0,0 +1,21 @@
+import { test as base, expect } from '@playwright/test';
+import { AppShellPage } from '../pages/app-shell.page';
+import { ETLSourcesPage } from '../pages/etl-sources.page';
+import { ReportSectionsPage } from '../pages/report-sections.page';
+import { SectionPreviewModal } from '../pages/section-preview.modal';
+
+type Fixtures = {
+  appShell: AppShellPage;
+  etlSourcesPage: ETLSourcesPage;
+  reportSectionsPage: ReportSectionsPage;
+  sectionPreviewModal: SectionPreviewModal;
+};
+
+export const test = base.extend<Fixtures>({
+  appShell: async ({ page }, use) => use(new AppShellPage(page)),
+  etlSourcesPage: async ({ page }, use) => use(new ETLSourcesPage(page)),
+  reportSectionsPage: async ({ page }, use) => use(new ReportSectionsPage(page)),
+  sectionPreviewModal: async ({ page }, use) => use(new SectionPreviewModal(page)),
+});
+
+export { expect };

package/e2e/pages/app-shell.page.ts

@@ -0,0 +1,34 @@
+import type { Page } from '@playwright/test';
+
+export class AppShellPage {
+  constructor(private readonly page: Page) {}
+
+  async goto(path = '/') {
+    await this.page.goto(path);
+  }
+
+  async openHome() {
+    await this.page.getByRole('link', { name: 'Home' }).click();
+  }
+
+  async openReports() {
+    await this.page.getByRole('link', { name: 'Reports' }).click();
+  }
+
+  async openSections() {
+    await this.page.getByRole('link', { name: 'Sections' }).click();
+  }
+
+  async openIndicators() {
+    await this.page.getByRole('link', { name: 'Indicators' }).click();
+  }
+
+  async openAdminMenu() {
+    await this.page.getByText('Admin', { exact: true }).click();
+  }
+
+  async openAdminTile(name: string) {
+    await this.openAdminMenu();
+    await this.page.getByText(name, { exact: true }).click();
+  }
+}

package/e2e/pages/etl-sources.page.ts

@@ -0,0 +1,35 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class ETLSourcesPage {
+  constructor(private readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto('/admin/etl-sources');
+  }
+
+  async expectLoaded() {
+    await expect(this.page.getByRole('heading', { name: 'ETL Sources' })).toBeVisible();
+  }
+
+  async clickNew() {
+    await this.page.getByTestId('etl-source-new').click();
+  }
+
+  async fillForm(data: { name: string; code?: string; schemaName?: string; sourceType?: string; description?: string; tablePatterns?: string }) {
+    await this.page.locator('[data-testid="etl-source-name"] input').fill(data.name);
+    if (data.code !== undefined) await this.page.locator('[data-testid="etl-source-code"] input').fill(data.code);
+    if (data.schemaName !== undefined) await this.page.locator('[data-testid="etl-source-schema"] input').fill(data.schemaName);
+    if (data.sourceType !== undefined) await this.page.locator('[data-testid="etl-source-type"] input').fill(data.sourceType);
+    if (data.description !== undefined) await this.page.locator('[data-testid="etl-source-description"] textarea').fill(data.description);
+    if (data.tablePatterns !== undefined) await this.page.locator('[data-testid="etl-source-table-patterns"] textarea').fill(data.tablePatterns);
+  }
+
+  async save() {
+    await this.page.getByRole('button', { name: 'Save' }).click();
+  }
+
+  row(name: string) {
+    return this.page.getByRole('row').filter({ hasText: name });
+  }
+}

package/e2e/pages/report-sections.page.ts

@@ -0,0 +1,20 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class ReportSectionsPage {
+  constructor(private readonly page: Page) {}
+
+  async goto() {
+    await this.page.goto('/sections');
+  }
+
+  async expectLoaded() {
+    await expect(this.page.getByRole('heading', { name: 'Sections' })).toBeVisible();
+  }
+
+  async openPreviewFor(sectionName: string) {
+    const row = this.page.getByTestId(`section-row-${sectionName.replace(/\s+/g, '-')}`);
+    await row.getByLabel('Actions').click();
+    await this.page.getByText('Preview', { exact: true }).click();
+  }
+}

package/e2e/pages/section-preview.modal.ts

@@ -0,0 +1,29 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class SectionPreviewModal {
+  constructor(private readonly page: Page) {}
+
+  async expectOpen() {
+    await expect(this.page.getByRole('dialog')).toBeVisible();
+  }
+
+  async fillPreviewRequest(data: { startDate: string; endDate: string; indicatorUuid?: string; maxRows?: number }) {
+    await this.page.locator('[data-testid="section-preview-startdate"] input').fill(data.startDate);
+    await this.page.locator('[data-testid="section-preview-enddate"] input').fill(data.endDate);
+    if (data.indicatorUuid !== undefined) await this.page.locator('[data-testid="section-preview-indicatoruuid"] input').fill(data.indicatorUuid);
+    if (data.maxRows !== undefined) await this.page.locator('[data-testid="section-preview-maxrows"] input').fill(String(data.maxRows));
+  }
+
+  async run() {
+    await this.page.getByTestId('section-preview-run').click();
+  }
+
+  async expectMatrixVisible() {
+    await expect(this.page.getByTestId('section-preview-matrix')).toBeVisible();
+  }
+
+  async expectError(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+}

package/e2e/specs/etl-sources.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from '../core/test';
+
+test.describe('ETL Sources', () => {
+  test('creates an ETL source and sends the expected payload', async ({ page, etlSourcesPage }) => {
+    await page.route('**/ws/rest/v1/reportbuilder/etlsource**', async (route) => {
+      const request = route.request();
+
+      if (request.method() === 'GET') {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ results: [] }),
+        });
+        return;
+      }
+
+      if (request.method() === 'POST') {
+        const body = request.postDataJSON();
+        expect(body).toMatchObject({
+          name: 'E2E Source',
+          code: 'E2E_SRC',
+          schemaName: 'reporting',
+          sourceType: 'mysql',
+          active: true,
+        });
+
+        await route.fulfill({
+          status: 201,
+          contentType: 'application/json',
+          body: JSON.stringify({ uuid: 'etl-1', ...body }),
+        });
+        return;
+      }
+
+      await route.continue();
+    });
+
+    await etlSourcesPage.goto();
+    await etlSourcesPage.expectLoaded();
+    await etlSourcesPage.clickNew();
+    await etlSourcesPage.fillForm({
+      name: 'E2E Source',
+      code: 'E2E_SRC',
+      schemaName: 'reporting',
+      sourceType: 'mysql',
+      description: 'Created from Playwright',
+      tablePatterns: 'encounter_%',
+    });
+    await etlSourcesPage.save();
+  });
+});

package/e2e/specs/navigation.spec.ts

@@ -0,0 +1,13 @@
+import { test } from '../core/test';
+
+test.describe('report builder navigation', () => {
+  test('loads the sections page', async ({ reportSectionsPage }) => {
+    await reportSectionsPage.goto();
+    await reportSectionsPage.expectLoaded();
+  });
+
+  test('loads the ETL Sources page', async ({ etlSourcesPage }) => {
+    await etlSourcesPage.goto();
+    await etlSourcesPage.expectLoaded();
+  });
+});

package/e2e/specs/section-preview-validation.spec.ts

@@ -0,0 +1,38 @@
+import { test } from '../core/test';
+
+const sectionUuid = '4278ebf9-47ab-40b8-aeca-df3e4a050c79';
+
+test.describe('section preview validation', () => {
+  test('shows a validation error when dates are missing', async ({ page, reportSectionsPage, sectionPreviewModal }) => {
+    await page.route('**/ws/rest/v1/reportbuilder/section?**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [{ uuid: sectionUuid, name: 'Monthly HTS Summary', configJson: '{}' }] }),
+      });
+    });
+
+    await page.route(`**/ws/rest/v1/reportbuilder/section/${sectionUuid}**`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ uuid: sectionUuid, name: 'Monthly HTS Summary', configJson: '{}' }),
+      });
+    });
+
+    await page.route('**/ws/rest/v1/reportbuilder/indicator**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [] }),
+      });
+    });
+
+    await reportSectionsPage.goto();
+    await reportSectionsPage.expectLoaded();
+    await reportSectionsPage.openPreviewFor('Monthly HTS Summary');
+    await sectionPreviewModal.expectOpen();
+    await sectionPreviewModal.run();
+    await sectionPreviewModal.expectError('Start date and End date are required.');
+  });
+});

package/e2e/specs/section-preview.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from '../core/test';
+
+const sectionUuid = '4278ebf9-47ab-40b8-aeca-df3e4a050c79';
+const indicatorUuid = '2b9c6c8e-1234-4d9f-8abc-1234567890ab';
+
+test.describe('section preview', () => {
+  test('submits preview payload and renders the matrix', async ({ page, reportSectionsPage, sectionPreviewModal }) => {
+    await page.route('**/ws/rest/v1/reportbuilder/section?**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          results: [
+            {
+              uuid: sectionUuid,
+              name: 'Monthly HTS Summary',
+              code: 'HTS_MONTHLY',
+              configJson: JSON.stringify({ indicators: [{ uuid: indicatorUuid }] }),
+            },
+          ],
+        }),
+      });
+    });
+
+    await page.route(`**/ws/rest/v1/reportbuilder/section/${sectionUuid}**`, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          uuid: sectionUuid,
+          name: 'Monthly HTS Summary',
+          code: 'HTS_MONTHLY',
+          configJson: JSON.stringify({ indicators: [{ uuid: indicatorUuid }] }),
+        }),
+      });
+    });
+
+    await page.route('**/ws/rest/v1/reportbuilder/indicator**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ results: [] }),
+      });
+    });
+
+    await page.route('**/ws/rest/v1/reportbuilder/sectionpreview', async (route) => {
+      const body = route.request().postDataJSON();
+      expect(body).toEqual({
+        sectionUuid,
+        indicatorUuid,
+        startDate: '2026-01-01',
+        endDate: '2026-01-31',
+        maxRows: 100,
+        params: {},
+      });
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          sectionUuid,
+          results: [
+            {
+              indicatorUuid,
+              name: 'HTS TST',
+              kind: 'base',
+              columns: ['age_group', 'gender', 'value'],
+              rows: [
+                ['0-28d', 'F', 2],
+                ['0-28d', 'M', 1],
+              ],
+              rowCount: 2,
+              truncated: false,
+            },
+          ],
+        }),
+      });
+    });
+
+    await reportSectionsPage.goto();
+    await reportSectionsPage.expectLoaded();
+    await reportSectionsPage.openPreviewFor('Monthly HTS Summary');
+    await sectionPreviewModal.expectOpen();
+    await sectionPreviewModal.fillPreviewRequest({
+      startDate: '2026-01-01',
+      endDate: '2026-01-31',
+      indicatorUuid,
+      maxRows: 100,
+    });
+    await sectionPreviewModal.run();
+    await sectionPreviewModal.expectMatrixVisible();
+    await expect(page.getByText('HTS TST')).toBeVisible();
+  });
+});

package/e2e/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "@playwright/test"],
+    "noEmit": true
+  },
+  "include": [
+    "./**/*.ts",
+    "../playwright.config.ts"
+  ]
+}

package/example.env

@@ -0,0 +1,5 @@
+E2E_BASE_URL=http://localhost:8080/openmrs
+E2E_USERNAME=admin
+E2E_PASSWORD=Admin123
+E2E_LOGIN_LOCATION=8d6c993e-c2cc-11de-8d13-0010c6dffd0f
+PLAYWRIGHT_BASE_URL=

package/jest.config.js

@@ -0,0 +1,28 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleDirectories: ['node_modules', '__mocks__', 'tools', 'src', __dirname],
+  moduleNameMapper: {
+    '^@resources/(.*)$': '<rootDir>/src/resources/$1',
+    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^@types$': '<rootDir>/src/types.ts',
+    '^@tools/(.*)$': '<rootDir>/tools/$1',
+    '^@constants$': '<rootDir>/src/constants.ts',
+    '^@carbon/icons-react/es/(.*)$': '@carbon/icons-react/lib/$1',
+    '^carbon-components-react/es/(.*)$': 'carbon-components-react/lib/$1',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    'lodash-es': 'lodash',
+    '^dexie$': '<rootDir>/node_modules/dexie',
+    '^react-i18next$': '<rootDir>/__mocks__/react-i18next.js',
+    'react-markdown': '<rootDir>/__mocks__/react-markdown.tsx',
+  },
+  setupFilesAfterEnv: ['<rootDir>/tools/setup-tests.ts'],
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['<rootDir>/e2e'],
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@epcare/esm-report-builder",
+  "version": "0.1.1-pre.15",
+  "license": "MPL-2.0",
+  "description": "OpenMRS ESM Report Builder",
+  "browser": "dist/openmrs-esm-report-builder.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "build": "openmrs build",
+    "analyze": "openmrs build --analyze",
+    "lint": "eslint --ext js,jsx,ts,tsx .",
+    "typescript": "tsc",
+    "test": "jest --passWithNoTests",
+    "coverage": "jest --coverage --passWithNoTests",
+    "verify": "npm-run-all --parallel lint test typescript",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:headed": "playwright test --headed",
+    "e2e:install": "playwright install"
+  },
+  "dependencies": {
+    "@carbon/icons-react": "^11.58.0",
+    "@carbon/react": "^1.39.0",
+    "lodash-es": "^4.17.21",
+    "react-ace": "^10.1.0",
+    "sass": "^1.83.0"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@playwright/test": "^1.58.2",
+    "@swc/core": "^1.7.36",
+    "@swc/jest": "^0.2.36",
+    "@types/jest": "^29.5.12",
+    "@types/minimatch": "^5.1.2",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/webpack-env": "^1.18.5",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "css-loader": "^6.11.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "npm-run-all": "^4.1.5",
+    "openmrs": "next",
+    "prettier": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.6",
+    "typescript": "5.5.4",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "^8.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-i18next": "^16.0.0",
+    "rxjs": "^6.6.7",
+    "single-spa": "^5.0.0"
+  },
+  "openmrs": {
+    "buildPath": "dist",
+    "rootDir": "src",
+    "config": {
+      "paths": {
+        "@openmrs/esm-report-builder": [
+          "src"
+        ]
+      }
+    }
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const rootBaseUrl = process.env.PLAYWRIGHT_BASE_URL
+  || (process.env.E2E_BASE_URL ? `${process.env.E2E_BASE_URL.replace(/\/$/, '')}/spa/report-builder` : 'http://localhost:8080/openmrs/spa/report-builder');
+
+export default defineConfig({
+  testDir: './e2e/specs',
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['list'], ['html', { open: 'never' }]],
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
+  use: {
+    baseURL: rootBaseUrl,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    storageState: 'e2e/storageState.json',
+  },
+  globalSetup: './e2e/core/global-setup.ts',
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

package/src/admin-card-link.extension.module.scss

@@ -0,0 +1,55 @@
+.cardLink {
+  text-decoration: none;
+}
+.tile {
+  padding: 1rem;
+  min-height: 5rem;
+  display: block;
+}
+.title {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+.description {
+  font-size: 0.875rem;
+}
+
+.panel {
+  padding: 1rem;
+  border-radius: 12px; // adjust to match your design
+}
+
+.panelTitle {
+  margin: 0 0 0.75rem 0;
+}
+
+.panelHeaderRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.subtleText {
+  margin: 0 0 1rem 0;
+  opacity: 0.8;
+}
+
+.mappingGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.dimensionsGrid {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.treeWrapper {
+  max-height: calc(100vh - 240px);
+  overflow: auto;
+}
+

package/src/admin-card-link.extension.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, ClickableTile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+const ReportBuilderAdminCardLink: React.FC = () => {
+  const { t } = useTranslation();
+  const header = t('manageForms', 'Report Builder');
+
+  return (
+    <Layer>
+      <ClickableTile href={`${window.spaBase}/report-builder`} rel="noopener noreferrer">
+        <div>
+          <div className="heading">{header}</div>
+          <div className="content">{t('reportBuilder', 'Report Builder')}</div>
+        </div>
+        <div className="iconWrapper">
+          <ArrowRight size={16} />
+        </div>
+      </ClickableTile>
+    </Layer>
+  );
+};
+export default ReportBuilderAdminCardLink;

package/src/components/admin/admin-page.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ClickableTile, Stack } from '@carbon/react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../shared/header/header.component';
+
+const tileStyle: React.CSSProperties = { minHeight: '10rem' };
+
+export default function AdminPage() {
+  const navigate = useNavigate();
+
+  return (
+    <Stack gap={5}>
+      <Header
+        title="Admin"
+        subtitle="Manage shared configuration, catalogues, and library references for the report builder."
+      />
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1rem' }}>
+        <ClickableTile style={tileStyle} onClick={() => navigate('/admin/report-library')}>
+          <h4>Report Library</h4>
+          <p>Catalog completed and legacy reports before full migration into the builder.</p>
+        </ClickableTile>
+
+        <ClickableTile style={tileStyle} onClick={() => navigate('/admin/themes')}>
+          <h4>Data Themes</h4>
+          <p>Manage reusable source configurations and table mappings.</p>
+        </ClickableTile>
+      </div>
+    </Stack>
+  );
+}