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

package/src/components/indicators/utils/indicator-sql.utils.ts

@@ -0,0 +1,185 @@
+import type { DataThemeConfig, ThemeCondition } from '../types/data-theme-config.types';
+import type { IndicatorCondition } from '../types/indicator-types';
+
+import { normalizeOperator, isInOperator } from '../../../types/condition-operators';
+
+const DEMO_JOIN_TABLE = 'mamba_fact_patients_latest_patient_demographics';
+
+function sqlQuote(v: string) {
+    return `'${String(v).replace(/'/g, "''")}'`;
+}
+
+function qualifyColumn(col: string) {
+    const c = String(col ?? '').trim();
+    if (!c) return c;
+    if (c.includes('.') || c.includes('(') || c.includes(' ') || c.includes('`')) return c;
+    return `a.${c}`;
+}
+
+function parseQaColumnsFromExpr(expr?: string | null) {
+    const raw = String(expr ?? '').trim();
+    if (!raw) return { questionColumn: undefined as string | undefined, answerColumn: undefined as string | undefined };
+
+    const m = raw.match(/QA\s*$begin:math:text$\(\.\*\)$end:math:text$/i);
+    if (!m) return { questionColumn: undefined, answerColumn: undefined };
+
+    const inner = (m[1] ?? '').trim();
+    if (!inner) return { questionColumn: undefined, answerColumn: undefined };
+
+    const parts = inner
+        .split(',')
+        .map((x) => x.trim())
+        .filter(Boolean);
+
+    return { questionColumn: parts[0], answerColumn: parts[1] };
+}
+
+function looksLikeQaExpression(expr?: string | null) {
+    const raw = String(expr ?? '').trim();
+    return /^([a-z]\.)?QA\s*\(/i.test(raw);
+}
+
+type QAValue = {
+    question?: string | number | null;
+    questions?: Array<string | number>;
+    answers?: Array<string | number>;
+};
+
+function isQAValue(v: any): v is QAValue {
+    return v && typeof v === 'object' && ('question' in v || 'questions' in v || 'answers' in v);
+}
+
+function normalizeArrayValue(v: any) {
+    const arr = Array.isArray(v) ? v : [v];
+    return arr.map((x) => String(x)).filter((x) => x.trim().length > 0);
+}
+
+export function buildSqlPreview(themeCfg: DataThemeConfig) {
+    const src = themeCfg.sourceTable;
+    const pid = themeCfg.patientIdColumn;
+    const dateCol = themeCfg.dateColumn;
+
+    const lines: string[] = [];
+    lines.push(`SELECT`);
+    lines.push(`  COUNT(*) AS total`);
+    lines.push(`FROM ${src} a`);
+    lines.push(`JOIN ${DEMO_JOIN_TABLE} mdp`);
+    lines.push(`  ON mdp.patient_id = a.${pid}`);
+    lines.push(`WHERE a.${dateCol} >= ':startDate'`);
+    lines.push(`  AND a.${dateCol} <  ':endDate'`);
+    lines.push(`  AND mdp.birthdate IS NOT NULL`);
+    lines.push(`  AND mdp.gender IS NOT NULL`);
+    lines.push(`;`);
+
+    return lines.join('\n');
+}
+
+export function applyConditionClauses(baseSql: string, themeConditions: ThemeCondition[], picked: IndicatorCondition[]) {
+    const sqlLines = baseSql.split('\n');
+
+    const demoBirthIdx = sqlLines.findIndex((l) => l.includes('mdp.birthdate IS NOT NULL'));
+    const insertAt = demoBirthIdx > -1 ? demoBirthIdx : sqlLines.length;
+
+    const clauses: string[] = [];
+
+    for (const tc of themeConditions ?? []) {
+        const pc = picked.find((x) => x.key === tc.key);
+        if (!pc) continue;
+
+        const v: any = pc.value;
+        if (v === null || v === undefined) continue;
+
+        // ✅ Normalize operator tokens from theme/UI
+        const op = normalizeOperator((pc.operator as any) ?? (tc.operator as any) ?? 'IN');
+
+        // QUESTION_ANSWER_CONCEPT_SEARCH
+        if (tc.handler === 'QUESTION_ANSWER_CONCEPT_SEARCH' && isQAValue(v)) {
+            const qVals: any[] = Array.isArray(v.questions)
+                ? v.questions
+                : v.question !== null && v.question !== undefined && String(v.question).trim() !== ''
+                    ? [v.question]
+                    : [];
+
+            const av = Array.isArray(v.answers) ? v.answers : [];
+
+            let questionColumn = (tc as any)?.columns?.question ?? (tc as any).questionColumn;
+            let answerColumn = (tc as any)?.columns?.answer ?? (tc as any).answerColumn;
+
+            if ((!questionColumn || !answerColumn) && (tc as any)?.column) {
+                const parsed = parseQaColumnsFromExpr((tc as any).column);
+                questionColumn = questionColumn ?? parsed.questionColumn;
+                answerColumn = answerColumn ?? parsed.answerColumn;
+            }
+
+            const tcCol = (tc as any)?.column as string | undefined;
+            if (!questionColumn && tcCol) questionColumn = tcCol;
+            if (!answerColumn && tcCol && !looksLikeQaExpression(tcCol)) answerColumn = tcCol;
+
+            if (questionColumn && qVals.length) {
+                const arr = normalizeArrayValue(qVals);
+                if (arr.length) {
+                    const isNumericList = tc.valueType === 'conceptId' || arr.every((x) => /^[0-9]+$/.test(x));
+                    const rendered = arr.map((x) => (isNumericList ? x : sqlQuote(x))).join(',');
+                    const col = qualifyColumn(questionColumn);
+
+                    // For questions we keep original behavior: single => =, many => IN (...)
+                    if (arr.length === 1) clauses.push(`  AND ${col} = ${rendered}`);
+                    else clauses.push(`  AND ${col} IN (${rendered})`);
+                }
+            }
+
+            if (answerColumn && Array.isArray(av) && av.length) {
+                const arr = normalizeArrayValue(av);
+                if (arr.length) {
+                    const isNumericList = tc.valueType === 'conceptId' || arr.every((x) => /^[0-9]+$/.test(x));
+                    const rendered = arr.map((x) => (isNumericList ? x : sqlQuote(x))).join(',');
+                    const col = qualifyColumn(answerColumn);
+
+                    // ✅ Always bracket IN/NOT IN
+                    if (op === 'NOT IN') clauses.push(`  AND ${col} NOT IN (${rendered})`);
+                    else clauses.push(`  AND ${col} IN (${rendered})`);
+                }
+            }
+
+            continue;
+        }
+
+        // array values
+        if (Array.isArray(v)) {
+            const arr = normalizeArrayValue(v);
+            if (!arr.length) continue;
+
+            const isNumericList = tc.valueType === 'conceptId' || arr.every((x) => /^[0-9]+$/.test(x));
+            const rendered = arr.map((x) => (isNumericList ? x : sqlQuote(x))).join(',');
+
+            const col = qualifyColumn(tc.column);
+
+            if (op === 'NOT IN') clauses.push(`  AND ${col} NOT IN (${rendered})`);
+            else if (op === 'IN') clauses.push(`  AND ${col} IN (${rendered})`);
+            else clauses.push(`  AND ${col} ${op} (${rendered})`);
+
+            continue;
+        }
+
+        // other object not supported
+        if (typeof v === 'object') continue;
+
+        // scalar
+        const sval = String(v);
+        const isNumeric = tc.valueType === 'conceptId' || /^[0-9]+$/.test(sval);
+        const renderedScalar = isNumeric ? sval : sqlQuote(sval);
+
+        const col = qualifyColumn(tc.column);
+
+        // ✅ IN must always have brackets, even for scalar
+        if (isInOperator(op)) {
+            if (op === 'NOT IN') clauses.push(`  AND ${col} NOT IN (${renderedScalar})`);
+            else clauses.push(`  AND ${col} IN (${renderedScalar})`);
+        } else {
+            clauses.push(`  AND ${col} ${op} ${renderedScalar}`);
+        }
+    }
+
+    sqlLines.splice(insertAt, 0, ...clauses);
+    return sqlLines.join('\n');
+}

package/src/components/landing/landing-action-item.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ChevronRight } from '@carbon/icons-react';
+import { Link } from 'react-router-dom';
+
+import styles from './report-builder-landing-page.scss';
+
+type LandingActionItemBase = {
+    icon: React.ReactNode;
+    label: string;
+};
+
+type LandingActionItemLink = LandingActionItemBase & {
+    to: string;
+    onClick?: never;
+};
+
+type LandingActionItemButton = LandingActionItemBase & {
+    onClick: () => void;
+    to?: never;
+};
+
+export type LandingActionItemProps = LandingActionItemLink | LandingActionItemButton;
+
+const LandingActionItem: React.FC<LandingActionItemProps> = (props) => {
+    const content = (
+        <>
+            <div className={styles.rbActionLeft}>
+                {props.icon}
+                <span className={styles.rbActionLabel}>{props.label}</span>
+            </div>
+            <ChevronRight />
+        </>
+    );
+
+    if ('to' in props) {
+        return (
+            <Link className={styles.rbAction} to={props.to}>
+                {content}
+            </Link>
+        );
+    }
+
+    return (
+        <button className={styles.rbAction} type="button" onClick={props.onClick}>
+            {content}
+        </button>
+    );
+};
+
+export default LandingActionItem;

