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

package/src/components/indicators/sections/custom-indicator-filters.section.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import {
+  Stack,
+  TextInput,
+  Toggle,
+  Button,
+  Tag,
+} from '@carbon/react';
+
+import type { FilterPreservationRule } from '../types/custom-indicator.types';
+
+type Props = {
+  preserveFilters: FilterPreservationRule[];
+  onChange: (rules: FilterPreservationRule[]) => void;
+};
+
+export default function CustomIndicatorFiltersSection({ preserveFilters, onChange }: Props) {
+  const [newFilter, setNewFilter] = useState<Partial<FilterPreservationRule>>({
+    name: '',
+    description: '',
+    joinPattern: '',
+    wherePattern: '',
+    required: false,
+  });
+  const [showAddForm, setShowAddForm] = useState(false);
+
+  const addFilter = () => {
+    if (!newFilter.name || !newFilter.joinPattern) return;
+
+    const rule: FilterPreservationRule = {
+      name: newFilter.name,
+      description: newFilter.description || '',
+      joinPattern: newFilter.joinPattern,
+      wherePattern: newFilter.wherePattern || newFilter.joinPattern,
+      required: newFilter.required || false,
+    };
+
+    onChange([...preserveFilters, rule]);
+    setNewFilter({
+      name: '',
+      description: '',
+      joinPattern: '',
+      wherePattern: '',
+      required: false,
+    });
+    setShowAddForm(false);
+  };
+
+  const removeFilter = (index: number) => {
+    onChange(preserveFilters.filter((_, i) => i !== index));
+  };
+
+  const updateFilter = (index: number, field: keyof FilterPreservationRule, value: any) => {
+    const updated = [...preserveFilters];
+    updated[index] = { ...updated[index], [field]: value };
+    onChange(updated);
+  };
+
+  return (
+    <Stack gap={4}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h4 style={{ margin: 0 }}>Filter Preservation Rules</h4>
+        <Button
+          size="sm"
+          kind="ghost"
+          onClick={() => setShowAddForm(!showAddForm)}
+        >
+          {showAddForm ? 'Cancel' : '+ Add Filter Rule'}
+        </Button>
+      </div>
+
+      <p style={{ color: 'var(--cds-text-secondary, #666)', fontSize: '0.875rem' }}>
+        Define which filters should be preserved during section disaggregation.
+        Use regex patterns to identify JOIN and WHERE clauses.
+      </p>
+
+      {showAddForm && (
+        <div
+          style={{
+            padding: '1rem',
+            border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+            borderRadius: '0.25rem',
+            backgroundColor: 'var(--cds-background, #fff)',
+          }}
+        >
+          <Stack gap={3}>
+            <TextInput
+              id="new-filter-name"
+              labelText="Filter Name"
+              value={newFilter.name}
+              onChange={(e) => setNewFilter({ ...newFilter, name: (e.target as HTMLInputElement).value })}
+              placeholder="e.g., Location Filter"
+            />
+
+            <TextInput
+              id="new-filter-desc"
+              labelText="Description"
+              value={newFilter.description}
+              onChange={(e) =>
+                setNewFilter({ ...newFilter, description: (e.target as HTMLInputElement).value })
+              }
+              placeholder="What does this filter do?"
+            />
+
+            <TextInput
+              id="new-filter-join"
+              labelText="JOIN Pattern (regex)"
+              value={newFilter.joinPattern}
+              onChange={(e) =>
+                setNewFilter({ ...newFilter, joinPattern: (e.target as HTMLInputElement).value })
+              }
+              placeholder="e.g., JOIN\\s+location\\s+ON"
+            />
+
+            <TextInput
+              id="new-filter-where"
+              labelText="WHERE Pattern (regex)"
+              value={newFilter.wherePattern}
+              onChange={(e) =>
+                setNewFilter({ ...newFilter, wherePattern: (e.target as HTMLInputElement).value })
+              }
+              placeholder="e.g., location_id\\s*=\\s*?"
+            />
+
+            <Toggle
+              id="new-filter-required"
+              labelText="Required for indicator"
+              toggled={newFilter.required}
+              onChange={(e) =>
+                setNewFilter({ ...newFilter, required: (e.target as HTMLInputElement).checked })
+              }
+            />
+
+            <Button size="sm" onClick={addFilter} disabled={!newFilter.name || !newFilter.joinPattern}>
+              Add Filter Rule
+            </Button>
+          </Stack>
+        </div>
+      )}
+
+      {preserveFilters.length > 0 && (
+        <Stack gap={2}>
+          {preserveFilters.map((filter, index) => (
+            <div
+              key={filter.name}
+              style={{
+                padding: '0.75rem',
+                border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                borderRadius: '0.25rem',
+                display: 'grid',
+                gridTemplateColumns: '1fr auto',
+                gap: '0.5rem',
+              }}
+            >
+              <Stack gap={2}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                  <strong>{filter.name}</strong>
+                  {filter.required && <Tag type="red" size="sm">Required</Tag>}
+                  <Tag type="blue" size="sm">
+                    {filter.joinPattern.includes('JOIN') ? 'JOIN' : 'WHERE'}
+                  </Tag>
+                </div>
+                <p style={{ margin: 0, fontSize: '0.875rem', color: 'var(--cds-text-secondary, #666)' }}>
+                  {filter.description}
+                </p>
+                <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', opacity: 0.8 }}>
+                  <div>JOIN: /{filter.joinPattern}/</div>
+                  <div>WHERE: /{filter.wherePattern}/</div>
+                </div>
+              </Stack>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+                <Button
+                  size="sm"
+                  kind="ghost"
+                  hasIconOnly
+                  iconDescription="Remove"
+                  onClick={() => removeFilter(index)}
+                >
+                  ×
+                </Button>
+                <Toggle
+                  id={`filter-req-${index}`}
+                  labelText="Required"
+                  hideLabel
+                  toggled={filter.required}
+                  size="sm"
+                  onChange={(e) =>
+                    updateFilter(index, 'required', (e.target as HTMLInputElement).checked)
+                  }
+                />
+              </div>
+            </div>
+          ))}
+        </Stack>
+      )}
+
+      {preserveFilters.length === 0 && (
+        <Tag type="gray">No filter preservation rules defined</Tag>
+      )}
+    </Stack>
+  );
+}

