The last dashboard library
you'll ever install.

// The usual way — Recharts + shadcn + custom everything
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import { Card, CardHeader, CardTitle, CardContent } from "@/ui/card";
import { Skeleton } from "@/ui/skeleton";
import { TrendingUp, TrendingDown } from "lucide-react";
import { cn } from "@/lib/utils";

function formatCurrency(n: number) {
  return new Intl.NumberFormat("en-US", {
    style: "currency", currency: "USD",
    minimumFractionDigits: 0, maximumFractionDigits: 0,
  }).format(n);
}

function RevenueCard({ value, prev, sparkline, loading, error }) {
  if (loading) return (
    <Card>
      <CardHeader><Skeleton className="h-4 w-24" /></CardHeader>
      <CardContent className="space-y-3">
        <Skeleton className="h-8 w-32" />
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-16 w-full" />
      </CardContent>
    </Card>
  );

  if (error) return (
    <Card>
      <CardContent className="py-8 text-center text-sm text-red-500">
        Failed to load — <button onClick={() => window.location.reload()}>Retry</button>
      </CardContent>
    </Card>
  );

  const change = prev !== 0 ? ((value - prev) / prev) * 100 : 0;
  const isPositive = change >= 0;
  const Icon = isPositive ? TrendingUp : TrendingDown;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-xs font-medium text-muted-foreground uppercase">
          Revenue
        </CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-2xl font-bold">{formatCurrency(value)}</p>
        <div className={cn("flex items-center gap-1 text-sm mt-1",
          isPositive ? "text-green-600" : "text-red-600"
        )}>
          <Icon className="h-3 w-3" />
          <span>{isPositive ? "+" : ""}{change.toFixed(1)}% vs last month</span>
        </div>
        {sparkline && (
          <div className="mt-3 h-16">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={sparkline.map((v, i) => ({ i, v }))}>
                <Area type="monotone" dataKey="v" stroke="#6366f1"
                  fill="url(#grad)" strokeWidth={1.5} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// 65 lines. Still missing: goal progress, conditional coloring,
// comparison badges, copy-to-clipboard, drill-down, dense mode,
// dark mode, null handling, count-up animation, export...