Add a dashboard widget

Export a WidgetDefinition and register it — it then appears in the dashboard's "Add widget" picker.

Define it

Create src/widgets/widgets/MyWidget.tsx:

export const RevenueWidget: WidgetDefinition = {
  type: 'revenue',
  title: 'Revenue',
  size: { w: 4, h: 2 },          // grid units
  permission: 'orders.read',     // only offered to users who can populate it
  configFields: [                // optional per-widget config
    { key: 'months', label: 'Months', type: 'number', default: 6 },
  ],
  Component: RevenueChart,
};

The component renders its own loading / empty / error states (use the shared primitives), and data widgets read from the permission-scoped /api/dashboard sources.

Register it

Add it to src/widgets/registry.ts:

import { RevenueWidget } from './widgets/RevenueWidget';

export const widgetRegistry = [/* … */, RevenueWidget];

It now appears in the picker, respects its permission, and its layout persists per user as a DashboardLayout row. See Dashboard & widgets.