package/src/components/indicators/sections/custom-indicator-population.section.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { ComboBox, TextInput, Stack } from '@carbon/react';
+
+import type { PatientIdColumn, PopulationExtractionMethod } from '../types/custom-indicator.types';
+
+type Props = {
+  patientIdColumn: PatientIdColumn;
+  extractionMethod: PopulationExtractionMethod;
+  configPath: string;
+  customExtractor: string;
+  onChangePatientIdColumn: (value: PatientIdColumn) => void;
+  onChangeExtractionMethod: (value: PopulationExtractionMethod) => void;
+  onChangeConfigPath: (value: string) => void;
+  onChangeCustomExtractor: (value: string) => void;
+};
+
+const PATIENT_ID_OPTIONS = [
+  { id: 'client_id', label: 'client_id' },
+  { id: 'patient_id', label: 'patient_id' },
+  { id: 'person_id', label: 'person_id' },
+];
+
+const EXTRACTION_METHOD_OPTIONS = [
+  { id: 'sqlTemplate', label: 'SQL Template (direct)' },
+  { id: 'configJson', label: 'Config JSON Path' },
+  { id: 'auto', label: 'Auto-detect' },
+  { id: 'custom', label: 'Custom Extractor' },
+];
+
+export default function CustomIndicatorPopulationSection({
+  patientIdColumn,
+  extractionMethod,
+  configPath,
+  customExtractor,
+  onChangePatientIdColumn,
+  onChangeExtractionMethod,
+  onChangeConfigPath,
+  onChangeCustomExtractor,
+}: Props) {
+  const selectedPatientId = React.useMemo(
+    () => PATIENT_ID_OPTIONS.find((opt) => opt.id === patientIdColumn) || PATIENT_ID_OPTIONS[0],
+    [patientIdColumn],
+  );
+
+  const selectedExtractionMethod = React.useMemo(
+    () => EXTRACTION_METHOD_OPTIONS.find((opt) => opt.id === extractionMethod) || EXTRACTION_METHOD_OPTIONS[0],
+    [extractionMethod],
+  );
+
+  return (
+    <Stack gap={4}>
+      <h4 style={{ margin: 0 }}>Population Configuration</h4>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        <ComboBox
+          id="patient-id-column"
+          titleText="Patient ID Column"
+          items={PATIENT_ID_OPTIONS}
+          itemToString={(item) => (item ? item.label : '')}
+          selectedItem={selectedPatientId}
+          placeholder="Select patient ID column"
+          onChange={({ selectedItem: selected }) => {
+            if (selected) {
+              onChangePatientIdColumn((selected as any).id as PatientIdColumn);
+            }
+          }}
+        />
+
+        <ComboBox
+          id="extraction-method"
+          titleText="Population Extraction Method"
+          items={EXTRACTION_METHOD_OPTIONS}
+          itemToString={(item) => (item ? item.label : '')}
+          selectedItem={selectedExtractionMethod}
+          placeholder="Select extraction method"
+          onChange={({ selectedItem: selected }) => {
+            if (selected) {
+              onChangeExtractionMethod((selected as any).id as PopulationExtractionMethod);
+            }
+          }}
+        />
+      </div>
+
+      {extractionMethod === 'configJson' && (
+        <TextInput
+          id="config-path"
+          labelText="Config JSON Path"
+          value={configPath}
+          onChange={(e) => onChangeConfigPath((e.target as HTMLInputElement).value)}
+          placeholder="e.g., populationQuery.sql"
+          helperText="Path in configJson where population SQL is stored"
+        />
+      )}
+
+      {extractionMethod === 'custom' && (
+        <TextInput
+          id="custom-extractor"
+          labelText="Custom Extractor Function"
+          value={customExtractor}
+          onChange={(e) => onChangeCustomExtractor((e.target as HTMLInputElement).value)}
+          placeholder="e.g., extractRttPopulation"
+          helperText="Name of the custom extractor function to use"
+        />
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { TextArea, TextInput, Stack, Tag, Button } from '@carbon/react';
+
+import SqlPreview from '../sql-preview.component';
+
+const DATA_SOURCE_SUGGESTIONS = [
+  'obs',
+  'person',
+  'patient',
+  'patient_identifier',
+  'encounter',
+  'programs',
+  'visit',
+  'provider',
+];
+
+type Props = {
+  sql: string;
+  businessLogic: string;
+  dataSources: string[];
+  dataSourceInput: string;
+  onChangeBusinessLogic: (value: string) => void;
+  onDataSourceInputChange: (value: string) => void;
+  onAddDataSource: () => void;
+  onRemoveDataSource: (source: string) => void;
+};
+
+export default function CustomIndicatorSqlPreviewSection({
+  sql,
+  businessLogic,
+  dataSources,
+  dataSourceInput,
+  onChangeBusinessLogic,
+  onDataSourceInputChange,
+  onAddDataSource,
+  onRemoveDataSource,
+}: Props) {
+  return (
+    <Stack gap={4}>
+      <h4 style={{ margin: 0 }}>SQL Preview & Metadata</h4>
+
+      <SqlPreview value={sql} />
+
+      <TextArea
+        id="business-logic"
+        labelText="Business Logic Description"
+        value={businessLogic}
+        rows={4}
+        onChange={(e) => onChangeBusinessLogic((e.target as HTMLTextAreaElement).value)}
+        placeholder="Describe what this indicator does, any special business rules, and how it should be interpreted..."
+      />
+
+      <div>
+        <div style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }}>
+          Data Sources
+        </div>
+        <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
+          <TextInput
+            id="data-source-input"
+            labelText=""
+            hideLabel
+            value={dataSourceInput}
+            onChange={(e) => onDataSourceInputChange((e.target as HTMLInputElement).value)}
+            placeholder="Enter table name (e.g., obs)"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                onAddDataSource();
+              }
+            }}
+          />
+          <Button onClick={onAddDataSource} disabled={!dataSourceInput.trim()}>
+            Add
+          </Button>
+        </div>
+
+        <div style={{ marginTop: '0.5rem' }}>
+          {dataSources.map((source) => (
+            <Tag key={source} type="blue" style={{ marginRight: '0.25rem' }}>
+              {source}
+              <button
+                type="button"
+                onClick={() => onRemoveDataSource(source)}
+                style={{
+                  marginLeft: '0.5rem',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: '1rem',
+                  color: 'inherit',
+                }}
+              >
+                ×
+              </button>
+            </Tag>
+          ))}
+          {dataSources.length === 0 && (
+            <Tag type="gray">No data sources specified</Tag>
+          )}
+        </div>
+
+        <div style={{ marginTop: '0.5rem', fontSize: '0.75rem', color: 'var(--cds-text-secondary, #666)' }}>
+          Suggested: {DATA_SOURCE_SUGGESTIONS.join(', ')}
+        </div>
+      </div>
+    </Stack>
+  );
+}

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,60 @@
+import React from 'react';
+import { ComboBox } from '@carbon/react';
+
+import type { AgeCategoryOption } from '../../../resources/agegroup/agegroups.api';
+import IndicatorSearchSelect from '../indicator-search-select.component';
+
+type Props = {
+    ageCategories: AgeCategoryOption[];
+
+    selectedBaseId: string;
+    selectedAgeCategoryCode: string;
+
+    onChangeBaseId: (id: string) => void;
+    onChangeAgeCategoryCode: (code: string) => void;
+};
+
+export default function FinalIndicatorPickerSection({
+    ageCategories,
+    selectedBaseId,
+    selectedAgeCategoryCode,
+    onChangeBaseId,
+    onChangeAgeCategoryCode,
+}: Props) {
+    const ageItems = React.useMemo(() => {
+        return [{ code: '', label: 'Select an age category…', uuid: '', name: '', description: '', ageGroups: [] as any[] }].concat(
+            ageCategories as any[],
+        );
+    }, [ageCategories]);
+
+    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' }}>
+            <IndicatorSearchSelect
+                id="base-indicator"
+                titleText="Base Indicator (search by name or code)"
+                selectedId={selectedBaseId}
+                kinds={['BASE', 'COMPOSITE']}
+                placeholder=""
+                onChange={(id) => onChangeBaseId(id)}
+            />
+
+            <ComboBox
+                id="age-category"
+                titleText="Age Category"
+                items={ageItems as any[]}
+                itemToString={(item) => (item ? item.label : '')}
+                selectedItem={selectedAge}
+                placeholder="Select an age category…"
+                onChange={({ selectedItem: selected }) => {
+                    const item = selected as any;
+                    onChangeAgeCategoryCode(item?.code || '');
+                }}
+            />
+        </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>
+    );
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { TextInput } from '@carbon/react';
+
+import QueryResultsPreview from '../../shared/preview/query-results-preview.component';
+
+type Props = {
+    sql: string;
+    maxRows?: number;
+
+    startDate: string;
+    endDate: string;
+    onChangeStartDate: (v: string) => void;
+    onChangeEndDate: (v: string) => void;
+};
+
+export default function FinalIndicatorResultsPreviewSection({
+                                                                sql,
+                                                                maxRows = 200,
+                                                                startDate,
+                                                                endDate,
+                                                                onChangeStartDate,
+                                                                onChangeEndDate,
+                                                            }: Props) {
+    const canRun = Boolean(sql?.trim()) && Boolean(startDate) && Boolean(endDate);
+
+    return (
+        <div style={{ display: 'grid', gap: '0.75rem' }}>
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: '320px 1fr',
+                    gap: '1rem',
+                    alignItems: 'start',
+                }}
+            >
+                {/* Left column: dates */}
+                <div style={{ display: 'grid', gap: '1rem' }}>
+                    <TextInput
+                        id="final-preview-start"
+                        labelText="Start date"
+                        type="date"
+                        value={startDate}
+                        onChange={(e) => onChangeStartDate((e.target as HTMLInputElement).value)}
+                    />
+                    <TextInput
+                        id="final-preview-end"
+                        labelText="End date"
+                        type="date"
+                        value={endDate}
+                        onChange={(e) => onChangeEndDate((e.target as HTMLInputElement).value)}
+                    />
+                </div>
+
+                {/* Right column: query preview */}
+                <QueryResultsPreview
+                    title="Query results preview"
+                    sql={sql}
+                    params={{ startDate, endDate }}
+                    maxRows={maxRows}
+                    canRun={canRun}
+                />
+            </div>
+        </div>
+    );
+}