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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Stack, TextInput, TextArea } from '@carbon/react';
+
+type Value = {
+    name: string;
+    code: string;
+    description: string;
+};
+
+type Props = {
+    value: Value;
+    onChange: (next: Value) => void;
+};
+
+export default function IndicatorBasicsSection({ value, onChange }: Props) {
+    return (
+        <Stack gap={6}>
+            <TextInput
+                id="indicator-code"
+                labelText="Code (optional)"
+                value={value.code}
+                onChange={(e) => onChange({ ...value, code: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextInput
+                id="indicator-name"
+                labelText="Name"
+                value={value.name}
+                onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextArea
+                id="indicator-desc"
+                labelText="Description (optional)"
+                value={value.description}
+                onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+            />
+        </Stack>
+    );
+}

package/src/components/indicators/sections/indicator-conditions.section.tsx

@@ -0,0 +1,279 @@
+import React from 'react';
+import { Stack, TextInput, Toggle } from '@carbon/react';
+
+import type { ThemeCondition } from '../types/data-theme-config.types';
+import type { IndicatorCondition } from '../types/indicator-types';
+
+import ConceptSearchMultiSelect, { type SelectedConcept } from '../handler/concept-search-multiselect.component';
+import QuestionAnswerConceptSearch from '../handler/question-answer-concept-search.component';
+import TagInput from '../tag-input.component';
+
+import type { QAUiState } from '../types/condition-ui.types';
+import { isInOperator, normalizeOperator, isNullCheckOperator } from '../../../types/condition-operators';
+
+type QAValue = { questions: Array<string | number>; answers: Array<string | number> };
+type BetweenValue = { start: string; end: string };
+
+type Props = {
+    conditions: ThemeCondition[];
+
+    picked: IndicatorCondition[];
+    /**
+     * We accept a React state setter signature so callers can pass setState directly
+     * and we can safely use functional updates.
+     */
+    onPickedChange: React.Dispatch<React.SetStateAction<IndicatorCondition[]>>;
+
+    conceptUi: Record<string, SelectedConcept[]>;
+    onConceptUiChange: (next: Record<string, SelectedConcept[]>) => void;
+
+    qaUi: Record<string, QAUiState>;
+    onQaUiChange: (next: Record<string, QAUiState>) => void;
+};
+
+function normalizeNumericIds(xs: Array<any>) {
+    return xs.map((x) => Number(x)).filter((n) => Number.isFinite(n) && n > 0);
+}
+
+function normalizeStrings(xs: Array<any>) {
+    return xs.map((x) => String(x)).filter(Boolean);
+}
+
+function upsert(list: IndicatorCondition[], next: IndicatorCondition) {
+    const idx = (list ?? []).findIndex((p) => p.key === next.key);
+    if (idx === -1) return [...(list ?? []), next];
+    const copy = [...(list ?? [])];
+    copy[idx] = { ...copy[idx], ...next };
+    return copy;
+}
+
+export default function IndicatorConditionsSection({
+                                                       conditions,
+                                                       picked,
+                                                       onPickedChange,
+                                                       conceptUi,
+                                                       onConceptUiChange,
+                                                       qaUi,
+                                                       onQaUiChange,
+                                                   }: Props) {
+    const upsertPicked = React.useCallback(
+        (tc: ThemeCondition, patch: Partial<IndicatorCondition>) => {
+            const existing =
+                (picked ?? []).find((p) => p.key === tc.key) ??
+                ({
+                    key: tc.key,
+                    operator: tc.operator,
+                    valueType: tc.valueType,
+                    value:
+                        tc.handler === 'QUESTION_ANSWER_CONCEPT_SEARCH'
+                            ? ({ questions: [], answers: [] } as any)
+                            : tc.operator === 'IN' || tc.operator === 'NOT_IN'
+                                ? []
+                                : tc.operator === 'BETWEEN' || tc.handler === 'DATE_RANGE'
+                                    ? { start: '', end: '' } as any
+                                    : '',
+                } as IndicatorCondition);
+
+            onPickedChange(upsert(picked ?? [], { ...existing, ...patch, key: tc.key }));
+        },
+        [onPickedChange, picked],
+    );
+
+    const mergeQaUi = React.useCallback(
+        (key: string, next: Partial<QAUiState>) => {
+            onQaUiChange({
+                ...(qaUi ?? {}),
+                [key]: {
+                    ...(qaUi?.[key] ?? { questions: [], answers: [] }),
+                    ...next,
+                },
+            });
+        },
+        [onQaUiChange, qaUi],
+    );
+
+    const mergeConceptUi = React.useCallback(
+        (key: string, nextSelected: SelectedConcept[]) => {
+            onConceptUiChange({
+                ...(conceptUi ?? {}),
+                [key]: nextSelected,
+            });
+        },
+        [onConceptUiChange, conceptUi],
+    );
+
+    const renderCondition = (tc: ThemeCondition) => {
+        const current = (picked ?? []).find((x) => x.key === tc.key);
+
+        // QUESTION + ANSWERS
+        if (tc.handler === 'QUESTION_ANSWER_CONCEPT_SEARCH') {
+            const ui = qaUi?.[tc.key] ?? { questions: [], answers: [] };
+
+            return (
+                <div key={tc.key}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{tc.label || tc.key}</div>
+
+                    <QuestionAnswerConceptSearch
+                        id={`cond-${tc.key}`}
+                        labelText={tc.label || 'Select question(s) & answers'}
+                        value={{ questions: ui.questions, answers: ui.answers }}
+                        onChange={(next) => {
+                            // UI
+                            mergeQaUi(tc.key, { questions: next.questions, answers: next.answers, error: undefined });
+
+                            // Payload
+                            const qVals =
+                                tc.valueType === 'conceptUuid'
+                                    ? normalizeStrings((next.questions ?? []).map((q) => q.uuid))
+                                    : normalizeNumericIds((next.questions ?? []).map((q) => q.id));
+
+                            const aVals =
+                                tc.valueType === 'conceptUuid'
+                                    ? normalizeStrings((next.answers ?? []).map((a) => a.uuid))
+                                    : normalizeNumericIds((next.answers ?? []).map((a) => a.id));
+
+                            upsertPicked(tc, { value: { questions: qVals, answers: aVals } as QAValue as any });
+                        }}
+                    />
+
+                    {qaUi?.[tc.key]?.error ? (
+                        <div style={{ marginTop: '0.5rem', color: 'var(--cds-text-error, #da1e28)', fontSize: '0.875rem' }}>
+                            {qaUi[tc.key].error}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        }
+
+        // CONCEPT_SEARCH
+        if (tc.handler === 'CONCEPT_SEARCH') {
+            const uiSelected = conceptUi?.[tc.key] ?? [];
+
+            return (
+                <div key={tc.key}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{tc.label || tc.key}</div>
+
+                    <ConceptSearchMultiSelect
+                        id={`cond-${tc.key}`}
+                        labelText={tc.label || 'Select concepts'}
+                        value={uiSelected}
+                        onChange={(nextSelected) => {
+                            mergeConceptUi(tc.key, nextSelected);
+
+                            if (tc.valueType === 'conceptUuid') {
+                                upsertPicked(tc, { value: normalizeStrings(nextSelected.map((c) => c.uuid)) as any });
+                            } else {
+                                upsertPicked(tc, { value: normalizeNumericIds(nextSelected.map((c) => c.id)) as any });
+                            }
+                        }}
+                    />
+                </div>
+            );
+        }
+
+        // BETWEEN / DATE_RANGE - needs two inputs (start and end)
+        if (tc.handler === 'DATE_RANGE' || tc.operator === 'BETWEEN') {
+            const currentValue = (current?.value as any) as BetweenValue | undefined;
+            const start = currentValue?.start ?? '';
+            const end = currentValue?.end ?? '';
+
+            return (
+                <div key={tc.key}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{tc.label || tc.key}</div>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
+                        <TextInput
+                            id={`cond-${tc.key}-start`}
+                            labelText="Start value"
+                            placeholder="Start"
+                            value={start}
+                            onChange={(e) => {
+                                const nextValue = { start: (e.target as HTMLInputElement).value, end };
+                                upsertPicked(tc, { value: nextValue as any });
+                            }}
+                        />
+                        <TextInput
+                            id={`cond-${tc.key}-end`}
+                            labelText="End value"
+                            placeholder="End"
+                            value={end}
+                            onChange={(e) => {
+                                const nextValue = { start, end: (e.target as HTMLInputElement).value };
+                                upsertPicked(tc, { value: nextValue as any });
+                            }}
+                        />
+                    </div>
+                </div>
+            );
+        }
+
+        // IS NULL / IS NOT NULL operators - use Toggle switch
+        if (isNullCheckOperator(normalizeOperator(tc.operator))) {
+            const isChecked = current?.value === true || current?.value === 'true' || current?.value === 1;
+
+            return (
+                <div key={tc.key}>
+                    <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{tc.label || tc.key}</div>
+                    <Toggle
+                        id={`cond-${tc.key}`}
+                        labelText={tc.operator === 'IS_NULL' ? 'Include NULL values' : 'Include NOT NULL values'}
+                        labelA="Off"
+                        labelB="On"
+                        toggled={isChecked}
+                        onToggle={(checked) =>
+                            upsertPicked(tc, {
+                                value: checked as any,
+                            })
+                        }
+                    />
+                </div>
+            );
+        }
+
+        // IN/NOT_IN operators - use TagInput for better UX
+        if (isInOperator(normalizeOperator(tc.operator))) {
+            // Value can be array (from TagInput) or string (legacy/other)
+            const tagValues: string[] = Array.isArray(current?.value)
+                ? current.value.map((v) => String(v))
+                : typeof current?.value === 'string' && current.value.trim()
+                    ? current.value.split(',').map((v) => v.trim()).filter(Boolean)
+                    : [];
+
+            return (
+                <div key={tc.key}>
+                    <TagInput
+                        id={`cond-${tc.key}`}
+                        labelText={tc.label || tc.key}
+                        placeholder="Type and press Enter or comma to add"
+                        value={tagValues}
+                        onChange={(values) => upsertPicked(tc, { value: values as any })}
+                    />
+                </div>
+            );
+        }
+
+        // default: text input
+        return (
+            <div key={tc.key}>
+                <TextInput
+                    id={`cond-${tc.key}`}
+                    labelText={tc.label || tc.key}
+                    value={typeof current?.value === 'string' ? current.value : ''}
+                    onChange={(e) =>
+                        upsertPicked(tc, {
+                            value: (e.target as HTMLInputElement).value as any,
+                        })
+                    }
+                />
+            </div>
+        );
+    };
+
+    if (!conditions?.length) return <div style={{ opacity: 0.8 }}>No conditions configured for this theme.</div>;
+
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.75rem' }}>Conditions</div>
+            <Stack gap={5}>{conditions.map(renderCondition)}</Stack>
+        </div>
+    );
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Button, Stack } from '@carbon/react';
+
+type Props = {
+    sql: string;
+    onChange?: (sql: string) => void;
+    onReset?: () => void;
+    editable?: boolean;
+};
+
+export default function IndicatorSqlPreviewSection({
+    sql,
+    onChange,
+    onReset,
+    editable = true
+}: Props) {
+    if (!sql) return <div style={{ opacity: 0.8 }}>SQL preview will appear once a theme is selected.</div>;
+
+    return (
+        <div>
+            <Stack gap={4}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ fontWeight: 600 }}>SQL Preview</div>
+                    {editable && onReset && (
+                        <Button size="sm" kind="ghost" onClick={onReset}>
+                            Reset to Generated
+                        </Button>
+                    )}
+                </div>
+                {editable ? (
+                    <textarea
+                        value={sql}
+                        onChange={(e) => onChange?.(e.target.value)}
+                        style={{
+                            width: '100%',
+                            minHeight: '200px',
+                            fontSize: '0.875rem',
+                            fontFamily: 'monospace',
+                            background: 'var(--cds-layer-01)',
+                            padding: '0.75rem',
+                            borderRadius: '6px',
+                            border: '1px solid var(--cds-border-01, #e0e0e0)',
+                            resize: 'vertical',
+                        }}
+                        placeholder="SQL query will appear here..."
+                    />
+                ) : (
+                    <pre
+                        style={{
+                            fontSize: '0.875rem',
+                            background: 'var(--cds-layer-01)',
+                            padding: '0.75rem',
+                            borderRadius: 6,
+                            overflowX: 'auto',
+                        }}
+                    >
+                        {sql}
+                    </pre>
+                )}
+            </Stack>
+        </div>
+    );
+}

package/src/components/indicators/sections/indicator-theme.section.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { InlineLoading, Select, SelectItem, Stack } from '@carbon/react';
+import type { DataThemeDto } from '../../../resources/theme/data-theme.api';
+
+type Props = {
+    themes: DataThemeDto[];
+    loading: boolean;
+    error?: string | null;
+
+    themeUuid: string;
+    onThemeUuidChange: (uuid: string) => void;
+
+    themeConfigError?: string | null;
+};
+
+export default function IndicatorThemeSection({
+                                                  themes,
+                                                  loading,
+                                                  error,
+                                                  themeUuid,
+                                                  onThemeUuidChange,
+                                                  themeConfigError,
+                                              }: Props) {
+    return (
+        <Stack gap={4}>
+            <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>Data Theme</div>
+
+            {loading ? <InlineLoading description="Loading themes…" /> : null}
+            {!loading && error ? <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>{error}</div> : null}
+
+            <Select
+                id="indicator-theme"
+                labelText="Select a theme"
+                value={themeUuid}
+                onChange={(e) => onThemeUuidChange((e.target as HTMLSelectElement).value)}
+            >
+                <SelectItem value="" text="Select…" />
+                {(themes ?? []).map((t) => (
+                    <SelectItem key={t.uuid} value={t.uuid} text={`${t.name}${t.code ? ` (${t.code})` : ''}`} />
+                ))}
+            </Select>
+
+            {themeConfigError ? (
+                <div style={{ color: 'var(--cds-text-error, #da1e28)', marginTop: '0.25rem' }}>{themeConfigError}</div>
+            ) : null}
+        </Stack>
+    );
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextArea } from '@carbon/react';
+
+type Props = {
+    value: string;
+};
+
+const SqlPreview: React.FC<Props> = ({ value }) => {
+    return (
+        <TextArea
+            id="sql-preview"
+            labelText="Generated SQL (base indicator)"
+            value={value}
+            readOnly
+        />
+    );
+};
+
+export default SqlPreview;

package/src/components/indicators/tag-input.component.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { Tag, TextInput } from '@carbon/react';
+
+type Props = {
+    id?: string;
+    labelText?: string;
+    placeholder?: string;
+    value: string[];
+    onChange: (values: string[]) => void;
+    disabled?: boolean;
+};
+
+/**
+ * TagInput component - allows users to enter multiple values as tags.
+ * Values are separated by commas or Enter key.
+ * Each tag displays with an (×) button to remove it.
+ */
+export default function TagInput({
+    id,
+    labelText,
+    placeholder = 'Type and press Enter or comma to add',
+    value = [],
+    onChange,
+    disabled = false,
+}: Props) {
+    const [inputValue, setInputValue] = React.useState('');
+
+    // Track focus for styling
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    // Remove a tag by index
+    const removeTag = (indexToRemove: number) => {
+        const newTags = value.filter((_, index) => index !== indexToRemove);
+        onChange(newTags);
+    };
+
+    // Add a new tag from current input
+    const addTag = (tagText: string) => {
+        const trimmed = tagText.trim();
+        if (trimmed && !value.includes(trimmed)) {
+            onChange([...value, trimmed]);
+        }
+        setInputValue('');
+    };
+
+    // Handle keyboard input
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            // For comma, remove the comma from the input before adding tag
+            const textToAdd = e.key === ',' ? inputValue.slice(0, -1) : inputValue;
+            addTag(textToAdd);
+        } else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
+            // Delete last tag when input is empty and backspace is pressed
+            removeTag(value.length - 1);
+        }
+    };
+
+    // Handle blur - add remaining input as tag
+    const handleBlur = () => {
+        setIsFocused(false);
+        if (inputValue.trim()) {
+            addTag(inputValue);
+        }
+    };
+
+    // Handle input change
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputValue(e.target.value);
+    };
+
+    // Handle paste - split by commas/newlines
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        const pastedText = e.clipboardData.getData('text');
+        // Split by comma, newline, or tab
+        const items = pastedText
+            .split(/[,\n\t]+/)
+            .map((s) => s.trim())
+            .filter(Boolean);
+
+        if (items.length > 0) {
+            // Add only non-duplicate items
+            const newValues = items.filter((item) => !value.includes(item));
+            onChange([...value, ...newValues]);
+        }
+    };
+
+    return (
+        <div className="tag-input-container">
+            {labelText && (
+                <label
+                    htmlFor={id}
+                    style={{
+                        display: 'block',
+                        marginBottom: '0.5rem',
+                        fontSize: '0.75rem',
+                        fontWeight: 400,
+                        lineHeight: '1.34',
+                        color: 'var(--cds-text-secondary, #525252)',
+                    }}
+                >
+                    {labelText}
+                </label>
+            )}
+
+            <div
+                style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '0.5rem',
+                    padding: '0.5rem',
+                    border: '1px solid var(--cds-text-primary, #161616)',
+                    borderRadius: '0.125rem',
+                    backgroundColor: isFocused
+                        ? 'var(--cds-field-1, #ffffff)'
+                        : 'var(--cds-field-2, #f4f4f4)',
+                    minHeight: '3rem',
+                    alignItems: 'center',
+                }}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => {
+                    // Delay blur to allow tag removal to complete
+                    setTimeout(() => {
+                        if (document.activeElement?.tagName !== 'BUTTON') {
+                            handleBlur();
+                        }
+                    }, 100);
+                }}
+            >
+                {/* Render tags */}
+                {value.map((tag, index) => (
+                    <Tag
+                        key={index}
+                        type="cool-gray"
+                        onClose={() => removeTag(index)}
+                        style={{ margin: 0 }}
+                    >
+                        {tag}
+                    </Tag>
+                ))}
+
+                {/* Text input for adding new tags */}
+                <TextInput
+                    id={id}
+                    labelText=""
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    placeholder={value.length === 0 ? placeholder : ''}
+                    disabled={disabled}
+                    hideLabel
+                    style={{
+                        flex: 1,
+                        minWidth: '120px',
+                        border: 'none',
+                        boxShadow: 'none',
+                        backgroundColor: 'transparent',
+                        padding: 0,
+                    }}
+                />
+            </div>
+
+            {/* Helper text */}
+            <div
+                style={{
+                    marginTop: '0.25rem',
+                    fontSize: '0.75rem',
+                    color: 'var(--cds-text-secondary, #525252)',
+                }}
+            >
+                Press Enter or comma (,) to add a value. Click × to remove.
+            </div>
+        </div>
+    );
+}

