← back to Govarbitrage

src/components/dashboard-cards.tsx

33 lines

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatMoney, formatPercent } from "@/lib/utils";
import type { DashboardStats } from "@/lib/dashboard";

export function DashboardCards({ stats }: { stats: DashboardStats }) {
  const cards: { title: string; value: string; hint?: string }[] = [
    { title: "Active Auctions", value: String(stats.activeAuctions) },
    { title: "Closing Today", value: String(stats.closingToday), hint: "next 24h" },
    { title: "Highest Profit", value: formatMoney(stats.highestProfit), hint: "single lot" },
    { title: "Highest ROI", value: formatPercent(stats.highestRoi), hint: "single lot" },
    { title: "Cash Required", value: formatMoney(stats.cashRequired), hint: "sum of max bids" },
    { title: "Expected Profit", value: formatMoney(stats.expectedProfit), hint: "portfolio net" },
    { title: "Highest Score", value: String(Math.round(stats.highestScore)), hint: "opportunity" },
    { title: "Pending Research", value: String(stats.pendingResearch) },
  ];

  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
      {cards.map((c) => (
        <Card key={c.title}>
          <CardHeader className="pb-1">
            <CardTitle>{c.title}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-semibold tabular-nums">{c.value}</div>
            {c.hint && <div className="text-xs text-muted-foreground">{c.hint}</div>}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}