VVibeFlui

Dashboard Layout

Dashboard layout renders cards above the table.

Basic dashboard

TS
export const adminSchema = {
  resource: "admin",
  dashboard: {
    enabled: true,
    title: "Admin Overview",
    description: "Summary of workspace activity.",
    grid: {
      columns: {
        base: 1,
        md: 3
      }
    },
    cards: [
      { key: "usersTotal", label: "Users", valueFrom: "meta.usersTotal", format: "number", icon: "mdi:account-group-outline" },
      { key: "revenue", label: "Revenue", valueFrom: "meta.revenue", format: "currency" },
      { key: "conversion", label: "Conversion", valueFrom: "meta.conversion", format: "percent" }
    ]
  }
} as const;

Card values

Dashboard cards can read values from:

  • valueFrom path on the page data/response
  • endpoint
  • custom card renderer

Card endpoint

TS
{
  key: "rolesTotal",
  label: "Roles",
  endpoint: "/api/admin/stats/roles",
  format: "number"
}

Dashboard card endpoints are fetched with GET.

Formats

Supported formats:

  • number
  • currency
  • percent
  • text
  • custom

Custom dashboard renderer

TS
dashboard: {
  renderer: "AdminDashboard"
},
registry: {
  renderers: ["AdminDashboard"]
}

If dashboard.renderer resolves, VibeFlui renders it instead of built-in cards.

Page surface behavior

Dashboard is hidden while a page-mode form or page-mode detail surface is active.