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

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>
+  );
+}

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-sources-page.component.tsx

@@ -0,0 +1,344 @@
+import React from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableHeader,
+  DataTableSkeleton,
+  InlineNotification,
+  Modal,
+  Search,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  TextArea,
+  TextInput,
+  Toggle,
+} from '@carbon/react';
+import { Add, Edit, TrashCan } from '@carbon/icons-react';
+import Header from '../shared/header/header.component';
+import {
+  createETLSource,
+  deleteETLSource,
+  ETLSourceDto,
+  listETLSources,
+  SaveETLSourcePayload,
+  updateETLSource,
+} from '../../resources/etl-source/etl-source.api';
+
+type FormState = {
+  name: string;
+  code: string;
+  description: string;
+  tablePatterns: string;
+  schemaName: string;
+  sourceType: string;
+  active: boolean;
+};
+
+const headers: DataTableHeader[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'code', header: 'Code' },
+  { key: 'schemaName', header: 'Schema' },
+  { key: 'sourceType', header: 'Source Type' },
+  { key: 'status', header: 'Status' },
+  { key: 'actions', header: 'Actions' },
+];
+
+const emptyForm: FormState = {
+  name: '',
+  code: '',
+  description: '',
+  tablePatterns: '',
+  schemaName: '',
+  sourceType: '',
+  active: true,
+};
+
+export default function ETLSourcesPage() {
+  const [q, setQ] = React.useState('');
+  const [rows, setRows] = React.useState<ETLSourceDto[]>([]);
+  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<ETLSourceDto | null>(null);
+  const [form, setForm] = React.useState<FormState>(emptyForm);
+  const [saving, setSaving] = React.useState(false);
+
+  const load = React.useCallback(async (signal?: AbortSignal) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listETLSources(q, signal);
+      setRows(data);
+    } catch (e: any) {
+      setError(e?.message ?? 'Failed to load ETL sources');
+    } finally {
+      setLoading(false);
+    }
+  }, [q]);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+    load(ac.signal);
+    return () => ac.abort();
+  }, [load]);
+
+  const openCreate = () => {
+    setMode('create');
+    setEditing(null);
+    setForm(emptyForm);
+    setOpen(true);
+  };
+
+  const openEdit = (row: ETLSourceDto) => {
+    setMode('edit');
+    setEditing(row);
+    setForm({
+      name: row.name ?? '',
+      code: row.code ?? '',
+      description: row.description ?? '',
+      tablePatterns: row.tablePatterns ?? '',
+      schemaName: row.schemaName ?? '',
+      sourceType: row.sourceType ?? '',
+      active: row.active ?? true,
+    });
+    setOpen(true);
+  };
+
+  const onSave = async () => {
+    if (!form.name.trim()) return;
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload: SaveETLSourcePayload = {
+        name: form.name.trim(),
+        code: form.code.trim() || undefined,
+        description: form.description.trim() || undefined,
+        tablePatterns: form.tablePatterns.trim() || undefined,
+        schemaName: form.schemaName.trim() || undefined,
+        sourceType: form.sourceType.trim() || undefined,
+        active: form.active,
+      };
+
+      if (mode === 'create') {
+        await createETLSource(payload);
+      } else if (editing?.uuid) {
+        await updateETLSource(editing.uuid, payload);
+      }
+
+      setOpen(false);
+      const ac = new AbortController();
+      await load(ac.signal);
+    } catch (e: any) {
+      setError(e?.message ?? 'Failed to save ETL source');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const onDelete = async (row: ETLSourceDto) => {
+    if (!row?.uuid) return;
+    const yes = window.confirm(`Retire ETL source "${row.name}"?`);
+    if (!yes) return;
+
+    try {
+      await deleteETLSource(row.uuid);
+      const ac = new AbortController();
+      await load(ac.signal);
+    } catch (e: any) {
+      setError(e?.message ?? 'Failed to retire ETL source');
+    }
+  };
+
+  const tableRows = rows.map((row) => ({
+    id: row.uuid,
+    name: row.name,
+    code: row.code || '—',
+    schemaName: row.schemaName || '—',
+    sourceType: row.sourceType || '—',
+    status: row.active === false || row.voided ? 'Inactive' : 'Active',
+    actions: '',
+  }));
+
+  return (
+    <Stack gap={5}>
+      <Header
+        title="ETL Sources"
+        subtitle="Manage ETL source definitions used by the report builder."
+        actions={
+          <Button data-testid="etl-source-new" size="sm" renderIcon={Add} onClick={openCreate}>
+            New ETL Source
+          </Button>
+        }
+      />
+
+      <div style={{ padding: '0 1rem 1rem', display: 'grid', gap: '1rem' }}>
+        <Search
+          data-testid="etl-source-search"
+          size="lg"
+          labelText="Search"
+          placeholder="Search ETL sources…"
+          value={q}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+        />
+
+        {error ? <InlineNotification lowContrast kind="error" title="Error" subtitle={error} /> : null}
+
+        {loading ? (
+          <DataTableSkeleton rowCount={5} columnCount={6} 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((row) => {
+                      const original = rows.find((r) => r.uuid === row.id);
+                      return (
+                        <TableRow key={row.id} {...getRowProps({ row })}>
+                          <TableCell>{row.cells[0].value}</TableCell>
+                          <TableCell>{row.cells[1].value}</TableCell>
+                          <TableCell>{row.cells[2].value}</TableCell>
+                          <TableCell>{row.cells[3].value}</TableCell>
+                          <TableCell>
+                            {(original?.active === false || original?.voided) ? (
+                              <Tag type="gray">Inactive</Tag>
+                            ) : (
+                              <Tag type="green">Active</Tag>
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                              <Button
+                                kind="ghost"
+                                size="sm"
+                                renderIcon={Edit}
+                                iconDescription="Edit"
+                                hasIconOnly
+                                onClick={() => original && openEdit(original)}
+                              />
+                              <Button
+                                kind="ghost"
+                                size="sm"
+                                renderIcon={TrashCan}
+                                iconDescription="Retire"
+                                hasIconOnly
+                                onClick={() => original && onDelete(original)}
+                              />
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+        )}
+      </div>
+
+      <Modal
+        open={open}
+        modalHeading={mode === 'create' ? 'New ETL Source' : 'Edit ETL Source'}
+        data-testid="etl-source-modal"
+        primaryButtonText={saving ? 'Saving…' : 'Save'}
+        secondaryButtonText="Cancel"
+        onRequestClose={() => !saving && setOpen(false)}
+        onRequestSubmit={onSave}
+        primaryButtonDisabled={saving || !form.name.trim()}
+      >
+        <Stack gap={5}>
+          <TextInput
+            id="etl-source-name"
+            data-testid="etl-source-name"
+            labelText="Name"
+            value={form.name}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, name: e.target.value }))
+            }
+          />
+
+          <TextInput
+            id="etl-source-code"
+            data-testid="etl-source-code"
+            labelText="Code"
+            value={form.code}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, code: e.target.value }))
+            }
+          />
+
+          <TextInput
+            id="etl-source-schema"
+            data-testid="etl-source-schema"
+            labelText="Schema Name"
+            value={form.schemaName}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, schemaName: e.target.value }))
+            }
+          />
+
+          <TextInput
+            id="etl-source-type"
+            data-testid="etl-source-type"
+            labelText="Source Type"
+            value={form.sourceType}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setForm((prev) => ({ ...prev, sourceType: e.target.value }))
+            }
+          />
+
+          <TextArea
+            id="etl-source-description"
+            data-testid="etl-source-description"
+            labelText="Description"
+            rows={3}
+            value={form.description}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setForm((prev) => ({ ...prev, description: e.target.value }))
+            }
+          />
+
+          <TextArea
+            id="etl-source-table-patterns"
+            data-testid="etl-source-table-patterns"
+            labelText="Table Patterns"
+            helperText="Store table matching patterns as text."
+            rows={4}
+            value={form.tablePatterns}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setForm((prev) => ({ ...prev, tablePatterns: e.target.value }))
+            }
+          />
+
+          <Toggle
+            id="etl-source-active"
+            labelText="Active"
+            toggled={form.active}
+            onToggle={(checked: boolean) => setForm((prev) => ({ ...prev, active: checked }))}
+          />
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}