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

package/src/components/report-sections/report-sections-page.component.tsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import {
+    Button,
+    Search,
+    DataTable,
+    Table,
+    TableHead,
+    TableRow,
+    TableHeader,
+    TableBody,
+    TableCell,
+    OverflowMenu,
+    OverflowMenuItem,
+    Tag,
+} from '@carbon/react';
+import { Add, Folder } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+
+import Header from '../shared/header/header.component';
+import CreateSectionModal from './create-report-section-modal.component';
+import type { CreateSectionPayload, SectionIndicatorRef } from './section-types';
+import SectionPreviewModal from './report-section-preview-modal.component';
+import styles from './sections-page.scss';
+
+import { useLocation } from 'react-router-dom';
+
+import { listIndicators } from '../../resources/indicator/indicators.api';
+import { createSection, getSection, listSections, updateSection, type ReportSectionDto } from '../../resources/report-section/report-sections.api';
+
+function countIndicatorsFromConfig(section: ReportSectionDto): number {
+    try {
+        if (!section?.configJson) return 0;
+        const obj = JSON.parse(section.configJson);
+        const list = Array.isArray(obj?.indicators) ? obj.indicators : [];
+        return list.length;
+    } catch {
+        return 0;
+    }
+}
+
+const SectionsPage: React.FC = () => {
+    const { t } = useTranslation();
+
+    const [q, setQ] = React.useState('');
+    const [openCreate, setOpenCreate] = React.useState(false);
+
+    const [sections, setSections] = React.useState<ReportSectionDto[]>([]);
+    const [, setSectionsLoading] = React.useState(false);
+    const [sectionsError, setSectionsError] = React.useState<string | null>(null);
+
+    const [allIndicators, setAllIndicators] = React.useState<SectionIndicatorRef[]>([]);
+    const [, setIndicatorsLoading] = React.useState(false);
+    const [indicatorsError, setIndicatorsError] = React.useState<string | null>(null);
+
+    const [previewOpen, setPreviewOpen] = React.useState(false);
+    const [previewSection, setPreviewSection] = React.useState<ReportSectionDto | null>(null);
+
+    // NEW: edit state
+    const [editOpen, setEditOpen] = React.useState(false);
+    const [editSection, setEditSection] = React.useState<ReportSectionDto | null>(null);
+
+    const filtered = React.useMemo(() => {
+        const s = q.trim().toLowerCase();
+        return sections
+            .filter((x) => !x.retired)
+            .filter((x) => !s || (x.name ?? '').toLowerCase().includes(s) || (x.code ?? '').toLowerCase().includes(s));
+    }, [q, sections]);
+
+    const headers = React.useMemo(
+        () => [
+            { key: 'name', header: t('name', 'Name') },
+            { key: 'indicators', header: t('indicators', 'Indicators') },
+            { key: 'actions', header: t('actions', 'Actions') },
+        ],
+        [t],
+    );
+
+    const rows = React.useMemo(
+        () =>
+            filtered.map((x) => ({
+                id: x.uuid,
+                name: x.name,
+                indicators: String(countIndicatorsFromConfig(x)),
+                actions: '',
+            })),
+        [filtered],
+    );
+
+    const refreshSections = React.useCallback(async () => {
+        const ac = new AbortController();
+        setSectionsLoading(true);
+        setSectionsError(null);
+        try {
+            const data = await listSections({ v: 'default' }, ac.signal);
+            setSections(data);
+        } catch (e: any) {
+            setSectionsError(e?.message ?? 'Failed to load sections');
+        } finally {
+            setSectionsLoading(false);
+        }
+        return () => ac.abort();
+    }, []);
+
+    React.useEffect(() => {
+        refreshSections();
+    }, [refreshSections]);
+
+    React.useEffect(() => {
+        const ac = new AbortController();
+        setIndicatorsLoading(true);
+        setIndicatorsError(null);
+        listIndicators({ v: 'default', includeRetired: false }, ac.signal)
+            .then((inds) => {
+                setAllIndicators(
+                    inds.map((i) => ({
+                        id: i.uuid,
+                        type: i.kind,
+                        code: i.code ?? '',
+                        name: i.name,
+                    })),
+                );
+            })
+            .catch((e: any) => setIndicatorsError(e?.message ?? 'Failed to load indicators'))
+            .finally(() => setIndicatorsLoading(false));
+        return () => ac.abort();
+    }, []);
+
+    const onSaveSection = async (payload: CreateSectionPayload) => {
+        try {
+            if (payload.id) {
+                await updateSection(payload.id, {
+                    name: payload.name,
+                    description: payload.description,
+                    configJson: payload.configJson,
+                });
+                setEditOpen(false);
+                setEditSection(null);
+            } else {
+                await createSection({
+                    name: payload.name,
+                    description: payload.description,
+                    code: payload.name?.trim?.() ? payload.name.trim().toUpperCase().replace(/[^A-Z0-9]+/g, '_').slice(0, 60) : undefined,
+                    configJson: payload.configJson,
+                });
+                setOpenCreate(false);
+            }
+            await refreshSections();
+        } catch (e: any) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to save section', e);
+        }
+    };
+
+    const openPreview = async (uuid: string) => {
+        try {
+            const sec = await getSection(uuid, undefined, 'full');
+            setPreviewSection(sec);
+            setPreviewOpen(true);
+        } catch (e: any) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load section', e);
+        }
+    };
+
+    const openEdit = async (uuid: string) => {
+        try {
+            const sec = await getSection(uuid, undefined, 'full');
+            setEditSection(sec);
+            setEditOpen(true);
+        } catch (e: any) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load section for edit', e);
+        }
+    };
+
+    const location = useLocation();
+
+    React.useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        if (params.get('create') === '1') {
+            setOpenCreate(true);
+        }
+    }, [location.search]);
+
+    return (
+        <div className={styles.page}>
+            <Header
+                title={t('reportSection', 'Manage Report Sections')}
+                subtitle={t('sectionsSubtitle', 'Draft • Define sections and reuse them in reports')}
+                status={{ label: t('draft', 'Draft'), kind: 'warning' }}
+            />
+
+            <div className={styles.sectionsPage}>
+                <div className={styles.headerRow}>
+                    <h3 className={styles.title}>{t('sections', 'Sections')}</h3>
+                    <Button size="sm" kind="primary" renderIcon={Add} onClick={() => setOpenCreate(true)}>
+                        {t('createSection', 'Create Section')}
+                    </Button>
+                </div>
+
+                <div className={styles.surface}>
+                    <div className={styles.toolbarRow}>
+                        <Search
+                            size="lg"
+                            labelText={t('search', 'Search')}
+                            placeholder={t('search', 'Search')}
+                            value={q}
+                            onChange={(e) => setQ((e.target as HTMLInputElement).value)}
+                        />
+                    </div>
+
+                    {sectionsError ? <div style={{ padding: '0.75rem' }}>{sectionsError}</div> : null}
+                    {indicatorsError ? <div style={{ padding: '0.75rem' }}>{indicatorsError}</div> : null}
+
+                    <DataTable rows={rows} headers={headers} size="lg" useZebraStyles>
+                        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+                            <Table {...getTableProps()}>
+                                <TableHead>
+                                    <TableRow>
+                                        <TableHeader key="_hash" style={{ width: '3rem' }} />
+                                        {headers.map((h) => (
+                                            <TableHeader key={h.key} {...getHeaderProps({ header: h })}>
+                                                {h.header}
+                                            </TableHeader>
+                                        ))}
+                                    </TableRow>
+                                </TableHead>
+
+                                <TableBody>
+                                    {rows.map((row) => (
+                                        <TableRow key={row.id} data-testid={`section-row-${String(filtered.find((x) => x.uuid === row.id)?.name ?? row.id).replace(/\s+/g, '-')}`} {...getRowProps({ row })}>
+                                            <TableCell>
+                                                <Folder size={16} />
+                                            </TableCell>
+
+                                            {row.cells.map((cell) => {
+                                                if (cell.info.header === 'actions') {
+                                                    return (
+                                                        <TableCell key={cell.id}>
+                                                            <OverflowMenu data-testid={`section-actions-${row.id}`} size="sm" ariaLabel="Actions" flipped>
+                                                                <OverflowMenuItem itemText="Preview" onClick={() => openPreview(row.id)} />
+                                                                <OverflowMenuItem itemText="Edit" onClick={() => openEdit(row.id)} />
+                                                            </OverflowMenu>
+                                                        </TableCell>
+                                                    );
+                                                }
+
+                                                if (cell.info.header === 'name') {
+                                                    return (
+                                                        <TableCell key={cell.id}>
+                                                            <div style={{ fontWeight: 600 }}>{cell.value}</div>
+                                                        </TableCell>
+                                                    );
+                                                }
+
+                                                if (cell.info.header === 'indicators') {
+                                                    return (
+                                                        <TableCell key={cell.id}>
+                                                            <Tag type="gray" size="sm">
+                                                                {cell.value}
+                                                            </Tag>
+                                                        </TableCell>
+                                                    );
+                                                }
+
+                                                return <TableCell key={cell.id}>{cell.value as any}</TableCell>;
+                                            })}
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        )}
+                    </DataTable>
+                </div>
+            </div>
+
+            {/* Create */}
+            <CreateSectionModal
+                open={openCreate}
+                onClose={() => setOpenCreate(false)}
+                onSubmit={onSaveSection}
+                indicators={allIndicators}
+                mode="create"
+                initialSection={null}
+            />
+
+            {/* Edit */}
+            <CreateSectionModal
+                open={editOpen}
+                onClose={() => {
+                    setEditOpen(false);
+                    setEditSection(null);
+                }}
+                onSubmit={onSaveSection}
+                indicators={allIndicators}
+                mode="edit"
+                initialSection={editSection}
+            />
+
+            {/* Preview */}
+            <SectionPreviewModal
+                open={previewOpen}
+                onClose={() => {
+                    setPreviewOpen(false);
+                    setPreviewSection(null);
+                }}
+                section={previewSection}
+            />
+        </div>
+    );
+};
+
+export default SectionsPage;