package/src/components/indicators/types/base-indicator-form.types.ts

@@ -0,0 +1,17 @@
+export type IndicatorUnit = 'Patients' | 'Encounters';
+
+export type CreateBaseIndicatorPayload = {
+    code: string;
+    theme: string; // e.g. DIAGNOSIS, OBSERVATIONS, MEDICATIONS, LAB
+    indicatorName: string;
+    description: string;
+
+    // Concept selection (multi)
+    conditionConceptUuids: string[];
+    conditionConceptLabels: string[];
+
+    pregnancyStatus: string;
+
+    unit: IndicatorUnit;
+    countBy: IndicatorUnit;
+};

package/src/components/indicators/types/base-indicator-theme.constants.ts

@@ -0,0 +1,8 @@
+export const THEME_OPTIONS = ['DIAGNOSIS', 'OBSERVATIONS', 'MEDICATIONS', 'LAB'] as const;
+
+export const THEME_LABELS: Record<(typeof THEME_OPTIONS)[number], string> = {
+    DIAGNOSIS: 'Diagnosis Data',
+    OBSERVATIONS: 'Observations',
+    MEDICATIONS: 'Medications',
+    LAB: 'Laboratory',
+};

package/src/components/indicators/types/composite-indicator.types.ts

@@ -0,0 +1,27 @@
+export type CompositeOperator = 'AND' | 'OR' | 'A_AND_NOT_B';
+
+export type IndicatorOption = {
+    id: string; // uuid
+    code: string;
+    name: string;
+    kind: 'BASE' | 'COMPOSITE';
+    unit?: 'Patients' | 'Encounters';
+};
+
+/**
+ * @deprecated Use IndicatorOption instead
+ */
+export type BaseIndicatorOption = IndicatorOption;
+
+export type CreateCompositeBaseIndicatorPayload = {
+    code: string;
+    name: string;
+    description: string;
+
+    indicatorAId: string; // uuid
+    indicatorBId: string; // uuid
+    operator: CompositeOperator;
+
+    unit?: 'Patients' | 'Encounters';
+    sqlTemplate?: string; // composite COUNT SQL
+};