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

package/src/constants/privileges.ts

@@ -0,0 +1,118 @@
+/**
+ * Privilege catalog for the report builder.
+ *
+ * Mirrors the backend catalog — api/.../security/ReportBuilderPrivileges.java and
+ * omod/src/main/resources/configuration/privileges/reportbuilder-privileges.csv
+ * (see openmrs-module-report-builder README.md -> Security: Privileges & Roles).
+ * Keep in sync — if the backend catalog changes, this file changes.
+ *
+ * This is the ONLY source file allowed to contain `Task: reportbuilder.` literals.
+ * The one exception is routes.json, whose `privileges` key gates the System
+ * Administration card link declaratively (framework-enforced) — keep that string
+ * in sync with RB.REPORT_VIEW.
+ */
+export const RB_PREFIX = 'Task: reportbuilder.';
+
+const rb = (suffix: string) => `${RB_PREFIX}${suffix}`;
+
+export const RB = {
+  // Report definitions
+  REPORT_VIEW: rb('report.view'),
+  REPORT_ADD: rb('report.add'),
+  REPORT_EDIT: rb('report.edit'),
+  REPORT_PURGE: rb('report.purge'),
+  REPORT_COMPILE: rb('report.compile'),
+  REPORT_RUN: rb('report.run'),
+  // Indicators
+  INDICATOR_VIEW: rb('indicator.view'),
+  INDICATOR_ADD: rb('indicator.add'),
+  INDICATOR_EDIT: rb('indicator.edit'),
+  INDICATOR_PURGE: rb('indicator.purge'),
+  // Report sections
+  SECTION_VIEW: rb('section.view'),
+  SECTION_ADD: rb('section.add'),
+  SECTION_EDIT: rb('section.edit'),
+  SECTION_PURGE: rb('section.purge'),
+  // Data themes
+  THEME_VIEW: rb('theme.view'),
+  THEME_ADD: rb('theme.add'),
+  THEME_EDIT: rb('theme.edit'),
+  THEME_PURGE: rb('theme.purge'),
+  // Dashboards
+  DASHBOARD_VIEW: rb('dashboard.view'),
+  DASHBOARD_ADD: rb('dashboard.add'),
+  DASHBOARD_EDIT: rb('dashboard.edit'),
+  DASHBOARD_PURGE: rb('dashboard.purge'),
+  // Report categories
+  CATEGORY_VIEW: rb('category.view'),
+  CATEGORY_ADD: rb('category.add'),
+  CATEGORY_EDIT: rb('category.edit'),
+  CATEGORY_PURGE: rb('category.purge'),
+  // Age categories & age groups
+  AGEGROUP_VIEW: rb('agegroup.view'),
+  AGEGROUP_ADD: rb('agegroup.add'),
+  AGEGROUP_EDIT: rb('agegroup.edit'),
+  AGEGROUP_PURGE: rb('agegroup.purge'),
+  // Report library
+  LIBRARY_VIEW: rb('library.view'),
+  LIBRARY_ADD: rb('library.add'),
+  LIBRARY_EDIT: rb('library.edit'),
+  LIBRARY_PURGE: rb('library.purge'),
+  // ETL sources
+  ETLSOURCE_VIEW: rb('etlsource.view'),
+  ETLSOURCE_ADD: rb('etlsource.add'),
+  ETLSOURCE_EDIT: rb('etlsource.edit'),
+  ETLSOURCE_PURGE: rb('etlsource.purge'),
+  // ETL health monitors
+  ETLMONITOR_VIEW: rb('etlmonitor.view'),
+  ETLMONITOR_ADD: rb('etlmonitor.add'),
+  ETLMONITOR_EDIT: rb('etlmonitor.edit'),
+  ETLMONITOR_PURGE: rb('etlmonitor.purge'),
+  // Cross-cutting
+  SCHEMA_VIEW: rb('schema.view'),
+  SQL_EXECUTE: rb('sql.execute'),
+  PACKAGE_IMPORT: rb('package.import'),
+  PACKAGE_EXPORT: rb('package.export'),
+} as const;
+
+export type RbPrivilege = (typeof RB)[keyof typeof RB];
+
+/** 'Task: reportbuilder.report.edit' -> 'report.edit' (for display only). */
+export const rbDisplay = (privilege: string) => privilege.replace(RB_PREFIX, '');
+
+/**
+ * Route -> required privileges (any-of semantics: holding at least one grants access).
+ * Mirrors the backend FRONTEND_SECURITY_INSTRUCTIONS.md route table, extended with the
+ * routes it omits (admin/themes, linelist family, dashboards/:code, etl-dashboard,
+ * import-export). `/themes` (redirect) and `*` (fallback) are intentionally absent.
+ */
+export const ROUTE_PRIVILEGES: Record<string, string[]> = {
+  '/': [RB.REPORT_VIEW],
+  '/reports': [RB.REPORT_VIEW],
+  '/new': [RB.REPORT_ADD],
+  '/edit/:reportId': [RB.REPORT_EDIT],
+  '/run': [RB.REPORT_RUN],
+  '/run-reports': [RB.REPORT_RUN],
+  '/indicators': [RB.INDICATOR_VIEW],
+  '/sections': [RB.SECTION_VIEW],
+  '/dashboards': [RB.DASHBOARD_VIEW],
+  '/dashboards/:code': [RB.DASHBOARD_VIEW],
+  '/etl-dashboard': [RB.DASHBOARD_VIEW],
+  '/linelist': [RB.REPORT_VIEW],
+  '/linelist/new': [RB.REPORT_ADD],
+  '/linelist/edit/:reportId': [RB.REPORT_EDIT],
+  '/linelist/run/:reportId': [RB.REPORT_RUN],
+  '/admin': [RB.REPORT_VIEW],
+  '/admin/report-categories': [RB.CATEGORY_VIEW],
+  '/admin/age-categories': [RB.AGEGROUP_VIEW],
+  '/admin/age-groups': [RB.AGEGROUP_VIEW],
+  '/admin/report-library': [RB.LIBRARY_VIEW],
+  '/admin/themes': [RB.THEME_VIEW],
+  '/admin/etl-sources': [RB.ETLSOURCE_VIEW],
+  '/admin/etl-tasks': [RB.PACKAGE_IMPORT],
+  '/admin/etl-browser': [RB.ETLSOURCE_VIEW],
+  '/admin/etl-monitors': [RB.ETLMONITOR_VIEW],
+  '/admin/etl-monitors/builder': [RB.ETLMONITOR_VIEW],
+  '/admin/dashboards': [RB.DASHBOARD_VIEW],
+  '/import-export': [RB.PACKAGE_IMPORT, RB.PACKAGE_EXPORT],
+};