package/src/components/report-sections/section-types.ts

@@ -0,0 +1,55 @@
+import type { ReportSectionDto } from '../../resources/report-section/report-sections.api';
+
+export type SectionIndicatorType = 'BASE' | 'COMPOSITE' | 'FINAL';
+
+export type SectionIndicatorRef = {
+    id: string;
+    type: SectionIndicatorType;
+    code: string;
+    name: string;
+};
+
+export type CreateSectionPayload = {
+    id?: string; // section uuid when editing
+    name: string;
+    description?: string;
+
+    disaggregationEnabled: boolean;
+    ageCategoryUuid: string | null;
+    ageCategoryCode?: string | null;
+    genders: Array<'F' | 'M'>;
+
+    indicators: Array<{ id: string; type: SectionIndicatorType; sortOrder: number; finalDisagg?: any }>;
+
+    /**
+     * JSON config that includes compiled SQL + strategy metadata.
+     * This is the payload you can persist as-is on the backend.
+     */
+    configJson: string;
+};
+
+export type Dhis2MappingV1 = {
+    version: 1;
+    enabled: boolean;
+    datasetId?: string;
+    periodType?: string;
+    orgUnitStrategy?: 'location' | 'fixed';
+    mappingMode?: 'dataElement-categoryOptionCombo';
+    indicatorMappings: Array<{
+        indicatorUuid: string;
+        dataElementId?: string;
+        categoryOptionComboByDisagg?: Record<string, string>;
+    }>;
+};
+
+export type ReportSectionEditorMode = 'create' | 'edit';
+
+export type ReportSectionEditorProps = {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: (payload: CreateSectionPayload) => void;
+    indicators: SectionIndicatorRef[];
+
+    mode?: ReportSectionEditorMode;
+    initialSection?: ReportSectionDto | null;
+};

