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

package/src/components/report-sections/create-report-section-modal.component.tsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import { Modal, Stack, InlineLoading, InlineNotification } from '@carbon/react';
+
+import { getIndicator, type IndicatorDto } from '../../resources/indicator/indicators.api';
+import { buildFinalIndicatorSql } from '../indicators/utils/final-indicator-sql.utils';
+
+import type { ReportSectionEditorProps } from './section-types';
+import type { Dhis2MappingV1, CreateSectionPayload, SectionIndicatorType } from './section-types';
+
+import { useAgeCategories } from './hooks/useAgeCategories';
+import { useSectionEditorState } from './hooks/useSectionEditorState';
+
+import { SectionBasicsPanel } from './panels/SectionBasicsPanel';
+import { DisaggregationPanel } from './panels/DisaggregationPanel';
+import { IndicatorPickerPanel } from './panels/IndicatorPickerPanel';
+import { Dhis2MappingPanel } from './panels/Dhis2MappingPanel';
+
+import { normalizeCompiledSql, parseFinalAuthoring, safeTrim } from './section-utils';
+
+type CompiledIndicatorConfig = {
+    indicatorUuid: string;
+    kind: SectionIndicatorType;
+    code?: string;
+    name?: string;
+    sortOrder: number;
+    disaggregation?: any;
+    sql: { compiled: string; strategy: string; inputs?: any };
+};
+
+export default function CreateReportSectionModal(props: ReportSectionEditorProps) {
+    const { open, onClose, onSubmit, indicators, mode = 'create', initialSection } = props;
+
+    const { ageCategories, ageCatsLoading, ageCatsError } = useAgeCategories(open);
+
+    const state = useSectionEditorState({
+        open,
+        mode,
+        initialSection,
+        indicators,
+        ageCategories,
+    });
+
+    const [saving, setSaving] = React.useState(false);
+    const [saveError, setSaveError] = React.useState<string | null>(null);
+
+    const canSubmit =
+        Boolean(state.name.trim()) &&
+        state.selected.length > 0 &&
+        !state.disaggMissing &&
+        !saving;
+
+    const buildDhis2Mapping = (): Dhis2MappingV1 => {
+        return {
+            version: 1,
+            enabled: state.dhis2Enabled,
+            datasetId: safeTrim(state.dhis2DatasetId) || undefined,
+            periodType: safeTrim(state.dhis2PeriodType) || undefined,
+            orgUnitStrategy: state.dhis2OrgUnitStrategy,
+            mappingMode: 'dataElement-categoryOptionCombo',
+            indicatorMappings: state.selected
+                .slice()
+                .sort((a, b) => a.sortOrder - b.sortOrder)
+                .map((s) => ({
+                    indicatorUuid: s.id,
+                    dataElementId: safeTrim(state.dhis2IndicatorMap[s.id]?.dataElementId) || undefined,
+                    categoryOptionComboByDisagg:
+                        state.disaggEnabled && state.disaggKeys.length ? state.dhis2IndicatorMap[s.id]?.cocByDisagg ?? {} : undefined,
+                })),
+        };
+    };
+
+    const submit = async () => {
+        if (!canSubmit) return;
+
+        setSaving(true);
+        setSaveError(null);
+
+        try {
+            // Load full indicator definitions so SQL compilation has what it needs.
+            const fulls = await Promise.all(
+                state.selected
+                    .slice()
+                    .sort((a, b) => a.sortOrder - b.sortOrder)
+                    .map((s) => getIndicator(s.id, undefined, 'full')),
+            );
+
+            const byId = new Map(fulls.map((x) => [x.uuid, x]));
+
+            const sectionDisagg =
+                state.disaggEnabled && state.selectedAgeCategory
+                    ? {
+                        version: 1,
+                        ageCategoryUuid: state.selectedAgeCategory.uuid,
+                        ageCategoryCode: state.selectedAgeCategory.code,
+                        genders: state.pickedGenders,
+                    }
+                    : { version: 1, none: true };
+
+            const indicatorConfigs: CompiledIndicatorConfig[] = state.selected
+                .slice()
+                .sort((a, b) => a.sortOrder - b.sortOrder)
+                .map((s) => {
+                    const ind: IndicatorDto | undefined = byId.get(s.id);
+                    const kind = s.type as SectionIndicatorType;
+
+                    if (!ind) {
+                        return {
+                            indicatorUuid: s.id,
+                            kind,
+                            sortOrder: s.sortOrder,
+                            sql: { compiled: '-- indicator not found', strategy: 'MISSING' },
+                        };
+                    }
+
+                    if (kind === 'FINAL') {
+                        const authoring = parseFinalAuthoring(ind);
+                        const compiled = normalizeCompiledSql(ind.sqlTemplate ?? '');
+
+                        return {
+                            indicatorUuid: ind.uuid,
+                            kind: 'FINAL',
+                            code: ind.code,
+                            name: ind.name,
+                            sortOrder: s.sortOrder,
+                            disaggregation: authoring
+                                ? { ageCategoryCode: authoring.ageCategoryCode ?? authoring.ageGroupSetCode, genders: authoring.genders }
+                                : undefined,
+                            sql: {
+                                compiled,
+                                strategy: 'FINAL_TEMPLATE',
+                                inputs: authoring
+                                    ? {
+                                        baseIndicatorId: authoring.baseIndicatorId,
+                                        ageCategoryCode: authoring.ageCategoryCode ?? authoring.ageGroupSetCode,
+                                        genders: authoring.genders,
+                                    }
+                                    : undefined,
+                            },
+                        };
+                    }
+
+                    const ageCode = state.selectedAgeCategory?.code ?? '';
+                    let compiled = buildFinalIndicatorSql({
+                        baseIndicator: ind,
+                        ageCategoryCode: ageCode,
+                        genders: state.pickedGenders,
+                    });
+
+                    compiled = normalizeCompiledSql(compiled);
+
+                    return {
+                        indicatorUuid: ind.uuid,
+                        kind,
+                        code: ind.code,
+                        name: ind.name,
+                        sortOrder: s.sortOrder,
+                        sql: {
+                            compiled,
+                            strategy: kind === 'COMPOSITE' ? 'COMPOSITE+SECTION_DISAGG' : 'BASE+SECTION_DISAGG',
+                            inputs: { sectionAgeCategoryCode: ageCode, sectionGenders: state.pickedGenders },
+                        },
+                    };
+                });
+
+            const config = {
+                version: 1,
+                name: state.name.trim(),
+                description: state.description.trim() || undefined,
+                disaggregation: sectionDisagg,
+                indicators: indicatorConfigs,
+                exchangeMappings: { dhis2: buildDhis2Mapping() },
+                compiledAt: new Date().toISOString(),
+            };
+
+            const payload: CreateSectionPayload = {
+                id: state.isEdit ? initialSection?.uuid : undefined,
+                name: state.name.trim(),
+                description: state.description.trim() || undefined,
+                disaggregationEnabled: state.disaggEnabled,
+                ageCategoryUuid: state.disaggEnabled ? state.selectedAgeCategory?.uuid ?? null : null,
+                ageCategoryCode: state.disaggEnabled ? state.selectedAgeCategory?.code ?? null : null,
+                genders: state.pickedGenders,
+                indicators: indicatorConfigs.map((x) => ({
+                    id: x.indicatorUuid,
+                    type: x.kind,
+                    sortOrder: x.sortOrder,
+                    finalDisagg: x.disaggregation,
+                })),
+                configJson: JSON.stringify(config, null, 2),
+            };
+
+            onSubmit(payload);
+        } catch (e: any) {
+            setSaveError(e?.message ?? 'Failed to build section config');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <Modal
+            open={open}
+            onRequestClose={onClose}
+            modalHeading={state.isEdit ? 'Edit Section' : 'Create Section'}
+            primaryButtonText={state.isEdit ? 'Save changes' : 'Create Section'}
+            secondaryButtonText="Cancel"
+            onRequestSubmit={submit}
+            primaryButtonDisabled={!canSubmit}
+            size="lg"
+        >
+            <Stack gap={5}>
+                <div style={{ opacity: 0.8 }}>Sections are groups of indicators with shared disaggregation options.</div>
+
+                {ageCatsLoading ? <InlineLoading description="Loading age categories…" /> : null}
+                {ageCatsError ? <InlineNotification kind="error" lowContrast title="Age categories" subtitle={ageCatsError} /> : null}
+                {saveError ? <InlineNotification kind="error" lowContrast title="Section" subtitle={saveError} /> : null}
+
+                <SectionBasicsPanel
+                    name={state.name}
+                    setName={state.setName}
+                    description={state.description}
+                    setDescription={state.setDescription}
+                />
+
+                <hr style={{ border: 0, borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }} />
+
+                <DisaggregationPanel
+                    disaggEnabled={state.disaggEnabled}
+                    setDisaggEnabled={state.setDisaggEnabled}
+                    ageCategories={ageCategories}
+                    selectedAgeCategory={state.selectedAgeCategory}
+                    setSelectedAgeCategory={state.setSelectedAgeCategory}
+                    genderF={state.genderF}
+                    setGenderF={state.setGenderF}
+                    genderM={state.genderM}
+                    setGenderM={state.setGenderM}
+                    pickedGenders={state.pickedGenders}
+                    disaggMissing={state.disaggMissing}
+                    idPrefix={state.isEdit ? 'edit' : 'create'}
+                />
+
+                <IndicatorPickerPanel
+                    q={state.q}
+                    setQ={state.setQ}
+                    available={state.available}
+                    selectedFull={state.selectedFull}
+                    selected={state.selected}
+                    isSelected={state.isSelected}
+                    toggleIndicator={state.toggleIndicator}
+                    moveSelected={state.moveSelected}
+                    idPrefix={state.isEdit ? 'edit' : 'create'}
+                />
+
+                <Dhis2MappingPanel
+                    dhis2Enabled={state.dhis2Enabled}
+                    setDhis2Enabled={state.setDhis2Enabled}
+                    dhis2DatasetId={state.dhis2DatasetId}
+                    setDhis2DatasetId={state.setDhis2DatasetId}
+                    dhis2PeriodType={state.dhis2PeriodType}
+                    setDhis2PeriodType={state.setDhis2PeriodType}
+                    dhis2OrgUnitStrategy={state.dhis2OrgUnitStrategy}
+                    setDhis2OrgUnitStrategy={state.setDhis2OrgUnitStrategy}
+                    disaggEnabled={state.disaggEnabled}
+                    selectedAgeCategory={state.selectedAgeCategory}
+                    pickedGenders={state.pickedGenders}
+                    selectedFull={state.selectedFull}
+                    selected={state.selected}
+                    disaggKeys={state.disaggKeys}
+                    dhis2IndicatorMap={state.dhis2IndicatorMap}
+                    updateDhis2DataElement={state.updateDhis2DataElement}
+                    updateDhis2Coc={state.updateDhis2Coc}
+                />
+
+                {saving ? <InlineLoading description="Building section SQL…" /> : null}
+            </Stack>
+        </Modal>
+    );
+}

package/src/components/report-sections/hooks/useAgeCategories.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { listAgeCategoriesWithGroups, type AgeCategoryOption } from '../../../resources/agegroup/agegroups.api';
+
+export function useAgeCategories(open: boolean) {
+    const [ageCategories, setAgeCategories] = React.useState<AgeCategoryOption[]>([]);
+    const [ageCatsLoading, setAgeCatsLoading] = React.useState(false);
+    const [ageCatsError, setAgeCatsError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        if (!open) return;
+
+        const ac = new AbortController();
+        setAgeCatsLoading(true);
+        setAgeCatsError(null);
+
+        listAgeCategoriesWithGroups(ac.signal)
+            .then((cats) => setAgeCategories(cats))
+            .catch((e: any) => setAgeCatsError(e?.message ?? 'Failed to load age categories'))
+            .finally(() => setAgeCatsLoading(false));
+
+        return () => ac.abort();
+    }, [open]);
+
+    return { ageCategories, ageCatsLoading, ageCatsError };
+}

