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

package/src/components/report/dashboard/reports-table.component.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  Button,
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from '@carbon/react';
+import { Add } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+
+export type ReportSummary = {
+  id: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+};
+
+type HeaderDef = {
+  key: string;
+  header: string;
+};
+
+type Props = {
+  reports: ReportSummary[];
+  headers: HeaderDef[];
+  onRowClick: (reportId: string) => void;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  onCreateReport: () => void;
+};
+
+const ReportsTable: React.FC<Props> = ({
+                                         reports,
+                                         headers,
+                                         onRowClick,
+                                         searchValue,
+                                         onSearchChange,
+                                         onCreateReport,
+                                       }) => {
+  const { t } = useTranslation();
+
+  const rows = React.useMemo(
+      () =>
+          reports.map((r) => ({
+            id: r.id,
+            name: r.name,
+            status: r.status,
+            updatedAt: r.updatedAt,
+          })),
+      [reports],
+  );
+
+  return (
+      <DataTable rows={rows} headers={headers} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer
+                data-testid="reports-table"
+                style={{
+                  background: 'var(--cds-layer, #ffffff)',
+                  borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                }}
+            >
+              <TableToolbar>
+                <TableToolbarContent
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      gap: '0.75rem',
+                    }}
+                >
+                  <TableToolbarSearch
+                      expanded
+                      value={searchValue}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+                      placeholder={t('searchThisList', 'Search this list')}
+                  />
+
+                  <Button
+                      kind="primary"
+                      renderIcon={() => <Add size={16} />}
+                      size="sm"
+                      onClick={onCreateReport}
+                  >
+                    {t('createReport', 'Create report')}
+                  </Button>
+                </TableToolbarContent>
+              </TableToolbar>
+
+              <Table {...getTableProps()}>
+                <TableHead
+                    style={{
+                      display: 'table-header-group',
+                      visibility: 'visible',
+                    }}
+                >
+                  <TableRow>
+                    {headers.map((header) => (
+                        <TableHeader
+                            {...getHeaderProps({ header })}
+                            key={header.key}
+                            style={{
+                              fontWeight: 600,
+                              backgroundColor: 'var(--cds-layer-accent, #f4f4f4)',
+                              color: 'var(--cds-text-primary, #161616)',
+                              borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                              display: 'table-cell',
+                              visibility: 'visible',
+                            }}
+                        >
+                          {header.header}
+                        </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+
+                <TableBody>
+                  {rows.map((row) => (
+                      <TableRow
+                          {...getRowProps({ row })}
+                          key={row.id}
+                          onClick={() => onRowClick(row.id)}
+                          style={{ cursor: 'pointer' }}
+                      >
+                        {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+        )}
+      </DataTable>
+  );
+};
+
+export default ReportsTable;

package/src/components/report/definition/panels/properties-panel.component.tsx

@@ -0,0 +1,38 @@
+
+import React from 'react';
+import { Button, TextArea, TextInput, Toggle, Tag } from '@carbon/react';
+import { Close } from '@carbon/icons-react';
+
+import ReportPanelShell from '../../panels/report-panel-shell.component';
+import type { ReportDefinitionDraft, ReportSectionRef, SectionLibraryItem } from '../report-definition.types';
+
+type Props = {
+  draft: ReportDefinitionDraft;
+  onDraftChange: (patch: Partial<ReportDefinitionDraft>) => void;
+  selectedSectionRef: ReportSectionRef | null;
+  selectedSection: SectionLibraryItem | null;
+  onUpdateSelectedSection: (patch: Partial<ReportSectionRef>) => void;
+};
+
+const PropertiesPanel: React.FC<Props> = ({ draft, onDraftChange, selectedSectionRef, selectedSection, onUpdateSelectedSection }) => {
+  return (
+    <ReportPanelShell title="Properties" right={<button type="button" aria-label="close properties" style={{ border: 0, background: 'transparent', cursor: 'pointer' }} onClick={() => undefined}><Close size={18} /></button>} bottom={<><Button size="sm" kind="secondary">Cancel</Button><Button size="sm" kind="primary">Save Draft</Button></>}>
+      <div style={{ fontSize: '1rem', fontWeight: 600 }}>Report Details</div>
+      <TextInput id="report-definition-name" labelText="Report Name" value={draft.name} onChange={(e) => onDraftChange({ name: (e.target as HTMLInputElement).value })} />
+      <TextInput id="report-definition-code" labelText="Report Code" value={draft.code} onChange={(e) => onDraftChange({ code: (e.target as HTMLInputElement).value })} />
+      <TextArea id="report-definition-description" labelText="Description" value={draft.description} onChange={(e) => onDraftChange({ description: (e.target as HTMLTextAreaElement).value })} />
+      <div style={{ borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)', marginTop: '0.5rem', paddingTop: '1rem' }}>
+        <div style={{ fontSize: '1rem', fontWeight: 600, marginBottom: '0.75rem' }}>Selected Section</div>
+        {!selectedSectionRef || !selectedSection ? <div style={{ opacity: 0.75 }}>Select a section from the report structure to edit section-level properties.</div> : <>
+          <div style={{ fontWeight: 600 }}>{selectedSection.name}</div>
+          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap', marginTop: '0.5rem', marginBottom: '0.75rem' }}><Tag size="sm" type="gray">{selectedSection.indicatorCount} indicators</Tag>{selectedSection.disaggregationEnabled ? <Tag size="sm" type="blue">{selectedSection.ageCategoryCode ?? 'Disaggregated'}</Tag> : <Tag size="sm" type="warm-gray">No disaggregation</Tag>}</div>
+          <TextInput id="selected-section-title-override" labelText="Title Override (optional)" value={selectedSectionRef.titleOverride ?? ''} onChange={(e) => onUpdateSelectedSection({ titleOverride: (e.target as HTMLInputElement).value })} />
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem', marginTop: '0.5rem' }}><div style={{ fontWeight: 600 }}>Enabled in this report</div><Toggle id="selected-section-enabled" labelText="" toggled={selectedSectionRef.enabled} onToggle={(enabled) => onUpdateSelectedSection({ enabled })} /></div>
+          {selectedSection.description ? <div style={{ marginTop: '0.75rem', opacity: 0.8 }}>{selectedSection.description}</div> : null}
+        </>}
+      </div>
+    </ReportPanelShell>
+  );
+};
+
+export default PropertiesPanel;

package/src/components/report/definition/panels/report-structure-panel.component.tsx

@@ -0,0 +1,61 @@
+
+import React from 'react';
+import { Button, Search, Tag, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { Add, Folder, ArrowUp, ArrowDown, TrashCan } from '@carbon/icons-react';
+
+import ReportPanelShell from '../../panels/report-panel-shell.component';
+import type { ReportSectionRef, SectionLibraryItem } from '../report-definition.types';
+
+type Props = {
+  reportSections: ReportSectionRef[];
+  sectionLibrary: SectionLibraryItem[];
+  selectedSectionUuid: string | null;
+  search: string;
+  onSearchChange: (v: string) => void;
+  onSelectSection: (sectionUuid: string) => void;
+  onMoveSection: (sectionUuid: string, dir: -1 | 1) => void;
+  onRemoveSection: (sectionUuid: string) => void;
+  onFocusAvailableSections: () => void;
+};
+
+const ReportStructurePanel: React.FC<Props> = ({ reportSections, sectionLibrary, selectedSectionUuid, search, onSearchChange, onSelectSection, onMoveSection, onRemoveSection, onFocusAvailableSections }) => {
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const sorted = [...reportSections].sort((a, b) => a.sortOrder - b.sortOrder);
+    if (!q) return sorted;
+    return sorted.filter((ref) => {
+      const section = sectionLibrary.find((s) => s.uuid === ref.sectionUuid);
+      return section && (section.name.toLowerCase().includes(q) || (section.description ?? '').toLowerCase().includes(q) || (section.code ?? '').toLowerCase().includes(q));
+    });
+  }, [reportSections, sectionLibrary, search]);
+
+  return (
+    <ReportPanelShell title="Report Structure" right={<OverflowMenu size="sm" aria-label="report structure actions"><OverflowMenuItem itemText="Browse sections" onClick={onFocusAvailableSections} /></OverflowMenu>} bottom={<><span /><Button size="sm" kind="primary" renderIcon={Add} onClick={onFocusAvailableSections}>Add Section</Button></>}>
+      <Search size="lg" labelText="Search selected sections" placeholder="Search selected sections" value={search} onChange={(e) => onSearchChange((e.target as HTMLInputElement).value)} />
+      <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 10, overflow: 'hidden' }}>
+        {filtered.length === 0 ? <div style={{ padding: '0.9rem', opacity: 0.75 }}>No sections selected yet.</div> : filtered.map((ref, idx) => {
+          const section = sectionLibrary.find((s) => s.uuid === ref.sectionUuid);
+          if (!section) return null;
+          return (
+            <div key={ref.sectionUuid} role="button" tabIndex={0} onClick={() => onSelectSection(ref.sectionUuid)} onKeyDown={(e) => e.key === 'Enter' && onSelectSection(ref.sectionUuid)} style={{ padding: '0.85rem 0.9rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)', background: selectedSectionUuid === ref.sectionUuid ? 'rgba(0,0,0,0.03)' : '#fff', cursor: 'pointer' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.75rem', alignItems: 'flex-start' }}>
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', minWidth: 0 }}><Folder size={16} /><div style={{ fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{ref.titleOverride?.trim() ? ref.titleOverride : section.name}</div>{!ref.enabled ? <Tag size="sm" type="red">Disabled</Tag> : null}</div>
+                  <div style={{ display: 'flex', gap: '0.4rem', marginTop: 6, flexWrap: 'wrap' }}><Tag size="sm" type="gray">{section.indicatorCount} indicators</Tag>{section.disaggregationEnabled ? <Tag size="sm" type="blue">{section.ageCategoryCode ?? 'Disaggregated'}</Tag> : <Tag size="sm" type="warm-gray">No disaggregation</Tag>}</div>
+                  {section.description ? <div style={{ marginTop: 6, opacity: 0.8 }}>{section.description}</div> : null}
+                </div>
+                <div style={{ display: 'flex', gap: '0.25rem' }}>
+                  <Button kind="ghost" size="sm" hasIconOnly iconDescription="Move up" renderIcon={ArrowUp} disabled={idx === 0} onClick={(e) => { e.stopPropagation(); onMoveSection(ref.sectionUuid, -1); }} />
+                  <Button kind="ghost" size="sm" hasIconOnly iconDescription="Move down" renderIcon={ArrowDown} disabled={idx === filtered.length - 1} onClick={(e) => { e.stopPropagation(); onMoveSection(ref.sectionUuid, 1); }} />
+                  <Button kind="ghost" size="sm" hasIconOnly iconDescription="Remove" renderIcon={TrashCan} onClick={(e) => { e.stopPropagation(); onRemoveSection(ref.sectionUuid); }} />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </ReportPanelShell>
+  );
+};
+
+export default ReportStructurePanel;

package/src/components/report/definition/panels/selection-panel.component.tsx

@@ -0,0 +1,58 @@
+
+import React from 'react';
+import { Button, Search, Tag, Checkbox } from '@carbon/react';
+import { Add, Folder } from '@carbon/icons-react';
+
+import ReportPanelShell from '../../panels/report-panel-shell.component';
+import type { ReportSectionRef, SectionLibraryItem } from '../report-definition.types';
+
+type Props = {
+  availableSections: SectionLibraryItem[];
+  reportSections: ReportSectionRef[];
+  selectedAvailableSectionUuid: string | null;
+  search: string;
+  onSearchChange: (v: string) => void;
+  onSelectAvailableSection: (sectionUuid: string) => void;
+  onToggleSection: (sectionUuid: string, checked: boolean) => void;
+};
+
+const SelectionPanel: React.FC<Props> = ({ availableSections, reportSections, selectedAvailableSectionUuid, search, onSearchChange, onSelectAvailableSection, onToggleSection }) => {
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return availableSections;
+    return availableSections.filter((s) => s.name.toLowerCase().includes(q) || (s.description ?? '').toLowerCase().includes(q) || (s.code ?? '').toLowerCase().includes(q));
+  }, [availableSections, search]);
+
+  const isIncluded = (sectionUuid: string) => reportSections.some((x) => x.sectionUuid === sectionUuid);
+
+  return (
+    <ReportPanelShell title="Available Sections" bottom={<><span style={{ opacity: 0.75 }}>Select sections to include in this report.</span><Button size="sm" kind="secondary" renderIcon={Add} disabled>Sections are added directly</Button></>}>
+      <Search size="lg" labelText="Search sections" placeholder="Search sections" value={search} onChange={(e) => onSearchChange((e.target as HTMLInputElement).value)} />
+      <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 10, overflow: 'hidden' }}>
+        {filtered.length === 0 ? <div style={{ padding: '0.9rem', opacity: 0.75 }}>No sections found.</div> : filtered.map((section) => {
+          const checked = isIncluded(section.uuid);
+          return (
+            <div key={section.uuid} role="button" tabIndex={0} onClick={() => onSelectAvailableSection(section.uuid)} onKeyDown={(e) => e.key === 'Enter' && onSelectAvailableSection(section.uuid)} style={{ padding: '0.85rem 0.9rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)', background: selectedAvailableSectionUuid === section.uuid ? 'rgba(0,0,0,0.03)' : '#fff', cursor: 'pointer' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.75rem', alignItems: 'flex-start' }}>
+                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', minWidth: 0 }}>
+                  <Checkbox id={`available-section-${section.uuid}`} checked={checked} labelText="" onChange={(arg1: any, arg2: any) => {
+                    const nextChecked = typeof arg1 === 'boolean' ? arg1 : typeof arg2?.checked === 'boolean' ? arg2.checked : Boolean(arg1?.target?.checked);
+                    onToggleSection(section.uuid, nextChecked);
+                  }} />
+                  <div style={{ minWidth: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', minWidth: 0 }}><Folder size={16} /><div style={{ fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{section.name}</div></div>
+                    {section.description ? <div style={{ marginTop: 6, opacity: 0.8 }}>{section.description}</div> : null}
+                    <div style={{ display: 'flex', gap: '0.4rem', marginTop: 6, flexWrap: 'wrap' }}><Tag size="sm" type="gray">{section.indicatorCount} indicators</Tag>{section.disaggregationEnabled ? <Tag size="sm" type="blue">{section.ageCategoryCode ?? 'Disaggregated'}</Tag> : <Tag size="sm" type="warm-gray">No disaggregation</Tag>}</div>
+                  </div>
+                </div>
+                {section.code ? <Tag size="sm" type="cool-gray">{section.code}</Tag> : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </ReportPanelShell>
+  );
+};
+
+export default SelectionPanel;

package/src/components/report/definition/report-definition-editor.component.tsx

@@ -0,0 +1,99 @@
+
+import React from 'react';
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import styles from '../../../routes/report-builder.scss';
+
+import ReportStructurePanel from './panels/report-structure-panel.component';
+import SelectionPanel from './panels/selection-panel.component';
+import PropertiesPanel from './panels/properties-panel.component';
+
+import { parseSectionLibraryItem, sortReportSections, type ReportDefinitionDraft, type ReportSectionRef, type SectionLibraryItem } from './report-definition.types';
+import { listSections } from '../../../resources/report-section/report-sections.api';
+
+type Props = {
+  value: ReportDefinitionDraft;
+  onChange: (next: ReportDefinitionDraft) => void;
+};
+
+const ReportDefinitionEditor: React.FC<Props> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const [sectionLibrary, setSectionLibrary] = React.useState<SectionLibraryItem[]>([]);
+  const [sectionsLoading, setSectionsLoading] = React.useState(false);
+  const [sectionsError, setSectionsError] = React.useState<string | null>(null);
+  const [structureSearch, setStructureSearch] = React.useState('');
+  const [selectionSearch, setSelectionSearch] = React.useState('');
+  const [selectedReportSectionUuid, setSelectedReportSectionUuid] = React.useState<string | null>(null);
+  const [selectedAvailableSectionUuid, setSelectedAvailableSectionUuid] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+    setSectionsLoading(true);
+    setSectionsError(null);
+    listSections({ v: 'full', includeRetired: false }, ac.signal)
+      .then((rows) => setSectionLibrary(rows.filter((x) => !x.retired).map(parseSectionLibraryItem)))
+      .catch((e: any) => setSectionsError(e?.message ?? 'Failed to load sections'))
+      .finally(() => setSectionsLoading(false));
+    return () => ac.abort();
+  }, []);
+
+  const draft = value;
+  const updateDraft = React.useCallback((patch: Partial<ReportDefinitionDraft>) => onChange({ ...draft, ...patch }), [draft, onChange]);
+  const selectedSectionRef = React.useMemo(() => draft.sections.find((s) => s.sectionUuid === selectedReportSectionUuid) ?? null, [draft.sections, selectedReportSectionUuid]);
+  const selectedSection = React.useMemo(() => sectionLibrary.find((s) => s.uuid === selectedReportSectionUuid) ?? null, [sectionLibrary, selectedReportSectionUuid]);
+
+  const addSectionToDraft = React.useCallback((sectionUuid: string) => {
+    if (draft.sections.some((s) => s.sectionUuid === sectionUuid)) { setSelectedReportSectionUuid(sectionUuid); return; }
+    const nextRef: ReportSectionRef = { sectionUuid, sortOrder: draft.sections.length + 1, enabled: true, titleOverride: '' };
+    onChange({ ...draft, sections: [...draft.sections, nextRef] });
+    setSelectedReportSectionUuid(sectionUuid);
+  }, [draft, onChange]);
+
+  const removeSectionFromDraft = React.useCallback((sectionUuid: string) => {
+    const kept = draft.sections.filter((s) => s.sectionUuid !== sectionUuid);
+    onChange({ ...draft, sections: kept.map((s, idx) => ({ ...s, sortOrder: idx + 1 })) });
+    if (selectedReportSectionUuid === sectionUuid) setSelectedReportSectionUuid(null);
+    if (selectedAvailableSectionUuid === sectionUuid) setSelectedAvailableSectionUuid(null);
+  }, [draft, onChange, selectedReportSectionUuid, selectedAvailableSectionUuid]);
+
+  const toggleSectionInDraft = React.useCallback((sectionUuid: string, checked: boolean) => checked ? addSectionToDraft(sectionUuid) : removeSectionFromDraft(sectionUuid), [addSectionToDraft, removeSectionFromDraft]);
+  const moveSection = React.useCallback((sectionUuid: string, dir: -1 | 1) => {
+    const list = sortReportSections(draft.sections);
+    const idx = list.findIndex((x) => x.sectionUuid === sectionUuid);
+    if (idx < 0) return;
+    const j = idx + dir;
+    if (j < 0 || j >= list.length) return;
+    const tmp = list[idx]; list[idx] = list[j]; list[j] = tmp;
+    onChange({ ...draft, sections: list.map((x, k) => ({ ...x, sortOrder: k + 1 })) });
+  }, [draft, onChange]);
+
+  const updateSelectedSectionRef = React.useCallback((patch: Partial<ReportSectionRef>) => {
+    if (!selectedReportSectionUuid) return;
+    onChange({ ...draft, sections: draft.sections.map((s) => s.sectionUuid === selectedReportSectionUuid ? { ...s, ...patch } : s) });
+  }, [draft, onChange, selectedReportSectionUuid]);
+
+  const chosenSections = React.useMemo(() => sortReportSections(draft.sections), [draft.sections]);
+
+  return (
+    <div className={styles.designWorkspace}>
+      <div style={{ marginBottom: '1rem' }}>
+        <h3 className={styles.workspaceTitle}>{t('buildReport', 'Build Report')}: {draft.name || 'Untitled report'}</h3>
+        <p className={styles.workspaceHint}>{t('draftHint', 'Draft • Define reports as collections of reusable sections')}</p>
+      </div>
+      {sectionsLoading ? <InlineLoading description="Loading sections…" /> : null}
+      {sectionsError ? <div style={{ marginBottom: '1rem' }}><InlineNotification kind="error" lowContrast title="Sections" subtitle={sectionsError} /></div> : null}
+      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.1fr 0.9fr', gap: '1rem' }}>
+        <ReportStructurePanel reportSections={chosenSections} sectionLibrary={sectionLibrary} selectedSectionUuid={selectedReportSectionUuid} search={structureSearch} onSearchChange={setStructureSearch} onSelectSection={setSelectedReportSectionUuid} onMoveSection={moveSection} onRemoveSection={removeSectionFromDraft} onFocusAvailableSections={() => { if (sectionLibrary.length > 0) setSelectedAvailableSectionUuid((prev) => prev ?? sectionLibrary[0].uuid); }} />
+        <SelectionPanel availableSections={sectionLibrary} reportSections={chosenSections} selectedAvailableSectionUuid={selectedAvailableSectionUuid} search={selectionSearch} onSearchChange={setSelectionSearch} onSelectAvailableSection={setSelectedAvailableSectionUuid} onToggleSection={toggleSectionInDraft} />
+        <PropertiesPanel draft={draft} onDraftChange={updateDraft} selectedSectionRef={selectedSectionRef} selectedSection={selectedSection} onUpdateSelectedSection={updateSelectedSectionRef} />
+      </div>
+      <div style={{ marginTop: '1rem', padding: '0.9rem 1rem', background: '#fff', border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 12 }}>
+        <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Current Authoring Draft</div>
+        <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: '0.85rem' }}>{JSON.stringify(draft, null, 2)}</pre>
+      </div>
+    </div>
+  );
+};
+
+export default ReportDefinitionEditor;

package/src/components/report/definition/report-definition.types.ts

@@ -0,0 +1,66 @@
+
+export type ReportSectionRef = {
+  sectionUuid: string;
+  sortOrder: number;
+  titleOverride?: string;
+  enabled: boolean;
+};
+
+export type ReportDefinitionDraft = {
+  name: string;
+  code: string;
+  description: string;
+  sections: ReportSectionRef[];
+};
+
+export type SectionLibraryItem = {
+  uuid: string;
+  name: string;
+  description?: string;
+  code?: string;
+  indicatorCount: number;
+  disaggregationEnabled: boolean;
+  ageCategoryCode?: string | null;
+  raw: any;
+};
+
+export function createEmptyReportDefinitionDraft(): ReportDefinitionDraft {
+  return {
+    name: '',
+    code: '',
+    description: '',
+    sections: [],
+  };
+}
+
+export function parseSectionLibraryItem(section: any): SectionLibraryItem {
+  let indicatorCount = 0;
+  let disaggregationEnabled = false;
+  let ageCategoryCode: string | null | undefined = null;
+
+  try {
+    const cfg = section.configJson ? JSON.parse(section.configJson) : null;
+    indicatorCount = Array.isArray(cfg?.indicators) ? cfg.indicators.length : 0;
+    disaggregationEnabled = Boolean(cfg?.disaggregation && cfg?.disaggregation?.none !== true);
+    ageCategoryCode = cfg?.disaggregation?.ageCategoryCode ?? null;
+  } catch {
+    indicatorCount = 0;
+    disaggregationEnabled = false;
+    ageCategoryCode = null;
+  }
+
+  return {
+    uuid: section.uuid,
+    name: section.name,
+    description: section.description,
+    code: section.code,
+    indicatorCount,
+    disaggregationEnabled,
+    ageCategoryCode,
+    raw: section,
+  };
+}
+
+export function sortReportSections<T extends { sortOrder: number }>(items: T[]): T[] {
+  return [...items].sort((a, b) => a.sortOrder - b.sortOrder);
+}

package/src/components/report/design/panels/IndicatorPropertiesPanel.scss

@@ -0,0 +1,33 @@
+.tileHeader {
+  margin-bottom: 0.75rem;
+}
+
+.tileTitle {
+  margin: 0;
+  font-weight: 600;
+}
+
+.formGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.note {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  border-left: 4px solid var(--cds-support-info, #0f62fe);
+  background: var(--cds-layer-accent-01, #edf5ff);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.mappingActions {
+  margin-top: 0.75rem;
+}
+
+.placeholder {
+  padding: 1rem 0;
+  opacity: 0.8;
+}