package/src/components/landing/landing-action-list.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './report-builder-landing-page.scss';
+
+type LandingActionListProps = {
+    children: React.ReactNode;
+};
+
+const LandingActionList: React.FC<LandingActionListProps> = ({ children }) => {
+    return <div className={styles.rbActions}>{children}</div>;
+};
+
+export default LandingActionList;

package/src/components/landing/landing-activity-list.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ChevronRight, Document, Report } from '@carbon/icons-react';
+import styles from './report-builder-landing-page.scss';
+
+type RecentIndicator = { name: string; when: string };
+
+type LandingActivityListProps = {
+    recentIndicators: RecentIndicator[];
+    savedReports: string[];
+};
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(' ');
+
+const LandingActivityList: React.FC<LandingActivityListProps> = ({ recentIndicators, savedReports }) => {
+    return (
+        <div>
+            <div className={styles.rbListSectionTitle}>Recent Activity</div>
+
+            <div className={styles.rbListSubTitle}>Recently Edited Indicators</div>
+            {recentIndicators.map((x) => (
+                <div key={x.name} className={styles.rbListItem}>
+                    <div className={styles.rbListLeft}>
+                        <Document />
+                        <div>
+                            <div className={styles.rbListName}>{x.name}</div>
+                            <div className={styles.rbListMeta}>{x.when}</div>
+                        </div>
+                    </div>
+                    <ChevronRight />
+                </div>
+            ))}
+
+            <div className={cx(styles.rbListSubTitle, styles.rbMt12)}>Saved Reports</div>
+            {savedReports.map((r) => (
+                <div key={r} className={styles.rbListItem}>
+                    <div className={styles.rbListLeft}>
+                        <Report />
+                        <div className={styles.rbListName}>{r}</div>
+                    </div>
+                    <ChevronRight />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default LandingActivityList;

package/src/components/landing/landing-footer-grid.component.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { Play, Time, Save, ChartColumn } from '@carbon/icons-react';
+
+import styles from './report-builder-landing-page.scss';
+import LandingSectionCard from './landing-section-card.component';
+import LandingActionList from './landing-action-list.component';
+import LandingActionItem from './landing-action-item.component';
+
+type LandingFooterGridProps = {
+    onNavigate: (path: string) => void;
+};
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(' ');
+
+const LandingFooterGrid: React.FC<LandingFooterGridProps> = ({ onNavigate }) => {
+    return (
+        <div className={cx(styles.rbLandingGrid, styles.rbLandingGridBottom)}>
+            <LandingSectionCard title="Indicators" tone="blue" headerIcon={<ChartColumn />}>
+                <div className={styles.rbFooterActions}>
+                    <Button size="sm" kind="secondary" renderIcon={Save} onClick={() => onNavigate('/indicators/save')}>
+                        Save Indicator
+                    </Button>
+                    <Tag type="blue">Result: 124</Tag>
+                </div>
+            </LandingSectionCard>
+
+            <LandingSectionCard title="Saved Reports" tone="gold" headerIcon={<Save />}>
+                <LandingActionList>
+                    <LandingActionItem icon={<Time />} label="Run a report" onClick={() => onNavigate('/run')} />
+                    <LandingActionItem icon={<Time />} label="View recent runs" onClick={() => onNavigate('/runs')} />
+                    <div className={styles.rbActionsRight}>
+                        <Button size="sm" kind="primary" renderIcon={Play} onClick={() => onNavigate('/run')}>
+                            Run a report
+                        </Button>
+                    </div>
+                </LandingActionList>
+            </LandingSectionCard>
+
+            <div />
+        </div>
+    );
+};
+
+export default LandingFooterGrid;

package/src/components/landing/landing-hero.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './report-builder-landing-page.scss';
+
+type LandingHeroProps = {
+    title: string;
+    subtitle: string;
+};
+
+const LandingHero: React.FC<LandingHeroProps> = ({ title, subtitle }) => {
+    return (
+        <div className={styles.rbLandingHero}>
+            <h2 className={styles.rbLandingTitle}>{title}</h2>
+            <div className={styles.rbLandingSubtitle}>{subtitle}</div>
+        </div>
+    );
+};
+
+export default LandingHero;

package/src/components/landing/landing-section-card.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './report-builder-landing-page.scss';
+
+export type CardTone = 'blue' | 'green' | 'gold';
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(' ');
+
+type LandingSectionCardProps = {
+    title: string;
+    tone: CardTone;
+    headerIcon: React.ReactNode;
+    children: React.ReactNode;
+};
+
+const toneClass: Record<CardTone, string> = {
+    blue: styles.rbCardHeaderBlue,
+    green: styles.rbCardHeaderGreen,
+    gold: styles.rbCardHeaderGold,
+};
+
+const LandingSectionCard: React.FC<LandingSectionCardProps> = ({ title, tone, headerIcon, children }) => {
+    return (
+        <div className={styles.rbCard}>
+            <div className={cx(styles.rbCardHeader, toneClass[tone])}>
+                {headerIcon}
+                <span>{title}</span>
+            </div>
+            <div className={styles.rbCardBody}>{children}</div>
+        </div>
+    );
+};
+
+export default LandingSectionCard;

package/src/components/landing/report-builder-landing-page.component.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Button, Tile } from '@carbon/react';
+import { Add, ChartColumn, Play, Report } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import styles from './report-builder-landing-page.scss';
+import Header from '../shared/header/header.component';
+
+const ReportBuilderLandingPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+      <div className={styles.page}>
+        {/* HERO (matches screenshot layout) */}
+        <Header
+            title={t('welcomeReporting', 'Welcome  Report Builder')}
+            subtitle={t('welcomeReportingHint', 'Manage health data reports, define indicators, and run reports with ease.')}
+        />
+
+        {/* CARDS */}
+        <div className={styles.cardsGrid}>
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <Report size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('createReports', 'Create Reports')}</h3>
+            <p className={styles.cardBody}>
+              {t('createReportsHint', 'Define and configure health data reports tailored to your needs.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={Add}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/new')}
+              >
+                {t('getStarted', 'Get started')}
+              </Button>
+            </div>
+          </Tile>
+
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <ChartColumn size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('manageIndicators', 'Manage Indicators')}</h3>
+            <p className={styles.cardBody}>
+              {t('manageIndicatorsHint', 'Create, edit, and organize indicators to measure key health metrics.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={ChartColumn}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/indicators')}
+              >
+                {t('viewIndicators', 'View indicators')}
+              </Button>
+            </div>
+          </Tile>
+
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <Play size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('runReports', 'Run Reports')}</h3>
+            <p className={styles.cardBody}>
+              {t('runReportsHint', 'Choose a report and run it for specific time periods and locations.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={Play}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/run')}
+              >
+                {t('runNow', 'Run now')}
+              </Button>
+            </div>
+          </Tile>
+        </div>
+      </div>
+  );
+};
+
+export default ReportBuilderLandingPage;

