Dashboard

Open + Pro variants

Full dashboard screens — KPI stats, charts, tables and activity feeds across finance, commerce, support, analytics and observability.

3 of 12

resources/views/pages/dashboard-dense-kpi.blade.php Blade

@props([
    'title' => 'Finance overview',
    'subtitle' => 'Net revenue and billing health across all channels.',
    'stats' => null,
    'series' => null,
    'categories' => null,
    'invoices' => null,
    'health' => null,
    'activity' => null,
])

@php
    $stats ??= [
        ['label' => 'Net revenue', 'value' => '$182,400', 'delta' => '+8.2%', 'description' => 'vs last month'],
        ['label' => 'MRR', 'value' => '$61,920', 'delta' => '+3.4%', 'description' => 'recurring'],
        ['label' => 'Outstanding', 'value' => '$12,840', 'delta' => '-5.1%', 'description' => 'awaiting payment'],
        ['label' => 'Avg. invoice', 'value' => '$1,284', 'delta' => '+1.9%', 'description' => 'per customer'],
        ['label' => 'Refunds', 'value' => '$2,310', 'delta' => '-0.8%', 'description' => 'this month'],
        ['label' => 'Active accounts', 'value' => '3,942', 'delta' => '+6.7%', 'description' => 'billing live'],
    ];

    $series ??= [
        ['name' => __('Direct'), 'data' => [42, 48, 45, 53, 61, 58, 67, 72, 69, 78, 84, 91]],
        ['name' => __('Marketplace'), 'data' => [28, 31, 30, 36, 39, 41, 44, 47, 49, 52, 55, 58]],
        ['name' => __('Partners'), 'data' => [12, 15, 14, 18, 21, 19, 24, 26, 28, 31, 33, 36]],
    ];

    $categories ??= [
        __('Jan'), __('Feb'), __('Mar'), __('Apr'), __('May'), __('Jun'),
        __('Jul'), __('Aug'), __('Sep'), __('Oct'), __('Nov'), __('Dec'),
    ];

    $invoices ??= [
        ['id' => 'INV-7841', 'customer' => 'Northwind Co.', 'date' => 'Jun 12', 'amount' => '$4,920.00', 'status' => 'Paid', 'tone' => 'success'],
        ['id' => 'INV-7840', 'customer' => 'Lumen Studio', 'date' => 'Jun 11', 'amount' => '$1,140.00', 'status' => 'Pending', 'tone' => 'warning'],
        ['id' => 'INV-7839', 'customer' => 'Atlas Freight', 'date' => 'Jun 10', 'amount' => '$8,260.00', 'status' => 'Paid', 'tone' => 'success'],
        ['id' => 'INV-7838', 'customer' => 'Hollow Inc.', 'date' => 'Jun 09', 'amount' => '$610.00', 'status' => 'Overdue', 'tone' => 'destructive'],
        ['id' => 'INV-7837', 'customer' => 'Peak Labs', 'date' => 'Jun 08', 'amount' => '$2,480.00', 'status' => 'Paid', 'tone' => 'success'],
    ];

    $health ??= [
        ['label' => 'Collection rate', 'value' => 94, 'caption' => '94% of invoices collected on time', 'tone' => 'success'],
        ['label' => 'On-time payments', 'value' => 81, 'caption' => '81% paid before due date', 'tone' => 'default'],
        ['label' => 'Disputes', 'value' => 6, 'caption' => '6% flagged for review', 'tone' => 'warning'],
        ['label' => 'Failed charges', 'value' => 3, 'caption' => '3% retry pending', 'tone' => 'destructive'],
    ];

    $activity ??= [
        ['title' => 'Payment received from Northwind Co.', 'meta' => '$4,920.00, 12 min ago', 'tone' => 'success'],
        ['title' => 'Invoice INV-7840 sent to Lumen Studio', 'meta' => '$1,140.00, 1 hr ago', 'tone' => 'default'],
        ['title' => 'Charge failed for Hollow Inc.', 'meta' => 'Retry scheduled, 2 hr ago', 'tone' => 'destructive'],
        ['title' => 'Subscription upgraded — Peak Labs', 'meta' => 'Pro → Scale, 4 hr ago', 'tone' => 'default'],
        ['title' => 'Refund issued to Vela Group', 'meta' => '$310.00, 6 hr ago', 'tone' => 'warning'],
    ];

    // ApexCharts needs concrete colours; reference the semantic tokens via their CSS
    // variables so the chart still tracks the active theme (this is chart config, not markup).
    $chartOptions = [
        'colors' => ['var(--chart-1-color, hsl(var(--chart-1)))', 'var(--chart-2-color, hsl(var(--chart-2)))', 'var(--chart-3-color, hsl(var(--chart-3)))'],
        'chart' => [
            'toolbar' => ['show' => false],
            'zoom' => ['enabled' => false],
            'fontFamily' => 'inherit',
        ],
        'stroke' => ['curve' => 'smooth', 'width' => 2],
        'dataLabels' => ['enabled' => false],
        'markers' => ['size' => 0, 'hover' => ['size' => 4]],
        'grid' => ['borderColor' => 'var(--border-color, hsl(var(--border)))', 'strokeDashArray' => 4],
        'legend' => ['show' => true, 'position' => 'top', 'horizontalAlign' => 'left', 'labels' => ['colors' => 'var(--muted-foreground-color, hsl(var(--muted-foreground)))']],
        'xaxis' => [
            'categories' => $categories,
            'axisBorder' => ['show' => false],
            'axisTicks' => ['show' => false],
            'labels' => ['style' => ['colors' => 'var(--muted-foreground-color, hsl(var(--muted-foreground)))']],
        ],
        'yaxis' => ['labels' => ['style' => ['colors' => 'var(--muted-foreground-color, hsl(var(--muted-foreground)))']]],
    ];

    $healthTones = [
        'success' => 'bg-success',
        'warning' => 'bg-warning',
        'destructive' => 'bg-destructive',
        'default' => 'bg-primary',
    ];