package/src/components/report-sections/section-utils.ts

@@ -0,0 +1,46 @@
+import type { IndicatorDto } from '../../resources/indicator/indicators.api';
+import type { FinalIndicatorAuthoringV1 } from '../indicators/utils/final-indicator-sql.utils';
+
+export function safeTrim(s: any) {
+    const v = (s ?? '').toString().trim();
+    return v.length ? v : '';
+}
+
+export function makeDisaggKey(ageGroupLabel: string, gender: string) {
+    return `${ageGroupLabel}__${gender}`;
+}
+
+export function safeParseJson(s?: string) {
+    try {
+        return s ? JSON.parse(s) : null;
+    } catch {
+        return null;
+    }
+}
+
+export function normalizeCompiledSql(sql: string) {
+    if (!sql) return sql;
+
+    let out = sql
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+
+    // convert quoted placeholders into named params
+    out = out.replace(/':startDate'/g, ':startDate').replace(/':endDate'/g, ':endDate');
+
+    return out;
+}
+
+export function parseFinalAuthoring(ind: IndicatorDto): FinalIndicatorAuthoringV1 | null {
+    try {
+        if (!ind?.configJson) return null;
+        const obj = JSON.parse(ind.configJson);
+        if (obj && obj.version === 1 && (obj.ageCategoryCode || obj.ageGroupSetCode)) return obj as FinalIndicatorAuthoringV1;
+        return null;
+    } catch {
+        return null;
+    }
+}

package/src/components/report-sections/sections-page.scss

