SaaS Metrics

<div class="w-full max-w-4xl">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <BbCard>
            <BbCardContent class="pt-6">
                <p class="text-sm font-medium text-muted-foreground">MRR</p>
                <h2 class="text-2xl font-bold mt-1">$48,500</h2>
                <BbProgress Value="78" class="mt-3" />
                <p class="text-xs text-muted-foreground mt-2">78% of $62k goal</p>
            </BbCardContent>
        </BbCard>

        <BbCard>
            <BbCardContent class="pt-6">
                <p class="text-sm font-medium text-muted-foreground">Customers</p>
                <h2 class="text-2xl font-bold mt-1">1,240</h2>
                <BbProgress Value="62" class="mt-3" IndicatorClass="bg-green-500" />
                <p class="text-xs text-muted-foreground mt-2">62% of 2,000 goal</p>
            </BbCardContent>
        </BbCard>

        <BbCard>
            <BbCardContent class="pt-6">
                <p class="text-sm font-medium text-muted-foreground">Churn Rate</p>
                <h2 class="text-2xl font-bold mt-1">2.4%</h2>
                <BbProgress Value="76" class="mt-3" IndicatorClass="bg-amber-500" />
                <p class="text-xs text-muted-foreground mt-2">76% of target</p>
            </BbCardContent>
        </BbCard>

        <BbCard>
            <BbCardContent class="pt-6">
                <p class="text-sm font-medium text-muted-foreground">NPS Score</p>
                <h2 class="text-2xl font-bold mt-1">72</h2>
                <BbProgress Value="72" class="mt-3" IndicatorClass="bg-violet-500" />
                <p class="text-xs text-muted-foreground mt-2">72% of 100</p>
            </BbCardContent>
        </BbCard>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <BbCard>
            <BbCardHeader>
                <BbCardTitle>Monthly Recurring Revenue</BbCardTitle>
                <BbCardDescription>MRR growth over the last 6 months</BbCardDescription>
            </BbCardHeader>
            <BbCardContent>
                <BbAreaChart Data="@mrrData" Config="@mrrConfig" Height="250px">
                    <BbXAxis DataKey="month" />
                    <BbYAxis />
                    <BbChartTooltip />
                    <BbArea DataKey="mrr" Curve="CurveType.Smooth" FillOpacity="0.3" />
                </BbAreaChart>
            </BbCardContent>
        </BbCard>

        <BbCard>
            <BbCardHeader>
                <BbCardTitle>Customer Acquisition</BbCardTitle>
                <BbCardDescription>New customers vs churned per month</BbCardDescription>
            </BbCardHeader>
            <BbCardContent>
                <BbBarChart Data="@acquisitionData" Config="@acquisitionConfig" Height="250px">
                    <BbXAxis DataKey="month" />
                    <BbYAxis />
                    <BbChartTooltip />
                    <BbBar DataKey="newCustomers" />
                    <BbBar DataKey="churned" />
                </BbBarChart>
            </BbCardContent>
        </BbCard>
    </div>
</div>

@code {
    private record MrrData(string Month, int Mrr);
    private List<MrrData> mrrData = new()
    {
        new("Jan", 32000), new("Feb", 35000), new("Mar", 38000),
        new("Apr", 41000), new("May", 45000), new("Jun", 48500)
    };
    private ChartConfig mrrConfig = ChartConfig.Create(
        ("mrr", new ChartSeriesConfig { Label = "MRR", Color = "var(--chart-1)" })
    );

    private record AcquisitionData(string Month, int NewCustomers, int Churned);
    private List<AcquisitionData> acquisitionData = new()
    {
        new("Jan", 120, 15), new("Feb", 145, 20), new("Mar", 160, 18),
        new("Apr", 180, 22), new("May", 195, 25), new("Jun", 210, 20)
    };
    private ChartConfig acquisitionConfig = ChartConfig.Create(
        ("newCustomers", new ChartSeriesConfig { Label = "New", Color = "var(--chart-1)" }),
        ("churned", new ChartSeriesConfig { Label = "Churned", Color = "var(--chart-5)" })
    );
}