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

package/src/components/indicators/create-composite-base-indicator-modal.component.tsx

@@ -0,0 +1,297 @@
+import React from 'react';
+import { Modal, Stack, InlineNotification } from '@carbon/react';
+
+import { getIndicator, type IndicatorDto } from '../../resources/indicator/indicators.api';
+
+import type { BaseIndicatorOption, CompositeOperator } from './types/composite-indicator.types';
+
+import CompositeIndicatorBasicsSection from './sections/composite-indicator-basics.section';
+import CompositeIndicatorPickerSection from './sections/composite-indicator-picker.section';
+import CompositeIndicatorSqlPreviewSection from './sections/composite-indicator-sql-preview.section';
+
+import {
+    countSqlToPopulationSql,
+    buildCompositeCountSql,
+    tryGetPatientIdColumnFromConfig,
+    tryGetCountSqlFromIndicator,
+} from './utils/composite-indicator-sql.utils';
+
+type Props = {
+    open: boolean;
+    mode?: 'create' | 'edit';
+    initial?: IndicatorDto | null;
+    onClose: () => void;
+    onCreate: (payload: Partial<IndicatorDto>) => Promise<void>;
+    onUpdate?: (uuid: string, payload: Partial<IndicatorDto>) => Promise<void>;
+    onSaved: () => void;
+    baseIndicators: BaseIndicatorOption[];
+};
+
+type CompositeIndicatorAuthoring = {
+    version: 1;
+    unit: 'Patients' | 'Encounters';
+    operator: CompositeOperator;
+    indicatorAId: string;
+    indicatorBId: string;
+    indicatorACode?: string;
+    indicatorBCode?: string;
+    sqlPreview: string;
+};
+
+function safeParseJson<T = any>(input?: string | null): T | null {
+    if (!input) return null;
+    try {
+        return JSON.parse(input) as T;
+    } catch {
+        return null;
+    }
+}
+
+const toCode = (name: string) =>
+    name
+        .toUpperCase()
+        .replace(/[^A-Z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .slice(0, 50);
+
+const CreateCompositeBaseIndicatorModal: React.FC<Props> = ({
+                                                                open,
+                                                                mode = 'create',
+                                                                initial,
+                                                                onClose,
+                                                                onCreate,
+                                                                onUpdate,
+                                                                onSaved,
+                                                                baseIndicators,
+                                                            }) => {
+    // ✅ IMPORTANT: no defaults for create mode
+    const [name, setName] = React.useState('');
+    const [code, setCode] = React.useState('');
+    const [description, setDescription] = React.useState('');
+
+    const [indicatorAId, setIndicatorAId] = React.useState('');
+    const [indicatorBId, setIndicatorBId] = React.useState('');
+    const [operator, setOperator] = React.useState<CompositeOperator>('AND');
+
+    const [loadingA, setLoadingA] = React.useState(false);
+    const [loadingB, setLoadingB] = React.useState(false);
+    const [errA, setErrA] = React.useState<string | null>(null);
+    const [errB, setErrB] = React.useState<string | null>(null);
+
+    const [indA, setIndA] = React.useState<IndicatorDto | null>(null);
+    const [indB, setIndB] = React.useState<IndicatorDto | null>(null);
+
+    // reset / initialize on open
+    React.useEffect(() => {
+        if (!open) return;
+
+        // EDIT: hydrate from selected composite indicator
+        if (mode === 'edit' && initial?.uuid) {
+            const cfg = safeParseJson<any>(initial.configJson) ?? {};
+
+            setName(initial.name ?? '');
+            setCode(initial.code ?? '');
+            setDescription(initial.description ?? '');
+
+            // support both indicatorAId/indicatorBId and indicatorAUuid/indicatorBUuid
+            setIndicatorAId(String(cfg.indicatorAId ?? cfg.indicatorAUuid ?? ''));
+            setIndicatorBId(String(cfg.indicatorBId ?? cfg.indicatorBUuid ?? ''));
+            setOperator((String(cfg.operator ?? 'AND').toUpperCase() as CompositeOperator) ?? 'AND');
+
+            setErrA(null);
+            setErrB(null);
+            setIndA(null);
+            setIndB(null);
+            return;
+        }
+
+        // CREATE: start blank so users don't confuse it with edit
+        setName('');
+        setCode('');
+        setDescription('');
+        setIndicatorAId('');
+        setIndicatorBId('');
+        setOperator('AND');
+        setErrA(null);
+        setErrB(null);
+        setIndA(null);
+        setIndB(null);
+    }, [open, mode, initial?.uuid]);
+
+    const AOpt = React.useMemo(() => baseIndicators.find((x) => x.id === indicatorAId) ?? null, [baseIndicators, indicatorAId]);
+    const BOpt = React.useMemo(() => baseIndicators.find((x) => x.id === indicatorBId) ?? null, [baseIndicators, indicatorBId]);
+
+    const samePick = Boolean(indicatorAId && indicatorBId && indicatorAId === indicatorBId);
+
+    const inferredUnit: 'Patients' | 'Encounters' = React.useMemo(() => 'Patients', []);
+
+    // load full indicators for A/B
+    React.useEffect(() => {
+        if (!open) return;
+        if (!indicatorAId) {
+            setIndA(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingA(true);
+        setErrA(null);
+
+        getIndicator(indicatorAId, ac.signal, 'full')
+            .then((full) => setIndA(full))
+            .catch((e: any) => setErrA(e?.message ?? 'Failed to load indicator A'))
+            .finally(() => setLoadingA(false));
+
+        return () => ac.abort();
+    }, [open, indicatorAId]);
+
+    React.useEffect(() => {
+        if (!open) return;
+        if (!indicatorBId) {
+            setIndB(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingB(true);
+        setErrB(null);
+
+        getIndicator(indicatorBId, ac.signal, 'full')
+            .then((full) => setIndB(full))
+            .catch((e: any) => setErrB(e?.message ?? 'Failed to load indicator B'))
+            .finally(() => setLoadingB(false));
+
+        return () => ac.abort();
+    }, [open, indicatorBId]);
+
+    const populationSqlA = React.useMemo(() => {
+        if (!indA) return '';
+        const { sql: countSql } = tryGetCountSqlFromIndicator(indA);
+        const pidCol = tryGetPatientIdColumnFromConfig(indA);
+        if (!countSql) return '';
+        return countSqlToPopulationSql(countSql, pidCol, inferredUnit);
+    }, [indA, inferredUnit]);
+
+    const populationSqlB = React.useMemo(() => {
+        if (!indB) return '';
+        const { sql: countSql } = tryGetCountSqlFromIndicator(indB);
+        const pidCol = tryGetPatientIdColumnFromConfig(indB);
+        if (!countSql) return '';
+        return countSqlToPopulationSql(countSql, pidCol, inferredUnit);
+    }, [indB, inferredUnit]);
+
+    const compositeSql = React.useMemo(() => {
+        if (!populationSqlA || !populationSqlB) return '';
+        return buildCompositeCountSql({
+            unit: inferredUnit,
+            operator,
+            populationSqlA,
+            populationSqlB,
+        });
+    }, [populationSqlA, populationSqlB, inferredUnit, operator]);
+
+    const canSubmit =
+        Boolean(name.trim()) &&
+        Boolean(indicatorAId) &&
+        Boolean(indicatorBId) &&
+        !samePick &&
+        Boolean(compositeSql.trim());
+
+    const submit = async () => {
+        if (!canSubmit) return;
+
+        const finalCode = code.trim() ? code.trim().toUpperCase() : toCode(name);
+
+        const authoring: CompositeIndicatorAuthoring = {
+            version: 1,
+            unit: inferredUnit,
+            operator,
+            indicatorAId,
+            indicatorBId,
+            indicatorACode: AOpt?.code,
+            indicatorBCode: BOpt?.code,
+            sqlPreview: compositeSql,
+        };
+
+        const payload: Partial<IndicatorDto> = {
+            name: name.trim(),
+            code: finalCode,
+            description: description.trim() || undefined,
+            kind: 'COMPOSITE',
+            defaultValueType: 'NUMBER',
+            themeUuid: null,
+            configJson: JSON.stringify(authoring, null, 2),
+            sqlTemplate: compositeSql,
+        };
+
+        if (mode === 'edit' && initial?.uuid) {
+            if (!onUpdate) throw new Error('onUpdate handler is required for edit mode');
+            await onUpdate(initial.uuid, payload);
+        } else {
+            await onCreate(payload);
+        }
+
+        onSaved();
+    };
+
+    return (
+        <Modal
+            open={open}
+            onRequestClose={onClose}
+            modalHeading={mode === 'edit' ? 'Edit Composite Indicator' : 'Create Composite Indicator'}
+            primaryButtonText={mode === 'edit' ? 'Update Indicator' : 'Save Indicator'}
+            secondaryButtonText="Cancel"
+            onRequestSubmit={submit}
+            primaryButtonDisabled={!canSubmit}
+            size="lg"
+        >
+            <Stack gap={5}>
+                <div style={{ opacity: 0.8 }}>
+                    Select two base indicators, pick an operator, and we generate a composite SQL preview.
+                </div>
+
+                {samePick ? (
+                    <InlineNotification
+                        kind="error"
+                        lowContrast
+                        title="Pick two different indicators"
+                        subtitle="Indicator A and Indicator B cannot be the same."
+                    />
+                ) : null}
+
+                <CompositeIndicatorBasicsSection
+                    value={{ name, code, description }}
+                    onChange={(next) => {
+                        setName(next.name);
+                        setCode(next.code);
+                        setDescription(next.description);
+                    }}
+                />
+
+                <hr style={{ border: 0, borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }} />
+
+                <CompositeIndicatorPickerSection
+                    baseIndicators={baseIndicators}
+                    indicatorAId={indicatorAId}
+                    indicatorBId={indicatorBId}
+                    operator={operator}
+                    inferredUnit={inferredUnit}
+                    samePick={samePick}
+                    onChangeA={setIndicatorAId}
+                    onChangeB={setIndicatorBId}
+                    onChangeOperator={setOperator}
+                />
+
+                <CompositeIndicatorSqlPreviewSection
+                    loading={loadingA || loadingB}
+                    errA={errA}
+                    errB={errB}
+                    compositeSql={compositeSql}
+                    show={Boolean(AOpt && BOpt)}
+                />
+            </Stack>
+        </Modal>
+    );
+};
+
+export default CreateCompositeBaseIndicatorModal;

package/src/components/indicators/create-final-indicator-modal.component.tsx

@@ -0,0 +1,260 @@
+import React from 'react';
+import { Modal, Stack, InlineLoading, InlineNotification } from '@carbon/react';
+
+import type { IndicatorDto } from '../../resources/indicator/indicators.api';
+import { getIndicator } from '../../resources/indicator/indicators.api';
+
+import type { BaseIndicatorOption } from './types/composite-indicator.types';
+import { listAgeCategoriesWithGroups, type AgeCategoryOption } from '../../resources/agegroup/agegroups.api';
+
+import FinalIndicatorBasicsSection from './sections/final-indicator-basics.section';
+import FinalIndicatorPickerSection from './sections/final-indicator-picker.section';
+import FinalIndicatorDisaggregationSection from './sections/final-indicator-disaggregation.section';
+import FinalIndicatorResultsPreviewSection from './sections/final-indicator-results-preview.section';
+
+import { buildFinalIndicatorSql, type FinalIndicatorAuthoringV1 } from './utils/final-indicator-sql.utils';
+
+type Props = {
+    open: boolean;
+    mode?: 'create' | 'edit';
+    initial?: IndicatorDto | null;
+
+    baseIndicators: BaseIndicatorOption[];
+
+    onClose: () => void;
+
+    onCreate: (payload: Partial<IndicatorDto>) => Promise<void>;
+    onUpdate?: (uuid: string, payload: Partial<IndicatorDto>) => Promise<void>;
+    onSaved: () => void;
+};
+
+function safeParseJson<T = any>(input?: string | null): T | null {
+    if (!input) return null;
+    try {
+        return JSON.parse(input) as T;
+    } catch {
+        return null;
+    }
+}
+
+const toCode = (name: string) =>
+    name
+        .toUpperCase()
+        .replace(/[^A-Z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .slice(0, 50);
+
+function todayIso(): string {
+    const d = new Date();
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+}
+
+export default function CreateFinalIndicatorModal({
+                                                      open,
+                                                      mode = 'create',
+                                                      initial,
+                                                      baseIndicators,
+                                                      onClose,
+                                                      onCreate,
+                                                      onUpdate,
+                                                      onSaved,
+                                                  }: Props) {
+    const [ageCategories, setAgeCategories] = React.useState<AgeCategoryOption[]>([]);
+    const [loadingCats, setLoadingCats] = React.useState(false);
+    const [catsError, setCatsError] = React.useState<string | null>(null);
+
+    const [basics, setBasics] = React.useState({ name: '', code: '', description: '' });
+
+    const [baseIndicatorId, setBaseIndicatorId] = React.useState('');
+    const [ageCategoryCode, setAgeCategoryCode] = React.useState('');
+    const [genders, setGenders] = React.useState<Array<'F' | 'M'>>(['F', 'M']);
+
+    const [baseFull, setBaseFull] = React.useState<IndicatorDto | null>(null);
+    const [loadingBase, setLoadingBase] = React.useState(false);
+    const [baseError, setBaseError] = React.useState<string | null>(null);
+
+    const [sqlPreview, setSqlPreview] = React.useState('');
+
+    // ✅ Preview parameters (must be inside component)
+    const [previewStartDate, setPreviewStartDate] = React.useState('2025-01-01');
+    const [previewEndDate, setPreviewEndDate] = React.useState(todayIso);
+
+    // load categories when modal opens
+    React.useEffect(() => {
+        if (!open) return;
+        const ac = new AbortController();
+
+        setLoadingCats(true);
+        setCatsError(null);
+
+        listAgeCategoriesWithGroups(ac.signal)
+            .then((items) => setAgeCategories(items))
+            .catch((e: any) => setCatsError(e?.message ?? 'Failed to load age categories'))
+            .finally(() => setLoadingCats(false));
+
+        return () => ac.abort();
+    }, [open]);
+
+    // init create vs edit
+    React.useEffect(() => {
+        if (!open) return;
+
+        if (mode === 'edit' && initial?.uuid) {
+            const cfg = safeParseJson<Partial<FinalIndicatorAuthoringV1>>(initial.configJson) ?? {};
+
+            setBasics({
+                name: initial.name ?? '',
+                code: initial.code ?? '',
+                description: initial.description ?? '',
+            });
+
+            setBaseIndicatorId(String(cfg.baseIndicatorId ?? ''));
+            setAgeCategoryCode(String(cfg.ageGroupSetCode ?? cfg.ageCategoryCode ?? '')); // tolerate both keys
+            setGenders((cfg.genders as any) ?? ['F', 'M']);
+
+            setSqlPreview(String(cfg.sqlPreview ?? initial.sqlTemplate ?? ''));
+
+            // keep preview dates as-is (user controlled)
+            return;
+        }
+
+        // create defaults
+        setBasics({ name: '', code: '', description: '' });
+        setBaseIndicatorId('');
+        setAgeCategoryCode('');
+        setGenders(['F', 'M']);
+        setSqlPreview('');
+        setBaseFull(null);
+        setBaseError(null);
+        // preview dates remain (or you can reset here if desired)
+    }, [open, mode, initial?.uuid]);
+
+    // load full base indicator
+    React.useEffect(() => {
+        if (!open) return;
+        if (!baseIndicatorId) {
+            setBaseFull(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingBase(true);
+        setBaseError(null);
+
+        getIndicator(baseIndicatorId, ac.signal, 'full')
+            .then((full) => setBaseFull(full))
+            .catch((e: any) => setBaseError(e?.message ?? 'Failed to load selected base indicator'))
+            .finally(() => setLoadingBase(false));
+
+        return () => ac.abort();
+    }, [open, baseIndicatorId]);
+
+    // compute sql preview
+    React.useEffect(() => {
+        if (!open) return;
+
+        if (!baseFull || !ageCategoryCode) {
+            setSqlPreview('');
+            return;
+        }
+
+        const sql = buildFinalIndicatorSql({
+            baseIndicator: baseFull,
+            ageCategoryCode,
+            genders,
+        });
+
+        setSqlPreview(sql);
+    }, [open, baseFull, ageCategoryCode, genders]);
+
+    const canSubmit =
+        Boolean(basics.name.trim()) &&
+        Boolean(baseIndicatorId) &&
+        Boolean(ageCategoryCode) &&
+        Boolean(sqlPreview.trim());
+
+    const submit = async () => {
+        if (!canSubmit || !baseFull) return;
+
+        const finalCode = basics.code.trim() ? basics.code.trim().toUpperCase() : toCode(basics.name);
+
+        // store both keys for forward compatibility (you can later remove ageGroupSetCode)
+        const authoring: any = {
+            version: 1,
+            baseIndicatorId,
+            ageCategoryCode,
+            ageGroupSetCode: ageCategoryCode,
+            genders,
+            sqlPreview,
+        };
+
+        const payload: Partial<IndicatorDto> = {
+            name: basics.name.trim(),
+            code: finalCode,
+            description: basics.description.trim() || undefined,
+            kind: 'FINAL',
+            defaultValueType: 'NUMBER',
+            themeUuid: null,
+            configJson: JSON.stringify(authoring, null, 2),
+            sqlTemplate: sqlPreview,
+        };
+
+        if (mode === 'edit' && initial?.uuid) {
+            if (!onUpdate) throw new Error('onUpdate handler is required for edit mode');
+            await onUpdate(initial.uuid, payload);
+        } else {
+            await onCreate(payload);
+        }
+
+        onSaved();
+    };
+
+
+    return (
+        <Modal
+            open={open}
+            onRequestClose={onClose}
+            modalHeading={mode === 'edit' ? 'Edit Final Indicator' : 'Create Final Indicator'}
+            primaryButtonText={mode === 'edit' ? 'Update Indicator' : 'Save Indicator'}
+            secondaryButtonText="Cancel"
+            onRequestSubmit={submit}
+            primaryButtonDisabled={!canSubmit}
+            size="lg"
+        >
+            <Stack gap={6}>
+                {loadingCats ? <InlineLoading description="Loading age categories…" /> : null}
+                {catsError ? <InlineNotification kind="error" lowContrast title="Age categories" subtitle={catsError} /> : null}
+
+                <FinalIndicatorBasicsSection value={basics} onChange={setBasics} />
+
+                <hr style={{ border: 0, borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }} />
+
+                <FinalIndicatorPickerSection
+                    baseIndicators={baseIndicators}
+                    ageCategories={ageCategories}
+                    selectedBaseId={baseIndicatorId}
+                    selectedAgeCategoryCode={ageCategoryCode}
+                    onChangeBaseId={setBaseIndicatorId}
+                    onChangeAgeCategoryCode={setAgeCategoryCode}
+                />
+
+                {loadingBase ? <InlineLoading description="Loading base indicator details…" /> : null}
+                {baseError ? <InlineNotification kind="error" lowContrast title="Base indicator" subtitle={baseError} /> : null}
+
+                <FinalIndicatorDisaggregationSection genders={genders} onChange={setGenders} />
+
+                <FinalIndicatorResultsPreviewSection
+                    sql={sqlPreview}
+                    maxRows={200}
+                    startDate={previewStartDate}
+                    endDate={previewEndDate}
+                    onChangeStartDate={setPreviewStartDate}
+                    onChangeEndDate={setPreviewEndDate}
+                />
+            </Stack>
+        </Modal>
+    );
+}

package/src/components/indicators/diagnosis-filters-form.component.tsx

@@ -0,0 +1,101 @@
+/*
+import React from 'react';
+import { Select, SelectItem, TextInput } from '@carbon/react';
+
+import ConceptSearchMultiSelect, { SelectedConcept } from './concept-search-multiselect.component';
+import type { DiagnosisBaseConfig } from './types/indicator-types';
+
+type Props = {
+    value: DiagnosisBaseConfig;
+    onChange: (next: DiagnosisBaseConfig) => void;
+};
+
+export default function DiagnosisFiltersForm({ value, onChange }: Props) {
+    const onChangeConcepts = (selected: SelectedConcept[]) => {
+        // Use a for-loop to avoid any surprises and to keep behavior explicit.
+        const conceptIds: number[] = [];
+        const conceptUuids: string[] = [];
+        const conceptLabels: string[] = [];
+        const icd10Codes: string[] = [];
+        const icd11Codes: string[] = [];
+
+        for (const x of selected ?? []) {
+            // IDs (warehouse join)
+            const idNum = Number((x as any)?.id);
+            if (Number.isFinite(idNum) && idNum > 0) {
+                conceptIds.push(idNum);
+            }
+
+            // Labels / uuids
+            if (x?.uuid) conceptUuids.push(x.uuid);
+            if (x?.display) conceptLabels.push(x.display);
+
+            // Optional metadata
+            if (x?.icd10Code) icd10Codes.push(x.icd10Code);
+            if (x?.icd11Code) icd11Codes.push(x.icd11Code);
+        }
+
+        onChange({
+            ...value,
+            // ✅ self-contained selection (survives search reset)
+            selectedConcepts: selected ?? [],
+
+            // ✅ derived fields used by SQL builder + UI
+            conceptIds,
+            conceptUuids,
+            conceptLabels,
+            icd10Codes,
+            icd11Codes,
+        });
+    };
+
+    return (
+        <>
+            <div style={{ fontWeight: 600 }}>Diagnosis filters</div>
+
+            <ConceptSearchMultiSelect
+                id="diag-concepts"
+                labelText="Diagnosis concept(s)"
+                helperText="Search OpenMRS concepts and add one or more. ICD codes are shown to help you choose."
+                // ✅ Pass the full self-contained objects
+                value={value.selectedConcepts ?? []}
+                onChange={onChangeConcepts}
+            />
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem', marginTop: '0.75rem' }}>
+                <Select
+                    id="diag-certainty"
+                    labelText="Certainty"
+                    value={value.certainty}
+                    onChange={(e) =>
+                        onChange({
+                            ...value,
+                            certainty: (e.target as HTMLSelectElement).value as DiagnosisBaseConfig['certainty'],
+                        })
+                    }
+                >
+                    <SelectItem value="PROVISIONAL" text="PROVISIONAL" />
+                    <SelectItem value="CONFIRMED" text="CONFIRMED" />
+                </Select>
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem', marginTop: '0.75rem' }}>
+                <TextInput
+                    id="diag-ranks"
+                    labelText="Diagnosis ranks (CSV)"
+                    helperText="Example: 1,2"
+                    value={value.dxRanksCsv}
+                    onChange={(e) => onChange({ ...value, dxRanksCsv: (e.target as HTMLInputElement).value })}
+                />
+
+                <TextInput
+                    id="diag-derived-ids"
+                    labelText="Derived diagnosis_coded IDs"
+                    helperText="Uses concept.id (perfect warehouse join)."
+                    value={value.conceptIds?.length ? value.conceptIds.join(',') : ''}
+                    readOnly
+                />
+            </div>
+        </>
+    );
+}*/