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

package/src/components/report/design/report-design.types.ts

@@ -0,0 +1,43 @@
+export type DesignDimensionOption = {
+    id: string;
+    label: string;
+};
+
+export type DesignDimension = {
+    id: string;
+    label: string;
+    options: DesignDimensionOption[];
+};
+
+export type DesignRowType = 'section-label' | 'group-label' | 'indicator' | 'label' | 'spacer';
+
+export type DesignRow = {
+    id: string;
+    type: DesignRowType;
+    code?: string;
+    label: string;
+    indent: number;
+    keyPattern?: string;
+    dims?: Record<string, string | undefined>;
+    showTotal?: boolean;
+    showDisaggregation?: boolean;
+
+    // presentation hints
+    span?: 'all' | 'label-only';
+    emphasis?: 'section' | 'group' | 'normal' | 'summary';
+};
+
+export type DesignGroup = {
+    id: string;
+    title: string;
+    rows: DesignRow[];
+};
+
+export type ReportDesignDraft = {
+    version: 1;
+    template: 'section-tabular';
+    arrayName: string;
+    defaultValue: number;
+    dimensions: Record<string, DesignDimension>;
+    groups: DesignGroup[];
+};

package/src/components/report/design/report-design.utils.ts

@@ -0,0 +1,86 @@
+import type { ReportDefinitionDraft } from '../definition/report-definition.types';
+import type {
+    DesignDimension,
+    DesignGroup,
+    DesignRow,
+    ReportDesignDraft,
+} from './report-design.types';
+
+function makeId(prefix: string) {
+    return `${prefix}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function createEmptyReportDesignDraft(): ReportDesignDraft {
+    return {
+        version: 1,
+        template: 'section-tabular',
+        arrayName: 'results',
+        defaultValue: 0,
+        dimensions: {},
+        groups: [],
+    };
+}
+
+export function createDefaultDimensions(): Record<string, DesignDimension> {
+    return {
+        sex: {
+            id: 'sex',
+            label: 'Sex',
+            options: [
+                { id: 'M', label: 'Male' },
+                { id: 'F', label: 'Female' },
+            ],
+        },
+    };
+}
+
+export function createEmptyDesignGroup(title = 'New Group'): DesignGroup {
+    return {
+        id: makeId('group'),
+        title,
+        rows: [],
+    };
+}
+
+export function createEmptyDesignRow(): DesignRow {
+    return {
+        id: makeId('row'),
+        type: 'indicator',
+        code: '',
+        label: '',
+        indent: 0,
+        keyPattern: '{code}_{age}_{sex}',
+        dims: {},
+        showTotal: true,
+        showDisaggregation: true,
+    };
+}
+
+/**
+ * First-pass bootstrap from report definition.
+ * For now, this creates one group per selected section ref.
+ * Since the definition draft does not yet carry full section metadata here,
+ * labels default to section UUID and can be refined later.
+ */
+export function buildDesignFromDefinition(
+    definition: ReportDefinitionDraft,
+    sectionNameLookup?: Record<string, string>,
+): ReportDesignDraft {
+    const groups: DesignGroup[] = (definition.sections ?? []).map((sectionRef) => ({
+        id: makeId('group'),
+        title:
+            sectionRef.titleOverride?.trim() ||
+            sectionNameLookup?.[sectionRef.sectionUuid] ||
+            sectionRef.sectionUuid,
+        rows: [],
+    }));
+
+    return {
+        version: 1,
+        template: 'section-tabular',
+        arrayName: 'results',
+        defaultValue: 0,
+        dimensions: createDefaultDimensions(),
+        groups,
+    };
+}

package/src/components/report/panels/report-detail.component.tsx

@@ -0,0 +1,71 @@
+
+import React from 'react';
+import { Button, CopyButton, Stack, TextArea, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import styles from '../../../routes/report-builder.scss';
+
+export type ReportDetailModel = {
+  name: string;
+  description: string;
+  uuid: string;
+};
+
+type Props = {
+  value: ReportDetailModel;
+  onChange: (next: ReportDetailModel) => void;
+  onCancel?: () => void;
+  onSaveDraft?: () => void;
+  isSaving?: boolean;
+};
+
+const ReportDetail: React.FC<Props> = ({ value, onChange, onCancel, onSaveDraft, isSaving }) => {
+  const { t } = useTranslation();
+
+  const set = (patch: Partial<ReportDetailModel>) => onChange({ ...value, ...patch });
+
+  return (
+    <div className={styles.designWorkspace}>
+      <h3 className={styles.workspaceTitle}>{t('reportDetails', 'Report Details')}</h3>
+      <p className={styles.workspaceHint}>
+        {t('reportDetailsHint', 'Provide minimum report information such as name and description.')}
+      </p>
+
+      <div className={styles.panel}>
+        <Stack gap={6} style={{ marginTop: '0.75rem', maxWidth: '64rem' }}>
+          <TextInput
+            id="rb-report-name"
+            labelText={<>{t('name', 'Name')} <span style={{ color: 'var(--cds-support-error, #da1e28)' }}>*</span></>}
+            value={value.name}
+            onChange={(e) => set({ name: (e.target as HTMLInputElement).value })}
+          />
+
+          <TextArea
+            id="rb-report-description"
+            labelText={t('description', 'Description')}
+            value={value.description}
+            onChange={(e) => set({ description: (e.target as HTMLTextAreaElement).value })}
+            rows={4}
+          />
+
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '0.5rem', alignItems: 'end' }}>
+            <TextInput id="rb-report-uuid" labelText={t('uuid', 'UUID')} value={value.uuid} readOnly />
+            <CopyButton
+              iconDescription={t('copyUuid', 'Copy UUID')}
+              feedback={t('copied', 'Copied')}
+              feedbackTimeout={1500}
+              onClick={() => { if (value.uuid) void navigator.clipboard?.writeText(value.uuid); }}
+            />
+          </div>
+        </Stack>
+
+        <div style={{ marginTop: '1.25rem', paddingTop: '1rem', borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)', display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
+          <Button kind="secondary" onClick={onCancel}>{t('cancel', 'Cancel')}</Button>
+          <Button kind="primary" onClick={onSaveDraft} disabled={!value.name.trim() || isSaving}>{t('saveDraft', 'Save Draft')}</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReportDetail;

package/src/components/report/panels/report-panel-shell.component.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+type Props = {
+    title: React.ReactNode;
+    right?: React.ReactNode;
+    children: React.ReactNode;
+    bottom?: React.ReactNode;
+    minHeight?: number;
+};
+
+const ReportPanelShell: React.FC<Props> = ({ title, right, children, bottom, minHeight = 560 }) => {
+    return (
+        <div
+            style={{
+                background: '#fff',
+                border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                borderRadius: 12,
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight,
+            }}
+        >
+            <div
+                style={{
+                    padding: '0.9rem 1rem',
+                    borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '0.75rem',
+                }}
+            >
+                <div style={{ fontWeight: 600 }}>{title}</div>
+                {right ?? null}
+            </div>
+
+            <div style={{ padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', flex: 1 }}>
+                {children}
+            </div>
+
+            {bottom ? (
+                <div
+                    style={{
+                        padding: '0.9rem 1rem',
+                        borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: '0.75rem',
+                    }}
+                >
+                    {bottom}
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+export default ReportPanelShell;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import Header from '../shared/header/header.component';
+import ReportsTable, { type ReportSummary } from './dashboard/reports-table.component';
+import { listReports } from '../../resources/report/reports.api';
+
+const ReportDashboardPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [search, setSearch] = React.useState('');
+  const [reports, setReports] = React.useState<ReportSummary[]>([]);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+
+    listReports({ v: 'default', includeRetired: false }, ac.signal)
+        .then((data) =>
+            setReports(
+                data.map((r) => ({
+                  id: r.uuid,
+                  name: r.name,
+                  status: r.retired ? 'Retired' : 'Draft',
+                  updatedAt: '',
+                })),
+            ),
+        )
+        .catch(() => setReports([]));
+
+    return () => ac.abort();
+  }, []);
+
+  const headers = React.useMemo(
+      () => [
+        { key: 'name', header: t('reportName', 'Report') },
+        { key: 'status', header: t('status', 'Status') },
+        { key: 'updatedAt', header: t('lastUpdated', 'Last updated') },
+      ],
+      [t],
+  );
+
+  const filteredReports = React.useMemo(() => {
+    if (!search.trim()) return reports;
+    const q = search.toLowerCase();
+    return reports.filter((r) => r.name.toLowerCase().includes(q) || r.status.toLowerCase().includes(q));
+  }, [search, reports]);
+
+  return (
+      <div>
+        <Header
+            title={t('reports', 'Manage Reports')}
+            subtitle={t('manageReports', 'Manage and create reports')}
+        />
+
+        <ReportsTable
+            reports={filteredReports}
+            headers={headers}
+            searchValue={search}
+            onSearchChange={setSearch}
+            onCreateReport={() => navigate('/new')}
+            onRowClick={(id) => navigate(`/edit/${id}`)}
+        />
+
+        {filteredReports.length === 0 ? (
+            <div style={{ opacity: 0.7, marginTop: '1rem' }}>
+              {t('noReportsFound', 'No reports match your search')}
+            </div>
+        ) : null}
+      </div>
+  );
+};
+
+export default ReportDashboardPage;