Dashboard blocks.

@php
    $revenue = [
        ['month' => 'Jan', 'revenue' => 18600, 'expenses' => 9200],
        ['month' => 'Feb', 'revenue' => 22400, 'expenses' => 10400],
        ['month' => 'Mar', 'revenue' => 19800, 'expenses' => 9800],
        ['month' => 'Apr', 'revenue' => 28600, 'expenses' => 12100],
        ['month' => 'May', 'revenue' => 34200, 'expenses' => 14800],
        ['month' => 'Jun', 'revenue' => 45231, 'expenses' => 17300],
    ];
 
    $revenueConfig = [
        'revenue' => ['label' => 'Revenue', 'color' => 'var(--chart-1)'],
        'expenses' => ['label' => 'Expenses', 'color' => 'var(--chart-2)'],
    ];
 
    $sales = [
        ['initials' => 'OM', 'name' => 'Olivia Martin', 'email' => 'olivia@example.com', 'amount' => '+$1,999.00'],
        ['initials' => 'JL', 'name' => 'Jackson Lee', 'email' => 'jackson@example.com', 'amount' => '+$399.00'],
        ['initials' => 'IW', 'name' => 'Isabella Wong', 'email' => 'isabella@example.com', 'amount' => '+$299.00'],
        ['initials' => 'DP', 'name' => 'Dylan Patel', 'email' => 'dylan@example.com', 'amount' => '+$129.00'],
    ];
@endphp
 