package/src/components/landing/report-builder-landing-page.scss

@@ -0,0 +1,131 @@
+.page {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 0 2rem;
+}
+
+/* HERO */
+.hero {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 1.5rem;
+  align-items: center;
+
+  padding: 1.25rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: linear-gradient(90deg, #eef4ff 0%, #ffffff 55%, #ffffff 100%);
+}
+
+.heroArt {
+  height: 150px;
+  border-radius: 10px;
+  background: radial-gradient(circle at 30% 30%, #dbe7ff 0%, #eef4ff 55%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  display: grid;
+  place-items: center;
+}
+
+.heroArtInner {
+  width: 112px;
+  height: 112px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.heroTitle {
+  margin: 0;
+  font-size: 1.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1px;
+}
+
+.heroSubtitle {
+  margin: 0.5rem 0 0;
+  font-size: 1rem;
+  line-height: 1.45;
+  opacity: 0.85;
+  max-width: 54ch;
+}
+
+/* CARDS GRID */
+.cardsGrid {
+  margin-top: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+}
+
+.card {
+  border-radius: 12px;
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+  background: #fff;
+
+  padding: 1.25rem 1.25rem 1.25rem;
+  min-height: 340px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.cardIllustration {
+  display: grid;
+  place-items: center;
+  height: 140px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f2f6ff 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.illCircle {
+  width: 92px;
+  height: 92px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
+}
+
+.cardTitle {
+  margin: 1rem 0 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  margin: 0.65rem 0 0;
+  line-height: 1.5;
+  opacity: 0.85;
+  max-width: 46ch;
+}
+
+.cardActions {
+  margin-top: auto;
+  padding-top: 1.25rem;
+}
+
+.cardButton {
+  width: 100%;
+}
+
+/* RESPONSIVE */
+@media (max-width: 1050px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .heroArt {
+    height: 180px;
+  }
+
+  .cardsGrid {
+    grid-template-columns: 1fr;
+  }
+}