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

package/src/routes/report-builder.routes.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import ReportBuilderShell from '../components/app-shell/report-builder-shell.component';
+import ReportBuilderLandingPage from '../components/landing/report-builder-landing-page.component';
+
+import ReportDashboardPage from '../components/report/report-dashboard.page.component';
+import ReportEditorPage from '../components/report/report-editor.page.component';
+
+import IndicatorsPage from '../components/indicators/indicators-page.component';
+import SectionsPage from '../components/report-sections/report-sections-page.component';
+import ReportVisualizerPage from '../features/report-visualizer/ReportVisualizerPage';
+import DataThemesPage from '../components/data-themes/data-themes-page.component';
+
+import AdminPage from '../components/admin/admin-page.component';
+import ReportCategoriesPage from '../components/admin/report-categories-page.component';
+import AgeCategoriesPage from '../components/admin/age-categories-page.component';
+import AgeGroupsPage from '../components/admin/age-groups-page.component';
+import ReportLibraryPage from '../components/admin/report-library-page.component';
+import ETLSourcesPage from '../components/admin/etl-sources-page.component';
+import ETLTasksPage from '../components/admin/etl-tasks-page.component';
+import EtlBrowserPage from '../components/admin/etl-browser/etl-browser-page.component';
+import ETLMonitorsPage from '../components/etl-monitor/etl-monitors-page.component';
+import { EtlMonitorBuilderPage } from '../components/etl-monitor/builder';
+import { DashboardsPage, DashboardRendererPage, EtlDashboardPage } from '../features/dashboards';
+import DashboardsAdminPage from '../components/dashboards/dashboards-page.component';
+
+import LinelistReportsPage from '../components/linelist/linelist-dashboard.page.component';
+import LinelistBuilderWorkspace from '../components/linelist/definition/linelist-definition-editor.component';
+import LinelistRunReport from '../components/linelist/linelist-run-report.page.component';
+
+import { ImportExportPage } from '../components/import-export';
+
+import PrivilegeRoute from '../components/security/privilege-route.component';
+import { ROUTE_PRIVILEGES } from '../constants/privileges';
+
+/** Wraps a route element with its required privileges (see ROUTE_PRIVILEGES). */
+const guard = (route: keyof typeof ROUTE_PRIVILEGES, element: React.ReactNode) => (
+    <PrivilegeRoute required={ROUTE_PRIVILEGES[route]}>{element}</PrivilegeRoute>
+);
+
+const ReportBuilderRoutes: React.FC = () => {
+    return (
+        <Routes>
+            <Route element={<ReportBuilderShell />}>
+                {/* Home / landing */}
+                <Route path="/" element={guard('/', <ReportBuilderLandingPage />)} />
+
+                {/* Reports */}
+                <Route path="/reports" element={guard('/reports', <ReportDashboardPage />)} />
+
+                {/* Create / edit report */}
+                <Route path="/new" element={guard('/new', <ReportEditorPage />)} />
+                <Route
+                    path="/edit/:reportId"
+                    element={guard('/edit/:reportId', <ReportEditorPage />)}
+                />
+
+                {/* Indicators / sections */}
+                <Route path="/indicators" element={guard('/indicators', <IndicatorsPage />)} />
+                <Route path="/sections" element={guard('/sections', <SectionsPage />)} />
+
+                {/* Run */}
+                <Route path="/run" element={guard('/run', <ReportVisualizerPage />)} />
+                <Route
+                    path="/run-reports"
+                    element={guard('/run-reports', <ReportVisualizerPage />)}
+                />
+
+                {/* Admin */}
+                <Route path="/admin" element={guard('/admin', <AdminPage />)} />
+                <Route
+                    path="/admin/report-categories"
+                    element={guard('/admin/report-categories', <ReportCategoriesPage />)}
+                />
+                <Route
+                    path="/admin/age-categories"
+                    element={guard('/admin/age-categories', <AgeCategoriesPage />)}
+                />
+                <Route
+                    path="/admin/age-groups"
+                    element={guard('/admin/age-groups', <AgeGroupsPage />)}
+                />
+                <Route
+                    path="/admin/report-library"
+                    element={guard('/admin/report-library', <ReportLibraryPage />)}
+                />
+                <Route
+                    path="/admin/etl-sources"
+                    element={guard('/admin/etl-sources', <ETLSourcesPage />)}
+                />
+                <Route
+                    path="/admin/etl-tasks"
+                    element={guard('/admin/etl-tasks', <ETLTasksPage />)}
+                />
+                <Route
+                    path="/admin/etl-monitors"
+                    element={guard('/admin/etl-monitors', <ETLMonitorsPage />)}
+                />
+                <Route
+                    path="/admin/etl-monitors/builder"
+                    element={guard('/admin/etl-monitors/builder', <EtlMonitorBuilderPage />)}
+                />
+                <Route
+                    path="/admin/etl-browser"
+                    element={guard('/admin/etl-browser', <EtlBrowserPage />)}
+                />
+                <Route
+                    path="/admin/dashboards"
+                    element={guard('/admin/dashboards', <DashboardsAdminPage />)}
+                />
+                <Route path="/dashboards" element={guard('/dashboards', <DashboardsPage />)} />
+                <Route
+                    path="/dashboards/:code"
+                    element={guard('/dashboards/:code', <DashboardRendererPage />)}
+                />
+                <Route
+                    path="/etl-dashboard"
+                    element={guard('/etl-dashboard', <EtlDashboardPage />)}
+                />
+
+                {/* Data themes now accessed under Admin */}
+                <Route
+                    path="/admin/themes"
+                    element={guard('/admin/themes', <DataThemesPage />)}
+                />
+
+                {/* Linelist Reports */}
+                <Route path="/linelist" element={guard('/linelist', <LinelistReportsPage />)} />
+                <Route
+                    path="/linelist/new"
+                    element={guard('/linelist/new', <LinelistBuilderWorkspace />)}
+                />
+                <Route
+                    path="/linelist/edit/:reportId"
+                    element={guard('/linelist/edit/:reportId', <LinelistBuilderWorkspace />)}
+                />
+                <Route
+                    path="/linelist/run/:reportId"
+                    element={guard('/linelist/run/:reportId', <LinelistRunReport />)}
+                />
+
+                {/* Import / Export */}
+                <Route
+                    path="/import-export"
+                    element={guard('/import-export', <ImportExportPage />)}
+                />
+
+                {/* Optional backward compatibility */}
+                <Route path="/themes" element={<Navigate to="/admin/themes" replace />} />
+
+
+                {/* Fallback */}
+                <Route path="*" element={<Navigate to="/" replace />} />
+            </Route>
+        </Routes>
+    );
+};
+
+export default ReportBuilderRoutes;