<div class="overflow-hidden rounded-xl border bg-background">
    <april:sidebar-layout>
        <april:sidebar collapsible="none" class="border-r">
            <slot:header>
                <div class="flex items-center gap-2 px-2 py-1">
                    <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div>
                    <span class="font-semibold">Northstar</span>
                </div>
            </slot:header>
            <slot:content>
                @foreach ([['layout-dashboard', 'Overview'], ['inbox', 'Inbox'], ['calendar', 'Calendar'], ['users', 'Team'], ['settings', 'Settings']] as [$icon, $label])
                    <april:sidebar-menu-item><april:sidebar-menu-button-link href="#" :active="$label === 'Overview'"><x-dynamic-component component="lucide-{{$icon}}" /><span>{{$label}}</span></april:sidebar-menu-button-link></april:sidebar-menu-item>
                @endforeach
            </slot:content>
            <slot:footer>
                <div class="flex items-center gap-2 px-2 py-1">
                    <april:avatar><slot:fallback>SC</slot:fallback></april:avatar>
                    <div class="min-w-0 text-sm"><p class="truncate font-medium">Sofia Carter</p><p class="truncate text-xs text-muted-foreground">sofia@example.com</p></div>
                </div>
            </slot:footer>
        </april:sidebar>
        <april:sidebar-inset>
            <header class="flex h-14 items-center justify-between border-b px-4">
                <div class="flex items-center gap-2"><april:sidebar-trigger /><span class="text-sm text-muted-foreground">Overview</span></div>
                <div class="flex items-center gap-2"><april:button type="button" variant="outline" size="sm">Export</april:button><april:button type="button" size="sm"><x-lucide-plus class="mr-2 h-4 w-4" />New project</april:button></div>
            </header>
            <main class="space-y-6 p-4 lg:p-6">
                <div class="flex flex-wrap items-end justify-between gap-4">
                    <div><p class="text-sm text-muted-foreground">Monday, June 8, 2026</p><h2 class="text-2xl font-semibold tracking-tight">Good morning, Sofia</h2><p class="mt-1 text-sm text-muted-foreground">Here is a summary of your workspace.</p></div>
                    <april:select class="w-36"><option>Last 6 months</option><option>Last 30 days</option><option>This year</option></april:select>
                </div>
 
                <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                    @foreach ([['Revenue', '$45,231.89', '+20.1%', 'trending-up'], ['Subscriptions', '2,350', '+180.1%', 'users'], ['Sales', '12,234', '+19.0%', 'shopping-cart'], ['Active now', '573', '+201 this hour', 'activity']] as [$label, $value, $change, $icon])
                        <april:card><slot:title class="flex items-center justify-between text-sm font-medium">{{$label}}<x-dynamic-component component="lucide-{{$icon}}" class="h-4 w-4 text-muted-foreground" /></slot:title><slot:content><p class="text-2xl font-bold">{{$value}}</p><p class="mt-1 text-xs text-emerald-600">{{$change}} from last month</p></slot:content></april:card>
                    @endforeach
                </div>
 
                <div class="grid gap-4 lg:grid-cols-5">
                    <april:chart class="lg:col-span-3" label="Revenue and expenses" :data="$revenue" :config="$revenueConfig" xKey="month" type="area" height="260">
                        <slot:header><h3 class="font-semibold">Revenue and expenses</h3><p class="text-sm text-muted-foreground">Monthly performance across the last six months.</p></slot:header>
                    </april:chart>
                    <april:card class="lg:col-span-2"><slot:title>Workspace goals</slot:title><slot:description>Keep the team moving toward this quarter's targets.</slot:description><slot:content class="space-y-5">@foreach ([['Launch readiness', '82%', 'bg-primary'], ['New subscriptions', '68%', 'bg-chart-2'], ['Support response time', '91%', 'bg-chart-3']] as [$goal, $value, $color])<div><div class="flex justify-between text-sm"><span>{{$goal}}</span><span class="font-medium">{{$value}}</span></div><div class="mt-2 h-2 rounded-full bg-muted"><div class="h-full rounded-full {{$color}}" style="width: {{$value}}"></div></div></div>@endforeach</slot:content><slot:footer><april:button type="button" variant="outline" size="sm" class="w-full">View reports</april:button></slot:footer></april:card>
                </div>
 
                <div class="grid gap-4 lg:grid-cols-5">
                    <april:card class="lg:col-span-3"><slot:title>Recent activity</slot:title><slot:description>Your team shipped 12 updates this week.</slot:description><slot:content class="space-y-4">@foreach ([['AM', 'Alex Morgan', 'Updated the billing flow', '2m ago'], ['JD', 'Jackson Doe', 'Published a new component', '1h ago'], ['AB', 'Amelia Bell', 'Invited a new teammate', '3h ago'], ['NR', 'Noah Rivera', 'Closed the launch checklist', '5h ago']] as [$initials, $name, $action, $time])<div class="flex items-center gap-3"><april:avatar><slot:fallback>{{$initials}}</slot:fallback></april:avatar><div class="min-w-0 flex-1 text-sm"><p class="font-medium">{{$name}}</p><p class="truncate text-muted-foreground">{{$action}}</p></div><span class="text-xs text-muted-foreground">{{$time}}</span></div>@endforeach</slot:content></april:card>
                    <april:card class="lg:col-span-2"><slot:title>Recent sales</slot:title><slot:description>You made 265 sales this month.</slot:description><slot:content class="space-y-4">@foreach ($sales as $sale)<div class="flex items-center gap-3"><april:avatar><slot:fallback>{{$sale['initials']}}</slot:fallback></april:avatar><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium">{{$sale['name']}}</p><p class="truncate text-xs text-muted-foreground">{{$sale['email']}}</p></div><span class="text-sm font-medium">{{$sale['amount']}}</span></div>@endforeach</slot:content></april:card>
                </div>
            </main>
        </april:sidebar-inset>
    </april:sidebar-layout>
</div>

@php
    $delivery = [
        ['week' => 'W1', 'planned' => 18, 'completed' => 12],
        ['week' => 'W2', 'planned' => 22, 'completed' => 17],
        ['week' => 'W3', 'planned' => 20, 'completed' => 19],
        ['week' => 'W4', 'planned' => 26, 'completed' => 21],
        ['week' => 'W5', 'planned' => 24, 'completed' => 23],
    ];
 
    $deliveryConfig = [
        'planned' => ['label' => 'Planned', 'color' => 'var(--chart-2)'],
        'completed' => ['label' => 'Completed', 'color' => 'var(--chart-1)'],
    ];
