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

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>
+    );
+}

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,194 @@
+import React from 'react';
+import { Stack, TextInput } 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 type { QAUiState } from '../types/condition-ui.types';
+
+type QAValue = { questions: Array<string | number>; answers: Array<string | number> };
+
+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'
+                                ? []
+                                : '',
+                } 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>
+            );
+        }
+
+        // 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,26 @@
+import React from 'react';
+
+type Props = {
+    sql: string;
+};
+
+export default function IndicatorSqlPreviewSection({ sql }: Props) {
+    if (!sql) return <div style={{ opacity: 0.8 }}>SQL preview will appear once a theme is selected.</div>;
+
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>SQL Preview</div>
+            <pre
+                style={{
+                    fontSize: '0.875rem',
+                    background: 'var(--cds-layer-01)',
+                    padding: '0.75rem',
+                    borderRadius: 6,
+                    overflowX: 'auto',
+                }}
+            >
+{sql}
+      </pre>
+        </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/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,21 @@
+export type CompositeOperator = 'AND' | 'OR' | 'A_AND_NOT_B';
+
+export type BaseIndicatorOption = {
+    id: string; // uuid
+    code: string;
+    name: string;
+    unit?: 'Patients' | 'Encounters';
+};
+
+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
+};

package/src/components/indicators/types/condition-ui.types.ts

@@ -0,0 +1,11 @@
+import type { SelectedConcept } from '../handler/concept-search-multiselect.component';
+
+export type QAUiState = {
+    /** Selected question concepts (multi-select) */
+    questions: SelectedConcept[];
+    answers: SelectedConcept[];
+    error?: string;
+};
+
+export type ConceptUiMap = Record<string, SelectedConcept[]>;
+export type QaUiMap = Record<string, QAUiState>;

package/src/components/indicators/types/data-theme-config.types.ts

@@ -0,0 +1,88 @@
+// src/report-builder/types/theme/data-theme.types.ts
+
+export type MainDataDomain =
+    | 'OBSERVATIONS'
+    | 'TEST_ORDERS'
+    | 'MEDICATION_ORDERS'
+    | 'APPOINTMENTS'
+    | 'MEDICATION_DISPENSE'
+    | 'DIAGNOSIS';
+
+export type FieldType = 'string' | 'number' | 'date' | 'datetime' | 'boolean' | 'coded' | 'json';
+
+export type ThemeField = {
+    key: string;
+    label: string;
+    expr: string;
+    type: FieldType;
+};
+
+export type ConditionHandler =
+    | 'CONCEPT_SEARCH'
+    | 'QUESTION_ANSWER_CONCEPT_SEARCH'
+    | 'TEXT'
+    | 'NUMBER'
+    | 'DATE_RANGE'
+    | 'BOOLEAN'
+    | 'LOCATION_PICKER'
+    | 'CODED_LIST';
+
+/**
+ * Theme-side operator tokens (legacy + UI-friendly).
+ * NOTE: SQL generation will normalize these to real SQL operators.
+ */
+export type ConditionOperator = 'EQUALS' | 'IN' | 'NOT_IN' | 'LIKE' | 'BETWEEN' | 'GTE' | 'LTE';
+
+export type ConditionValueType =
+    | 'conceptUuid'
+    | 'conceptId'
+    | 'string'
+    | 'number'
+    | 'date'
+    | 'datetime'
+    | 'boolean';
+
+export type ThemeCondition = {
+    key: string;
+    label: string;
+    handler: ConditionHandler;
+    column: string;
+    operator: ConditionOperator;
+    valueType: ConditionValueType;
+};
+
+export type DataThemeConfig = {
+    sourceTable: string;
+    patientIdColumn: string;
+    dateColumn: string;
+    locationColumn?: string;
+
+    joins?: Array<{ alias: string; joinSql: string }>;
+    defaultFilters?: string[];
+
+    fields: ThemeField[];
+
+    conditions?: ThemeCondition[];
+
+    conditionColumns?: Record<string, string>;
+};
+
+export type DataTheme = {
+    uuid?: string;
+    name: string;
+    description?: string;
+    code: string;
+    domain: MainDataDomain;
+    configJson: string;
+    metaJson?: string;
+    retired?: boolean;
+};
+
+export type DataThemeRow = {
+    uuid: string;
+    name: string;
+    code: string;
+    domain: MainDataDomain;
+    description?: string;
+    retired?: boolean;
+};

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