package/src/features/dashboards/DashboardRendererPage.tsx

@@ -0,0 +1,174 @@
+/**
+ * Dashboard Renderer Page
+ * The generic, config-driven dashboard surface: loads a
+ * ReportBuilderDashboard (or accepts one as a prop), parses its config
+ * (invalid configs fall back to a synthesized auto-include view with a
+ * warning banner), resolves sections/widgets and renders them through the
+ * shared widget implementations.
+ */
+
+import React from 'react';
+import { InlineLoading, InlineNotification, Stack } from '@carbon/react';
+import { useParams } from 'react-router-dom';
+import { useDashboard } from './hooks/useDashboard';
+import { useDashboardWidgets } from './hooks/useDashboardWidgets';
+import { useMonitorDataMap } from './hooks/useMonitorDataMap';
+import { parseDashboardConfig, resolveDashboardLayout } from './utils/dashboard-config.util';
+import DashboardHeader from './components/DashboardHeader';
+import DashboardSection from './components/DashboardSection';
+import WidgetSlotDispatcher from './components/WidgetSlotDispatcher';
+import DashboardEmptyState from './components/DashboardEmptyState';
+import type { DashboardConfigV1, DashboardDto } from '../../types/dashboard/dashboard.types';
+import styles from './dashboards.scss';
+
+export interface DashboardRendererPageProps {
+  /** Dashboard code/uuid — read from :code route params when omitted */
+  code?: string;
+  /** Pre-loaded dashboard (skips fetching) */
+  dashboard?: DashboardDto;
+  /** Used when the config is missing/invalid (e.g. the /etl-dashboard fallback) */
+  fallbackConfig?: DashboardConfigV1;
+  /** Overrides the persisted dashboard name in the header */
+  titleOverride?: string;
+}
+
+export function DashboardRendererPage({
+  code,
+  dashboard: dashboardProp,
+  fallbackConfig,
+  titleOverride,
+}: DashboardRendererPageProps) {
+  const params = useParams<{ code?: string }>();
+  const effectiveCode = code ?? params.code;
+
+  const fetched = useDashboard(dashboardProp ? undefined : effectiveCode);
+  const dashboard: DashboardDto | null = dashboardProp ?? fetched.dashboard;
+
+  const parsed = React.useMemo(
+    () => parseDashboardConfig(dashboard?.configJson),
+    [dashboard?.configJson],
+  );
+  const effectiveConfig = parsed.config ?? fallbackConfig ?? null;
+
+  const { monitors, reports, isLoading: widgetsLoading, error: widgetsError } =
+    useDashboardWidgets(effectiveConfig);
+
+  const resolved = React.useMemo(
+    () => resolveDashboardLayout(effectiveConfig, monitors, reports),
+    [effectiveConfig, monitors, reports],
+  );
+
+  const {
+    dataMap,
+    errorMap,
+    loadingMap,
+    lastRefreshed,
+    refreshAll,
+    refreshOne,
+    aggregateStatus,
+  } = useMonitorDataMap(resolved.etlMonitors, resolved.minRefreshInterval);
+
+  const isLoading = (!dashboardProp && fetched.isLoading) || widgetsLoading;
+  const title = titleOverride ?? dashboard?.name ?? 'Dashboard';
+  const subtitle = dashboard?.description;
+
+  const renderSlot = (
+    slot: Parameters<typeof WidgetSlotDispatcher>[0]['slot'],
+    position: number,
+  ) => (
+    <WidgetSlotDispatcher
+      slot={slot}
+      position={position}
+      data={slot.monitor?.uuid ? dataMap[slot.monitor.uuid] : undefined}
+      error={slot.monitor?.uuid ? errorMap[slot.monitor.uuid] : undefined}
+      loading={!!slot.monitor?.uuid && !!loadingMap[slot.monitor.uuid]}
+      onRefreshMonitor={refreshOne}
+    />
+  );
+
+  if (!dashboardProp && fetched.notFound) {
+    return (
+      <Stack gap={5}>
+        <InlineNotification
+          kind="error"
+          lowContrast
+          hideCloseButton
+          title="Dashboard not found"
+          subtitle={`No dashboard exists for "${effectiveCode ?? 'unknown'}".`}
+        />
+        <DashboardEmptyState />
+      </Stack>
+    );
+  }
+
+  if (!dashboardProp && fetched.error) {
+    return (
+      <Stack gap={5}>
+        <DashboardHeader
+          title={title}
+          subtitle={subtitle}
+          status="error"
+          lastRefreshed={null}
+          onRefresh={fetched.error ? refreshAll : refreshAll}
+        />
+        <InlineNotification
+          kind="error"
+          lowContrast
+          title="Error"
+          subtitle={fetched.error}
+        />
+      </Stack>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Stack gap={5}>
+        <DashboardHeader
+          title={title}
+          subtitle={subtitle}
+          status="success"
+          lastRefreshed={null}
+          onRefresh={refreshAll}
+          refreshing
+        />
+        <InlineLoading description="Loading dashboard…" className={styles['dashboard-loading']} />
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap={5}>
+      <DashboardHeader
+        title={title}
+        subtitle={subtitle}
+        status={aggregateStatus}
+        lastRefreshed={lastRefreshed}
+        onRefresh={refreshAll}
+      />
+
+      {(widgetsError || resolved.flags.configSynthesized) && (
+        <InlineNotification
+          kind="warning"
+          lowContrast
+          title="Dashboard configuration"
+          subtitle={
+            widgetsError
+              ? widgetsError
+              : 'This dashboard’s configuration is invalid — showing all active ETL monitors instead.'
+          }
+        />
+      )}
+
+      {resolved.sections.length === 0 ? (
+        <DashboardEmptyState synthesized={resolved.flags.configSynthesized} />
+      ) : (
+        resolved.sections.map((section) => (
+          <DashboardSection key={section.key} section={section} renderSlot={renderSlot} />
+        ))
+      )}
+    </Stack>
+  );
+}
+
+export default DashboardRendererPage;

package/src/features/dashboards/DashboardsPage.tsx

@@ -0,0 +1,164 @@
+/**
+ * Dashboards Index Page
+ * Lists active dashboards (by code) and links into /dashboards/:code.
+ * Keeps the legacy auto view discoverable: if no dashboard with code
+ * "etl-dashboard" exists, an "ETL Monitors (auto)" entry is appended.
+ */
+
+import React from 'react';
+import { Button, DataTable, DataTableSkeleton, InlineNotification, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow, Tag, Tile } from '@carbon/react';
+import { ArrowRight, Dashboard as DashboardIcon } from '@carbon/icons-react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../../components/shared/header/header.component';
+import { listDashboards } from '../../resources/dashboard/dashboard.api';
+import type { DashboardDto } from '../../types/dashboard/dashboard.types';
+import styles from './dashboards.scss';
+
+const ETL_DASHBOARD_CODE = 'etl-dashboard';
+
+const headers = [
+  { key: 'name', header: 'Name' },
+  { key: 'code', header: 'Code' },
+  { key: 'dashboardType', header: 'Type' },
+  { key: 'description', header: 'Description' },
+  { key: 'open', header: '' },
+];
+
+export function DashboardsPage() {
+  const navigate = useNavigate();
+  const [rows, setRows] = React.useState<DashboardDto[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const ac = new AbortController();
+    let isMounted = true;
+
+    setLoading(true);
+    setError(null);
+
+    listDashboards({ activeOnly: true, v: 'default' }, ac.signal)
+      .then((data) => {
+        if (isMounted) setRows((data ?? []).filter((d) => d.uuid));
+      })
+      .catch((e: any) => {
+        if (isMounted && e?.name !== 'AbortError') setError(e?.message ?? 'Failed to load dashboards');
+      })
+      .finally(() => {
+        if (isMounted) setLoading(false);
+      });
+
+    return () => {
+      isMounted = false;
+      ac.abort();
+    };
+  }, []);
+
+  const hasEtlDashboard = rows.some((d) => d.code === ETL_DASHBOARD_CODE);
+
+  const tableRows = rows.map((d) => ({
+    id: d.uuid,
+    name: d.name,
+    code: d.code || '—',
+    dashboardType: d.dashboardType || 'CUSTOM',
+    description: d.description || '—',
+  }));
+
+  return (
+    <Stack gap={5}>
+      <Header
+        title="Dashboards"
+        subtitle="Configured dashboards composing ETL monitors, reports and other widgets."
+      />
+
+      <div style={{ padding: '0 1rem 1rem', display: 'grid', gap: '1rem' }}>
+        {error && <InlineNotification lowContrast kind="error" title="Error" subtitle={error} />}
+
+        {loading ? (
+          <DataTableSkeleton rowCount={3} columnCount={5} showHeader={false} showToolbar={false} />
+        ) : (
+          <>
+            {!hasEtlDashboard && (
+              <Tile className={styles['dashboards-index__auto-tile']}>
+                <div className={styles['dashboards-index__auto-main']}>
+                  <DashboardIcon size={20} className={styles['dashboards-index__auto-icon']} />
+                  <div>
+                    <strong>ETL Monitors (auto)</strong>
+                    <p className={styles['dashboards-index__auto-note']}>
+                      All active ETL monitors, arranged automatically — no configuration yet.
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  kind="ghost"
+                  renderIcon={ArrowRight}
+                  onClick={() => navigate('/etl-dashboard')}
+                >
+                  Open
+                </Button>
+              </Tile>
+            )}
+
+            {tableRows.length === 0 ? (
+              !hasEtlDashboard && null
+            ) : (
+              <DataTable rows={tableRows} headers={headers}>
+                {({ rows: dtRows, headers: dtHeaders, getHeaderProps, getRowProps }) => (
+                  <TableContainer>
+                    <Table useZebraStyles>
+                      <TableHead>
+                        <TableRow>
+                          {dtHeaders.map((header) => (
+                            <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                              {header.header}
+                            </TableHeader>
+                          ))}
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {dtRows.map((row) => {
+                          const original = rows.find((d) => d.uuid === row.id);
+                          return (
+                            <TableRow key={row.id} {...getRowProps({ row })}>
+                              <TableCell>{row.cells[0].value}</TableCell>
+                              <TableCell>{row.cells[1].value}</TableCell>
+                              <TableCell>
+                                <Tag size="sm" type="purple">
+                                  {row.cells[2].value}
+                                </Tag>
+                              </TableCell>
+                              <TableCell>{row.cells[3].value}</TableCell>
+                              <TableCell>
+                                <Button
+                                  size="sm"
+                                  kind="ghost"
+                                  renderIcon={ArrowRight}
+                                  iconDescription="Open dashboard"
+                                  hasIconOnly
+                                  onClick={() => original?.code && navigate(`/dashboards/${original.code}`)}
+                                />
+                              </TableCell>
+                            </TableRow>
+                          );
+                        })}
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+                )}
+              </DataTable>
+            )}
+
+            {!loading && rows.length === 0 && (
+              <p className={styles['dashboards-index__empty-note']}>
+                No dashboards configured yet. Create one under Admin → Dashboards.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </Stack>
+  );
+}
+
+export default DashboardsPage;

package/src/features/dashboards/EtlDashboardPage.tsx

@@ -0,0 +1,32 @@
+/**
+ * ETL Dashboard Page — /etl-dashboard
+ * Alias for the dashboard with code "etl-dashboard". When that config
+ * exists it is rendered in place (URL unchanged so nav + hard links keep
+ * working); until/unless it does, a synthesized auto-include view of all
+ * active ETL monitors is rendered — the pre-config behavior, zero migration.
+ */
+
+import React from 'react';
+import DashboardRendererPage from './DashboardRendererPage';
+import { synthesizeEtlDashboardConfig } from './utils/dashboard-config.util';
+import { useDashboard } from './hooks/useDashboard';
+
+const FALLBACK_CONFIG = synthesizeEtlDashboardConfig();
+
+export function EtlDashboardPage() {
+  const { dashboard, isLoading } = useDashboard('etl-dashboard');
+
+  if (!isLoading && dashboard?.uuid) {
+    return <DashboardRendererPage dashboard={dashboard} />;
+  }
+
+  // Loading (the auto view is a fine placeholder) or no config yet
+  return (
+    <DashboardRendererPage
+      fallbackConfig={FALLBACK_CONFIG}
+      titleOverride="ETL Monitor Dashboard"
+    />
+  );
+}
+
+export default EtlDashboardPage;

package/src/features/dashboards/components/DashboardEmptyState.tsx

@@ -0,0 +1,41 @@
+/**
+ * Dashboard Empty State
+ * Shown when a dashboard resolves to zero renderable widgets.
+ */
+
+import React from 'react';
+import { Button, Tile } from '@carbon/react';
+import { Dashboard as DashboardIcon } from '@carbon/icons-react';
+import { useNavigate } from 'react-router-dom';
+import styles from '../dashboards.scss';
+
+interface DashboardEmptyStateProps {
+  /** True when the config was synthesized (points admins at the monitor builder too) */
+  synthesized?: boolean;
+}
+
+export function DashboardEmptyState({ synthesized }: DashboardEmptyStateProps) {
+  const navigate = useNavigate();
+
+  return (
+    <Tile className={styles['dashboard-empty-state']}>
+      <DashboardIcon size={40} className={styles['dashboard-empty-state__icon']} />
+      <h3 className={styles['dashboard-empty-state__title']}>Nothing to show yet</h3>
+      <p className={styles['dashboard-empty-state__message']}>
+        This dashboard has no widgets configured.
+      </p>
+      <div className={styles['dashboard-empty-state__actions']}>
+        <Button size="sm" kind="primary" onClick={() => navigate('/admin/dashboards')}>
+          Configure dashboards
+        </Button>
+        {synthesized && (
+          <Button size="sm" kind="ghost" onClick={() => navigate('/admin/etl-monitors')}>
+            Manage ETL monitors
+          </Button>
+        )}
+      </div>
+    </Tile>
+  );
+}
+
+export default DashboardEmptyState;

package/src/features/dashboards/components/DashboardGrid.tsx

@@ -0,0 +1,48 @@
+/**
+ * Dashboard Grid
+ * Places widget slots on a Carbon grid using each slot's resolved
+ * ResponsiveSpan (sm 0-4, md 0-8, lg 0-16; 0 = hidden at that breakpoint,
+ * mapped to span={false} — Carbon rejects numeric 0).
+ */
+
+import React from 'react';
+import { Column, Grid } from '@carbon/react';
+import type { ResolvedWidgetSlot } from '../../../types/dashboard/dashboard.types';
+import styles from '../dashboards.scss';
+
+interface DashboardGridProps {
+  slots: ResolvedWidgetSlot[];
+  renderSlot: (slot: ResolvedWidgetSlot, position: number) => React.ReactNode;
+}
+
+function columnSpan(value?: number): number | false {
+  if (!value || value <= 0) return false;
+  return value;
+}
+
+export function DashboardGrid({ slots, renderSlot }: DashboardGridProps) {
+  // Number only the slots that actually render (UNSUPPORTED slots are skipped)
+  const rendered = slots.filter((slot) => slot.status !== 'UNSUPPORTED');
+
+  return (
+    <Grid className={styles['dashboard-grid']} condensed>
+      {slots.map((slot) => {
+        if (slot.status === 'UNSUPPORTED') return null;
+        const position = rendered.indexOf(slot) + 1;
+        return (
+          <Column
+            key={slot.slotKey}
+            sm={columnSpan(slot.span.sm)}
+            md={columnSpan(slot.span.md)}
+            lg={columnSpan(slot.span.lg)}
+            className={styles['dashboard-grid__cell']}
+          >
+            {renderSlot(slot, position)}
+          </Column>
+        );
+      })}
+    </Grid>
+  );
+}
+
+export default DashboardGrid;

package/src/features/dashboards/components/DashboardHeader.tsx

@@ -0,0 +1,58 @@
+/**
+ * Dashboard Header
+ * Wraps the shared Header with the dashboard's aggregate status pill and
+ * refresh actions ("Last refreshed" + "Refresh Now").
+ */
+
+import React from 'react';
+import { Button } from '@carbon/react';
+import { Renew as Refresh } from '@carbon/icons-react';
+import Header from '../../../components/shared/header/header.component';
+import type { DashboardAggregateStatus } from '../hooks/useMonitorDataMap';
+
+const STATUS_LABELS: Record<DashboardAggregateStatus, { label: string; kind: 'success' | 'warning' }> = {
+  success: { label: 'Healthy', kind: 'success' },
+  warning: { label: 'Degraded', kind: 'warning' },
+  error: { label: 'Errors detected', kind: 'warning' },
+};
+
+interface DashboardHeaderProps {
+  title: string;
+  subtitle?: string;
+  status: DashboardAggregateStatus;
+  lastRefreshed: Date | null;
+  onRefresh: () => void;
+  refreshing?: boolean;
+}
+
+export function DashboardHeader({ title, subtitle, status, lastRefreshed, onRefresh, refreshing }: DashboardHeaderProps) {
+  const statusMeta = STATUS_LABELS[status];
+
+  return (
+    <Header
+      title={title}
+      subtitle={subtitle}
+      status={{ label: statusMeta.label, kind: statusMeta.kind }}
+      actions={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          {lastRefreshed && (
+            <span style={{ fontSize: '0.8125rem', color: 'var(--cds-text-secondary, #525252)' }}>
+              Last refreshed: {lastRefreshed.toLocaleTimeString()}
+            </span>
+          )}
+          <Button
+            size="sm"
+            kind="ghost"
+            renderIcon={Refresh}
+            onClick={onRefresh}
+            disabled={refreshing}
+          >
+            Refresh Now
+          </Button>
+        </div>
+      }
+    />
+  );
+}
+
+export default DashboardHeader;

package/src/features/dashboards/components/DashboardSection.tsx

@@ -0,0 +1,46 @@
+/**
+ * Dashboard Section
+ * One resolved dashboard section: header (label + count), optional
+ * collapsed accordion (config.sections[].collapsed), and the slot grid.
+ */
+
+import React from 'react';
+import { Accordion, AccordionItem } from '@carbon/react';
+import type { ResolvedDashboardSection } from '../../../types/dashboard/dashboard.types';
+import DashboardGrid from './DashboardGrid';
+import styles from '../dashboards.scss';
+
+interface DashboardSectionProps {
+  section: ResolvedDashboardSection;
+  renderSlot: (slot: ResolvedDashboardSection['slots'][number], position: number) => React.ReactNode;
+}
+
+export function DashboardSection({ section, renderSlot }: DashboardSectionProps) {
+  const body = (
+    <DashboardGrid slots={section.slots} renderSlot={renderSlot} />
+  );
+
+  return (
+    <section  className={styles['dashboard-renderer']}>
+      {section.collapsed ? (
+        <Accordion className={styles['dashboard-section__accordion']}>
+          <AccordionItem title={`${section.label} (${section.slots.length})`}>
+            {body}
+          </AccordionItem>
+        </Accordion>
+      ) : (
+        <>
+          <div className={styles['dashboard-section__header']}>
+            <h3 className={styles['dashboard-section__label']}>{section.label}</h3>
+            <span className={styles['dashboard-section__count']}>
+              {section.slots.length} {section.slots.length === 1 ? 'widget' : 'widgets'}
+            </span>
+          </div>
+          {body}
+        </>
+      )}
+    </section>
+  );
+}
+
+export default DashboardSection;