A small dashboard

// apps/docs/examples/ui/dashboard-module.tsximport {  DashboardChartModule,  DashboardModule,  DashboardModuleFacts,  DashboardModuleGroupDivider,  DashboardModuleNote,  DashboardModuleRows,  DashboardServiceRow,} from '@workspace/active-ui/components/composed/dashboard-module';import {Button} from '@workspace/active-ui/components/primitives/button';
const MONTHS = [  {month: 'Jul', count: 42},  {month: 'Aug', count: 35},  {month: 'Sep', count: 58},  {month: 'Oct', count: 49},];
/** * A small dashboard: a list module with a scope and a footer action, a * service-status module with a fact list below a divider, an empty module * with a note, and a chart module. The chart is a stand-in drawn with plain * elements; a real one comes from a chart library. The data is fictitious. */export default function DashboardModuleExample() {  const viewAll = (    <Button size="sm" variant="outline">      View all    </Button>  );  return (    <div className="grid w-full gap-4 lg:grid-cols-2">      <DashboardModule        title="Recent changes"        description="Last 7 days"        footerActions={viewAll}      >        <DashboardModuleRows label="Recent changes">          <li className="py-3 text-sm">Address of Ada Jansen changed</li>          <li className="py-3 text-sm">New participant: Bram de Vries</li>          <li className="py-3 text-sm">Scheme rates for 2027 added</li>        </DashboardModuleRows>      </DashboardModule>      <DashboardModule title="Services">        <DashboardModuleRows label="Services">          <DashboardServiceRow            label="Statements"            tone="success"            status="Running"          />          <DashboardServiceRow            label="Payments"            tone="warning"            status="Delayed"            meta="Checked 10:42"            metaDateTime="2026-10-20T10:42"            href="#payments"          />        </DashboardModuleRows>        <DashboardModuleGroupDivider />        <DashboardModuleFacts>          <div className="flex justify-between py-3 text-sm">            <dt className="text-muted-foreground">Last import</dt>            <dd>Today 06:00</dd>          </div>        </DashboardModuleFacts>      </DashboardModule>      <DashboardModule title="Open questions" description="Open">        <DashboardModuleNote>There are no open questions.</DashboardModuleNote>      </DashboardModule>      <DashboardChartModule title="New participants" description="Per month">        <div          className="flex h-40 items-end gap-3 px-4 pb-4"          role="img"          aria-label="New participants per month: July 42, August 35, September 58, October 49"        >          {MONTHS.map(({month, count}) => (            <div              key={month}              className="flex flex-1 flex-col items-center gap-1"            >              <div                className="bg-primary/70 w-full rounded-sm"                style={{height: `${count * 2}px`}}              />              <span className="text-muted-foreground text-xs">{month}</span>            </div>          ))}        </div>      </DashboardChartModule>    </div>  );}