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

package/src/components/report-sections/panels/Dhis2MappingPanel.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Toggle, TextInput, InlineNotification } from '@carbon/react';
+import type { SectionIndicatorRef } from '../section-types';
+
+export function Dhis2MappingPanel(props: {
+    dhis2Enabled: boolean;
+    setDhis2Enabled: (v: boolean) => void;
+
+    dhis2DatasetId: string;
+    setDhis2DatasetId: (v: string) => void;
+
+    dhis2PeriodType: string;
+    setDhis2PeriodType: (v: string) => void;
+
+    dhis2OrgUnitStrategy: 'location' | 'fixed';
+    setDhis2OrgUnitStrategy: (v: 'location' | 'fixed') => void;
+
+    disaggEnabled: boolean;
+    selectedAgeCategory: any;
+    pickedGenders: Array<'F' | 'M'>;
+
+    selectedFull: SectionIndicatorRef[];
+    selected: Array<{ id: string; sortOrder: number }>;
+    disaggKeys: Array<{ key: string; ageGroup: string; gender: 'F' | 'M' }>;
+
+    dhis2IndicatorMap: Record<string, { dataElementId: string; cocByDisagg: Record<string, string> }>;
+    updateDhis2DataElement: (indicatorId: string, value: string) => void;
+    updateDhis2Coc: (indicatorId: string, disaggKey: string, value: string) => void;
+}) {
+    return (
+        <>
+            <hr style={{ border: 0, borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }} />
+
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem' }}>
+                <div style={{ fontWeight: 600 }}>DHIS2 Mapping</div>
+                <Toggle
+                    id="dhis2-toggle"
+                    labelText=""
+                    toggled={props.dhis2Enabled}
+                    onToggle={(v) => props.setDhis2Enabled(Boolean(v))}
+                />
+            </div>
+
+            <div style={{ opacity: 0.8 }}>Map section indicators to DHIS2 data elements and category option combos (Age × Gender).</div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.75rem' }}>
+                <TextInput
+                    id="dhis2-dataset"
+                    labelText="Dataset UID (optional)"
+                    value={props.dhis2DatasetId}
+                    disabled={!props.dhis2Enabled}
+                    onChange={(e) => props.setDhis2DatasetId((e.target as HTMLInputElement).value)}
+                />
+                <TextInput
+                    id="dhis2-period"
+                    labelText="Period type"
+                    value={props.dhis2PeriodType}
+                    disabled={!props.dhis2Enabled}
+                    onChange={(e) => props.setDhis2PeriodType((e.target as HTMLInputElement).value)}
+                />
+                <TextInput
+                    id="dhis2-orgunit"
+                    labelText="OrgUnit strategy"
+                    value={props.dhis2OrgUnitStrategy}
+                    disabled={!props.dhis2Enabled}
+                    onChange={(e) => props.setDhis2OrgUnitStrategy(((e.target as HTMLInputElement).value as any) || 'location')}
+                />
+            </div>
+
+            {props.dhis2Enabled ? (
+                props.disaggEnabled && props.selectedAgeCategory && props.pickedGenders.length ? (
+                    <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 6, padding: '0.75rem' }}>
+                        <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Indicator mappings</div>
+
+                        {props.selectedFull.length === 0 ? (
+                            <div style={{ opacity: 0.75 }}>Select indicators first to map them.</div>
+                        ) : (
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                                {props.selectedFull
+                                    .slice()
+                                    .sort((a, b) => {
+                                        const sa = props.selected.find((x) => x.id === a.id)?.sortOrder ?? 0;
+                                        const sb = props.selected.find((x) => x.id === b.id)?.sortOrder ?? 0;
+                                        return sa - sb;
+                                    })
+                                    .map((ind) => {
+                                        const m = props.dhis2IndicatorMap[ind.id] ?? { dataElementId: '', cocByDisagg: {} };
+
+                                        return (
+                                            <div key={`dhis2-${ind.id}`} style={{ borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)', paddingTop: '0.75rem' }}>
+                                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem' }}>
+                                                    <div style={{ minWidth: 0 }}>
+                                                        <div style={{ fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                                            {ind.name} <span style={{ opacity: 0.7 }}>({ind.code})</span>
+                                                        </div>
+                                                        <div style={{ fontSize: '0.85rem', opacity: 0.75 }}>Type: {ind.type}</div>
+                                                    </div>
+                                                    <div style={{ width: '40%' }}>
+                                                        <TextInput
+                                                            id={`dhis2-de-${ind.id}`}
+                                                            labelText="Data Element UID"
+                                                            value={m.dataElementId}
+                                                            onChange={(e) => props.updateDhis2DataElement(ind.id, (e.target as HTMLInputElement).value)}
+                                                        />
+                                                    </div>
+                                                </div>
+
+                                                <div style={{ marginTop: '0.75rem', overflowX: 'auto' }}>
+                                                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                                                        <thead>
+                                                        <tr>
+                                                            <th style={{ textAlign: 'left', padding: '0.5rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
+                                                                Disaggregation bucket
+                                                            </th>
+                                                            <th style={{ textAlign: 'left', padding: '0.5rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
+                                                                Category Option Combo UID
+                                                            </th>
+                                                        </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                        {props.disaggKeys.map((k) => (
+                                                            <tr key={`${ind.id}-${k.key}`}>
+                                                                <td style={{ padding: '0.5rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
+                                                                    {k.ageGroup} {k.gender}
+                                                                </td>
+                                                                <td style={{ padding: '0.5rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
+                                                                    <TextInput
+                                                                        id={`dhis2-coc-${ind.id}-${k.key}`}
+                                                                        labelText=""
+                                                                        hideLabel
+                                                                        value={m.cocByDisagg[k.key] ?? ''}
+                                                                        onChange={(e) => props.updateDhis2Coc(ind.id, k.key, (e.target as HTMLInputElement).value)}
+                                                                    />
+                                                                </td>
+                                                            </tr>
+                                                        ))}
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <InlineNotification
+                        kind="warning"
+                        lowContrast
+                        title="DHIS2 mapping requires disaggregation"
+                        subtitle="Enable disaggregation and select Age Category + genders before mapping to DHIS2 category option combos."
+                    />
+                )
+            ) : null}
+        </>
+    );
+}

package/src/components/report-sections/panels/DisaggregationPanel.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Toggle, ComboBox, Checkbox, InlineNotification } from '@carbon/react';
+import type { AgeCategoryOption } from '../../../resources/agegroup/agegroups.api';
+
+function readChecked(arg1: any, arg2: any): boolean {
+    if (typeof arg1 === 'boolean') return arg1;
+    if (typeof arg2?.checked === 'boolean') return arg2.checked;
+    return Boolean(arg1?.target?.checked);
+}
+
+export function DisaggregationPanel(props: {
+    /** NEW: ensures unique DOM ids across create/edit modals */
+    idPrefix: string;
+
+    disaggEnabled: boolean;
+    setDisaggEnabled: (v: boolean) => void;
+
+    ageCategories: AgeCategoryOption[];
+    selectedAgeCategory: AgeCategoryOption | null;
+    setSelectedAgeCategory: (v: AgeCategoryOption | null) => void;
+
+    genderF: boolean;
+    setGenderF: (v: boolean) => void;
+    genderM: boolean;
+    setGenderM: (v: boolean) => void;
+
+    pickedGenders: Array<'F' | 'M'>;
+    disaggMissing: boolean;
+}) {
+    const ageCategoryId = `${props.idPrefix}-age-category`;
+    const genderFId = `${props.idPrefix}-gender-f`;
+    const genderMId = `${props.idPrefix}-gender-m`;
+    const disaggToggleId = `${props.idPrefix}-disagg-toggle`;
+
+    return (
+        <>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem' }}>
+                <div style={{ fontWeight: 600 }}>Disaggregation</div>
+                <Toggle
+                    id={disaggToggleId}
+                    labelText=""
+                    toggled={props.disaggEnabled}
+                    onToggle={(v) => props.setDisaggEnabled(Boolean(v))}
+                />
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
+                <ComboBox
+                    id={ageCategoryId}
+                    titleText="Age Category"
+                    placeholder="Select age category"
+                    items={props.ageCategories}
+                    itemToString={(item) => (item ? item.label : '')}
+                    selectedItem={props.selectedAgeCategory}
+                    onChange={({ selectedItem }) => props.setSelectedAgeCategory((selectedItem as any) ?? null)}
+                    disabled={!props.disaggEnabled}
+                />
+
+                <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 6, padding: '0.75rem' }}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Genders</div>
+
+                    <div style={{ display: 'flex', gap: '1rem' }}>
+                        <Checkbox
+                            id={genderFId}
+                            labelText="F"
+                            checked={props.genderF}
+                            disabled={!props.disaggEnabled}
+                            onChange={(a1: any, a2: any) => props.setGenderF(readChecked(a1, a2))}
+                        />
+                        <Checkbox
+                            id={genderMId}
+                            labelText="M"
+                            checked={props.genderM}
+                            disabled={!props.disaggEnabled}
+                            onChange={(a1: any, a2: any) => props.setGenderM(readChecked(a1, a2))}
+                        />
+                    </div>
+
+                    {props.disaggEnabled && props.pickedGenders.length === 0 ? (
+                        <div style={{ marginTop: '0.25rem', fontSize: '0.75rem', color: 'var(--cds-text-error, #da1e28)' }}>
+                            Pick at least one gender
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+
+            {props.disaggMissing ? (
+                <InlineNotification
+                    kind="error"
+                    lowContrast
+                    title="Missing disaggregation"
+                    subtitle="BASE/COMPOSITE indicators require section disaggregation (age category + gender)."
+                />
+            ) : null}
+        </>
+    );
+}

package/src/components/report-sections/panels/IndicatorPickerPanel.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { Search, Checkbox, Tag, Button } from '@carbon/react';
+import { ChevronRight, Add, ArrowUp, ArrowDown, TrashCan } from '@carbon/icons-react';
+import type { SectionIndicatorRef } from '../section-types';
+
+function readChecked(arg1: any, arg2: any): boolean {
+    if (typeof arg1 === 'boolean') return arg1;
+    if (typeof arg2?.checked === 'boolean') return arg2.checked;
+    return Boolean(arg1?.target?.checked);
+}
+
+export function IndicatorPickerPanel(props: {
+    q: string;
+    setQ: (v: string) => void;
+
+    available: SectionIndicatorRef[];
+    selectedFull: SectionIndicatorRef[];
+    selected: Array<{ id: string; type: any; sortOrder: number }>;
+
+    isSelected: (id: string) => boolean;
+    toggleIndicator: (i: SectionIndicatorRef, checked: boolean) => void;
+    moveSelected: (id: string, dir: -1 | 1) => void;
+
+    /** NEW: ensures unique DOM ids across create/edit modals */
+    idPrefix: string;
+}) {
+    return (
+        <>
+            <div style={{ marginTop: '0.75rem' }}>
+                <Search
+                    size="lg"
+                    labelText="Search"
+                    placeholder="Search indicators"
+                    value={props.q}
+                    onChange={(e) => props.setQ((e.target as HTMLInputElement).value)}
+                />
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem', marginTop: '0.75rem' }}>
+                {/* Add Indicators */}
+                <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 6, padding: '0.75rem' }}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Add Indicators</div>
+
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                        {props.available.map((i) => {
+                            const domId = `${props.idPrefix}-add-${i.id}`;
+
+                            return (
+                                <div
+                                    key={i.id}
+                                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem' }}
+                                >
+                                    <Checkbox
+                                        id={domId}
+                                        labelText={i.name}
+                                        checked={props.isSelected(i.id)}
+                                        onChange={(a1: any, a2: any) => props.toggleIndicator(i, readChecked(a1, a2))}
+                                    />
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                        <Tag size="sm" type="blue">
+                                            {i.type}
+                                        </Tag>
+                                        <ChevronRight size={16} />
+                                    </div>
+                                </div>
+                            );
+                        })}
+
+                        <Button size="sm" kind="ghost" renderIcon={Add}>
+                            Select Indicator
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Selected Indicators */}
+                <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 6, padding: '0.75rem' }}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Selected Indicators</div>
+
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                        {props.selectedFull.length === 0 ? (
+                            <div style={{ opacity: 0.75 }}>No indicators selected yet.</div>
+                        ) : (
+                            props.selectedFull
+                                .slice()
+                                .sort((a, b) => {
+                                    const sa = props.selected.find((x) => x.id === a.id)?.sortOrder ?? 0;
+                                    const sb = props.selected.find((x) => x.id === b.id)?.sortOrder ?? 0;
+                                    return sa - sb;
+                                })
+                                .map((i, idx) => (
+                                    <div
+                                        key={i.id}
+                                        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem' }}
+                                    >
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', minWidth: 0 }}>
+                                            <Tag size="sm" type="blue">
+                                                {i.type}
+                                            </Tag>
+                                            <span style={{ fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                        {i.name}
+                      </span>
+                                            <Tag size="sm" type="gray">
+                                                {i.code}
+                                            </Tag>
+                                        </div>
+
+                                        <div style={{ display: 'flex', gap: '0.25rem' }}>
+                                            <Button
+                                                kind="ghost"
+                                                size="sm"
+                                                hasIconOnly
+                                                iconDescription="Move up"
+                                                renderIcon={ArrowUp}
+                                                disabled={idx === 0}
+                                                onClick={() => props.moveSelected(i.id, -1)}
+                                            />
+                                            <Button
+                                                kind="ghost"
+                                                size="sm"
+                                                hasIconOnly
+                                                iconDescription="Move down"
+                                                renderIcon={ArrowDown}
+                                                disabled={idx === props.selectedFull.length - 1}
+                                                onClick={() => props.moveSelected(i.id, 1)}
+                                            />
+                                            <Button
+                                                kind="ghost"
+                                                size="sm"
+                                                hasIconOnly
+                                                iconDescription="Remove"
+                                                renderIcon={TrashCan}
+                                                onClick={() => props.toggleIndicator(i, false)}
+                                            />
+                                        </div>
+                                    </div>
+                                ))
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

package/src/components/report-sections/panels/SectionBasicsPanel.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextInput, TextArea } from '@carbon/react';
+
+export function SectionBasicsPanel(props: {
+    name: string;
+    setName: (v: string) => void;
+    description: string;
+    setDescription: (v: string) => void;
+}) {
+    return (
+        <>
+            <TextInput
+                id="section-name"
+                labelText="Section Name"
+                value={props.name}
+                onChange={(e) => props.setName((e.target as HTMLInputElement).value)}
+            />
+
+            <TextArea
+                id="section-desc"
+                labelText="(Optional) Description"
+                value={props.description}
+                onChange={(e) => props.setDescription((e.target as HTMLTextAreaElement).value)}
+            />
+        </>
+    );
+}