@endphp
 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto max-w-6xl space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4"><div><p class="text-sm text-muted-foreground">Monday, June 8, 2026</p><h2 class="text-2xl font-semibold tracking-tight">Project overview</h2><p class="mt-1 text-sm text-muted-foreground">A clear view of delivery, risks, and next actions.</p></div><div class="flex gap-2"><april:button type="button" variant="outline" size="sm">Export</april:button><april:button type="button" size="sm"><x-lucide-plus class="mr-2 h-4 w-4" />New project</april:button></div></div>
 
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">@foreach ([['Active projects', '12', '+2 this month'], ['Tasks completed', '84%', '+8.4% from May'], ['At risk', '3', 'Needs attention'], ['Team capacity', '76%', '18 hours remaining']] as [$label, $value, $change])<april:card><slot:title class="text-sm font-medium">{{$label}}</slot:title><slot:content><p class="text-2xl font-bold">{{$value}}</p><p class="mt-1 text-xs text-muted-foreground">{{$change}}</p></slot:content></april:card>@endforeach</div>
 
        <div class="grid gap-4 lg:grid-cols-5">
            <april:chart class="lg:col-span-3" label="Planned and completed work" :data="$delivery" :config="$deliveryConfig" xKey="week" type="bar" height="250">
                <slot:header><h3 class="font-semibold">Delivery trend</h3><p class="text-sm text-muted-foreground">Planned and completed tasks by sprint week.</p></slot:header>
            </april:chart>
            <april:card class="lg:col-span-2"><slot:title>Due this week</slot:title><slot:description>Three tasks need a decision before Friday.</slot:description><slot:content class="space-y-4">@foreach (['Review launch copy', 'Approve mobile flow', 'Plan user research'] as $task)<div class="flex items-start gap-3"><april:checkbox /><span class="text-sm leading-5">{{$task}}</span></div>@endforeach</slot:content><slot:footer><april:button type="button" variant="outline" size="sm" class="w-full">View task list</april:button></slot:footer></april:card>
        </div>
 
        <april:card><slot:title>Projects</slot:title><slot:description>Track current health, ownership, and the latest change.</slot:description><slot:content><div class="overflow-x-auto"><table class="w-full min-w-[620px] text-left text-sm"><thead><tr class="border-b text-muted-foreground"><th class="pb-3 font-medium">Project</th><th class="pb-3 font-medium">Owner</th><th class="pb-3 font-medium">Progress</th><th class="pb-3 font-medium">Status</th><th class="pb-3 text-right font-medium">Updated</th></tr></thead><tbody>@foreach ([['Website refresh', 'Sofia Carter', '82%', 'On track', '2 hours ago'], ['Mobile app', 'Jackson Doe', '64%', 'Needs review', 'Yesterday'], ['Design system', 'Amelia Bell', '47%', 'On track', 'Monday'], ['Help center', 'Noah Rivera', '29%', 'At risk', 'Friday']] as [$project, $owner, $progress, $status, $updated])<tr class="border-b last:border-0"><td class="py-4 font-medium">{{$project}}</td><td class="py-4 text-muted-foreground">{{$owner}}</td><td class="py-4"><div class="flex items-center gap-3"><div class="h-2 w-24 rounded-full bg-muted"><div class="h-full rounded-full bg-primary" style="width: {{$progress}}"></div></div><span class="text-xs text-muted-foreground">{{$progress}}</span></div></td><td class="py-4"><april:badge variant="{{$status === 'On track' ? 'secondary' : ($status === 'At risk' ? 'destructive' : 'outline')}}">{{$status}}</april:badge></td><td class="py-4 text-right text-muted-foreground">{{$updated}}</td></tr>@endforeach</tbody></table></div></slot:content></april:card>
    </div>
</div>