@endphp

<section data-surface="admin" {{ $attributes->merge(['class' => 'min-h-svh bg-background p-4 text-foreground sm:p-6 lg:p-8']) }}>
    <div class="mx-auto max-w-7xl space-y-6">
        {{-- Header --}}
        <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div>
                <h1 class="text-2xl font-bold tracking-tight">{{ __($title) }}</h1>
                <p class="mt-2 text-muted-foreground">{{ __($subtitle) }}</p>
            </div>
            <div class="flex shrink-0 gap-2">
                <x-ui.button variant="outline" size="sm" class="whitespace-nowrap">{{ __('This quarter') }}</x-ui.button>
                <x-ui.button size="sm" class="whitespace-nowrap">{{ __('New invoice') }}</x-ui.button>
            </div>
        </div>

        {{-- Dense KPI grid --}}
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
            @foreach ($stats as $stat)
                <x-ui.stat
                    :label="__($stat['label'])"
                    :value="$stat['value']"
                    :delta="$stat['delta']"
                    :description="__($stat['description'])"
                />
            @endforeach
        </div>

        {{-- Channel sales line chart + billing health --}}
        <div class="grid gap-6 lg:grid-cols-[2fr_1fr]">
            <x-ui.card>
                <x-ui.card.header>
                    <div class="flex items-center justify-between gap-4">
                        <div class="space-y-2">
                            <x-ui.card.title>{{ __('Channel sales') }}</x-ui.card.title>
                            <x-ui.card.description>{{ __('Revenue contribution by acquisition channel.') }}</x-ui.card.description>
                        </div>
                        <x-ui.badge variant="success" class="whitespace-nowrap">{{ __('+8.2%') }}</x-ui.badge>
                    </div>
                </x-ui.card.header>
                <x-ui.card.content>
                    <x-ui.chart type="line" :series="$series" :options="$chartOptions" :height="300" :label="__('Channel sales line chart')" />
                </x-ui.card.content>
            </x-ui.card>

            <x-ui.card>
                <x-ui.card.header>
                    <x-ui.card.title>{{ __('Billing health') }}</x-ui.card.title>
                    <x-ui.card.description>{{ __('Operational signals for the billing pipeline.') }}</x-ui.card.description>
                </x-ui.card.header>
                <x-ui.card.content class="space-y-6 text-sm">
                    @foreach ($health as $metric)
                        <div>
                            <div class="mb-2 flex items-center justify-between gap-2">
                                <span class="font-medium">{{ __($metric['label']) }}</span>
                                <span class="text-muted-foreground tabular-nums">{{ $metric['value'] }}%</span>
                            </div>
                            <x-ui.progress :value="$metric['value']" :tone="$metric['tone']" />
                            <p class="mt-2 text-xs text-muted-foreground">{{ __($metric['caption']) }}</p>
                        </div>
                    @endforeach
                </x-ui.card.content>
            </x-ui.card>
        </div>

        {{-- Invoices table + activity feed --}}
        <div class="grid gap-6 lg:grid-cols-[2fr_1fr]">
            <x-ui.card>
                <x-ui.card.header>
                    <div class="flex items-center justify-between gap-4">
                        <div class="space-y-2">
                            <x-ui.card.title>{{ __('Recent invoices') }}</x-ui.card.title>
                            <x-ui.card.description>{{ __('Latest billing across all accounts.') }}</x-ui.card.description>
                        </div>
                        <x-ui.button variant="outline" size="sm" class="whitespace-nowrap">{{ __('View all') }}</x-ui.button>
                    </div>
                </x-ui.card.header>
                <x-ui.card.content>
                    <x-ui.table>
                        <x-ui.table.header>
                            <x-ui.table.row>
                                <x-ui.table.head>{{ __('Invoice') }}</x-ui.table.head>
                                <x-ui.table.head>{{ __('Customer') }}</x-ui.table.head>
                                <x-ui.table.head class="max-sm:hidden">{{ __('Date') }}</x-ui.table.head>
                                <x-ui.table.head>{{ __('Status') }}</x-ui.table.head>
                                <x-ui.table.head class="text-end">{{ __('Amount') }}</x-ui.table.head>
                            </x-ui.table.row>
                        </x-ui.table.header>
                        <x-ui.table.body>
                            @foreach ($invoices as $invoice)
                                <x-ui.table.row>
                                    <x-ui.table.cell class="font-medium tabular-nums">{{ $invoice['id'] }}</x-ui.table.cell>
                                    <x-ui.table.cell>{{ $invoice['customer'] }}</x-ui.table.cell>
                                    <x-ui.table.cell class="text-muted-foreground max-sm:hidden">{{ __($invoice['date']) }}</x-ui.table.cell>
                                    <x-ui.table.cell>
                                        <x-ui.badge :variant="$invoice['tone']">{{ __($invoice['status']) }}</x-ui.badge>
                                    </x-ui.table.cell>
                                    <x-ui.table.cell class="text-end tabular-nums">{{ $invoice['amount'] }}</x-ui.table.cell>
                                </x-ui.table.row>
                            @endforeach
                        </x-ui.table.body>
                    </x-ui.table>
                </x-ui.card.content>
            </x-ui.card>

            <x-ui.card>
                <x-ui.card.header>
                    <x-ui.card.title>{{ __('Activity') }}</x-ui.card.title>
                    <x-ui.card.description>{{ __('Live ledger events.') }}</x-ui.card.description>
                </x-ui.card.header>
                <x-ui.card.content>
                    <x-ui.item.group class="gap-2">
                        @foreach ($activity as $event)
                            <x-ui.item size="xs" class="items-start px-0">
                                <x-ui.item.media class="pt-2">
                                    <span @class([
                                        'size-2 rounded-full',
                                        $healthTones[$event['tone']] ?? 'bg-primary',
                                    ]) aria-hidden="true"></span>
                                </x-ui.item.media>
                                <x-ui.item.content class="min-w-0">
                                    <x-ui.item.title>{{ __($event['title']) }}</x-ui.item.title>
                                    <x-ui.item.description class="text-xs tabular-nums">{{ __($event['meta']) }}</x-ui.item.description>
                                </x-ui.item.content>
                            </x-ui.item>
                        @endforeach
                    </x-ui.item.group>
                </x-ui.card.content>
            </x-ui.card>
        </div>
    </div>