@@ -0,0 +1,56 @@
+import type { DataThemeConfig, ThemeCondition } from './data-theme-config.types';
+
+/**
+ * What the indicator builder saves/uses.
+ * Keep it flexible because you already have a backend model.
+ */
+
+export type IndicatorKind = 'BASE' | 'FINAL';
+
+export type IndicatorConditionValue =
+    | string
+    | number
+    | Array<string | number>
+    | { start?: string; end?: string }
+    | null;
+
+export type IndicatorCondition = {
+  key: string; // matches ThemeCondition.key
+  operator?: ThemeCondition['operator'];
+  valueType?: ThemeCondition['valueType'];
+
+  /**
+   * Actual chosen value(s).
+   * - concept search returns ids/uuids depending on your handler config
+   */
+  value: IndicatorConditionValue;
+};
+
+export type BaseIndicatorDraft = {
+  uuid?: string;
+  name: string;
+  description?: string;
+  code?: string;
+
+  kind: IndicatorKind;
+
+  /**
+   * The selected data theme
+   */
+  themeUuid: string;
+
+  /**
+   * Optional snapshot of theme config at save time (good for debugging / auditing)
+   */
+  themeConfig?: DataThemeConfig;
+
+  /**
+   * User-picked conditions (values), keys should match theme config conditions
+   */
+  conditions?: IndicatorCondition[];
+
+  /**
+   * Optional SQL preview used by UI
+   */
+  sqlPreview?: string;
+};

package/src/components/indicators/types/sql-builders.ts

@@ -0,0 +1,43 @@
+/*
+import type { DiagnosisBaseConfig } from './indicator-types';
+
+function normalizeCsvToSqlInList(csv: string) {
+  const cleaned = (csv ?? '')
+      .split(',')
+      .map((x) => x.trim())
+      .filter(Boolean)
+      .map((x) => String(Number(x)))
+      .filter((x) => x !== 'NaN');
+
+  return cleaned.length ? cleaned.join(',') : '1';
+}
+
+function diagnosisClause(ids: number[]) {
+  if (!ids || ids.length === 0) {
+    return `-- AND a.diagnosis_coded = <select a concept>`;
+  }
+  if (ids.length === 1) {
+    return `AND a.diagnosis_coded = ${ids[0]}`;
+  }
+  return `AND a.diagnosis_coded IN (${ids.join(',')})`;
+}
+
+export function buildDiagnosisBaseSql(cfg: DiagnosisBaseConfig) {
+  const ranks = normalizeCsvToSqlInList(cfg.dxRanksCsv);
+
+  return `
+SELECT
+  COUNT(*) AS total
+FROM mamba_fact_encounter_diagnosis a
+JOIN mamba_fact_patients_latest_patient_demographics mdp
+  ON mdp.patient_id = a.patient_id
+WHERE a.date_created >= ':startDate'
+  AND a.date_created <  ':endDate'
+  ${diagnosisClause(cfg.conceptIds)}
+  AND a.certainty = '${cfg.certainty}'
+  AND a.dx_rank IN (${ranks})
+  ${cfg.onlyNotVoided ? 'AND a.voided = 0' : ''}
+  ${cfg.requireNonNullBirthdate ? 'AND mdp.birthdate IS NOT NULL' : ''}
+  ${cfg.requireNonNullGender ? 'AND mdp.gender IS NOT NULL' : ''}
+;`.trim();
+}*/