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

package/src/components/indicators/indicators-page.scss

@@ -0,0 +1,121 @@
+.page {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 0 2rem;
+}
+
+.indicatorsPage {
+  width: 100%;
+  padding: 0; /* let O3 page chrome handle padding */
+  box-sizing: border-box;
+}
+
+/* Header row like "Manage Reports" */
+.headerRow {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: var(--cds-layer, #ffffff);
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 0;
+}
+
+/* Actions on the right */
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* Tabs area should feel like it belongs to the page, full-width */
+:global(.cds--tabs) {
+  padding: 0 1.5rem;
+  background: var(--cds-layer, #ffffff);
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+}
+
+/* Remove extra padding Carbon sometimes adds */
+:global(.cds--tab-content) {
+  padding: 0;
+}
+
+/* Tab panel wrapper: make it full-width like list pages */
+.panel {
+  padding: 1rem 1.5rem 1.5rem;
+  background: var(--cds-background, #f4f4f4);
+}
+
+/* Create a white "content surface" like Manage Reports list area */
+.panel :global(.cds--stack) {
+  background: var(--cds-layer, #ffffff);
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.25rem;
+  padding: 0.75rem;
+}
+
+/* Search should span wide (Manage Reports style) */
+.panel :global(.cds--search) {
+  width: 100%;
+  max-width: none;
+}
+
+/* DataTable should span full width */
+.panel :global(.cds--data-table-container) {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+/* Ensure the table itself takes the width */
+.panel :global(.cds--data-table) {
+  width: 100%;
+}
+
+/* Make rows feel clickable */
+.panel :global(.cds--data-table tbody tr) {
+  cursor: pointer;
+}
+
+/* Hover feedback */
+.panel :global(.cds--data-table tbody tr:hover) {
+  background-color: var(--cds-layer-hover, #f4f4f4);
+}
+
+/* Keep the table header background subtle */
+.panel :global(.cds--data-table thead th) {
+  background: var(--cds-layer-accent, #f4f4f4);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .headerRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .headerActions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  :global(.cds--tabs) {
+    padding: 0 1rem;
+  }
+
+  .panel {
+    padding: 1rem;
+  }
+
+  .headerRow {
+    padding: 1rem;
+  }
+}

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

@@ -0,0 +1,188 @@
+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' | 'CUSTOM' | 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;
+    onDuplicate?: (id: string, kind: IndicatorRow['kind']) => void;
+    /** Row actions the signed-in user may see (privilege gating). */
+    canEdit?: boolean;
+    canRun?: boolean;
+    canDelete?: boolean;
+};
+
+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,
+    onDuplicate,
+    canEdit = true,
+    canRun = true,
+    canDelete = true,
+}: 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>
+                                                {canEdit && (
+                                                    <OverflowMenuItem itemText="Edit" onClick={() => onEdit?.(row.id, kind)} />
+                                                )}
+                                                <OverflowMenuItem itemText="Duplicate" onClick={() => onDuplicate?.(row.id, kind)} />
+                                                {canRun && (
+                                                    <OverflowMenuItem itemText="Run" onClick={() => onRun?.(row.id)} />
+                                                )}
+                                                {canDelete && (
+                                                    <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,116 @@
+import React from 'react';
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
+import { Information } from '@carbon/icons-react';
+
+import type { CompositeOperator } from '../types/composite-indicator.types';
+import { idFieldForUnit } from '../utils/composite-indicator-sql.utils';
+import IndicatorSearchSelect from '../indicator-search-select.component';
+
+type Props = {
+    indicatorAId: string;
+    indicatorBId: string;
+    operator: CompositeOperator;
+
+    inferredUnit: 'Patients' | 'Encounters';
+    samePick: boolean;
+
+    onChangeA: (id: string) => void;
+    onChangeB: (id: string) => void;
+    onChangeOperator: (op: CompositeOperator) => void;
+};
+
+export default function CompositeIndicatorPickerSection({
+    indicatorAId,
+    indicatorBId,
+    operator,
+    inferredUnit,
+    samePick,
+    onChangeA,
+    onChangeB,
+    onChangeOperator,
+}: Props) {
+    return (
+        <>
+            <div style={{ fontWeight: 600 }}>Select indicators</div>
+            <div style={{ fontSize: '0.875rem', opacity: 0.7, marginBottom: '0.75rem' }}>
+                Search for base or composite indicators by name or code
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: '0.75rem', alignItems: 'end' }}>
+                <IndicatorSearchSelect
+                    id="indicator-a"
+                    titleText="Indicator A (search by name or code)"
+                    selectedId={indicatorAId}
+                    kinds={['BASE', 'COMPOSITE']}
+                    invalid={Boolean(samePick) && Boolean(indicatorAId) && Boolean(indicatorBId)}
+                    invalidText="Indicator A and B cannot be the same."
+                    placeholder=""
+                    onChange={(id) => onChangeA(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>
+
+                <IndicatorSearchSelect
+                    id="indicator-b"
+                    titleText="Indicator B (search by name or code)"
+                    selectedId={indicatorBId}
+                    kinds={['BASE', 'COMPOSITE']}
+                    invalid={Boolean(samePick) && Boolean(indicatorAId) && Boolean(indicatorBId)}
+                    invalidText="Indicator A and B cannot be the same."
+                    placeholder=""
+                    onChange={(id) => onChangeB(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 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/custom-indicator-basics.section.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { TextInput, TextArea } from '@carbon/react';
+
+type Value = {
+  name: string;
+  code: string;
+  description: string;
+};
+
+type Props = {
+  value: Value;
+  sqlTemplate: string;
+  onChange: (next: Value) => void;
+  onSqlChange: (sql: string) => void;
+};
+
+export default function CustomIndicatorBasicsSection({
+  value,
+  sqlTemplate,
+  onChange,
+  onSqlChange,
+}: Props) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+      <TextInput
+        id="custom-name"
+        labelText="Custom indicator name"
+        value={value.name}
+        onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+        placeholder="e.g., RTT Treatment Outcomes"
+      />
+
+      <TextInput
+        id="custom-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="custom-desc"
+          labelText="Description (optional)"
+          value={value.description}
+          rows={2}
+          onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+          placeholder="Short description of what this custom indicator represents."
+        />
+      </div>
+
+      <div style={{ gridColumn: '1 / -1' }}>
+        <TextArea
+          id="custom-sql"
+          labelText="SQL Template"
+          value={sqlTemplate}
+          rows={10}
+          onChange={(e) => onSqlChange((e.target as HTMLTextAreaElement).value)}
+          placeholder="Enter your complex SQL query here. This can include multiple JOINs, subqueries, and custom business logic."
+          style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Toggle, ComboBox, Stack, Tag } from '@carbon/react';
+
+import type { RedisaggregationStrategy } from '../types/custom-indicator.types';
+
+type Props = {
+  supportsRedisaggregation: boolean;
+  redisaggregationStrategy: RedisaggregationStrategy;
+  themeIndependent: boolean;
+  onChangeSupportsRedisaggregation: (value: boolean) => void;
+  onChangeRedisaggregationStrategy: (value: RedisaggregationStrategy) => void;
+  onChangeThemeIndependent: (value: boolean) => void;
+};
+
+const REDISAGGREGATION_OPTIONS = [
+  {
+    id: 'population-extraction' as const,
+    label: 'Population Extraction',
+  },
+  {
+    id: 'query-rewriting' as const,
+    label: 'Query Rewriting',
+  },
+  {
+    id: 'custom' as const,
+    label: 'Custom Logic',
+  },
+  {
+    id: 'none' as const,
+    label: 'Not Supported',
+  },
+];
+
+export default function CustomIndicatorDisaggregationSection({
+  supportsRedisaggregation,
+  redisaggregationStrategy,
+  themeIndependent,
+  onChangeSupportsRedisaggregation,
+  onChangeRedisaggregationStrategy,
+  onChangeThemeIndependent,
+}: Props) {
+  const selectedStrategy = React.useMemo(
+    () => REDISAGGREGATION_OPTIONS.find((opt) => opt.id === redisaggregationStrategy) || REDISAGGREGATION_OPTIONS[0],
+    [redisaggregationStrategy],
+  );
+
+  return (
+    <Stack gap={4}>
+      <h4 style={{ margin: 0 }}>Re-disaggregation Configuration</h4>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        <Toggle
+          id="supports-redisaggregation"
+          labelText="Supports Re-disaggregation"
+          labelA="No"
+          labelB="Yes"
+          toggled={supportsRedisaggregation}
+          onChange={(e) => onChangeSupportsRedisaggregation((e.target as HTMLInputElement).checked)}
+        />
+
+        <Toggle
+          id="theme-independent"
+          labelText="Theme Independent"
+          labelA="No"
+          labelB="Yes"
+          toggled={themeIndependent}
+          onChange={(e) => onChangeThemeIndependent((e.target as HTMLInputElement).checked)}
+        />
+      </div>
+
+      {supportsRedisaggregation && (
+        <ComboBox
+          id="redisaggregation-strategy"
+          titleText="Re-disaggregation Strategy"
+          items={REDISAGGREGATION_OPTIONS}
+          itemToString={(item) => (item ? item.label : '')}
+          selectedItem={selectedStrategy}
+          placeholder="Select strategy"
+          onChange={({ selectedItem: selected }) => {
+            if (selected) {
+              onChangeRedisaggregationStrategy((selected as any).id);
+            }
+          }}
+          helperText="How should the indicator handle re-disaggregation in sections?"
+        />
+      )}
+
+      {!supportsRedisaggregation && (
+        <Tag type="gray">This indicator will not support re-disaggregation in report sections</Tag>
+      )}
+    </Stack>
+  );
+}