Agent Skills: Advanced MUI Widgets — Top 0.01% Patterns

Advanced MUI Widgets — Top 0.01% Patterns

These patterns transform MUI from a component library into a living application platform.

DataGrid as a Living Application Surface

Sparkline Charts in Grid Cells

Every row becomes a mini dashboard with inline trend visualization.

import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
import type { GridColDef } from '@mui/x-data-grid';

// Custom column type — reuse across multiple columns
const sparklineColumn = (field: string, label: string, plotType: 'line' | 'bar' = 'line'): GridColDef => ({
  field,
  headerName: label,
  width: 180,
  sortable: false,
  filterable: false,
  renderCell: (params) => {
    const data = params.value as number[];
    if (!data?.length) return null;
    const isUp = data[data.length - 1] > data[0];

    return (
      <SparkLineChart
        data={data}
        width={160}
        height={48}
        plotType={plotType}
        curve="natural"
        showTooltip
        showHighlight
        area={plotType === 'line'}
        colors={[isUp ? '#16a34a' : '#dc2626']}
      />
    );
  },
});

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Contractor', width: 200 },
  sparklineColumn('weeklyTrend', '12-Week Trend', 'line'),
  sparklineColumn('weeklyHours', 'Weekly Hours', 'bar'),
  {
    field: 'utilization',
    headerName: 'Utilization',
    width: 120,
    renderCell: (params) => (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
        <Typography variant="body2" fontWeight={600} sx={{ minWidth: 40 }}>
          {params.value}%
        </Typography>
        <LinearProgress
          variant="determinate"
          value={params.value}
          sx={{
            flex: 1, height: 8, borderRadius: 4,
            bgcolor: 'action.hover',
            '& .MuiLinearProgress-bar': {
              borderRadius: 4,
              bgcolor: params.value > 80 ? 'error.main'
                : params.value > 60 ? 'warning.main'
                : 'success.main',
            },
          }}
        />
      </Box>
    ),
  },
];

Heatmap Color Scaling

Map numeric values to a continuous color gradient across cells.

function heatmapColor(value: number, min = 0, max = 100): string {
  const pct = Math.max(0, Math.min(1, (value - min) / (max - min)));

  // Cool → Warm gradient (blue → yellow → red)
  if (pct < 0.5) {
    const t = pct * 2;
    return `rgb(${Math.round(59 + 196 * t)}, ${Math.round(130 + 70 * t)}, ${Math.round(246 - 186 * t)})`;
  }
  const t = (pct - 0.5) * 2;
  return `rgb(${Math.round(255)}, ${Math.round(200 - 140 * t)}, ${Math.round(60 - 60 * t)})`;
}

const heatmapColumn: GridColDef = {
  field: 'score',
  headerName: 'Score',
  width: 100,
  renderCell: (params) => (
    <Box
      sx={{
        width: '100%', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        bgcolor: heatmapColor(params.value),
        color: params.value > 60 ? '#fff' : '#000',
        fontWeight: 700, fontSize: '0.875rem',
        transition: 'background-color 300ms ease',
      }}
    >
      {params.value}
    </Box>
  ),
};

Real-Time WebSocket Grid

Stream data updates from SignalR/WebSocket → apiRef.updateRows() with flash animation.

