Stats + Chart + Table

<div class="w-full max-w-4xl space-y-6">
    @* Section 1: Stat Cards *@
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <BbCard>
            <BbCardContent class="pt-6">
                <div class="flex items-center justify-between">
                    <div class="space-y-1">
                        <p class="text-sm text-muted-foreground">Total Revenue</p>
                        <p class="text-2xl font-bold">$48,250</p>
                    </div>
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                        <!-- dollar-sign icon SVG -->
                    </div>
                </div>
                <p class="text-xs text-emerald-600 mt-2">+12.5% from last month</p>
            </BbCardContent>
        </BbCard>

        <BbCard>
            <BbCardContent class="pt-6">
                <div class="flex items-center justify-between">
                    <div class="space-y-1">
                        <p class="text-sm text-muted-foreground">Total Orders</p>
                        <p class="text-2xl font-bold">1,420</p>
                    </div>
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                        <!-- shopping-bag icon SVG -->
                    </div>
                </div>
                <p class="text-xs text-emerald-600 mt-2">+8.2% from last month</p>
            </BbCardContent>
        </BbCard>

        <BbCard>
            <BbCardContent class="pt-6">
                <div class="flex items-center justify-between">
                    <div class="space-y-1">
                        <p class="text-sm text-muted-foreground">Avg. Order Value</p>
                        <p class="text-2xl font-bold">$33.98</p>
                    </div>
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                        <!-- receipt icon SVG -->
                    </div>
                </div>
                <p class="text-xs text-destructive mt-2">-2.1% from last month</p>
            </BbCardContent>
        </BbCard>
    </div>

    @* Section 2: Bar Chart *@
    <BbCard>
        <BbCardHeader>
            <BbCardTitle>Monthly Revenue</BbCardTitle>
            <BbCardDescription>Revenue breakdown for the last 6 months</BbCardDescription>
        </BbCardHeader>
        <BbCardContent>
            <BbBarChart Data="@revenueData" Config="@revenueConfig" Height="250px">
                <BbXAxis DataKey="month" />
                <BbYAxis />
                <BbChartTooltip />
                <BbBar DataKey="revenue" BorderRadius="4" />
            </BbBarChart>
        </BbCardContent>
    </BbCard>

    @* Section 3: Recent Orders Table *@
    <BbCard>
        <BbCardHeader>
            <div class="flex items-center justify-between">
                <div>
                    <BbCardTitle>Recent Orders</BbCardTitle>
                    <BbCardDescription>Latest transactions</BbCardDescription>
                </div>
                <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small">View All</BbButton>
            </div>
        </BbCardHeader>
        <BbCardContent>
            <BbDataTable TData="RecentOrder" Data="@recentOrders" ShowToolbar="false" ShowPagination="false">
                <Columns>
                    <BbDataTableColumn TData="RecentOrder" TValue="string" Property="@(o => o.Customer)" Header="Customer" />
                    <BbDataTableColumn TData="RecentOrder" TValue="string" Property="@(o => o.Product)" Header="Product" />
                    <BbDataTableColumn TData="RecentOrder" TValue="decimal" Property="@(o => o.Amount)" Header="Amount" Format="C2" />
                    <BbDataTableColumn TData="RecentOrder" TValue="string" Property="@(o => o.Status)" Header="Status">
                        <CellTemplate Context="order">
                            <BbBadge Variant="@(order.Status == "Completed" ? BadgeVariant.Default : order.Status == "Pending" ? BadgeVariant.Secondary : BadgeVariant.Outline)">
                                @order.Status
                            </BbBadge>
                        </CellTemplate>
                    </BbDataTableColumn>
                </Columns>
            </BbDataTable>
        </BbCardContent>
    </BbCard>
</div>

@code {
    private record RevenueMonth(string Month, int Revenue);
    private List<RevenueMonth> revenueData = new()
    {
        new("Jan", 6500), new("Feb", 7200), new("Mar", 8100),
        new("Apr", 7800), new("May", 9200), new("Jun", 9450)
    };
    private ChartConfig revenueConfig = ChartConfig.Create(
        ("revenue", new ChartSeriesConfig { Label = "Revenue", Color = "var(--chart-1)" })
    );

    private record RecentOrder(string Customer, string Product, decimal Amount, string Status);
    private List<RecentOrder> recentOrders = new()
    {
        new("Alice Johnson", "Pro Plan", 299.00m, "Completed"),
        new("Bob Smith", "Team License", 149.00m, "Completed"),
        new("Carol Williams", "Enterprise", 999.00m, "Pending"),
        new("David Brown", "Starter Plan", 49.00m, "Completed"),
        new("Eve Davis", "Pro Plan", 299.00m, "Processing")
    };
}