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

package/src/components/app-shell/report-builder-shell.component.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import {
+    SideNav,
+    SideNavItems,
+    SideNavLink,
+    SideNavMenu,
+    SideNavMenuItem,
+} from '@carbon/react';
+import {
+    Home,
+    Report,
+    ChartColumn,
+    Layers,
+    Play,
+    Settings,
+} from '@carbon/icons-react';
+
+import styles from './report-builder-shell.scss';
+
+const ReportBuilderShell: React.FC = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const isActive = (path: string) =>
+        location.pathname === path || location.pathname.startsWith(`${path}/`);
+
+    return (
+        <div className={styles.shell}>
+            <aside className={styles.leftNav}>
+                <SideNav expanded isPersistent={false} aria-label="Report Builder navigation">
+                    <SideNavItems>
+                        <SideNavLink
+                            renderIcon={Home}
+                            isActive={location.pathname === '/'}
+                            onClick={() => navigate('/')}
+                        >
+                            Home
+                        </SideNavLink>
+
+                        <SideNavLink
+                            renderIcon={Report}
+                            isActive={isActive('/reports') || isActive('/new') || isActive('/edit')}
+                            onClick={() => navigate('/reports')}
+                        >
+                            Reports
+                        </SideNavLink>
+
+                        <SideNavLink
+                            renderIcon={ChartColumn}
+                            isActive={isActive('/indicators')}
+                            onClick={() => navigate('/indicators')}
+                        >
+                            Indicators
+                        </SideNavLink>
+
+                        <SideNavLink
+                            renderIcon={Layers}
+                            isActive={isActive('/sections')}
+                            onClick={() => navigate('/sections')}
+                        >
+                            Sections
+                        </SideNavLink>
+
+                        <SideNavLink
+                            renderIcon={Play}
+                            isActive={isActive('/run')}
+                            onClick={() => navigate('/run')}
+                        >
+                            Run Reports
+                        </SideNavLink>
+
+                        <SideNavMenu
+                            renderIcon={Settings}
+                            title="Admin"
+                            isActive={isActive('/admin')}
+                            defaultExpanded={false}
+                        >
+                            <SideNavMenuItem
+                                isActive={isActive('/admin/report-categories')}
+                                onClick={() => navigate('/admin/report-categories')}
+                            >
+                                Report Categories
+                            </SideNavMenuItem>
+
+                            <SideNavMenuItem
+                                isActive={isActive('/admin/age-categories')}
+                                onClick={() => navigate('/admin/age-categories')}
+                            >
+                                Age Categories
+                            </SideNavMenuItem>
+
+                            <SideNavMenuItem
+                                isActive={isActive('/admin/age-groups')}
+                                onClick={() => navigate('/admin/age-groups')}
+                            >
+                                Age Groups
+                            </SideNavMenuItem>
+                            <SideNavMenuItem isActive={isActive('/admin/report-library')} onClick={() => navigate('/admin/report-library')}>
+                                Report Library
+                            </SideNavMenuItem>
+                            <SideNavMenuItem isActive={isActive('/admin/themes')} onClick={() => navigate('/admin/themes')}>
+                                Data Themes
+                            </SideNavMenuItem>
+                          <SideNavMenuItem isActive={isActive('/admin/etl-sources')} onClick={() => navigate('/admin/etl-sources')}>
+                            ETL Sources
+                          </SideNavMenuItem>
+                        </SideNavMenu>
+                    </SideNavItems>
+                </SideNav>
+            </aside>
+
+            <main className={styles.main}>
+                <Outlet />
+            </main>
+        </div>
+    );
+};
+
+export default ReportBuilderShell;

package/src/components/app-shell/report-builder-shell.scss

