Dashboard Layout

import { DashboardLayout } from 'fluxo-ui';
import type { DashboardWidget, DashboardLayouts } from 'fluxo-ui';

const widgets: DashboardWidget[] = [
  { id: 'sales',    title: 'Sales',    icon: LineChartUpIcon, children: <Sales /> },
  { id: 'visitors', title: 'Visitors', icon: UsersIcon,       children: <Visitors /> },
  { id: 'channels', title: 'Channels', icon: PieChartIcon,    children: <Channels /> },
  // ...
];

const defaultLayouts: DashboardLayouts = {
  lg: [
    { id: 'sales',    x: 0, y: 0, w: 4, h: 4 },
    { id: 'visitors', x: 4, y: 0, w: 4, h: 4 },
    { id: 'channels', x: 8, y: 0, w: 4, h: 4 },
    // ...
  ],
};

<DashboardLayout
  widgets={widgets}
  defaultLayouts={defaultLayouts}
  toolbarTitle="Overview"
/>

<DashboardLayout
  widgets={widgets}
  defaultLayouts={defaultLayouts}
  persistKey="my-app-dashboard"
  toolbarTitle="My Dashboard"
/>

const presets: DashboardLayoutPreset[] = [
  {
    id: 'default',
    name: 'Default',
    description: 'Balanced overview',
    layouts: defaultLayouts,
  },
  {
    id: 'sales-focus',
    name: 'Sales focus',
    description: 'Pin sales + orders, hide others',
    hiddenIds: ['channels', 'team', 'health', 'calendar'],
    layouts: {
      lg: [
        { id: 'sales',    x: 0, y: 0, w: 6, h: 6 },
        { id: 'orders',   x: 6, y: 0, w: 6, h: 6 },
        { id: 'visitors', x: 0, y: 6, w: 12, h: 5 },
      ],
    },
  },
];

<DashboardLayout widgets={widgets} presets={presets} ... />

const widgets: DashboardWidget[] = [
  { id: 'a', title: 'Card chrome',       chrome: 'card',       children: <Demo /> },
  { id: 'b', title: 'Borderless chrome', chrome: 'borderless', children: <Demo /> },
  { id: 'c', title: 'Sunken chrome',     chrome: 'sunken',     children: <Demo /> },
  { id: 'd', title: 'Plain chrome',      chrome: 'plain',      children: <Demo /> },
  { id: 'e', title: 'With badge',  badge: <span>NEW</span>, children: <Demo /> },
  { id: 'f', title: 'With error',  error: 'Service unavailable', children: <Demo /> },
];

<DashboardWidget
  id="sales"
  title="Sales"
  headerActions={
    <>
      <button className="eui-dashboard-widget-action" aria-label="Filter">
        <FilterIcon width={14} height={14} aria-hidden="true" />
      </button>
      <Dropdown
        value={range}
        options={[{ label: '7 days', value: '7d' }, { label: '30 days', value: '30d' }]}
        onChange={setRange}
        size="xs"
      />
      <button className="eui-dashboard-widget-action" aria-label="Export">
        <DownloadIcon width={14} height={14} aria-hidden="true" />
      </button>
    </>
  }
>
  ...
</DashboardWidget>

const widgets: DashboardWidget[] = [
  {
    id: 'sales',
    title: 'Sales',
    renderSettings: ({ closeSettings }) => (
      <>
        <label><input type="checkbox" /> Compare to prev period</label>
        <button onClick={closeSettings}>Save</button>
      </>
    ),
    onRefresh: async () => {
      await fetch('/api/sales').then(/*...*/);
    },
    children: <Sales />,
  },
];