@openmrs/esm-report-builder 0.1.1-pre.87

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,201 @@
+import React from 'react';
+import { Search, Checkbox, Tag, Button, InlineLoading, InlineNotification } from '@carbon/react';
+import { ChevronRight, Add, ArrowUp, ArrowDown, TrashCan, Information } 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;
+
+    /** Database search fallback state */
+    dbSearching?: boolean;
+    dbSearchError?: string | null;
+}) {
+    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>
+
+                    {/* Database search loading indicator */}
+                    {props.dbSearching && (
+                        <div style={{ marginBottom: '0.5rem' }}>
+                            <InlineLoading description="Searching database for matching indicators…" status="active" />
+                        </div>
+                    )}
+
+                    {/* Database search error */}
+                    {props.dbSearchError && !props.dbSearching && (
+                        <InlineNotification
+                            kind="error"
+                            lowContrast
+                            title="Database search failed"
+                            subtitle={props.dbSearchError}
+                            hideCloseButton
+                            style={{ marginBottom: '0.5rem' }}
+                        />
+                    )}
+
+                    {/* No results message */}
+                    {!props.dbSearching && props.available.length === 0 && props.q && (
+                        <div style={{
+                            padding: '0.75rem',
+                            background: 'var(--cds-background-inverse, #161616)',
+                            borderRadius: '4px',
+                            marginBottom: '0.5rem',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                            fontSize: '0.875rem'
+                        }}>
+                            <Information size={16} />
+                            <span>No indicators found matching "{props.q}"</span>
+                        </div>
+                    )}
+
+                    {/* Database search results indicator */}
+                    {!props.dbSearching && props.q && props.available.length > 0 && (
+                        <div style={{
+                            padding: '0.5rem',
+                            background: 'var(--cds-informational-01, #0f62fe)',
+                            color: 'white',
+                            borderRadius: '4px',
+                            marginBottom: '0.5rem',
+                            fontSize: '0.75rem',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem'
+                        }}>
+                            <Information size={14} />
+                            <span>{props.available.length} indicator(s) found from database search</span>
+                        </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)}
+            />
+        </>
+    );
+}