@openmrs/esm-report-builder 0.1.1-pre.87

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@openmrs/esm-report-builder",
+  "version": "0.1.1-pre.87",
+  "license": "MPL-2.0",
+  "description": "OpenMRS ESM Report Builder",
+  "browser": "dist/openmrs-esm-report-builder.js",
+  "main": "src/index.ts",
+  "source": true,
+  "files": [
+    "*"
+  ],
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development --port 4001",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "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",
+    "@react-aria/utils": "^3.31.0",
+    "@react-types/shared": "^3.32.0",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13",
+    "file-saver": "^2.0.5",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^5.1.5",
+    "plotly.js": "^2.25.2",
+    "react-ace": "^10.1.0",
+    "react-aria": "^3.44.0",
+    "react-grid-layout": "^1.4.1",
+    "react-pivottable": "^0.11.0",
+    "react-plotly.js": "^2.0.0",
+    "react-router-dom": "^6.30.1",
+    "react-stately": "^3.42.0",
+    "sass": "^1.83.0",
+    "single-spa-react": "^6.0.2",
+    "swr": "^2.2.5",
+    "uuid": "^11.1.0",
+    "zustand": "^4.5.7"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@playwright/test": "^1.58.2",
+    "@swc/core": "^1.7.36",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@types/file-saver": "^2.0.7",
+    "@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",
+    "raw-loader": "^4.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "rxjs": "^6.6.7",
+    "single-spa": "^5.9.5",
+    "swc-loader": "^0.2.6",
+    "typescript": "5.5.4"
+  },
+  "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"
+  },
+  "resolutions": {
+    "zustand": "^4.5.7"
+  },
+  "openmrs": {
+    "buildPath": "dist",
+    "rootDir": "src",
+    "config": {
+      "paths": {
+        "@openmrs/esm-report-builder": [
+          "src"
+        ]
+      }
+    }
+  },
+  "packageManager": "yarn@4.10.3",
+  "stableVersion": "0.1.0"
+}

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/routes.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "pages": [
+    {
+      "component": "root",
+      "route": "report-builder",
+      "online": true,
+      "offline": false,
+      "order": 1
+    }
+  ],
+  "extensions": [
+    {
+      "name": "system-administration-report-builder-card-link",
+      "slot": "system-admin-page-card-link-slot",
+      "component": "reportBuilderAdminLink",
+      "online": true,
+      "offline": false,
+      "privileges": "Task: reportbuilder.report.view"
+    }
+  ]
+}