function LiveDataGrid({ initialRows, columns }: { initialRows: any[]; columns: GridColDef[] }) {
  const apiRef = useGridApiRef();
  const flashTimeouts = useRef(new Map<GridRowId, NodeJS.Timeout>());

  useEffect(() => {
    // Connect to SignalR hub or WebSocket
    const connection = new signalR.HubConnectionBuilder()
      .withUrl('/hubs/data')
      .withAutomaticReconnect()
      .build();

    connection.on('RowsUpdated', (deltas: any[]) => {
      // Patch only changed rows — no full re-render
      apiRef.current.updateRows(deltas);

      // Flash animation per updated row
      for (const delta of deltas) {
        const el = apiRef.current.getRowElement(delta.id);
        if (el) {
          el.classList.add('row-flash');
          // Clear previous timeout for this row
          const prev = flashTimeouts.current.get(delta.id);
          if (prev) clearTimeout(prev);
          flashTimeouts.current.set(
            delta.id,
            setTimeout(() => el.classList.remove('row-flash'), 600),
          );
        }
      }
    });

    connection.start();
    return () => { connection.stop(); };
  }, [apiRef]);

  return (
    <DataGrid
      apiRef={apiRef}
      rows={initialRows}
      columns={columns}
      sx={{
        '@keyframes rowFlash': {
          '0%': { backgroundColor: 'rgba(56,189,248,0.25)' },
          '100%': { backgroundColor: 'transparent' },
        },
        '& .row-flash': {
          animation: 'rowFlash 600ms ease-out',
        },
        // Green flash for price up, red for down
        '& .row-flash-up': {
          animation: 'rowFlash 600ms ease-out',
          '@keyframes rowFlash': { '0%': { bgcolor: 'rgba(22,163,74,0.25)' } },
        },
      }}
    />
  );
}

Save/Restore Grid State as User Profiles

function GridWithProfiles({ rows, columns }: { rows: any[]; columns: GridColDef[] }) {
  const apiRef = useGridApiRef();
  const [profiles, setProfiles] = useState<Record<string, any>>(() =>
    JSON.parse(localStorage.getItem('grid-profiles') ?? '{}'),
  );
  const [activeProfile, setActiveProfile] = useState<string | null>(null);

  const saveProfile = useCallback(() => {
    const name = prompt('Profile name:');
    if (!name) return;
    const state = apiRef.current.exportState();
    const next = { ...profiles, [name]: state };
    setProfiles(next);
    localStorage.setItem('grid-profiles', JSON.stringify(next));
    setActiveProfile(name);
  }, [apiRef, profiles]);

  const loadProfile = useCallback((name: string) => {
    if (profiles[name]) {
      apiRef.current.restoreState(profiles[name]);
      setActiveProfile(name);
    }
  }, [apiRef, profiles]);

  return (
    <>
      <Stack direction="row" spacing={1} sx={{ mb: 1 }} alignItems="center">
        <Typography variant="caption" color="text.secondary">Views:</Typography>
        {Object.keys(profiles).map((name) => (
          <Chip
            key={name}
            label={name}
            variant={activeProfile === name ? 'filled' : 'outlined'}
            color={activeProfile === name ? 'primary' : 'default'}
            size="small"
            onClick={() => loadProfile(name)}
            onDelete={() => {
              const { [name]: _, ...rest } = profiles;
              setProfiles(rest);
              localStorage.setItem('grid-profiles', JSON.stringify(rest));
              if (activeProfile === name) setActiveProfile(null);
            }}
          />
        ))}
        <Button size="small" startIcon={<SaveIcon />} onClick={saveProfile}>
          Save View
        </Button>
      </Stack>
      <DataGrid apiRef={apiRef} rows={rows} columns={columns} />
    </>
  );
}

Custom Domain Toolbar

function DomainToolbar({ onAssign, onExport }: { onAssign: () => void; onExport: () => void }) {
  const apiRef = useGridApiContext();
  const selectedRows = useGridSelector(apiRef, gridRowSelectionStateSelector);
  const hasSelection = selectedRows.length > 0;

  return (
    <GridToolbarContainer sx={{ gap: 1, p: 1 }}>
      <GridToolbarFilterButton />
      <GridToolbarColumnsButton />
      <GridToolbarDensitySelector />
      <Divider orientation="vertical" flexItem />

      <Button
        size="small"
        startIcon={<PersonAddIcon />}
        disabled={!hasSelection}
        onClick={onAssign}
      >
        Assign ({selectedRows.length})
      </Button>

      <Button size="small" startIcon={<FileDownloadIcon />} onClick={onExport}>
        Export Filtered
      </Button>

      <Box sx={{ flex: 1 }} />

      {/* Date range filter */}
      <DateRangePicker
        slotProps={{
          textField: { size: 'small', sx: { width: 260 } },
          shortcuts: {
            items: [
              { label: 'This Week', getValue: () => [dayjs().startOf('week'), dayjs()] },
              { label: 'This Month', getValue: () => [dayjs().startOf('month'), dayjs()] },
            ],
          },
        }}
      />
    </GridToolbarContainer>
  );
}

