payload-plugin-widgets: figures, lists and charts for the modular dashboard, read from your collections

[m-grgic]

I've published a plugin for the modular dashboard: payload-plugin-widgets. It adds figures, lists and charts that read from your collections.

pnpm add payload-plugin-widgets

import { buildConfig } from 'payload'
import { widgetsPlugin } from 'payload-plugin-widgets'

export default buildConfig({
  // …
  plugins: [widgetsPlugin()],
})

Then regenerate the import map.

What it does

• Nothing to declare. Every collection is a source as its fields describe it: how many there are, a sum for each number, a group for each select, checkbox and relationship, a list of the latest.
• Set up by whoever is looking. "A figure", "A list" and "A chart" are added in the dashboard's edit mode and filtered with the admin's own filter builder.
• Or by the config. figure(…), list(…) and chart(…) put widgets there ready-made. They are typed against your generated types and checked as the config is built, with a "did you mean" where a name is off.
• With the viewer's access. Every read is made as the signed-in user.
• No client-side chart library. The tiles are server components and plain CSS that follow the admin's theme, light and dark.
• Yours to take apart. Your own views for any of the three kinds, the data without the tiles (readFigure, readList, readChart), widgets that are entirely your own component, and a stylesheet made to be overridden. The same three components can stand on any other admin page.

widgetsPlugin({
  sources: { media: false },
  widgets: [
    figure('open-tasks', 'tasks', { label: 'Open tasks', where: { status: { not_equals: 'done' } } }),
    figure('longest-task', 'tasks', { label: 'Longest task', measure: { max: 'estimatedTime' } }),
  ],
})

A figure can also be set against the previous period or a goal, and filters can name a moment such as 'today' where a fixed date would go stale.

Where it stands

It's 0.1.0. It needs Payload 3.90 or later and React 19, and was developed on Payload 3.90.2, Next.js 16.3 and Postgres. Next.js 15 is allowed by the peer range but untried, and I haven't run it on the other database adapters. The README has a Limits section with the rest.

Feedback and issues are welcome, especially from setups unlike mine.