@@ -0,0 +1,79 @@
+.page {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 0 2rem;
+}
+
+.sectionsPage {
+  width: 100%;
+}
+
+.headerRow {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: var(--cds-layer, #ffffff);
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.surface {
+  margin: 0 1.5rem 1.5rem;
+  background: var(--cds-layer, #ffffff);
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.toolbarRow {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+}
+
+.footerRow {
+  padding: 0.75rem;
+  border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: var(--cds-layer-accent, #f4f4f4);
+}
+
+.footerText {
+  opacity: 0.85;
+}
+
+.rowIconWrap {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rowIndexTag {
+  margin-left: 0.25rem;
+}
+
+.nameCell {
+  display: flex;
+  align-items: center;
+}
+
+.nameText {
+  font-weight: 600;
+}
+
+.countCell {
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+.actionsCell {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/run-reports/run-reports-page.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Header from '../shared/header/header.component';
+
+const RunReportsPage: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Header
+        title={t('runReports', 'Run Reports')}
+        subtitle={t('runReportsHint', 'Choose a report and run it for specific time periods and locations.')}
+      />
+
+      <div style={{ padding: '1rem' }}>
+        {t('runReportsComingSoon', 'Coming soon: run report wizard, filters, and results viewer.')}
+      </div>
+    </div>
+  );
+};
+
+export default RunReportsPage;

package/src/components/shared/header/builder-header-actions.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Button, ButtonSet} from '@carbon/react';
+import {Download, Save, View} from '@carbon/icons-react';
+import {useTranslation} from 'react-i18next';
+
+type Props = {
+    onSave?: () => void;
+    onPreview?: () => void;
+    onExport?: () => void;
+    saving?: boolean;
+    disabled?: boolean;
+};
+
+export default function BuilderHeaderActions({
+                                                 onSave,
+                                                 onPreview,
+                                                 onExport,
+                                                 saving = false,
+                                                 disabled = false,
+                                             }: Props) {
+    const {t} = useTranslation();
+
+    return (
+        <ButtonSet>
+            <Button kind="secondary" size="md" renderIcon={Save} onClick={onSave} disabled={disabled || saving}>
+                {saving ? t('saving', 'Saving…') : t('save', 'Save')}
+            </Button>
+
+            <Button kind="secondary" size="md" renderIcon={View} onClick={onPreview} disabled={disabled}>
+                {t('preview', 'Preview')}
+            </Button>
+
+            <Button kind="primary" size="md" renderIcon={Download} onClick={onExport} disabled={disabled}>
+                {t('export', 'Export')}
+            </Button>
+        </ButtonSet>
+    );
+}

package/src/components/shared/header/header.component.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, ChevronDown, Location, UserFollow } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+
+import Illustration from './illustration.component';
+import styles from './header.scss';
+import AiAssistButton from '../../ai-support/ai-assist-button.component';
+
+export interface HeaderStatus {
+    label: string;
+    kind?: 'neutral' | 'info' | 'success' | 'warning'; // kept for future, not styled as pill in this design
+}
+
+export interface HeaderProps {
+    title: string;
+    subtitle?: string;
+    status?: HeaderStatus;
+    actions?: React.ReactNode;
+
+    showAiAssist?: boolean; // NEW
+}
+
+const Header: React.FC<HeaderProps> = ({ title, subtitle, status, actions, showAiAssist = true }) => {
+    const { t } = useTranslation();
+    const session = useSession();
+    const location = session?.sessionLocation?.display;
+
+    const metaLeft = status?.label;
+    const metaRight = subtitle;
+
+    return (
+        <div className={styles.header}>
+            {/* LEFT */}
+            <div className={styles.left}>
+                <div className={styles.illustrationWrap}>
+                    <Illustration />
+                </div>
+
+                <div className={styles.pageLabels}>
+                    <div className={styles.appName}>{t('reportBuilder', 'Report builder')}</div>
+                    <div className={styles.pageTitle}>{title}</div>
+
+                    {(metaLeft || metaRight) && (
+                        <div className={styles.metaLine}>
+                            {metaLeft ? <span className={styles.metaItem}>{metaLeft}</span> : null}
+                            {metaLeft && metaRight ? <span className={styles.metaDot}>•</span> : null}
+                            {metaRight ? <span className={styles.metaItem}>{metaRight}</span> : null}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* RIGHT */}
+            <div className={styles.right}>
+                <div className={styles.rightTop}>
+                    <div className={styles.userRow}>
+                        <span className={styles.userName}>{session?.user?.person?.display}</span>
+                        <UserFollow size={18} className={styles.userIcon} />
+                    </div>
+
+                    <div className={styles.contextRow}>
+                        <Location size={16} />
+                        <span className={styles.value}>{location}</span>
+                        <span className={styles.metaDot}>•</span>
+                        <Calendar size={16} />
+                        <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+                        <ChevronDown size={16} className={styles.chevron} />
+                    </div>
+                </div>
+
+                {showAiAssist || actions ? (
+                    <div className={styles.actions}>
+                        {showAiAssist ? <AiAssistButton context={{ page: title }} /> : null}
+                        {actions}
+                    </div>
+                ) : null}
+            </div>
+
+
+        </div>
+    );
+};
+
+export default Header;