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

package/src/components/indicators/indicators-table.component.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import {
+    DataTable,
+    Table,
+    TableHead,
+    TableRow,
+    TableHeader,
+    TableBody,
+    TableCell,
+    TableContainer,
+    Tag,
+    OverflowMenu,
+    OverflowMenuItem,
+} from '@carbon/react';
+
+export type IndicatorRow = {
+    id: string; // uuid
+    code: string;
+    name: string;
+
+    kind: 'BASE' | 'COMPOSITE' | 'FINAL' | string;
+
+    themeName?: string;
+    themeColor?: string; // hex
+
+    status: 'Draft' | 'Published' | 'Retired' | string;
+};
+
+type Props = {
+    rows: IndicatorRow[];
+    onOpen?: (id: string) => void;
+    onEdit?: (id: string, kind: IndicatorRow['kind']) => void;
+    onRun?: (id: string) => void;
+    onDelete?: (id: string) => void;
+};
+
+function statusTag(status: string) {
+    const s = (status ?? '').toLowerCase();
+    if (s.includes('publish')) return <Tag type="green">Published</Tag>;
+    if (s.includes('retire')) return <Tag type="red">Retired</Tag>;
+    return <Tag type="gray">Draft</Tag>;
+}
+
+function kindTag(kind: string) {
+    const k = (kind ?? '').toUpperCase();
+    if (k === 'FINAL') return <Tag type="purple">FINAL</Tag>;
+    if (k === 'COMPOSITE') return <Tag type="teal">COMPOSITE</Tag>;
+    return <Tag type="blue">BASE</Tag>;
+}
+
+function themePill(themeName?: string, themeColor?: string) {
+    if (!themeName) return <span style={{ opacity: 0.7 }}>—</span>;
+
+    return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <span
+                aria-hidden="true"
+                style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 999,
+                    background: themeColor || 'var(--cds-icon-primary)',
+                    display: 'inline-block',
+                    border: '1px solid var(--cds-border-subtle)',
+                }}
+            />
+            <span style={{ fontWeight: 500 }}>{themeName}</span>
+        </div>
+    );
+}
+
+export default function IndicatorsTable({ rows, onOpen, onEdit, onRun, onDelete }: Props) {
+    const headers = [
+        { key: 'code', header: 'Code' },
+        { key: 'name', header: 'Name' },
+        { key: 'kind', header: 'Kind' },
+        { key: 'theme', header: 'Theme' },
+        { key: 'status', header: 'Status' },
+        { key: 'actions', header: '' },
+    ];
+
+    const tableRows = (rows ?? []).map((r) => ({
+        id: r.id,
+        code: r.code,
+        name: r.name,
+        kind: r.kind,
+        theme: r.themeName ?? '', // matches header key
+        themeColor: r.themeColor ?? '', // extra (not a column)
+        status: r.status,
+    }));
+
+    return (
+        <TableContainer title="" description="">
+            <DataTable rows={tableRows} headers={headers} isSortable>
+                {({ rows: dtRows, headers: dtHeaders, getHeaderProps, getRowProps }) => (
+                    <Table size="lg" useZebraStyles>
+                        <TableHead>
+                            <TableRow>
+                                {dtHeaders.map((h) => (
+                                    <TableHeader key={h.key} {...getHeaderProps({ header: h })}>
+                                        {h.header}
+                                    </TableHeader>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+
+                        <TableBody>
+                            {dtRows.length === 0 ? (
+                                <TableRow>
+                                    <TableCell colSpan={dtHeaders.length} style={{ padding: '1rem', opacity: 0.75 }}>
+                                        No indicators found.
+                                    </TableCell>
+                                </TableRow>
+                            ) : null}
+
+                            {dtRows.map((row) => {
+                                const code = String(row.cells.find((c) => c.info.header === 'code')?.value ?? '');
+                                const name = String(row.cells.find((c) => c.info.header === 'name')?.value ?? '');
+                                const kind = String(row.cells.find((c) => c.info.header === 'kind')?.value ?? '');
+                                const themeName = String(row.cells.find((c) => c.info.header === 'theme')?.value ?? '');
+                                const status = String(row.cells.find((c) => c.info.header === 'status')?.value ?? '');
+
+                                const themeColor = String((row as any).themeColor ?? '');
+
+                                return (
+                                    <TableRow
+                                        key={row.id}
+                                        {...getRowProps({ row })}
+                                        onClick={() => onOpen?.(row.id)}
+                                        style={{ cursor: onOpen ? 'pointer' : 'default' }}
+                                    >
+                                        <TableCell>{code || <span style={{ opacity: 0.7 }}>—</span>}</TableCell>
+
+                                        <TableCell
+                                            style={{
+                                                fontWeight: 600,
+                                                paddingLeft: '0.75rem',
+                                                borderLeft: themeColor ? `6px solid ${themeColor}` : '6px solid transparent',
+                                            }}
+                                        >
+                                            {name}
+                                        </TableCell>
+
+                                        <TableCell>{kindTag(kind)}</TableCell>
+
+                                        <TableCell>{themePill(themeName, themeColor)}</TableCell>
+
+                                        <TableCell>{statusTag(status)}</TableCell>
+
+                                        <TableCell onClick={(e) => e.stopPropagation()} style={{ width: 56 }}>
+                                            <OverflowMenu size="sm" flipped>
+                                                <OverflowMenuItem itemText="Edit" onClick={() => onEdit?.(row.id, kind)} />
+                                                <OverflowMenuItem itemText="Run" onClick={() => onRun?.(row.id)} />
+                                                <OverflowMenuItem itemText="Delete" isDelete onClick={() => onDelete?.(row.id)} />
+                                            </OverflowMenu>
+                                        </TableCell>
+                                    </TableRow>
+                                );
+                            })}
+                        </TableBody>
+                    </Table>
+                )}
+            </DataTable>
+        </TableContainer>
+    );
+}

package/src/components/indicators/preview-table.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export type PreviewRow = { category: string; count: number };
+
+const PreviewTable: React.FC<{ rows: PreviewRow[] }> = ({ rows }) => {
+    return (
+        <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 8, overflow: 'hidden' }}>
+            <div style={{ fontWeight: 600, padding: '0.75rem', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
+                Preview
+            </div>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                <thead>
+                <tr style={{ background: 'var(--cds-layer, #f4f4f4)' }}>
+                    <th style={{ textAlign: 'left', padding: '0.6rem 0.75rem' }}>Category</th>
+                    <th style={{ textAlign: 'right', padding: '0.6rem 0.75rem' }}>Count</th>
+                </tr>
+                </thead>
+                <tbody>
+                {rows.map((r) => (
+                    <tr key={r.category}>
+                        <td style={{ padding: '0.6rem 0.75rem', borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>{r.category}</td>
+                        <td style={{ padding: '0.6rem 0.75rem', borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)', textAlign: 'right' }}>{r.count}</td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default PreviewTable;

package/src/components/indicators/sections/composite-indicator-basics.section.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Stack, TextInput, TextArea } from '@carbon/react';
+
+type Props = {
+    value: { name: string; code: string; description: string };
+    onChange: (next: { name: string; code: string; description: string }) => void;
+};
+
+export default function CompositeIndicatorBasicsSection({ value, onChange }: Props) {
+    return (
+        <Stack gap={5}>
+            <TextInput
+                id="composite-name"
+                labelText="Indicator Name"
+                value={value.name}
+                onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextInput
+                id="composite-code"
+                labelText="Code"
+                helperText="Auto-generated if blank"
+                value={value.code}
+                onChange={(e) => onChange({ ...value, code: (e.target as HTMLInputElement).value })}
+                placeholder="E.g. PREG_AND_MAL"
+            />
+
+            <TextArea
+                id="composite-description"
+                labelText="Description"
+                value={value.description}
+                onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+            />
+        </Stack>
+    );
+}

package/src/components/indicators/sections/composite-indicator-picker.section.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { ComboBox, RadioButtonGroup, RadioButton } from '@carbon/react';
+import { Information } from '@carbon/icons-react';
+
+import type { BaseIndicatorOption, CompositeOperator } from '../types/composite-indicator.types';
+import { idFieldForUnit } from '../utils/composite-indicator-sql.utils';
+
+const labelFor = (x: BaseIndicatorOption) => {
+    const unit = x.unit ? ` • ${x.unit}` : '';
+    return `${x.name} (${x.code})${unit}`;
+};
+
+type Props = {
+    baseIndicators: BaseIndicatorOption[];
+
+    indicatorAId: string;
+    indicatorBId: string;
+    operator: CompositeOperator;
+
+    inferredUnit: 'Patients' | 'Encounters';
+    samePick: boolean;
+
+    onChangeA: (id: string) => void;
+    onChangeB: (id: string) => void;
+    onChangeOperator: (op: CompositeOperator) => void;
+};
+
+type ComboItem = {
+    id: string;
+    label: string;
+    unit?: string;
+    isPlaceholder?: boolean;
+};
+
+export default function CompositeIndicatorPickerSection({
+                                                            baseIndicators,
+                                                            indicatorAId,
+                                                            indicatorBId,
+                                                            operator,
+                                                            inferredUnit,
+                                                            samePick,
+                                                            onChangeA,
+                                                            onChangeB,
+                                                            onChangeOperator,
+                                                        }: Props) {
+    const items: ComboItem[] = React.useMemo(() => {
+        const placeholder: ComboItem = { id: '', label: 'Select an indicator…', isPlaceholder: true };
+        return [
+            placeholder,
+            ...baseIndicators.map((x) => ({
+                id: x.id,
+                label: labelFor(x),
+                unit: x.unit,
+            })),
+        ];
+    }, [baseIndicators]);
+
+    const selectedA: ComboItem | null = React.useMemo(() => {
+        return items.find((x) => x.id === indicatorAId) ?? (indicatorAId ? null : items[0] ?? null);
+    }, [items, indicatorAId]);
+
+    const selectedB: ComboItem | null = React.useMemo(() => {
+        return items.find((x) => x.id === indicatorBId) ?? (indicatorBId ? null : items[0] ?? null);
+    }, [items, indicatorBId]);
+
+    return (
+        <>
+            <div style={{ fontWeight: 600 }}>Select base indicators</div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: '0.75rem', alignItems: 'end' }}>
+                <ComboBox
+                    id="indicator-a"
+                    titleText="Indicator A"
+                    items={items}
+                    itemToString={(item) => (item ? item.label : '')}
+                    selectedItem={selectedA}
+                    placeholder="Type to search…"
+                    invalid={Boolean(samePick) && Boolean(indicatorAId) && Boolean(indicatorBId)}
+                    invalidText="Indicator A and B cannot be the same."
+                    onChange={({ selectedItem }) => {
+                        if (!selectedItem || selectedItem.isPlaceholder) {
+                            onChangeA('');
+                            return;
+                        }
+                        onChangeA(selectedItem.id);
+                    }}
+                />
+
+                <div style={{ paddingBottom: '0.35rem' }}>
+                    <div style={{ fontSize: '0.875rem', opacity: 0.75, marginBottom: '0.25rem', textAlign: 'center' }}>Logic</div>
+                    <div
+                        style={{
+                            minWidth: '6rem',
+                            textAlign: 'center',
+                            padding: '0.55rem 0.75rem',
+                            borderRadius: '0.25rem',
+                            background: 'var(--cds-layer, #ffffff)',
+                            border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                            fontWeight: 600,
+                        }}
+                        aria-label="Selected operator"
+                    >
+                        {operator === 'A_AND_NOT_B' ? 'A AND NOT B' : operator}
+                    </div>
+                </div>
+
+                <ComboBox
+                    id="indicator-b"
+                    titleText="Indicator B"
+                    items={items}
+                    itemToString={(item) => (item ? item.label : '')}
+                    selectedItem={selectedB}
+                    placeholder="Type to search…"
+                    invalid={Boolean(samePick) && Boolean(indicatorAId) && Boolean(indicatorBId)}
+                    invalidText="Indicator A and B cannot be the same."
+                    onChange={({ selectedItem }) => {
+                        if (!selectedItem || selectedItem.isPlaceholder) {
+                            onChangeB('');
+                            return;
+                        }
+                        onChangeB(selectedItem.id);
+                    }}
+                />
+            </div>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gap: '0.75rem',
+                    alignItems: 'center',
+                    padding: '0.75rem',
+                    borderRadius: '0.25rem',
+                    background: 'var(--cds-layer-accent, #f4f4f4)',
+                    marginTop: '0.75rem',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 600 }}>
+                    Operator <Information size={16} />
+                </div>
+
+                <RadioButtonGroup
+                    legendText=""
+                    name="composite-operator"
+                    valueSelected={operator}
+                    onChange={(val) => onChangeOperator(val as CompositeOperator)}
+                    orientation="horizontal"
+                >
+                    <RadioButton id="op-and" labelText="AND" value="AND" />
+                    <RadioButton id="op-or" labelText="OR" value="OR" />
+                    <RadioButton id="op-a-not-b" labelText="A AND NOT B" value="A_AND_NOT_B" />
+                </RadioButtonGroup>
+
+                <div style={{ gridColumn: '1 / -1', fontSize: '0.875rem', opacity: 0.8 }}>
+                    Composite preview is built by converting each base indicator into a population set ({idFieldForUnit(inferredUnit)}) and applying
+                    set logic.
+                </div>
+            </div>
+        </>
+    );
+}

package/src/components/indicators/sections/composite-indicator-sql-preview.section.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { InlineLoading, InlineNotification, TextArea } from '@carbon/react';
+
+type Props = {
+    loading: boolean;
+    errA?: string | null;
+    errB?: string | null;
+    compositeSql: string;
+
+    show: boolean;
+};
+
+export default function CompositeIndicatorSqlPreviewSection({ loading, errA, errB, compositeSql, show }: Props) {
+    return (
+        <>
+            {loading ? <InlineLoading description="Loading selected indicators…" /> : null}
+            {errA ? <InlineNotification kind="error" lowContrast title="Indicator A" subtitle={errA} /> : null}
+            {errB ? <InlineNotification kind="error" lowContrast title="Indicator B" subtitle={errB} /> : null}
+
+            {show && !errA && !errB ? (
+                <TextArea
+                    id="composite-sql-preview"
+                    labelText="Composite SQL Preview"
+                    value={compositeSql || '—'}
+                    readOnly
+                    rows={14}
+                />
+            ) : null}
+        </>
+    );
+}

package/src/components/indicators/sections/final-indicator-basics.section.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TextInput, TextArea } from '@carbon/react';
+
+type Value = {
+    name: string;
+    code: string;
+    description: string;
+};
+
+type Props = {
+    value: Value;
+    onChange: (next: Value) => void;
+};
+
+export default function FinalIndicatorBasicsSection({ value, onChange }: Props) {
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+            <TextInput
+                id="final-name"
+                labelText="Final indicator name"
+                value={value.name}
+                onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+                placeholder="e.g., OPD Confirmed Malaria by age/gender"
+            />
+
+            <TextInput
+                id="final-code"
+                labelText="Code (optional)"
+                value={value.code}
+                onChange={(e) => onChange({ ...value, code: (e.target as HTMLInputElement).value })}
+                placeholder="AUTO_GENERATED"
+            />
+
+            <div style={{ gridColumn: '1 / -1' }}>
+                <TextArea
+                    id="final-desc"
+                    labelText="Description (optional)"
+                    value={value.description}
+                    rows={3}
+                    onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+                    placeholder="Short description of what this final indicator represents."
+                />
+            </div>
+        </div>
+    );
+}

package/src/components/indicators/sections/final-indicator-disaggregation.section.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Checkbox } from '@carbon/react';
+
+type Props = {
+    genders: Array<'F' | 'M'>;
+    onChange: (next: Array<'F' | 'M'>) => void;
+};
+
+export default function FinalIndicatorDisaggregationSection({ genders, onChange }: Props) {
+    const hasF = genders.includes('F');
+    const hasM = genders.includes('M');
+
+    return (
+        <div style={{ padding: '0.75rem', borderRadius: '0.25rem', background: 'var(--cds-layer-accent, #f4f4f4)' }}>
+            <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Gender breakdown</div>
+
+            <div style={{ display: 'flex', gap: '1rem' }}>
+                <Checkbox
+                    id="final-gender-f"
+                    labelText="Female"
+                    checked={hasF}
+                    onChange={(_, { checked }) => {
+                        const next = new Set(genders);
+                        if (checked) next.add('F');
+                        else next.delete('F');
+                        onChange(Array.from(next) as Array<'F' | 'M'>);
+                    }}
+                />
+                <Checkbox
+                    id="final-gender-m"
+                    labelText="Male"
+                    checked={hasM}
+                    onChange={(_, { checked }) => {
+                        const next = new Set(genders);
+                        if (checked) next.add('M');
+                        else next.delete('M');
+                        onChange(Array.from(next) as Array<'F' | 'M'>);
+                    }}
+                />
+            </div>
+
+            <div style={{ fontSize: '0.875rem', opacity: 0.8, marginTop: '0.5rem' }}>
+                Leave unchecked to get totals without gender filtering (later we can add “Total” row).
+            </div>
+        </div>
+    );
+}

package/src/components/indicators/sections/final-indicator-picker.section.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { ComboBox } from '@carbon/react';
+
+import type { BaseIndicatorOption } from '../types/composite-indicator.types';
+import type { AgeCategoryOption } from '../../../resources/agegroup/agegroups.api';
+
+type IndicatorItem = { id: string; label: string };
+
+type Props = {
+    baseIndicators: BaseIndicatorOption[];
+    ageCategories: AgeCategoryOption[];
+
+    selectedBaseId: string;
+    selectedAgeCategoryCode: string;
+
+    onChangeBaseId: (id: string) => void;
+    onChangeAgeCategoryCode: (code: string) => void;
+};
+
+export default function FinalIndicatorPickerSection({
+                                                        baseIndicators,
+                                                        ageCategories,
+                                                        selectedBaseId,
+                                                        selectedAgeCategoryCode,
+                                                        onChangeBaseId,
+                                                        onChangeAgeCategoryCode,
+                                                    }: Props) {
+    const baseItems: IndicatorItem[] = React.useMemo(() => {
+        return [{ id: '', label: 'Select a base indicator…' }].concat(
+            baseIndicators.map((x) => ({ id: x.id, label: `${x.name} (${x.code})` })),
+        );
+    }, [baseIndicators]);
+
+    const ageItems = React.useMemo(() => {
+        return [{ code: '', label: 'Select an age category…', uuid: '', name: '', description: '', ageGroups: [] as any[] }].concat(ageCategories as any);
+    }, [ageCategories]);
+
+    const selectedBase = React.useMemo(
+        () => baseItems.find((x) => x.id === selectedBaseId) ?? baseItems[0],
+        [baseItems, selectedBaseId],
+    );
+
+    const selectedAge = React.useMemo(
+        () => (ageItems as any[]).find((x) => x.code === selectedAgeCategoryCode) ?? ageItems[0],
+        [ageItems, selectedAgeCategoryCode],
+    );
+
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+            <ComboBox
+                id="final-base-indicator"
+                titleText="Base Indicator"
+                items={baseItems}
+                itemToString={(it) => (it ? it.label : '')}
+                selectedItem={selectedBase}
+                placeholder="Search base indicators…"
+                onChange={({ selectedItem }) => onChangeBaseId(selectedItem?.id ?? '')}
+            />
+
+            <ComboBox
+                id="final-age-category"
+                titleText="Age category"
+                items={ageItems as any[]}
+                itemToString={(it) => (it ? it.label : '')}
+                selectedItem={selectedAge as any}
+                placeholder="Search age categories…"
+                onChange={({ selectedItem }: any) => onChangeAgeCategoryCode(selectedItem?.code ?? '')}
+            />
+
+            {selectedAgeCategoryCode ? (
+                <div style={{ gridColumn: '1 / -1', fontSize: '0.875rem', opacity: 0.8 }}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>Age groups in this category</div>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                        {(selectedAge?.ageGroups ?? []).map((g: any) => (
+                            <span
+                                key={g.id}
+                                style={{
+                                    padding: '0.25rem 0.5rem',
+                                    border: '1px solid var(--cds-border-subtle)',
+                                    borderRadius: '999px',
+                                    background: 'var(--cds-layer)',
+                                }}
+                            >
+                {g.label}
+              </span>
+                        ))}
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/indicators/sections/final-indicator-preview.section.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CodeSnippet } from '@carbon/react';
+
+type Props = {
+    sql: string;
+    show: boolean;
+};
+
+export default function FinalIndicatorPreviewSection({ sql, show }: Props) {
+    if (!show) return null;
+
+    return (
+        <div style={{ display: 'grid', gap: '0.5rem' }}>
+            <div style={{ fontWeight: 600 }}>SQL Preview</div>
+            <CodeSnippet type="multi" wrapText>
+                {sql || '-- SQL will appear here once selections are made.'}
+            </CodeSnippet>
+        </div>
+    );
+}