package/src/routes/report-builder.scss

@@ -0,0 +1,56 @@
+.page {
+  padding: 1rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  margin-top: 1rem;
+}
+
+.designWorkspace {
+  padding-top: 1rem;
+}
+
+.workspaceTitle {
+  margin: 0 0 0.25rem 0;
+  font-weight: 600;
+}
+
+.workspaceHint {
+  margin: 0 0 1rem 0;
+  opacity: 0.75;
+}
+
+.designGrid {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: 1rem;
+}
+
+.designLeft,
+.designRight {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.panel {
+  background: var(--cds-layer-01, #fff);
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.panelTitle {
+  margin: 0 0 0.25rem 0;
+  font-weight: 600;
+}
+
+.panelHint {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.875rem;
+}

package/src/routes.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "reportbuilder": "*"
+  },
+  "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"
+    },
+    {
+      "component": "confirmModal",
+      "name": "confirm-modal",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

package/src/sample-template.ts

@@ -0,0 +1,121 @@
+import { nanoid } from 'nanoid';
+
+export type DisaggregationDimension = {
+  name: string;
+  items: Array<{ id: string; label: string }>;
+};
+
+export type IndicatorNode = {
+  id: string;
+  label: string;
+  code?: string;
+  type?: 'group' | 'indicator';
+  children?: IndicatorNode[];
+};
+
+export type MappingGroup = {
+  id: string;
+  title: string;
+  keyPattern?: string;
+  dims?: Record<string, string>;
+  indicatorTree: IndicatorNode[];
+};
+
+export type TemplateModel = {
+  version: number;
+  title: string;
+  dimensions: Record<string, Array<{ id: string; label: string }>>;
+  mapping: {
+    arrayName: string;
+    defaultValue: number;
+    groups: MappingGroup[];
+  };
+};
+
+export function buildDefaultTemplate(): TemplateModel {
+  const age = [
+    { id: '0-28d', label: '0-28d' },
+    { id: '29d-4y', label: '29d-4y' },
+    { id: '5-9y', label: '5-9y' },
+    { id: '10-19y', label: '10-19y' },
+    { id: '20yrs+', label: '20yrs+' },
+  ];
+
+  const sex = [
+    { id: 'M', label: 'M' },
+    { id: 'F', label: 'F' },
+  ];
+
+  const makeGroup = (title: string, indicatorTree: IndicatorNode[]): MappingGroup => ({
+    id: nanoid(),
+    title,
+    keyPattern: '{code}_{age}_{sex}',
+    dims: { age: 'age', sex: 'sex' },
+    indicatorTree,
+  });
+
+  return {
+    version: 4,
+    title: '1.0 OPD ATTENDANCES, REFERRALS AND DIAGNOSES (Sample)',
+    dimensions: { age, sex },
+    mapping: {
+      arrayName: 'dataValues',
+      defaultValue: 0,
+      groups: [
+        makeGroup('1.1 OUTPATIENT ATTENDANCE', [
+          { id: nanoid(), label: 'OA01. New attendance', code: 'OA01' },
+          { id: nanoid(), label: 'OA02. Reattendance', code: 'OA02' },
+        ]),
+        makeGroup('1.2 OUTPATIENT REFERRALS', [
+          { id: nanoid(), label: 'OR01. Referrals to unit', code: 'OR01' },
+          { id: nanoid(), label: 'OR02. Referrals from unit', code: 'OR02' },
+        ]),
+        makeGroup('1.3.1 Epidemic-Prone Diseases', [
+          {
+            id: nanoid(),
+            label: 'EP01. Malaria',
+            code: 'EP01',
+            type: 'group',
+            children: [
+              { id: nanoid(), label: 'EP01a. Suspected Malaria (fever)', code: 'EP01a' },
+              { id: nanoid(), label: 'EP01b. Malaria Tested (B/s & RDT )', code: 'EP01b' },
+              { id: nanoid(), label: 'EP01c. Malaria confirmed (B/s & RDT)', code: 'EP01c' },
+              { id: nanoid(), label: 'EP01d. Confirmed Malaria cases treated', code: 'EP01d' },
+              { id: nanoid(), label: 'EP01e. Total malaria cases treated', code: 'EP01e' },
+            ],
+          },
+          { id: nanoid(), label: 'EP02. Acute Flaccid Paralysis', code: 'EP02' },
+          { id: nanoid(), label: 'EP03. Animal Bites (suspected rabies)', code: 'EP03' },
+          { id: nanoid(), label: 'EP04. Cholera', code: 'EP04' },
+          { id: nanoid(), label: 'EP05. Dysentery', code: 'EP05' },
+          { id: nanoid(), label: 'EP06. Guinea Worm', code: 'EP06' },
+          { id: nanoid(), label: 'EP07. Measles', code: 'EP07' },
+          { id: nanoid(), label: 'EP08. Bacterial Meningitis', code: 'EP08' },
+          { id: nanoid(), label: 'EP09. Neonatal tetanus', code: 'EP09' },
+          { id: nanoid(), label: 'EP10. Plague', code: 'EP10' },
+          { id: nanoid(), label: 'EP11. Yellow Fever', code: 'EP11' },
+          { id: nanoid(), label: 'EP12. Other Viral Haemorrhagic Fevers', code: 'EP12' },
+          { id: nanoid(), label: 'EP13. Severe Acute Respiratory Infection (SARI)', code: 'EP13' },
+          {
+            id: nanoid(),
+            label: 'EP14. Adverse Events Following Immunization (AEFI)',
+            code: 'EP14',
+            type: 'group',
+            children: [
+              { id: nanoid(), label: 'Serious', code: 'EP14_Serious' },
+              { id: nanoid(), label: 'Non Serious', code: 'EP14_NonSerious' },
+            ],
+          },
+          { id: nanoid(), label: 'EP15. Typhoid Fever', code: 'EP15' },
+          { id: nanoid(), label: 'EP16. Refampicin resistant TB cases', code: 'EP16' },
+          {
+            id: nanoid(),
+            label: 'EP17. Other Emerging infectious Diseases e.g. Influenza like illness (ILI), SARS',
+            code: 'EP17',
+          },
+          { id: nanoid(), label: 'EP18. Covid-19', code: 'EP18' },
+        ]),
+      ],
+    },
+  };
+}

package/src/template-utils.ts

@@ -0,0 +1,110 @@
+import type { IndicatorNode, MappingGroup, TemplateModel } from './sample-template';
+
+export function isGroupNode(n: IndicatorNode): boolean {
+  return Boolean(n.children && n.children.length);
+}
+
+export function collectLeafIndicatorCodes(nodes: IndicatorNode[]): string[] {
+  const out: string[] = [];
+  const walk = (arr: IndicatorNode[]) => {
+    for (const n of arr) {
+      if (n.children && n.children.length) {
+        walk(n.children);
+      } else if (n.code) {
+        out.push(n.code);
+      }
+    }
+  };
+  walk(nodes);
+  return out;
+}
+
+/**
+ * ✅ EXISTING in your repo (keep it)
+ * Converts the in-app model into the JSON template format.
+ */
+export function toJsonTemplate(tpl: TemplateModel) {
+  return {
+    version: tpl.version,
+    title: tpl.title,
+    dimensions: tpl.dimensions,
+    mapping: {
+      arrayName: tpl.mapping.arrayName,
+      defaultValue: tpl.mapping.defaultValue,
+      groups: tpl.mapping.groups.map((g: MappingGroup) => ({
+        id: g.id,
+        title: g.title,
+        keyPattern: g.keyPattern ?? '{code}_{age}_{sex}',
+        dims: g.dims ?? { age: 'age', sex: 'sex' },
+        indicatorTree: g.indicatorTree,
+        indicatorCodes: collectLeafIndicatorCodes(g.indicatorTree),
+      })),
+    },
+  };
+}
+
+/**
+ * ✅ NEW
+ * Convert JSON template back into TemplateModel.
+ * We overlay onto defaultsBase so any missing fields are filled from defaults.
+ */
+export function fromJsonTemplate(json: any, defaultsBase: TemplateModel): TemplateModel {
+  if (!json || typeof json !== 'object') {
+    throw new Error('JSON template must be an object');
+  }
+
+  const model = structuredClone(defaultsBase);
+
+  // Validate & map groups (this matches your toJsonTemplate output)
+  const incomingGroups = json?.mapping?.groups;
+  if (!Array.isArray(incomingGroups)) {
+    throw new Error('Invalid JSON: expected mapping.groups to be an array');
+  }
+
+  // Overlay groups onto existing defaults by id when possible
+  model.mapping.groups = incomingGroups.map((g: any) => {
+    if (!g?.id) throw new Error('Invalid JSON: group missing id');
+
+    return {
+      // keep defaults if present, but overlay JSON
+      id: String(g.id),
+      title: String(g.title ?? 'Group'),
+      keyPattern: g.keyPattern ? String(g.keyPattern) : '{code}_{age}_{sex}',
+      dims: g.dims ?? { age: 'age', sex: 'sex' },
+
+      // ✅ the important part
+      indicatorTree: Array.isArray(g.indicatorTree) ? g.indicatorTree.map(normalizeNode) : [],
+    } as MappingGroup;
+  });
+
+  // Optional overlays (safe)
+  if (typeof json.version === 'string') model.version = json.version;
+  if (typeof json.title === 'string') model.title = json.title;
+  if (json.dimensions && typeof json.dimensions === 'object') model.dimensions = json.dimensions;
+
+  if (json?.mapping?.arrayName) model.mapping.arrayName = String(json.mapping.arrayName);
+  if (json?.mapping?.defaultValue != null) model.mapping.defaultValue = json.mapping.defaultValue;
+
+  return model;
+}
+
+function normalizeNode(n: any): IndicatorNode {
+  if (!n || typeof n !== 'object') {
+    throw new Error('Invalid node: node must be an object');
+  }
+  if (!n.id) {
+    throw new Error('Invalid node: missing id');
+  }
+
+  const node: IndicatorNode = {
+    id: String(n.id),
+    label: String(n.label ?? ''),
+    code: n.code != null ? String(n.code) : '',
+  };
+
+  if (Array.isArray(n.children) && n.children.length) {
+    node.children = n.children.map(normalizeNode);
+  }
+
+  return node;
+}

package/src/types/carbon-react-inert.d.ts

@@ -0,0 +1,13 @@
+// Workaround for TS type mismatch between Carbon SideNavProps and the `inert` prop
+// used by @openmrs/esm-styleguide's LeftNavMenu.
+// This avoids type-check failures during local builds.
+
+import '@carbon/react';
+
+declare module '@carbon/react' {
+  // `inert` is a valid HTML attribute supported by browsers, but may be missing from
+  // the Carbon SideNavProps typing in some versions.
+  interface SideNavProps {
+    inert?: boolean;
+  }
+}

package/src/types/condition-operators.ts

@@ -0,0 +1,63 @@
+// src/report-builder/types/condition-operators.ts
+
+/**
+ * Central source of truth for operators used across:
+ * - Theme definition UI
+ * - Indicator condition saving
+ * - SQL rendering
+ */
+
+/** Operators shown/allowed in Theme editor UI */
+export const THEME_OPERATOR_OPTIONS = ['EQUALS', 'IN', 'NOT_IN', 'LIKE', 'BETWEEN', 'GTE', 'LTE', 'IS_NULL', 'IS_NOT_NULL'] as const;
+export type ThemeOperator = (typeof THEME_OPERATOR_OPTIONS)[number];
+
+/** SQL operators after normalization */
+export type NormalizedSqlOperator =
+    | '='
+    | '!='
+    | '>'
+    | '>='
+    | '<'
+    | '<='
+    | 'IN'
+    | 'NOT IN'
+    | 'LIKE'
+    | 'BETWEEN'
+    | 'IS NULL'
+    | 'IS NOT NULL';
+
+export function normalizeOperator(op?: string | null): NormalizedSqlOperator {
+    const raw = String(op ?? '').trim().toUpperCase();
+
+    if (raw === 'EQUALS') return '=';
+    if (raw === 'GTE') return '>=';
+    if (raw === 'LTE') return '<=';
+    if (raw === 'NOT_IN') return 'NOT IN';
+    if (raw === 'IN') return 'IN';
+    if (raw === 'LIKE') return 'LIKE';
+    if (raw === 'BETWEEN') return 'BETWEEN';
+    if (raw === 'IS_NULL') return 'IS NULL';
+    if (raw === 'IS_NOT_NULL') return 'IS NOT NULL';
+
+    // allow already-normalized SQL ops
+    if (raw === '=' || raw === '!=' || raw === '>' || raw === '>=' || raw === '<' || raw === '<=') {
+        return raw as NormalizedSqlOperator;
+    }
+    if (raw === 'IS NULL' || raw === 'IS NOT NULL') {
+        return raw as NormalizedSqlOperator;
+    }
+
+    // safest default
+    return 'IN';
+}
+
+export function isInOperator(op: NormalizedSqlOperator) {
+    return op === 'IN' || op === 'NOT IN';
+}
+
+/**
+ * Check if operator requires no value (IS NULL, IS NOT NULL)
+ */
+export function isNullCheckOperator(op: NormalizedSqlOperator) {
+    return op === 'IS NULL' || op === 'IS NOT NULL';
+}