<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  slots={{ toolbar: DomainToolbar }}
  slotProps={{ toolbar: { onAssign: handleAssign, onExport: handleExport } }}
/>

Premium Tier — Transformative Features

AI Assistant (Premium)

Natural language grid interaction — users type queries, the grid updates.

import { DataGridPremium, GridAiAssistantPanel } from '@mui/x-data-grid-premium';

<DataGridPremium
  rows={rows}
  columns={columns}
  aiAssistant
  slots={{ aiAssistantPanel: GridAiAssistantPanel }}
  allowAiAssistantDataSampling
  aiAssistantSuggestions={[
    { value: 'Show overdue invoices' },
    { value: 'Group by department, sort by total revenue' },
    { value: 'Filter to active contractors with utilization > 80%' },
    { value: 'Show month-over-month growth' },
  ]}
/>

Bi-Directional Chart + Grid Sync (Premium)

Filtering/grouping in the grid instantly updates connected charts.

import { DataGridPremium, useGridApiRef, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-premium';
import { BarChart } from '@mui/x-charts/BarChart';

function DashboardWithSync({ rows, columns }) {
  const apiRef = useGridApiRef();
  const [chartData, setChartData] = useState(rows);

  // Sync chart with grid's visible rows
  const handleStateChange = useCallback(() => {
    const visibleIds = gridFilteredSortedRowIdsSelector(apiRef);
    const visibleRows = visibleIds.map((id) => apiRef.current.getRow(id)).filter(Boolean);
    setChartData(visibleRows);
  }, [apiRef]);

  return (
    <Stack spacing={3}>
      <Paper sx={{ p: 2, height: 300 }}>
        <BarChart
          dataset={chartData}
          xAxis={[{ scaleType: 'band', dataKey: 'department' }]}
          series={[
            { dataKey: 'revenue', label: 'Revenue', color: '#2563eb' },
            { dataKey: 'expenses', label: 'Expenses', color: '#dc2626' },
          ]}
        />
      </Paper>

      <Box sx={{ height: 500 }}>
        <DataGridPremium
          apiRef={apiRef}
          rows={rows}
          columns={columns}
          onFilterModelChange={handleStateChange}
          onSortModelChange={handleStateChange}
          onRowGroupingModelChange={handleStateChange}
        />
      </Box>
    </Stack>
  );
}

Pivoting (Premium)

No-code SQL GROUP BY in the browser — users drag fields to rows/columns/values.

<DataGridPremium
  rows={rows}
  columns={columns}
  initialState={{
    rowGrouping: { model: ['department'] },
    aggregation: {
      model: {
        salary: 'avg',
        revenue: 'sum',
        headcount: 'size',
      },
    },
  }}
/>

Excel-Style Clipboard (Premium)

Multi-cell selection + Ctrl+C/Ctrl+V with Excel/Sheets.

<DataGridPremium
  rows={rows}
  columns={columns}
  cellSelection
  ignoreValueFormatterDuringExport
  onBeforeClipboardPasteStart={async ({ data }) => {
    // Confirmation dialog for bulk paste
    const rowCount = data.length;
    if (rowCount > 10) {
      const confirmed = await showConfirmDialog(
        `Paste ${rowCount} rows?`,
        'This will update existing values.',
      );
      if (!confirmed) throw new Error('Paste cancelled');
    }
  }}
  splitClipboardPastedText={(text) =>
    text.split('\n').map((row) => row.split('\t'))
  }
/>

Patterns That Make Apps Genuinely Unique

| Pattern | Effect | |---------|--------| | Grid IS the form | Users never open separate forms for simple edits | | Data speaks first | Sparklines, progress bars, heatmaps give semantic meaning at a glance | | Natural language UX | AI assistant transforms power-user grid into conversational interface | | Persistent views | Saved grid states give users ownership over their workspace | | Schema-first forms | Forms adapt to roles and entity types without touching React code | | Motion + Base UI | Hardware switches, spring toggles, animated wizards feel crafted | | Tree as navigation | RichTreeView replaces sidebar with interactive, searchable hierarchy | | Chart + grid sync | Live bi-directional updates create a BI-tool experience |

Community vs Pro vs Premium Capability Map

| Capability | Community | Pro | Premium | |------------|:---------:|:---:|:-------:| | Sparkline/progress/heatmap cells | ✓ renderCell | ✓ | ✓ | | Real-time updateRows | ✓ | ✓ | ✓ | | Save/restore grid state | ✓ | ✓ | ✓ | | Custom filter operators | ✓ | ✓ | ✓ | | Custom toolbar slots | ✓ | ✓ | ✓ | | Master-detail panels | — | ✓ | ✓ | | Column pinning | — | ✓ | ✓ | | Tree data | — | ✓ | ✓ | | Row grouping + aggregation | — | — | ✓ | | Pivoting | — | — | ✓ | | Excel clipboard copy/paste | — | — | ✓ | | Charts + DataGrid sync | — | — | ✓ | | AI assistant (NL queries) | — | — | ✓ |

100+ Custom Widget Ideas Catalog

Exhaustive reference of buildable widgets organized by category. Every cell in a DataGrid is a React portal — anything that renders can live there.

DataGrid Cell Widgets (renderCell)

Status & State Cells:

• Animated status pill — Chip with Framer Motion layout animation between states (Active → Paused → Terminated)
• Multi-state traffic light — three dots (availability, billing, compliance) each independently green/yellow/red
• Pulse dot — CSS @keyframes radiate animation indicating "live" or "recently updated" rows
• Countdown timer cell — live deadline countdown; amber at 48h, red at 24h, blinking colon
• SLA breach indicator — thin bar draining left-to-right as SLA window closes (health bar)
• Confidence score ring — tiny circular progress arc replacing a plain percentage number
• Dual-state toggle cell — inline MUI Switch committing directly to API with optimistic rollback

Data Visualization Cells:

• Inline sparkline (trend) — area sparkline with highlighted last point, directional color
• Bullet chart cell — thin bar against background range band (actual vs target in one cell)
• Mini bar chart cell — 5-7 vertical SVG bars showing weekly totals with hover tooltip
• Waterfall delta cell — positive/negative delta with colored arrow and background tint
• Heatmap cell background — continuous color scale (white → orange → red) with auto-contrast text
• Radial gauge cell — tiny half-circle gauge arc, fits in 60px column
• Stacked proportion bar — full-width bar split into 2-4 colored segments (time split: design/dev/review)
• Trend arrow with magnitude — arrow size scales logarithmically with change magnitude
• Rating stars cell — interactive half-star rating committing on click
• Scatter dot cluster — 10-30 tiny dots at x/y positions showing distribution

Content & Identity Cells:

• Avatar stack cell — up to 5 overlapping Avatars with "+N more" chip
• Tag cloud cell — colored Chips, overflow-hidden with "+3 more" popover on hover
• File type icon cell — richly styled icon (PDF/XLSX/PNG) with one-click download on hover
• Image thumbnail cell — 40×40 lazy-loaded thumbnail with Popover zoom on hover
• Code snippet cell — monospace syntax-highlighted text with popover expansion
• Flag + country cell — 16×16 flag emoji/SVG beside country name
• Severity badge cell — rounded square with color-coded left border
• Priority indicator cell — 3-segment vertical bar like a battery icon for urgency

Action & Interaction Cells:

• One-click action cell — single IconButton for the most common row action
• Split-button action cell — primary action + chevron opening secondary Menu
• Inline numeric stepper — - / value / + for quantity without opening a form
• Inline date edit cell — click opens DatePicker popover anchored to cell
• Inline rich text cell — click opens Tiptap editor in Popover anchored to cell
• Expandable JSON viewer — collapsed { ... } expanding to formatted JSON tree in Collapse
• Drag handle cell — DragIndicatorIcon enabling manual row reorder, persists on drop
• Copy-to-clipboard cell — hover reveals clipboard icon, click copies with toast confirmation

DataGrid Row-Level Widgets

• Detail panel as mini-form — row expansion reveals RHF form pre-populated from row data
• Detail panel as micro-dashboard — expansion reveals sparklines, stat grid, event timeline
• Detail panel as nested sub-grid — second DataGrid scoped to row's children (project → tasks)
• Row-level activity feed — chronological event feed with avatars and timestamps
• Row comparison mode — select two rows, diff-style view highlights differing cells
• Pinned summary row — custom footer with aggregated statistics per column
• Ghost row (drafts) — dashed border + transparent background for unsaved rows
• Row-level skeleton loader — individual rows animate as skeletons during lazy load
• Row health score bar — thin colored bar along left edge (like VS Code diagnostic markers)
• Animated row flash on update — WebSocket-triggered green/red flash with CSS keyframe

DataGrid Toolbar & Panel Widgets

• Global entity search bar — full-width Autocomplete searching across multiple fields
• Live row count badge — Badge on filter button: "12 of 450 rows visible"
• Saved views dropdown — Select restoring named grid state snapshots (filter/sort/columns)
• Bulk action bar — toolbar morphs with Framer Motion to reveal bulk actions on selection
• Density slider — Slider controlling row density beyond MUI's three built-in options
• Column group toggle — toggle buttons showing/hiding logical column groups ("Financial", "Contact")
• Time travel scrubber — Slider that reloads grid with historical snapshot data for that date
• Import zone in toolbar — drag-drop CSV zone with column-mapping modal
• Export format picker — split button for CSV/XLSX/JSON/filtered subset export
• Active filter chips strip — removable Chips below toolbar showing each active filter

Form Widgets

Input Patterns:

• Autosave status indicator — floating Chip ("Saving…" / "Saved ✓" / "Error") near form title
• Field completion progress ring — circular arc above submit button filling as fields complete
• Smart address field — single TextField with Google Places autocomplete → splits into parts
• Phone input with flag selector — flag picker Select + formatted phone TextField
• Segmented control row — large icon+label toggle buttons replacing boring Select
• Tag input field — type + Enter creates Chip; removable; whitelist or freeform
• Dual-thumb range slider with histogram — Slider over histogram SVG showing distribution
• Color picker field — swatch preview → full HSL picker popover with hex/rgb tabs
• Icon picker field — searchable grid of icons in popover, selected appears as preview
• Emoji picker field — same pattern for emoji (reactions, category markers, mood selectors)
• Geolocation picker — embeddable map as form field; click to drop pin, lat/lng populate
• Star rating input — interactive with keyboard accessibility and ARIA labels
• Currency input — formats on blur, strips formatting on focus, locale-aware validation
• Percentage input with live preview — typing shows live proportion bar below field

Multi-Step & Structural:

• Step indicator with completion state — checkmarks on complete, spring animation on current, warning on skipped
• Accordion form sections — auto-expand next incomplete section after user collapses current
• Collapsible optional fields — "Show advanced options" button with smooth Collapse
• Inline validation summary panel — sticky panel listing all errors as clickable scroll-to links
• Undo/redo form history — Ctrl+Z/Y traversing state snapshots in circular buffer
• Dependency graph field — locked until upstream fields validate; tooltip explains requirements
• Signature pad field — canvas Box for mouse/stylus signature → base64 PNG
• Rich text field with toolbar — Tiptap editor styled with MUI Paper/IconButton
• File upload with preview grid — thumbnail grid (images) or file type icons with reorder
• Conditional field reveal animation — motion.div spring entry instead of hard visibility toggle

Dashboard Widgets

KPI & Metric:

• Flip counter KPI card — digits "flip" with rotateX animation (departures board style)
• Trend comparison KPI — current + previous + delta with directional arrow and color tint
• Target progress card — bold number + subtitle + horizontal bar toward target
• Sparkline KPI card — full-width ghost area chart behind the stat number
• Multi-metric ticker — horizontal strip cycling 5-10 metrics with slide transition
• Real-time gauge widget — half-circle SVG gauge with animated needle (D3-free, theme colors)
• Scorecard with grade — letter grade (A-F) in large bold colored circle + explanation
• Comparison donut — two-value donut with center text showing change, animated on mount

Temporal:

• Activity heatmap calendar — GitHub-style 52-week contribution grid with hover tooltips
• Gantt mini-widget — compact horizontal bar chart (tasks with start/end, color by status)
• Timeline feed widget — vertical timeline with date markers, event icons, descriptions
• Upcoming events countdown — next 3-5 events with T-minus countdown timers
• Rolling 7-day bar chart — auto-scoped BarChart with today's bar highlighted
• SLA tracking grid — mini grid showing entity name, due date, colored urgency bar

Status & Health:

• Service health board — grid of service + status dot + uptime %; click for 30-day sparkline
• Capacity utilization matrix — 2D grid (team × week) with heatmap cell backgrounds
• Alert severity stack — stacked Paper with critical/high/medium/low colored bands
• Pipeline stage funnel — horizontal SVG funnel with counts; click filters main grid
• Quota usage bar stack — single full-width bar divided into colored quota categories
• Dependency status tree — RichTreeView showing service dependencies with colored status
• Data freshness indicator — "Last synced X min ago" with pulsing dot; amber/red thresholds

Collaboration & Social:

• Online presence widget — avatar row with green/gray dots + "last active X min ago" hover
• Activity feed widget — scrollable recent actions with avatars, infinite scroll
• Comment thread widget — threaded comments in Card with indent, new comments animate in
• Leaderboard widget — ranked list with medal icons, animated number changes
• Recent changes diff widget — last 5 field changes with old → new + timestamp + who
• Team capacity ring cluster — cluster of small radial gauges per team member

Content & Navigation:

• Quick search command palette — Cmd+K modal with fuzzy search across entities/commands/nav
• Draggable kanban column — drag-and-drop Paper cards in horizontal scroll with elevation changes
• File explorer tree widget — RichTreeView as file browser with context menu + inline rename
• Breadcrumb navigator — clickable breadcrumbs doubling as drill-down navigation
• Resizable split pane — draggable divider with persisted ratio to localStorage
• Pinned notes widget — drag-to-reorder, click-to-expand, pin/unpin toggle
• Shortcut grid widget — configurable 4×3 grid of labeled icon buttons for frequent actions

Embedded & Overlay Widgets

• Contextual side panel — Drawer from right with full entity context (stats, activity, related)
• Floating action ring — SpeedDial with spring-animated domain action icons
• In-app notification center — IconButton badge → Popover feed, grouped by type, dismissable
• Persistent help tooltip — Tooltip that persists on click with description + "Learn more"
• Spotlight onboarding overlay — semi-transparent overlay with clip-path circle highlighting elements
• Inline status banner — thin top Alert sliding in during async operations
• Right-click context menu — onContextMenu opening styled Menu with row-specific actions
• Sticky comparison tray — bottom tray slides up showing 2-4 pinned items side-by-side
• Floating chat bubble — FAB opening embedded chat interface in floating Paper
• Global progress overlay — top-of-page LinearProgress (YouTube/GitHub style)
• Toast queue with actions — stacking snackbars with Undo/Retry/View buttons
• Popover mini-chart — hover any metric opens 120×80 sparkline/bar chart for quick context

Theme & Global Experience Widgets

• Live theme switcher — floating Fab cycling named themes with CSS variable transition
• User-configurable layout grid — react-grid-layout + Paper for drag/resize/add/remove dashboards
• Density mode toggle — icon button toggling "information dense" vs "comfortable" via CSS vars
• Dark/light mode toggle with transition — clip-path radial wipe animation from click position
• Keyboard shortcut overlay — ? opens full-screen modal with two-column shortcut grid
• Breadcrumb-as-navigation — persistent breadcrumb where each crumb is a dropdown of siblings
• Per-entity color labeling — user-assigned color as left-border accent across all views
• Widget loading skeleton system — purpose-built skeletons mirroring actual content shape
• Empty state illustrations — illustrated empty states with contextual CTAs (not "No data found")
• Confetti burst on milestone — canvas-confetti beneath celebratory Snackbar on key achievements

100+ Standalone Dashboard Widget Ideas (Net-New)

Self-contained Paper/Card-based units for drag-resize grid dashboards.

Financial & Revenue Widgets

• Revenue waterfall card — starting balance → additions/subtractions → ending balance as horizontal segments
• Invoice aging buckets — four stacked bands (current, 1-30d, 31-60d, 60+d) proportionally sized, green→red
• Cost-per-unit trend — auto-scaled Y axis emphasizing micro-changes, current value floating at line end
• Burn rate runway meter — fuel gauge draining left-to-right; orange <6mo, red <3mo
• Gross margin drift dial — large % number with semicircular arc showing position in trailing 12mo range
• Revenue concentration risk card — treemap of top 10 clients with % of total; risk score badge
• Recurring vs one-time split donut — MRR vs one-time; center text = total; segments animate independently
• Quote-to-cash pipeline — horizontal funnel (Quote→Approved→Invoiced→Paid) with counts + dollar amounts
• Payment velocity widget — avg days invoice-to-paid as large number + 90-day sparkline + delta badge
• Multi-currency exchange alert — live rates for invoiced currencies; >1% moves flash amber
• Commission earned vs target arc — bold arc gauge filling as earned climbs toward monthly goal

People, Team & Workforce Widgets

• Contractor utilization heatmap — rows=contractors, columns=weeks, cell color=utilization %
• Bench strength indicator — horizontal bar per skill category showing available (unassigned) count
• Headcount trajectory line — 12-month active member/contractor count with annotated key events
• Skills radar — RadarChart with 6-8 skill axes; compare two people as overlapping polygons
• Onboarding funnel — stages (invited→registered→profile→first assignment) with drop-off %
• Attrition risk heatmap — 2D grid (role × tenure) with ML-predicted risk intensity per cell
• Certification expiry timeline — horizontal strip with dots; within 30d=orange, overdue=red
• Workload balance dial cluster — four half-circle dials per team showing avg workload fill %
• Availability calendar mini-grid — 4-week grid, rows=contractors, cells=green/yellow/red
• New vs returning member mix — stacked monthly bars showing acquisition vs retention health
• Top performer spotlight — rotating card cycling top 3 with avatar + dominant metric every 8s

Project & Work Tracking Widgets

• Project health scorecard — 4×4 grid of RAG-colored squares with project name + one-line status
• Blocked items counter — bold count + top 3 blockers with age + CTA to full blocked list
• Velocity trend — 6-week rolling bar chart with current week highlighted + average dashed line
• Work type distribution pie — strategic vs operational vs maintenance vs reactive donut
• Scope creep tracker — original vs current estimate side-by-side with percentage creep badge
• Time logged vs estimated scatter — inline SVG scatter; dots above diagonal = over-run
• Project milestone countdown — ordered T-minus list with RAG indicators; overdue shows negative
• Approval queue depth — single number + 14-day trend sparkline + jump-to-approvals button
• Rework rate card — % items reopened + 30-day sparkline + industry benchmark dashed reference
• Resource conflict heatmap — people × project slots; red cells = double-booked; conflict count badge

Map & Geo Widgets

• Member/contractor location dot map — embedded Leaflet mini-map with entity dots + click popovers
• Regional coverage ring — choropleth SVG regions with fill intensity = coverage density
• Revenue-by-region globe — tilted 2D projection with bubble markers proportional to revenue
• Nearest-member finder — map centered on viewer + concentric rings at 25/50/100 miles + count badges
• Event location cluster map — clustered dots expanding on zoom for upcoming event locations
• Address completeness tracker — % of records with verified addresses + bulk geocode button

Communication & Engagement Widgets

• Email open rate trend — last 10 campaigns line chart + industry benchmark reference line
• Response time SLA widget — 30-day avg time-to-first-response with green/amber/red SLA bars
• Engagement score breakdown — horizontal bars showing login/action/content/community contribution
• NPS trend widget — 12-month rolling NPS line with promoter/neutral/detractor stacked area behind
• Survey completion funnel — invited→opened→started→completed with drop-off % per stage
• Last-contact age distribution — member bars bucketed by days-since-contact; 90+ glows red

Financial Chart Widgets (MUI X Chart Types)

• Sankey flow diagram — money/work flowing between categories; clicking highlights path
• Range bar chart per project — horizontal bars spanning start→end dates; lightweight Gantt
• Pyramid chart for funnel — classic marketing funnel with label+count per stage
• Funnel chart for conversion — vertical with conversion % between trapezoid stages
• Scatter with regression line — custom SVG best-fit line for cost-vs-output analysis
• Multi-series radar comparison — 3-4 overlapping polygons comparing entities across axes
• Stacked area chart with zoom/pan — drag to select date sub-range; axis snaps to selection

Operational & System Widgets

• API quota consumed ring gauge — ring filling green→amber→red + reset countdown below
• Integration health grid — name + status dot + "last synced X min ago" + re-sync button
• Error rate spike detector — 24h line chart; spikes above threshold annotated with red dot + message
• Queue depth monitor — 30s-refresh bar chart by queue name; red when exceeding thresholds
• Scheduled job calendar — 7-day view with success/failure blocks at scheduled times
• Storage usage breakdown — stacked horizontal bar by category (attachments/exports/audit/cache)
• Database query latency widget — response time histogram + P95/P99 badges
• Feature flag status board — compact grid of flag names with toggleable on/off chips

Time Intelligence Widgets

• Business hours coverage clock — 24h radial clock with staffed hours as colored arc
• Week-over-week comparison bars — grouped bars (current vs prior week) + delta labels
• Rolling average drift card — 7d/30d/90d averages stacked with tiny sparklines per row
• Time zone status strip — horizontal strip per team member showing current local time + status
• Deadline density calendar — 4-week mini calendar; cell intensity = deadline count per day
• Overtime hours heatmap — day-of-week × person grid showing overtime per cell

Predictive & AI-Powered Widgets

• Anomaly spotlight card — AI-surfaced top 3 anomalous data points with "Investigate" buttons
• Churn prediction list — top 5 at-risk by churn probability + last activity + retention action
• Demand forecast widget — historical actuals + shaded forecast cone with uncertainty bounds
• Smart goal pacing — progress bar with ghost marker for expected pacing; amber if behind
• Sentiment trend line — rolling average of LLM-analyzed feedback sentiment over time
• What-if scenario card — 2-3 slider inputs with live-updating projected metric output

Member & Association-Specific Widgets

• Membership tier breakdown — horizontal stacked bar by tier (bronze/silver/gold/platinum)
• Renewal wave calendar — 12-month heatmap showing when renewal pressure peaks
• Chapter/region tree — RichTreeView hierarchy with member counts + health indicators per node
• New member welcome queue — recently joined members needing profile/committee/welcome action
• Committee seat vacancy tracker — committees × seats grid; unfilled glow amber
• Event RSVP pulse — registered vs capacity radial fill + waitlist count + notify button
• Member birthday this week — list with "Send greeting" buttons generating pre-drafted emails
• Benefits usage heatmap — benefit × month grid showing utilization rate per cell
• Lapsed member re-engagement funnel — targeted→contacted→responded→renewed stages
• Member engagement score histogram — distribution bars showing community health shape
• Dues collected vs projected — collected/projected numbers + fill bar + trend vs prior year

Interaction & Delight Widgets

• Animated world clock mosaic — 2×3 analog clock faces with real-time animated hands per timezone
• Live visitor/session counter — bold pulsing number + 60-second sparkline updating every 5s
• Ambient noise widget — soundwave animated bars reflecting real-time API call volume
• Drag-to-compare toggle — before/after slider revealing two data states (current vs prior)
• Data storytelling narrative card — LLM-generated one-paragraph summary of key weekly changes
• "Did you know?" insight rotator — cycling AI-generated insights every 60s with thumbs up/down
• Confetti milestone card — celebratory animation on threshold crossing with share button
• Random spotlight card — surfaces one random under-explored record daily as a relationship nudge