</section>

Installation

terminal

php artisan ui:add pages/dashboard-dense-kpi

Installs these dependencies automatically:

stat card chart table button badge progress item

Registry contract

Install confidence

php artisan ui:add pages/dashboard-dense-kpi writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.7
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/pages/dashboard-dense-kpi.blade.php

Registry dependencies

stat card chart table button badge progress item

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the page is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this page in an assistant.

dashboard-dense-kpi.md

# Brok UI page: Dashboard 02 (`dashboard-dense-kpi`)

A dense finance dashboard: a six-up KPI stat grid, a multi-series channel-sales line chart, a billing-health card with token progress meters, a recent-invoices table, and a live activity feed.

Brok UI is a Laravel Blade registry. `ui:add` copies this page into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add pages/dashboard-dense-kpi
```

## Render it

```blade
<x-pages.dashboard-dense-kpi />
```

## Props

- `title` (string, default `Finance overview`) — Section heading.
- `subtitle` (string, default `Net revenue and billing health across all channels.`) — Supporting copy under the heading.
- `stats` (mixed|null, default `null`) — KPI stat cards ({label, value, delta, description}); null falls back to sample data.
- `series` (mixed|null, default `null`) — Multi-series line-chart data ({name, data}); null falls back to sample data.
- `categories` (mixed|null, default `null`) — X-axis month labels for the revenue chart; null falls back to sample data.
- `invoices` (mixed|null, default `null`) — Recent invoice table rows; null falls back to sample data.
- `health` (mixed|null, default `null`) — Billing-health progress meters ({label, value, caption, tone}); null falls back to sample data.
- `activity` (mixed|null, default `null`) — Live activity feed entries; null falls back to sample data.

## Use when

- A dense finance admin dashboard: a six-up KPI stat grid, a multi-series channel-sales line chart, a billing-health card with token progress meters, a recent-invoices table and a live activity feed.
- It composes primitives directly (stat, card, chart, table, button, badge, progress, item) rather than marketing blocks.

## Avoid when

- Needing a support, commerce or web-analytics dashboard instead of finance; use dashboard-support, dashboard-commerce or dashboard-analytics instead.

## Rules

- Render the installed page with `<x-pages.dashboard-dense-kpi />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/pages/dashboard-dense-kpi
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/dashboard-dense-kpi.json

Ask about Dashboard 02 in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

A dense finance admin dashboard: a six-up KPI stat grid, a multi-series channel-sales line chart, a billing-health card with token progress meters, a recent-invoices table and a live activity feed.
It composes primitives directly (stat, card, chart, table, button, badge, progress, item) rather than marketing blocks.

Avoid when

Needing a support, commerce or web-analytics dashboard instead of finance; use dashboard-support, dashboard-commerce or dashboard-analytics instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the page as a component, or wire it to a route. Pass data where useful:

resources/views/welcome.blade.php Blade

<x-pages.dashboard-dense-kpi />

Built from blocks & primitives

This page composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only pages.