package/src/components/report-sections/hooks/useSectionEditorState.ts

@@ -0,0 +1,306 @@
+import React from 'react';
+import type { AgeCategoryOption } from '../../../resources/agegroup/agegroups.api';
+import type { ReportSectionDto } from '../../../resources/report-section/report-sections.api';
+import type { Dhis2MappingV1, ReportSectionEditorMode, SectionIndicatorRef, SectionIndicatorType } from '../section-types';
+import { makeDisaggKey, safeParseJson } from '../section-utils';
+
+export function useSectionEditorState(args: {
+    open: boolean;
+    mode: ReportSectionEditorMode;
+    initialSection?: ReportSectionDto | null;
+    indicators: SectionIndicatorRef[];
+    ageCategories: AgeCategoryOption[];
+}) {
+    const { open, mode, initialSection, indicators, ageCategories } = args;
+    const isEdit = mode === 'edit';
+    React.useEffect(() => {
+        console.log('[hook] MOUNT');
+        return () => console.log('[hook] UNMOUNT');
+    }, []);
+
+    
+    const [name, setName] = React.useState('');
+    const [description, setDescription] = React.useState('');
+
+    const [disaggEnabled, setDisaggEnabled] = React.useState(false);
+    const [selectedAgeCategory, setSelectedAgeCategory] = React.useState<AgeCategoryOption | null>(null);
+    const [genderF, setGenderF] = React.useState(true);
+    const [genderM, setGenderM] = React.useState(true);
+
+    const [q, setQ] = React.useState('');
+    const [selected, setSelected] = React.useState<Array<{ id: string; type: SectionIndicatorType; sortOrder: number }>>(
+        [],
+    );
+
+    // DHIS2 mapping state
+    const [dhis2Enabled, setDhis2Enabled] = React.useState(false);
+    const [dhis2DatasetId, setDhis2DatasetId] = React.useState('');
+    const [dhis2PeriodType, setDhis2PeriodType] = React.useState('Monthly');
+    const [dhis2OrgUnitStrategy, setDhis2OrgUnitStrategy] = React.useState<'location' | 'fixed'>('location');
+
+    const [dhis2IndicatorMap, setDhis2IndicatorMap] = React.useState<
+        Record<string, { dataElementId: string; cocByDisagg: Record<string, string> }>
+    >({});
+
+    // For edit: resolve age category once loaded
+    const [pendingAgeCategoryUuid, setPendingAgeCategoryUuid] = React.useState<string | null>(null);
+
+    /**
+     * ✅ Fix: prevent edit hydration from overwriting user clicks.
+     * If parent passes a new initialSection object reference, the effect would re-run and reset everything.
+     */
+    const hydratedRef = React.useRef(false);
+
+    React.useEffect(() => {
+        if (!open) hydratedRef.current = false;
+    }, [open]);
+
+    // Reset only for create open
+    React.useEffect(() => {
+        if (!open) return;
+
+        if (!isEdit) {
+            setName('');
+            setDescription('');
+            setDisaggEnabled(false);
+            setSelectedAgeCategory(null);
+            setPendingAgeCategoryUuid(null);
+            setGenderF(true);
+            setGenderM(true);
+            setQ('');
+            setSelected([]);
+
+            setDhis2Enabled(false);
+            setDhis2DatasetId('');
+            setDhis2PeriodType('Monthly');
+            setDhis2OrgUnitStrategy('location');
+            setDhis2IndicatorMap({});
+        }
+    }, [open, isEdit]);
+
+    // Hydrate edit state (ONLY ONCE per modal open)
+    React.useEffect(() => {
+        if (!open || !isEdit || !initialSection) return;
+        if (hydratedRef.current) return;
+        hydratedRef.current = true;
+
+        setQ(''); // clear stale search
+
+        setName(initialSection.name ?? '');
+        setDescription(initialSection.description ?? '');
+
+        const cfg = safeParseJson(initialSection.configJson);
+        const dis = cfg?.disaggregation;
+
+        const disEnabled = Boolean(dis && dis.none !== true);
+        setDisaggEnabled(disEnabled);
+
+        if (disEnabled) {
+            setPendingAgeCategoryUuid(dis?.ageCategoryUuid ?? null);
+            const gs: Array<'F' | 'M'> = Array.isArray(dis?.genders) ? dis.genders : [];
+            setGenderF(gs.includes('F'));
+            setGenderM(gs.includes('M'));
+        } else {
+            setPendingAgeCategoryUuid(null);
+            setSelectedAgeCategory(null);
+            setGenderF(true);
+            setGenderM(true);
+        }
+
+        // indicators
+        const inds = Array.isArray(cfg?.indicators) ? cfg.indicators : [];
+        const sel = inds
+            .slice()
+            .sort((a: any, b: any) => Number(a.sortOrder ?? 0) - Number(b.sortOrder ?? 0))
+            .map((x: any, idx: number) => ({
+                id: String(x.indicatorUuid),
+                type: (x.kind as SectionIndicatorType) ?? 'BASE',
+                sortOrder: Number(x.sortOrder ?? idx + 1),
+            }));
+        setSelected(sel);
+
+        // DHIS2 mapping
+        const ex = cfg?.exchangeMappings?.dhis2;
+        const dh = ex && typeof ex === 'object' ? (ex as Dhis2MappingV1) : null;
+
+        if (dh?.enabled) {
+            setDhis2Enabled(true);
+            setDhis2DatasetId(dh.datasetId ?? '');
+            setDhis2PeriodType(dh.periodType ?? 'Monthly');
+            setDhis2OrgUnitStrategy((dh.orgUnitStrategy as any) ?? 'location');
+
+            const map: Record<string, { dataElementId: string; cocByDisagg: Record<string, string> }> = {};
+            for (const s of sel) map[s.id] = { dataElementId: '', cocByDisagg: {} };
+
+            for (const m of dh.indicatorMappings ?? []) {
+                const uuid = String(m.indicatorUuid);
+                map[uuid] = {
+                    dataElementId: m.dataElementId ?? '',
+                    cocByDisagg: (m.categoryOptionComboByDisagg ?? {}) as Record<string, string>,
+                };
+            }
+            setDhis2IndicatorMap(map);
+        } else {
+            setDhis2Enabled(false);
+            setDhis2DatasetId('');
+            setDhis2PeriodType('Monthly');
+            setDhis2OrgUnitStrategy('location');
+
+            const map: Record<string, { dataElementId: string; cocByDisagg: Record<string, string> }> = {};
+            for (const s of sel) map[s.id] = { dataElementId: '', cocByDisagg: {} };
+            setDhis2IndicatorMap(map);
+        }
+    }, [open, isEdit, initialSection]);
+
+    // Resolve pending age category uuid once categories loaded
+    React.useEffect(() => {
+        if (!pendingAgeCategoryUuid || !ageCategories.length) return;
+        const found = ageCategories.find((x) => x.uuid === pendingAgeCategoryUuid) ?? null;
+        if (found) setSelectedAgeCategory(found);
+    }, [pendingAgeCategoryUuid, ageCategories]);
+
+    const pickedGenders = React.useMemo(() => {
+        const gs: Array<'F' | 'M'> = [];
+        if (genderF) gs.push('F');
+        if (genderM) gs.push('M');
+        return gs;
+    }, [genderF, genderM]);
+
+    const hasBaseLike = React.useMemo(() => selected.some((x) => x.type === 'BASE' || x.type === 'COMPOSITE'), [selected]);
+
+    const disaggMissing = hasBaseLike && (!disaggEnabled || !selectedAgeCategory?.code || pickedGenders.length === 0);
+
+    const available = React.useMemo(() => {
+        const s = q.trim().toLowerCase();
+        return indicators.filter((i) => !s || i.name.toLowerCase().includes(s) || i.code.toLowerCase().includes(s));
+    }, [indicators, q]);
+
+    const selectedFull = React.useMemo(() => {
+        const setIds = new Set(selected.map((x) => x.id));
+        return indicators.filter((i) => setIds.has(i.id));
+    }, [selected, indicators]);
+
+    const isSelected = (id: string) => selected.some((x) => x.id === id);
+
+    const disaggKeys = React.useMemo(() => {
+        if (!disaggEnabled || !selectedAgeCategory || pickedGenders.length === 0) return [];
+        const ages = (selectedAgeCategory.ageGroups ?? []).map((ag: any) => ag.label);
+        const keys: Array<{ key: string; ageGroup: string; gender: 'F' | 'M' }> = [];
+        for (const a of ages) {
+            for (const g of pickedGenders) {
+                keys.push({ key: makeDisaggKey(a, g), ageGroup: a, gender: g });
+            }
+        }
+        return keys;
+    }, [disaggEnabled, selectedAgeCategory, pickedGenders]);
+
+    const toggleIndicator = React.useCallback(
+        (i: SectionIndicatorRef, checked: boolean) => {
+            console.log('[hook] toggleIndicator called', { id: i.id, checked });
+
+            setSelected((prev) => {
+                console.log('[hook] setSelected(prev) BEFORE', prev.map((p) => p.id));
+
+                let next;
+                if (checked) {
+                    if (prev.some((x) => x.id === i.id)) {
+                        next = prev;
+                    } else {
+                        const nextSort = prev.length + 1;
+                        next = [...prev, { id: i.id, type: i.type, sortOrder: nextSort }];
+                    }
+                } else {
+                    const kept = prev.filter((x) => x.id !== i.id);
+                    next = kept.map((x, idx) => ({ ...x, sortOrder: idx + 1 }));
+                }
+
+                console.log('[hook] setSelected(prev) AFTER', next.map((p) => p.id));
+                return next;
+            });
+
+            // keep existing DHIS2 map logic...
+        },
+        [],
+    );
+
+    const moveSelected = React.useCallback((id: string, dir: -1 | 1) => {
+        setSelected((prev) => {
+            const list = prev.slice().sort((a, b) => a.sortOrder - b.sortOrder);
+            const idx = list.findIndex((x) => x.id === id);
+            if (idx < 0) return prev;
+            const j = idx + dir;
+            if (j < 0 || j >= list.length) return prev;
+            const tmp = list[idx];
+            list[idx] = list[j];
+            list[j] = tmp;
+            return list.map((x, k) => ({ ...x, sortOrder: k + 1 }));
+        });
+    }, []);
+
+    const updateDhis2DataElement = React.useCallback((indicatorId: string, value: string) => {
+        setDhis2IndicatorMap((prev) => ({
+            ...prev,
+            [indicatorId]: {
+                ...(prev[indicatorId] ?? { dataElementId: '', cocByDisagg: {} }),
+                dataElementId: value,
+            },
+        }));
+    }, []);
+
+    const updateDhis2Coc = React.useCallback((indicatorId: string, disaggKey: string, value: string) => {
+        setDhis2IndicatorMap((prev) => ({
+            ...prev,
+            [indicatorId]: {
+                ...(prev[indicatorId] ?? { dataElementId: '', cocByDisagg: {} }),
+                cocByDisagg: {
+                    ...((prev[indicatorId]?.cocByDisagg ?? {}) as Record<string, string>),
+                    [disaggKey]: value,
+                },
+            },
+        }));
+    }, []);
+
+    return {
+        isEdit,
+        name,
+        setName,
+        description,
+        setDescription,
+
+        disaggEnabled,
+        setDisaggEnabled,
+        selectedAgeCategory,
+        setSelectedAgeCategory,
+        genderF,
+        setGenderF,
+        genderM,
+        setGenderM,
+
+        q,
+        setQ,
+        selected,
+        setSelected,
+        available,
+        selectedFull,
+        isSelected,
+        toggleIndicator,
+        moveSelected,
+
+        pickedGenders,
+        disaggMissing,
+        disaggKeys,
+
+        dhis2Enabled,
+        setDhis2Enabled,
+        dhis2DatasetId,
+        setDhis2DatasetId,
+        dhis2PeriodType,
+        setDhis2PeriodType,
+        dhis2OrgUnitStrategy,
+        setDhis2OrgUnitStrategy,
+        dhis2IndicatorMap,
+        setDhis2IndicatorMap,
+        updateDhis2DataElement,
+        updateDhis2Coc,
+    };
+}