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

package/src/components/report/report-editor.page.component.tsx

@@ -0,0 +1,466 @@
+import React from 'react';
+import {
+  Button,
+  InlineLoading,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  InlineNotification,
+} from '@carbon/react';
+import { Save, Download } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+
+import Header from '../shared/header/header.component';
+import AiAssistButton from '../ai-support/ai-assist-button.component';
+
+import ReportDetail, { type ReportDetailModel } from './panels/report-detail.component';
+import ReportDefinitionEditor from './definition/report-definition-editor.component';
+import ReportDesignEditor, { type DesignSectionSource } from './design/report-design-editor.component';
+
+import type { ReportDefinitionDraft } from './definition/report-definition.types';
+import type { ReportDesignDraft } from './design/report-design.types';
+import { createEmptyReportDesignDraft } from './design/report-design.utils';
+
+import {
+  createReport,
+  updateReport,
+  getReport,
+  compileReport,
+  type ReportDto,
+} from '../../resources/report/reports.api';
+import { listSections } from '../../resources/report-section/report-sections.api';
+
+type TabKey = 'details' | 'definition' | 'design';
+type BuilderMode = 'create' | 'edit';
+
+type ReportFormState = {
+  uuid: string;
+  name: string;
+  description: string;
+  code: string;
+  sections: ReportDefinitionDraft['sections'];
+  design: ReportDesignDraft;
+};
+
+type SectionDtoLike = {
+  uuid: string;
+  name?: string;
+  configJson?: string;
+  retired?: boolean;
+};
+
+function buildEmptyForm(): ReportFormState {
+  return {
+    uuid: crypto.randomUUID(),
+    name: '',
+    description: '',
+    code: '',
+    sections: [],
+    design: createEmptyReportDesignDraft(),
+  };
+}
+
+function slugifyCode(name: string): string {
+  return (name || '')
+      .trim()
+      .toUpperCase()
+      .replace(/[^A-Z0-9]+/g, '_')
+      .replace(/^_+|_+$/g, '');
+}
+
+function parseSavedReportToForm(report: ReportDto): ReportFormState {
+  let parsed: any = {};
+  try {
+    parsed = report.configJson ? JSON.parse(report.configJson) : {};
+  } catch {
+    parsed = {};
+  }
+
+  const definition = parsed?.definition ?? {};
+  const legacySections = Array.isArray(parsed?.sections) ? parsed.sections : [];
+  const design = parsed?.design ?? null;
+
+  return {
+    uuid: report.uuid,
+    name: report.name ?? parsed?.name ?? '',
+    description: report.description ?? parsed?.description ?? '',
+    code: report.code ?? parsed?.code ?? '',
+    sections: Array.isArray(definition?.sections) ? definition.sections : legacySections,
+    design: design ?? createEmptyReportDesignDraft(),
+  };
+}
+
+function safeParseJson(raw?: string | null): any {
+  try {
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+export default function ReportEditorPage() {
+  const { t } = useTranslation();
+  const { reportId } = useParams();
+
+  const mode: BuilderMode = reportId ? 'edit' : 'create';
+
+  const [tab, setTab] = React.useState<TabKey>('details');
+  const [form, setForm] = React.useState<ReportFormState>(() => buildEmptyForm());
+
+  const [savedReport, setSavedReport] = React.useState<ReportDto | null>(null);
+  const [allSections, setAllSections] = React.useState<SectionDtoLike[]>([]);
+
+  const [loading, setLoading] = React.useState(mode === 'edit');
+  const [sectionsLoading, setSectionsLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const [compiling, setCompiling] = React.useState(false);
+
+  const [saveError, setSaveError] = React.useState<string | null>(null);
+  const [saveSuccess, setSaveSuccess] = React.useState<string | null>(null);
+  const [compileError, setCompileError] = React.useState<string | null>(null);
+  const [compileSuccess, setCompileSuccess] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+
+    setSectionsLoading(true);
+    listSections({ v: 'full', includeRetired: false }, ac.signal)
+        .then((rows: SectionDtoLike[]) => setAllSections(Array.isArray(rows) ? rows : []))
+        .catch(() => setAllSections([]))
+        .finally(() => setSectionsLoading(false));
+
+    return () => ac.abort();
+  }, []);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    async function loadReport() {
+      if (mode !== 'edit' || !reportId) {
+        setForm(buildEmptyForm());
+        setSavedReport(null);
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setSaveError(null);
+        setCompileError(null);
+
+        const report = await getReport(reportId);
+        if (cancelled) return;
+
+        setSavedReport(report);
+        setForm(parseSavedReportToForm(report));
+      } catch (e: any) {
+        if (!cancelled) {
+          setSaveError(e?.message ?? 'Failed to load report');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    loadReport();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, reportId]);
+
+  const detailModel: ReportDetailModel = {
+    uuid: form.uuid,
+    name: form.name,
+    description: form.description,
+  };
+
+  const definitionDraft: ReportDefinitionDraft = {
+    name: form.name,
+    description: form.description,
+    code: form.code,
+    sections: form.sections,
+  };
+
+  const designDraft: ReportDesignDraft = form.design;
+
+  const sectionNameLookup = React.useMemo(() => {
+    return allSections.reduce<Record<string, string>>((acc, s) => {
+      acc[s.uuid] = s.name ?? s.uuid;
+      return acc;
+    }, {});
+  }, [allSections]);
+
+  const sectionSources = React.useMemo<DesignSectionSource[]>(() => {
+    const chosen = Array.isArray(form.sections) ? form.sections : [];
+    const sectionMap = new Map(allSections.map((s) => [s.uuid, s]));
+
+    return chosen
+        .slice()
+        .sort((a: any, b: any) => Number(a.sortOrder ?? 0) - Number(b.sortOrder ?? 0))
+        .map((ref: any) => {
+          const section = sectionMap.get(ref.sectionUuid);
+          const cfg = safeParseJson(section?.configJson);
+          const indicators = Array.isArray(cfg?.indicators) ? cfg.indicators : [];
+
+          return {
+            sectionUuid: ref.sectionUuid,
+            title: ref.titleOverride?.trim() || section?.name || ref.sectionUuid,
+            indicators: indicators
+                .slice()
+                .sort((a: any, b: any) => Number(a.sortOrder ?? 0) - Number(b.sortOrder ?? 0))
+                .map((i: any) => ({
+                  id: String(i.indicatorUuid ?? i.id ?? i.code ?? crypto.randomUUID()),
+                  code: String(i.code ?? ''),
+                  name: String(i.name ?? i.code ?? ''),
+                  type: String(i.kind ?? 'indicator'),
+                })),
+          };
+        });
+  }, [allSections, form.sections]);
+
+  const handleDetailChange = React.useCallback((next: ReportDetailModel) => {
+    setForm((prev) => ({
+      ...prev,
+      name: next.name,
+      description: next.description,
+      uuid: next.uuid,
+      code: prev.code?.trim() ? prev.code : slugifyCode(next.name),
+    }));
+  }, []);
+
+  const handleDefinitionChange = React.useCallback((next: ReportDefinitionDraft) => {
+    setForm((prev) => ({
+      ...prev,
+      code: next.code,
+      sections: next.sections,
+    }));
+  }, []);
+
+  const handleDesignChange = React.useCallback((next: ReportDesignDraft) => {
+    setForm((prev) => ({
+      ...prev,
+      design: next,
+    }));
+  }, []);
+
+  const handleDraftSave = React.useCallback(async () => {
+    try {
+      setSaving(true);
+      setSaveError(null);
+      setSaveSuccess(null);
+      setCompileError(null);
+
+      const authoringJson = {
+        version: 1,
+        uuid: savedReport?.uuid ?? form.uuid,
+        name: form.name,
+        code: form.code || slugifyCode(form.name),
+        description: form.description,
+        definition: {
+          sections: form.sections ?? [],
+        },
+        design: form.design,
+      };
+
+      const payload = {
+        name: authoringJson.name,
+        description: authoringJson.description,
+        code: authoringJson.code,
+        configJson: JSON.stringify(authoringJson, null, 2),
+      };
+
+      const result =
+          mode === 'edit' && (savedReport?.uuid || reportId)
+              ? await updateReport((savedReport?.uuid || reportId) as string, payload)
+              : await createReport(payload);
+
+      setSavedReport(result);
+      setForm((prev) => ({
+        ...prev,
+        uuid: result.uuid,
+        code: result.code ?? prev.code,
+      }));
+      setSaveSuccess('Draft saved successfully.');
+      return result;
+    } catch (e: any) {
+      setSaveError(e?.message ?? 'Failed to save report draft');
+      throw e;
+    } finally {
+      setSaving(false);
+    }
+  }, [form, mode, reportId, savedReport?.uuid]);
+
+  const handleCompile = React.useCallback(async () => {
+    try {
+      setCompiling(true);
+      setCompileError(null);
+      setCompileSuccess(null);
+      setSaveError(null);
+
+      let targetUuid = savedReport?.uuid || reportId || null;
+
+      if (!targetUuid) {
+        const saved = await handleDraftSave();
+        targetUuid = saved?.uuid ?? null;
+      }
+
+      if (!targetUuid) {
+        throw new Error('Save the report first before compiling.');
+      }
+
+      const result = await compileReport(targetUuid);
+
+      setCompileSuccess(
+          result?.reportDefinitionUuid
+              ? `Compiled successfully. Runtime report UUID: ${result.reportDefinitionUuid}`
+              : 'Compiled successfully.',
+      );
+    } catch (e: any) {
+      setCompileError(e?.message ?? 'Failed to compile report');
+    } finally {
+      setCompiling(false);
+    }
+  }, [handleDraftSave, reportId, savedReport?.uuid]);
+
+  const handleCancel = React.useCallback(() => {
+    setForm(buildEmptyForm());
+    setSavedReport(null);
+    setSaveError(null);
+    setSaveSuccess(null);
+    setCompileError(null);
+    setCompileSuccess(null);
+    setTab('details');
+  }, []);
+
+  const canSave = Boolean(form.name.trim()) && !saving && !loading;
+  const canCompile = Boolean((savedReport?.uuid || reportId || form.name.trim()) && !saving && !compiling && !loading);
+
+  return (
+      <>
+        <Header
+            title={t('reportBuilder', 'Report Builder')}
+            subtitle={t('reportBuilderSubtitle', 'Create and manage reports as collections of reusable sections.')}
+        />
+
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: '1rem' }}>
+          <div>
+            {loading ? <InlineLoading description="Loading report…" /> : null}
+            {sectionsLoading ? <InlineLoading description="Loading sections…" /> : null}
+            {saving ? <InlineLoading description="Saving draft…" /> : null}
+            {compiling ? <InlineLoading description="Compiling report…" /> : null}
+
+            {!loading && !saving && saveError ? (
+                <InlineNotification lowContrast kind="error" title="Save failed" subtitle={saveError} />
+            ) : null}
+
+            {!loading && !saving && saveSuccess ? (
+                <InlineNotification lowContrast kind="success" title="Saved" subtitle={saveSuccess} />
+            ) : null}
+
+            {!loading && !compiling && compileError ? (
+                <InlineNotification lowContrast kind="error" title="Compile failed" subtitle={compileError} />
+            ) : null}
+
+            {!loading && !compiling && compileSuccess ? (
+                <InlineNotification lowContrast kind="success" title="Compiled" subtitle={compileSuccess} />
+            ) : null}
+          </div>
+
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <AiAssistButton context={{ page: 'Report Builder' }} size="sm" kind="secondary" />
+
+            <Button size="sm" kind="secondary" renderIcon={Download} disabled>
+              Export
+            </Button>
+
+            <Button size="sm" kind="secondary" onClick={handleCompile} disabled={!canCompile}>
+              Compile
+            </Button>
+
+            <Button size="sm" kind="primary" renderIcon={Save} onClick={handleDraftSave} disabled={!canSave}>
+              Save Draft
+            </Button>
+          </div>
+        </div>
+
+        <Tabs
+            selectedIndex={tab === 'details' ? 0 : tab === 'definition' ? 1 : 2}
+            onChange={({ selectedIndex }) =>
+                setTab(selectedIndex === 0 ? 'details' : selectedIndex === 1 ? 'definition' : 'design')
+            }
+        >
+          <TabList aria-label="Report editor tabs">
+            <Tab>Report Detail</Tab>
+            <Tab>Report Definition</Tab>
+            <Tab>Report Design</Tab>
+          </TabList>
+
+          <TabPanels>
+            <TabPanel>
+              <ReportDetail
+                  value={detailModel}
+                  onChange={handleDetailChange}
+                  onSaveDraft={handleDraftSave}
+                  isSaving={saving}
+                  onCancel={handleCancel}
+              />
+            </TabPanel>
+
+            <TabPanel>
+              <ReportDefinitionEditor
+                  value={definitionDraft}
+                  onChange={handleDefinitionChange}
+              />
+            </TabPanel>
+
+            <TabPanel>
+              <ReportDesignEditor
+                  value={designDraft}
+                  onChange={handleDesignChange}
+                  definitionDraft={definitionDraft}
+                  sectionSources={sectionSources}
+                  sectionNameLookup={sectionNameLookup}
+              />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+
+        <div
+            style={{
+              marginTop: '1rem',
+              padding: '0.9rem 1rem',
+              background: '#fff',
+              border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+              borderRadius: 12,
+            }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Current Report Form</div>
+
+          <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: '0.85rem' }}>
+          {JSON.stringify(
+              {
+                uuid: form.uuid,
+                name: form.name,
+                description: form.description,
+                code: form.code,
+                definition: {
+                  sections: form.sections,
+                },
+                design: form.design,
+                sectionSources,
+                mode,
+                savedReportUuid: savedReport?.uuid ?? null,
+              },
+              null,
+              2,
+          )}
+        </pre>
+        </div>
+      </>
+  );
+}