@php
    $analytics = [
        ['day' => 'Jun 1', 'visitors' => 1820, 'signups' => 86, 'revenue' => 1280],
        ['day' => 'Jun 2', 'visitors' => 2140, 'signups' => 102, 'revenue' => 1640],
        ['day' => 'Jun 3', 'visitors' => 1980, 'signups' => 94, 'revenue' => 1510],
        ['day' => 'Jun 4', 'visitors' => 2530, 'signups' => 128, 'revenue' => 2090],
        ['day' => 'Jun 5', 'visitors' => 2870, 'signups' => 146, 'revenue' => 2420],
        ['day' => 'Jun 6', 'visitors' => 3260, 'signups' => 173, 'revenue' => 2960],
        ['day' => 'Jun 7', 'visitors' => 3480, 'signups' => 188, 'revenue' => 3180],
    ];
 
    $analyticsConfig = [
        'visitors' => ['label' => 'Visitors', 'color' => 'var(--chart-1)'],
        'signups' => ['label' => 'Sign ups', 'color' => 'var(--chart-2)'],
    ];
 
    $deviceData = [
        ['device' => 'Desktop', 'sessions' => 12480],
        ['device' => 'Mobile', 'sessions' => 9480],
        ['device' => 'Tablet', 'sessions' => 2932],
    ];
 
    $deviceConfig = ['sessions' => ['label' => 'Sessions', 'color' => 'var(--chart-3)']];
@endphp
 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto max-w-6xl space-y-6">
        <div class="flex flex-wrap items-end justify-between gap-4"><div><p class="text-sm text-muted-foreground">Growth workspace</p><h2 class="text-2xl font-semibold tracking-tight">Analytics</h2><p class="mt-1 text-sm text-muted-foreground">Understand how visitors become customers.</p></div><div class="flex gap-2"><april:select class="w-36"><option>Last 30 days</option><option>Last 90 days</option><option>This year</option></april:select><april:button type="button" variant="outline" size="sm">Download</april:button></div></div>
 
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">@foreach ([['Visitors', '24,892', '+12.4%'], ['Sign ups', '1,284', '+8.2%'], ['Conversion', '5.16%', '+0.8%'], ['Revenue', '$18,432', '+15.3%']] as [$label, $value, $change])<april:card><slot:title class="text-sm font-medium">{{$label}}</slot:title><slot:content><p class="text-2xl font-bold">{{$value}}</p><p class="mt-1 text-xs text-emerald-600">{{$change}} from last month</p></slot:content></april:card>@endforeach</div>
 
        <april:chart label="Visitors and sign ups" :data="$analytics" :config="$analyticsConfig" xKey="day" type="area" height="280">
            <slot:header><div class="flex flex-wrap items-start justify-between gap-3"><div><h3 class="font-semibold">Conversion trend</h3><p class="text-sm text-muted-foreground">Visitors and sign ups over the last seven days.</p></div><april:badge variant="secondary">+18.2% this week</april:badge></div></slot:header>
        </april:chart>
 
        <div class="grid gap-4 lg:grid-cols-5">
            <april:chart class="lg:col-span-2" label="Sessions by device" :data="$deviceData" :config="$deviceConfig" xKey="device" type="bar" height="230">
                <slot:header><h3 class="font-semibold">Sessions by device</h3><p class="text-sm text-muted-foreground">Where your audience is browsing.</p></slot:header>
            </april:chart>
            <april:card class="lg:col-span-3"><slot:title>Top sources</slot:title><slot:description>Channels that brought the most qualified traffic.</slot:description><slot:content class="space-y-5">@foreach ([['Direct', '10,443', '42%', 'bg-primary'], ['Organic search', '7,702', '31%', 'bg-chart-2'], ['Referral', '4,481', '18%', 'bg-chart-3'], ['Social', '2,266', '9%', 'bg-chart-4']] as [$source, $sessions, $share, $color])<div><div class="flex items-center justify-between text-sm"><span class="font-medium">{{$source}}</span><span class="text-muted-foreground">{{$sessions}} sessions · {{$share}}</span></div><div class="mt-2 h-2 rounded-full bg-muted"><div class="h-full rounded-full {{$color}}" style="width: {{$share}}"></div></div></div>@endforeach</slot:content><slot:footer><april:button type="button" variant="outline" size="sm" class="w-full">View acquisition report</april:button></slot:footer></april:card>
        </div>
    </div>