package/src/__debug__/all-designs.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import MonitorRenderer from '../components/etl-monitor/renderers/MonitorRenderer';
+import { getDesignSample } from '../components/etl-monitor/builder/steps/design-samples';
+import { DESIGN_TYPES } from '../components/etl-monitor/builder/design-registry';
+
+test('every design type renders through MonitorRenderer', () => {
+  const lines: string[] = [];
+  for (const t of DESIGN_TYPES) {
+    const sample = getDesignSample(t.type);
+    const div = document.createElement('div');
+    const root = createRoot(div);
+    act(() => {
+      root.render(<MonitorRenderer config={sample.config} data={sample.data} loading={false} error={null} />);
+    });
+    const html = div.innerHTML;
+    const fallback = html.includes('not yet supported');
+    const emptyState = html.includes('monitor-empty-state');
+    const mainClass = (html.match(/class="(metrics-grid-renderer|table-renderer|log-renderer|details-renderer|error-log-renderer|monitor-summary-card|monitor-progress|status-card-premium|time-series-renderer)[^"]*"/) || [])[1] || '(none)';
+    lines.push(
+      `${t.type.padEnd(14)} bytes:${String(html.length).padStart(5)}  fallback:${fallback ? 'YES' : 'no '}  empty:${emptyState ? 'YES' : 'no '}  root:${mainClass}`
+    );
+    root.unmount();
+    expect(fallback).toBe(false);
+    expect(html.length).toBeGreaterThan(50);
+  }
+  // eslint-disable-next-line no-console
+  console.log('\n' + lines.join('\n'));
+});

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,75 @@
+import React from 'react';
+import { ClickableTile, InlineNotification, Stack } from '@carbon/react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../shared/header/header.component';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+
+const tileStyle: React.CSSProperties = { minHeight: '10rem' };
+
+export default function AdminPage() {
+  const navigate = useNavigate();
+  const { has } = useReportBuilderPrivileges();
+
+  const tiles = [
+    {
+      path: '/admin/report-library',
+      title: 'Report Library',
+      body: 'Catalog completed and legacy reports before full migration into the builder.',
+      required: [RB.LIBRARY_VIEW],
+    },
+    {
+      path: '/admin/themes',
+      title: 'Data Themes',
+      body: 'Manage reusable source configurations and table mappings.',
+      required: [RB.THEME_VIEW],
+    },
+    {
+      path: '/admin/etl-tasks',
+      title: 'ETL Tasks',
+      body: 'Configure and run scheduled ETL processes for data extraction and transformation.',
+      required: [RB.PACKAGE_IMPORT],
+    },
+    {
+      path: '/admin/etl-browser',
+      title: 'ETL Data Browser',
+      body: 'Explore ETL schemas, tables, columns, and sample records.',
+      required: [RB.ETLSOURCE_VIEW],
+    },
+    {
+      path: '/admin/dashboards',
+      title: 'Dashboards',
+      body: 'Configure dashboards composed of sections and widgets (ETL monitors, reports).',
+      required: [RB.DASHBOARD_VIEW],
+    },
+  ];
+  const visibleTiles = tiles.filter((tile) => has(...tile.required));
+
+  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' }}>
+        {visibleTiles.map((tile) => (
+          <ClickableTile key={tile.path} style={tileStyle} onClick={() => navigate(tile.path)}>
+            <h4>{tile.title}</h4>
+            <p>{tile.body}</p>
+          </ClickableTile>
+        ))}
+
+        {visibleTiles.length === 0 && (
+          <InlineNotification
+            lowContrast
+            kind="info"
+            title="No access"
+            subtitle="You do not have access to any Report Builder administration features. Contact your administrator."
+            hideCloseButton
+          />
+        )}
+      </div>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  InlineNotification,
+  Search,
+  Stack,
+  Tag,
+  Tile,
+} from '@carbon/react';
+import Header from '../shared/header/header.component';
+import { listAgeCategoriesWithGroups, type AgeCategoryOption } from '../../resources/agegroup/agegroups.api';
+
+const AgeCategoriesPage: React.FC = () => {
+  const [q, setQ] = React.useState('');
+  const [rows, setRows] = React.useState<AgeCategoryOption[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+    setLoading(true);
+    setError(null);
+    listAgeCategoriesWithGroups(ac.signal)
+      .then(setRows)
+      .catch((e: any) => setError(e?.message ?? 'Failed to load age categories'))
+      .finally(() => setLoading(false));
+    return () => ac.abort();
+  }, []);
+
+  const filtered = rows.filter((row) => {
+    const needle = q.trim().toLowerCase();
+    if (!needle) return true;
+    return [row.name, row.code, row.description || '', row.label]
+      .join(' ')
+      .toLowerCase()
+      .includes(needle);
+  });
+
+  return (
+    <Stack gap={5}>
+      <Header
+        title="Age Categories"
+        subtitle="Review reusable age disaggregation structures used by indicators and sections."
+      />
+
+      <div style={{ padding: '0 1rem 1rem', display: 'grid', gap: '1rem' }}>
+        <Search
+          size="lg"
+          labelText="Search"
+          placeholder="Search age categories…"
+          value={q}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+        />
+
+        {error ? <InlineNotification lowContrast kind="error" title="Error" subtitle={error} /> : null}
+        {loading ? <div>Loading…</div> : null}
+
+        {!loading && !error ? (
+          <Accordion>
+            {filtered.map((row) => (
+              <AccordionItem
+                key={row.uuid}
+                title={
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
+                    <span style={{ fontWeight: 600 }}>{row.name}</span>
+                    <Tag type="blue">{row.code}</Tag>
+                    <Tag type="green">{row.ageGroups.length} age groups</Tag>
+                  </div>
+                }
+              >
+                <Tile>
+                  <div style={{ display: 'grid', gap: '0.75rem' }}>
+                    <div><strong>Description:</strong> {row.description || '—'}</div>
+                    <div><strong>UUID:</strong> {row.uuid}</div>
+                    <div>
+                      <strong>Groups:</strong>
+                      <div style={{ display: 'grid', gap: '0.5rem', marginTop: '0.75rem' }}>
+                        {row.ageGroups.map((group) => (
+                          <div
+                            key={group.id}
+                            style={{
+                              display: 'grid',
+                              gridTemplateColumns: '2fr 1fr 1fr 1fr',
+                              gap: '0.75rem',
+                              padding: '0.75rem',
+                              border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                            }}
+                          >
+                            <span>{group.label}</span>
+                            <span>Min days: {group.minAgeDays}</span>
+                            <span>Max days: {group.maxAgeDays}</span>
+                            <span>Sort: {group.sortOrder}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </Tile>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        ) : null}
+      </div>
+    </Stack>
+  );
+};
+
+export default AgeCategoriesPage;

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

@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  DataTable,
+  DataTableHeader,
+  DataTableSkeleton,
+  InlineNotification,
+  Search,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import Header from '../shared/header/header.component';
+import { listAgeCategoriesWithGroups } from '../../resources/agegroup/agegroups.api';
+
+type AgeGroupRow = {
+  id: string;
+  categoryName: string;
+  categoryCode: string;
+  label: string;
+  minAgeDays: number;
+  maxAgeDays: number;
+  sortOrder: number;
+  active: boolean;
+};
+
+const headers: DataTableHeader[] = [
+  { key: 'label', header: 'Label' },
+  { key: 'category', header: 'Category' },
+  { key: 'range', header: 'Range (days)' },
+  { key: 'sortOrder', header: 'Sort Order' },
+  { key: 'status', header: 'Status' },
+];
+
+const AgeGroupsPage: React.FC = () => {
+  const [q, setQ] = React.useState('');
+  const [rows, setRows] = React.useState<AgeGroupRow[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+    setLoading(true);
+    setError(null);
+    listAgeCategoriesWithGroups(ac.signal)
+      .then((categories) => {
+        const flattened = categories.flatMap((category) =>
+          (category.ageGroups ?? []).map((group) => ({
+            id: `${category.uuid}-${group.id}`,
+            categoryName: category.name,
+            categoryCode: category.code,
+            label: group.label,
+            minAgeDays: group.minAgeDays,
+            maxAgeDays: group.maxAgeDays,
+            sortOrder: group.sortOrder,
+            active: group.active,
+          })),
+        );
+        setRows(flattened);
+      })
+      .catch((e: any) => setError(e?.message ?? 'Failed to load age groups'))
+      .finally(() => setLoading(false));
+    return () => ac.abort();
+  }, []);
+
+  const filtered = rows.filter((row) => {
+    const needle = q.trim().toLowerCase();
+    if (!needle) return true;
+    return [row.label, row.categoryName, row.categoryCode].join(' ').toLowerCase().includes(needle);
+  });
+
+    const tableRows = filtered.map((row) => ({
+    id: row.id,
+    label: row.label,
+    category: `${row.categoryName} (${row.categoryCode})`,
+    range: `${row.minAgeDays} - ${row.maxAgeDays}`,
+    sortOrder: String(row.sortOrder),
+    status: row.active ? 'Active' : 'Inactive',
+  }));
+
+  return (
+    <Stack gap={5}>
+      <Header
+        title="Age Groups"
+        subtitle="Inspect age group ranges, ordering and category membership across the builder."
+      />
+
+      <div style={{ padding: '0 1rem 1rem', display: 'grid', gap: '1rem' }}>
+        <Search
+          size="lg"
+          labelText="Search"
+          placeholder="Search age groups…"
+          value={q}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+        />
+
+        {error ? <InlineNotification lowContrast kind="error" title="Error" subtitle={error} /> : null}
+
+        {loading ? (
+          <DataTableSkeleton rowCount={8} columnCount={5} showHeader={false} showToolbar={false} />
+        ) : (
+          <DataTable rows={tableRows} headers={headers}>
+            {({ rows: dtRows, headers, getHeaderProps, getRowProps }) => (
+              <TableContainer>
+                <Table useZebraStyles>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {dtRows.map((dtRow) => {
+                      const source = filtered.find((x) => x.id === dtRow.id);
+                      return (
+                        <TableRow key={dtRow.id} {...getRowProps({ row: dtRow })}>
+                          <TableCell>{source?.label}</TableCell>
+                          <TableCell>{source ? `${source.categoryName} (${source.categoryCode})` : '—'}</TableCell>
+                          <TableCell>{source ? `${source.minAgeDays} - ${source.maxAgeDays}` : '—'}</TableCell>
+                          <TableCell>{source?.sortOrder}</TableCell>
+                          <TableCell>
+                            <Tag type={source?.active ? 'green' : 'gray'}>{source?.active ? 'Active' : 'Inactive'}</Tag>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+        )}
+      </div>
+    </Stack>
+  );
+};
+
+export default AgeGroupsPage;

package/src/components/admin/etl-browser/columns-tab.component.tsx

@@ -0,0 +1,80 @@
+/**
+ * Columns tab — column metadata (name / data type) for the selected table.
+ */
+
+import React from 'react';
+import { DataTable, InlineLoading, InlineNotification, Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow, Tag, Tile } from '@carbon/react';
+import type { TableColumn } from '../../../resources/theme/etl-table-meta.api';
+import styles from './etl-browser.component.scss';
+
+interface ColumnsTabProps {
+    columns: TableColumn[];
+    loading: boolean;
+    error: string | null;
+}
+
+const headers = [
+    { key: 'name', header: 'Column' },
+    { key: 'type', header: 'Data type' },
+];
+
+export default function ColumnsTab({ columns, loading, error }: ColumnsTabProps) {
+    if (loading) {
+        return <InlineLoading description="Loading columns..." />;
+    }
+
+    if (error) {
+        return <InlineNotification lowContrast kind="error" title="Error" subtitle={error} />;
+    }
+
+    if (columns.length === 0) {
+        return (
+            <Tile className={styles.emptyState}>
+                <h5>No columns returned</h5>
+                <p>The backend returned no column metadata for this table.</p>
+            </Tile>
+        );
+    }
+
+    const rows = columns.map((column) => ({
+        id: column.name,
+        name: column.name,
+        type: column.type ?? '—',
+    }));
+
+    return (
+        <div>
+            <div className={styles.toolbar}>
+                <Tag size="sm" type="cool-gray">
+                    {columns.length} columns
+                </Tag>
+            </div>
+            <DataTable rows={rows} headers={headers} size="sm">
+                {({ rows: tableRows, headers: tableHeaders, getHeaderProps, getRowProps, getTableProps }) => (
+                    <TableContainer className={styles.gridScroll}>
+                        <Table {...getTableProps()}>
+                            <TableHead>
+                                <TableRow>
+                                    {tableHeaders.map((header) => (
+                                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                                            {header.header}
+                                        </TableHeader>
+                                    ))}
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {tableRows.map((row) => (
+                                    <TableRow key={row.id} {...getRowProps({ row })}>
+                                        {row.cells.map((cell) => (
+                                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                )}
+            </DataTable>
+        </div>
+    );
+}