package/src/components/report/report.routes.tsx

@@ -0,0 +1,30 @@
+
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import ReportBuilderShell from '../app-shell/report-builder-shell.component';
+import ReportBuilderLandingPage from '../landing/report-builder-landing-page.component';
+import ReportDashboardPage from './report-dashboard.page.component';
+import ReportEditorPage from './report-editor.page.component';
+import IndicatorsPage from '../indicators/indicators-page.component';
+import SectionsPage from '../report-sections/report-sections-page.component';
+import RunReportsPage from '../run-reports/run-reports-page.component';
+import DataThemesPage from '../data-themes/data-themes-page.component';
+
+const ReportRoutes: React.FC = () => (
+  <Routes>
+    <Route element={<ReportBuilderShell />}>
+      <Route path="/" element={<ReportBuilderLandingPage />} />
+      <Route path="/reports" element={<ReportDashboardPage />} />
+      <Route path="/new" element={<ReportEditorPage />} />
+      <Route path="/edit/:reportId" element={<ReportEditorPage />} />
+      <Route path="/indicators" element={<IndicatorsPage />} />
+      <Route path="/sections" element={<SectionsPage />} />
+      <Route path="/themes" element={<DataThemesPage />} />
+      <Route path="/run" element={<RunReportsPage />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Route>
+  </Routes>
+);
+
+export default ReportRoutes;