</div>

@php
    $velocity = [
        ['sprint' => 'Sprint 1', 'planned' => 24, 'completed' => 20],
        ['sprint' => 'Sprint 2', 'planned' => 28, 'completed' => 26],
        ['sprint' => 'Sprint 3', 'planned' => 30, 'completed' => 25],
        ['sprint' => 'Sprint 4', 'planned' => 32, 'completed' => 31],
    ];
 
    $velocityConfig = [
        'planned' => ['label' => 'Planned points', 'color' => 'var(--chart-2)'],
        'completed' => ['label' => 'Completed points', 'color' => 'var(--chart-1)'],
    ];
 
    $columns = [
        ['To do', [['Prepare brief', 'SC', 'High'], ['Collect references', 'JD', 'Medium'], ['Confirm launch date', 'NR', 'Low']]],
        ['In progress', [['Build landing page', 'AB', 'High'], ['Review copy', 'SC', 'Medium'], ['Set up analytics', 'JD', 'Low']]],
        ['Done', [['Set up repository', 'JD', 'Done'], ['Choose type scale', 'AB', 'Done'], ['Create wireframes', 'SC', 'Done']]],
    ];
@endphp
 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto max-w-6xl space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4"><div><p class="text-sm text-muted-foreground">Workspace / Projects / Website</p><h2 class="text-2xl font-semibold tracking-tight">Launch website</h2><p class="mt-1 text-sm text-muted-foreground">Sprint 4 · 12 days remaining · 68% complete</p></div><div class="flex gap-2"><april:button type="button" variant="outline" size="sm">Share</april:button><april:button type="button" size="sm"><x-lucide-plus class="mr-2 h-4 w-4" />Add task</april:button></div></div>
 
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">@foreach ([['Sprint progress', '68%', '18 of 26 tasks'], ['Open tasks', '14', '3 due today'], ['Team members', '8', '2 active now'], ['Days remaining', '12', 'On track']] as [$label, $value, $change])<april:card><slot:title class="text-sm font-medium">{{$label}}</slot:title><slot:content><p class="text-2xl font-bold">{{$value}}</p><p class="mt-1 text-xs text-muted-foreground">{{$change}}</p></slot:content></april:card>@endforeach</div>
 
        <april:chart label="Sprint velocity" :data="$velocity" :config="$velocityConfig" xKey="sprint" type="line" height="250">
            <slot:header><h3 class="font-semibold">Sprint velocity</h3><p class="text-sm text-muted-foreground">Compare planned and completed story points.</p></slot:header>
        </april:chart>
 
        <div class="grid gap-4 md:grid-cols-3">
            @foreach ($columns as [$column, $tasks])
                <april:card><slot:title class="flex items-center justify-between text-base">{{$column}}<april:badge variant="outline">{{count($tasks)}}</april:badge></slot:title><slot:content class="space-y-3">@foreach ($tasks as [$task, $initials, $priority])<div class="rounded-md border bg-background p-3"><div class="flex items-start justify-between gap-2"><p class="text-sm font-medium">{{$task}}</p><april:button type="button" variant="ghost" size="icon"><x-lucide-ellipsis class="h-4 w-4" /></april:button></div><div class="mt-3 flex items-center justify-between"><div class="flex items-center gap-2"><april:avatar><slot:fallback>{{$initials}}</slot:fallback></april:avatar><span class="text-xs text-muted-foreground">{{$initials}}</span></div><april:badge variant="{{$priority === 'High' ? 'destructive' : ($priority === 'Done' ? 'secondary' : 'outline')}}">{{$priority}}</april:badge></div></div>@endforeach</slot:content><slot:footer><april:button type="button" variant="ghost" size="sm" class="w-full"><x-lucide-plus class="mr-2 h-4 w-4" />Add task</april:button></slot:footer></april:card>
            @endforeach
        </div>
    </div>
</div>