@@ -0,0 +1,15 @@
+.shell {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  height: 100%;
+  min-height: calc(100vh - 3rem); // keeps it inside O3 header area
+}
+
+.leftNav {
+  border-right: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: var(--cds-layer-01, #f4f4f4);
+}
+
+.main {
+  overflow: auto;
+}

package/src/components/data-themes/data-theme-form.component.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TextInput, TextArea, Select, SelectItem, Stack } from '@carbon/react';
+import type { DataTheme, MainDataDomain } from '../../types/theme/data-theme.types';
+
+type Props = {
+    value: DataTheme;
+    onChange: (next: DataTheme) => void;
+};
+
+const DOMAIN_OPTIONS: Array<{ value: MainDataDomain; label: string }> = [
+    { value: 'OBSERVATIONS', label: 'Observations' },
+    { value: 'TEST_ORDERS', label: 'Test Orders' },
+    { value: 'MEDICATION_ORDERS', label: 'Medication Orders' },
+    { value: 'APPOINTMENTS', label: 'Appointments' },
+    { value: 'MEDICATION_DISPENSE', label: 'Medication Dispense' },
+];
+
+export default function DataThemeForm({ value, onChange }: Props) {
+    return (
+        <Stack gap={4}>
+            <TextInput
+                id="theme-name"
+                labelText="Theme Name"
+                value={value.name}
+                onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextInput
+                id="theme-code"
+                labelText="Code"
+                value={value.code}
+                onChange={(e) => onChange({ ...value, code: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextArea
+                id="theme-description"
+                labelText="Description"
+                value={value.description || ''}
+                onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+            />
+
+            <Select
+                id="theme-domain"
+                labelText="Main Data Domain"
+                value={value.domain}
+                onChange={(e) =>
+                    onChange({
+                        ...value,
+                        domain: (e.target as HTMLSelectElement).value as MainDataDomain,
+                    })
+                }
+            >
+                {DOMAIN_OPTIONS.map((x) => (
+                    <SelectItem key={x.value} value={x.value} text={x.label} />
+                ))}
+            </Select>
+        </Stack>
+    );
+}

package/src/components/data-themes/data-theme-modal.component.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+import { Modal, Stack, InlineLoading, SideNav, SideNavItems, SideNavLink, Content } from '@carbon/react';
+
+import DataThemeBasicsSection from './sections/data-theme-basics.section';
+import DataThemeSourceSection from './sections/data-theme-source.section';
+import DataThemeFieldsEditorSection from './sections/data-theme-fields-editor.section';
+import DataThemeConditionsSection from './sections/data-theme-condition-columns.section';
+import DataThemeMetadataSection, { type DataThemeMeta } from './sections/data-theme-metadata.section';
+import DataThemePreviewSection from './sections/data-theme-preview.section';
+
+import type { DataTheme, DataThemeConfig } from '../../types/theme/data-theme.types';
+import { getSchemaTables, type SchemaTable } from '../../resources/theme/mamba-schema.api';
+import { getMambaTableMeta, type TableColumn } from '../../resources/theme/mamba-table-meta.api';
+
+type Props = {
+    open: boolean;
+    mode: 'create' | 'edit';
+    initial?: DataTheme | null;
+    onClose: () => void;
+    onSave: (payload: DataTheme) => void;
+};
+
+const defaultConfig: DataThemeConfig = {
+    sourceTable: '',
+    patientIdColumn: '',
+    dateColumn: '',
+    locationColumn: '',
+    fields: [],
+    conditions: [],
+};
+
+const defaultMeta: DataThemeMeta = {
+    icon: '',
+    color: '#0f62fe',
+    category: '',
+    order: 0,
+    beta: false,
+    descriptionShort: '',
+    allowedIndicatorKinds: ['BASE', 'FINAL'],
+};
+
+type PanelKey = 'basics' | 'source' | 'fields' | 'conditions' | 'metadata' | 'preview';
+
+function toCode(name: string) {
+    return (name ?? '')
+        .toUpperCase()
+        .replace(/[^A-Z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .slice(0, 30);
+}
+
+function safeParseJson<T>(raw: string | undefined | null, fallback: T): T {
+    try {
+        if (!raw) return fallback;
+        const parsed = JSON.parse(raw);
+        return (parsed ?? fallback) as T;
+    } catch {
+        return fallback;
+    }
+}
+
+/**
+ * Supports either:
+ * 1) configJson string parses to { ...configFields }
+ * 2) configJson string parses to { configJson: { ...configFields } }
+ *
+ * Also migrates legacy `conditionColumns` -> `conditions[]` when present AND conditions[] missing/empty.
+ */
+function parseConfig(raw: string | undefined | null): DataThemeConfig {
+    const parsed = safeParseJson<any>(raw, defaultConfig);
+
+    const base =
+        parsed && typeof parsed === 'object' && parsed.configJson && typeof parsed.configJson === 'object'
+            ? parsed.configJson
+            : parsed;
+
+    const cfg: any = { ...defaultConfig, ...(base ?? {}) };
+
+    // normalize arrays defensively
+    if (!Array.isArray(cfg.fields)) cfg.fields = [];
+    if (!Array.isArray(cfg.conditions)) cfg.conditions = [];
+
+    // MIGRATION: old themes might have conditionColumns map
+    // Example: { "concept_id": "diagnosis_coded" }
+    // Only migrate if conditions[] is missing/empty (do NOT overwrite real conditions).
+    const hasLegacyMap = cfg.conditionColumns && typeof cfg.conditionColumns === 'object';
+    const hasNoConditions = !Array.isArray(cfg.conditions) || cfg.conditions.length === 0;
+
+    if (hasLegacyMap && hasNoConditions) {
+        const entries = Object.entries(cfg.conditionColumns as Record<string, string>);
+        cfg.conditions = entries.map(([key, column]) => {
+            const looksLikeConcept = key.toLowerCase().includes('concept');
+            return {
+                key,
+                label: key.replace(/_/g, ' '),
+                handler: looksLikeConcept ? 'CONCEPT_SEARCH' : 'TEXT',
+                column,
+                operator: looksLikeConcept ? 'IN' : 'EQUALS',
+                valueType: looksLikeConcept ? 'conceptId' : 'string',
+            };
+        });
+    }
+
+    // final guard
+    if (!Array.isArray(cfg.conditions)) cfg.conditions = [];
+    if (!Array.isArray(cfg.fields)) cfg.fields = [];
+
+    return cfg as DataThemeConfig;
+}
+
+/**
+ * Supports either:
+ * 1) metaJson = { "metaJson": { ...fields } }
+ * 2) metaJson = { ...fields }
+ */
+function parseMeta(raw: string | undefined | null): DataThemeMeta {
+    const parsed = safeParseJson<any>(raw, defaultMeta);
+    if (parsed && typeof parsed === 'object' && parsed.metaJson && typeof parsed.metaJson === 'object') {
+        return { ...defaultMeta, ...parsed.metaJson };
+    }
+    return { ...defaultMeta, ...parsed };
+}
+
+function wrapMeta(meta: DataThemeMeta) {
+    return JSON.stringify({ metaJson: meta }, null, 2);
+}
+
+export default function DataThemeModal({ open, mode, initial, onClose, onSave }: Props) {
+    const [active, setActive] = React.useState<PanelKey>('basics');
+
+    const [name, setName] = React.useState('');
+    const [code, setCode] = React.useState('');
+    const [domain, setDomain] = React.useState<DataTheme['domain']>('OBSERVATIONS');
+    const [description, setDescription] = React.useState('');
+
+    const [config, setConfig] = React.useState<DataThemeConfig>(defaultConfig);
+    const [configJson, setConfigJson] = React.useState<string>(JSON.stringify(defaultConfig, null, 2));
+
+    const [meta, setMeta] = React.useState<DataThemeMeta>(defaultMeta);
+    const [metaJson, setMetaJson] = React.useState<string>(wrapMeta(defaultMeta));
+
+    // schema tables
+    const [, setTables] = React.useState<SchemaTable[]>([]);
+    const [loadingTables, setLoadingTables] = React.useState(false);
+    const [tablesError, setTablesError] = React.useState<string | null>(null);
+
+    // table meta
+    const [columns, setColumns] = React.useState<TableColumn[]>([]);
+    const [loadingCols, setLoadingCols] = React.useState(false);
+    const [colsError, setColsError] = React.useState<string | null>(null);
+
+    // init when open (ensures edit pre-populates EVERYTHING)
+    React.useEffect(() => {
+        if (!open) return;
+
+        setActive('basics');
+
+        if (initial) {
+            setName(initial.name ?? '');
+            setCode(initial.code ?? '');
+            setDomain(initial.domain ?? 'OBSERVATIONS');
+            setDescription(initial.description ?? '');
+
+            const parsedConfig = parseConfig(initial.configJson);
+            setConfig(parsedConfig);
+            setConfigJson(JSON.stringify(parsedConfig, null, 2));
+
+            const parsedMeta = parseMeta((initial as any).metaJson);
+            setMeta(parsedMeta);
+            setMetaJson(wrapMeta(parsedMeta));
+        } else {
+            setName('');
+            setCode('');
+            setDomain('OBSERVATIONS');
+            setDescription('');
+
+            setConfig(defaultConfig);
+            setConfigJson(JSON.stringify(defaultConfig, null, 2));
+
+            setMeta(defaultMeta);
+            setMetaJson(wrapMeta(defaultMeta));
+        }
+    }, [open, initial]);
+
+    // load tables when modal opens
+    React.useEffect(() => {
+        if (!open) return;
+
+        const ac = new AbortController();
+        setLoadingTables(true);
+        setTablesError(null);
+        setTables([]);
+
+        getSchemaTables(ac.signal)
+            .then((data) => setTables(data ?? []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setTablesError(e?.message ?? 'Failed to load schema tables');
+            })
+            .finally(() => setLoadingTables(false));
+
+        return () => ac.abort();
+    }, [open]);
+
+    // load columns when table changes
+    React.useEffect(() => {
+        if (!open) return;
+
+        const table = config?.sourceTable;
+        if (!table) {
+            setColumns([]);
+            setColsError(null);
+            setLoadingCols(false);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingCols(true);
+        setColsError(null);
+        setColumns([]);
+
+        getMambaTableMeta(table, ac.signal)
+            .then((data) => setColumns(data ?? []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setColsError(e?.message ?? 'Failed to load table columns');
+            })
+            .finally(() => setLoadingCols(false));
+
+        return () => ac.abort();
+    }, [open, config?.sourceTable]);
+
+    // keep configJson synced when user edits config
+    React.useEffect(() => {
+        setConfigJson(JSON.stringify(config ?? defaultConfig, null, 2));
+    }, [config]);
+
+    // keep metaJson synced when user edits meta
+    React.useEffect(() => {
+        setMetaJson(wrapMeta(meta ?? defaultMeta));
+    }, [meta]);
+
+    const schemaReady = open && !loadingTables && !tablesError;
+
+    const canSave =
+        schemaReady &&
+        Boolean(name.trim()) &&
+        Boolean((code.trim() || toCode(name)).trim()) &&
+        Boolean(domain) &&
+        Boolean(config?.sourceTable) &&
+        Boolean(config?.patientIdColumn) &&
+        Boolean(config?.dateColumn);
+
+    const save = () => {
+        if (!canSave) return;
+
+        const payload: DataTheme = {
+            ...(initial?.uuid ? { uuid: initial.uuid } : {}),
+            name: name.trim(),
+            code: (code.trim() || toCode(name)).trim(),
+            domain,
+            description: description.trim(),
+            configJson,
+            metaJson,
+        } as any;
+
+        onSave(payload);
+    };
+
+    if (!open) return null;
+
+    const NavLink = ({ id, label }: { id: PanelKey; label: string }) => (
+        <SideNavLink isActive={active === id} onClick={() => setActive(id)}>
+            {label}
+        </SideNavLink>
+    );
+
+    return (
+        <Modal
+            open={open}
+            modalHeading={mode === 'create' ? 'Create Data Theme' : 'Edit Data Theme'}
+            primaryButtonText={mode === 'create' ? 'Create' : 'Save'}
+            secondaryButtonText="Cancel"
+            onRequestClose={onClose}
+            onRequestSubmit={save}
+            primaryButtonDisabled={!canSave}
+            size="lg"
+        >
+            <Stack gap={6}>
+                {loadingTables ? <InlineLoading description="Loading schema tables…" /> : null}
+                {!loadingTables && tablesError ? (
+                    <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>
+                        Failed to load schema tables: {tablesError}
+                    </div>
+                ) : null}
+
+                {schemaReady ? (
+                    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: '1rem' }}>
+                        <div>
+                            <SideNav expanded isPersistent={false} aria-label="Theme editor sections">
+                                <SideNavItems>
+                                    <NavLink id="basics" label="Basics" />
+                                    <NavLink id="source" label="Source" />
+                                    <NavLink id="fields" label="Fields" />
+                                    <NavLink id="conditions" label="Conditions" />
+                                    <NavLink id="metadata" label="Metadata" />
+                                    <NavLink id="preview" label="Preview" />
+                                </SideNavItems>
+                            </SideNav>
+                        </div>
+
+                        <Content style={{ padding: 0 }}>
+                            {active === 'basics' ? (
+                                <DataThemeBasicsSection
+                                    value={{ name, code, domain, description }}
+                                    onChange={(next) => {
+                                        setName(next.name);
+                                        setCode(next.code);
+                                        setDomain(next.domain);
+                                        setDescription(next.description ?? '');
+                                    }}
+                                />
+                            ) : null}
+
+                            {active === 'source' ? (
+                                <>
+                                    <DataThemeSourceSection open={open} config={config} onChange={setConfig} />
+                                    {loadingCols ? <InlineLoading description="Loading columns…" /> : null}
+                                    {!loadingCols && colsError ? (
+                                        <div style={{ color: 'var(--cds-text-error, #da1e28)', marginTop: '0.5rem' }}>
+                                            Failed to load table columns: {colsError}
+                                        </div>
+                                    ) : null}
+                                </>
+                            ) : null}
+
+                            {active === 'fields' ? (<DataThemeFieldsEditorSection config={config} onChange={setConfig} open={open} />) : null}
+
+                            {active === 'conditions' ? (<DataThemeConditionsSection open={open} config={config} onChange={setConfig} columns={columns} loadingCols={loadingCols}/>) : null}
+
+                            {active === 'metadata' ? (<DataThemeMetadataSection value={meta} onChange={setMeta} open={open} />) : null}
+
+                            {active === 'preview' ? (<DataThemePreviewSection config={config} metaJson={metaJson} onConfigJson={setConfigJson}/>
+                            ) : null}
+                        </Content>
+                    </div>
+                ) : null}
+            </Stack>
+        </Modal>
+    );
+}

package/src/components/data-themes/data-themes-page.component.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Button, Search, Stack } from '@carbon/react';
+import { Add } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+
+import DataThemesTable from './data-themes-table.component';
+import DataThemeModal from './data-theme-modal.component';
+import Header from '../shared/header/header.component';
+
+import type { DataTheme, DataThemeRow } from '../../types/theme/data-theme.types';
+import { listThemes, createTheme, updateTheme, deleteTheme, getTheme } from '../../resources/theme/data-theme.api';
+
+export default function DataThemesPage() {
+    const { t } = useTranslation();
+    const [q, setQ] = React.useState('');
+    const [rows, setRows] = React.useState<DataThemeRow[]>([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState<'create' | 'edit'>('create');
+    const [editing, setEditing] = React.useState<DataTheme | null>(null);
+
+    const load = React.useCallback(
+        (signal?: AbortSignal) => {
+            setLoading(true);
+            setError(null);
+
+            return listThemes(q, signal)
+                .then((data) => {
+                    const next: DataThemeRow[] = (data ?? []).map((t) => ({
+                        uuid: t.uuid ?? '',
+                        name: t.name ?? '',
+                        code: t.code ?? '',
+                        domain: t.domain,
+                        description: t.description,
+                        retired: t.retired,
+                    }));
+                    setRows(next.filter((r) => Boolean(r.uuid)));
+                })
+                .catch((e) => setError(e?.message ?? 'Failed to load themes'))
+                .finally(() => setLoading(false));
+        },
+        [q],
+    );
+
+    React.useEffect(() => {
+        const ac = new AbortController();
+        load(ac.signal);
+        return () => ac.abort();
+    }, [load]);
+
+    const onCreate = () => {
+        setMode('create');
+        setEditing(null);
+        setOpen(true);
+    };
+
+    const onEdit = async (uuid: string) => {
+        try {
+            setMode('edit');
+            setError(null);
+            setLoading(true);
+
+            // ✅ fetch full record so modal can pre-populate Source/Fields/Metadata
+            const full = await getTheme(uuid);
+            setEditing(full);
+            setOpen(true);
+        } catch (e: any) {
+            setError(e?.message ?? 'Failed to load theme for editing');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const onDelete = async (uuid: string) => {
+        await deleteTheme(uuid, false);
+        const ac = new AbortController();
+        await load(ac.signal);
+    };
+
+    const onSave = async (payload: DataTheme) => {
+        if (mode === 'create') {
+            await createTheme(payload);
+        } else {
+            if (!payload.uuid) throw new Error('Missing uuid for update');
+            await updateTheme(payload.uuid, payload);
+        }
+
+        setOpen(false);
+        const ac = new AbortController();
+        await load(ac.signal);
+    };
+
+    return (
+        <Stack gap={5}>
+            <Header
+                title={t('dataTheme', 'Data Themes')}
+                subtitle={t('dataThemeSubTitle', ' Define reusable data sources (mamba_* tables/views) for indicators and reporting.')}
+            />
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: '1rem' }}>
+                <div>
+                </div>
+
+                <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
+                    Create Theme
+                </Button>
+            </div>
+
+            <Search
+                size="lg"
+                labelText="Search"
+                placeholder="Search themes…"
+                value={q}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+            />
+
+            {loading ? <div>Loading…</div> : null}
+            {!loading && error ? <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>{error}</div> : null}
+
+            <DataThemesTable rows={rows} onEdit={onEdit} onDelete={onDelete} />
+
+            <DataThemeModal
+                open={open}
+                mode={mode}
+                initial={editing}
+                onClose={() => setOpen(false)}
+                onSave={onSave}
+            />
+        </Stack>
+    );
+}