65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { FileText, Clipboard, CheckCircle, Clock } from "lucide-react";
|
|
import { DashboardStats } from "@/types/dashboard";
|
|
|
|
interface StatsCardsProps {
|
|
stats: DashboardStats;
|
|
}
|
|
|
|
export function StatsCards({ stats }: StatsCardsProps) {
|
|
const cards = [
|
|
{
|
|
title: "Total Correspondences",
|
|
value: stats.correspondences,
|
|
icon: FileText,
|
|
color: "text-blue-600",
|
|
bgColor: "bg-blue-50",
|
|
},
|
|
{
|
|
title: "Active RFAs",
|
|
value: stats.rfas,
|
|
icon: Clipboard,
|
|
color: "text-purple-600",
|
|
bgColor: "bg-purple-50",
|
|
},
|
|
{
|
|
title: "Approved Documents",
|
|
value: stats.approved,
|
|
icon: CheckCircle,
|
|
color: "text-green-600",
|
|
bgColor: "bg-green-50",
|
|
},
|
|
{
|
|
title: "Pending Approvals",
|
|
value: stats.pending,
|
|
icon: Clock,
|
|
color: "text-orange-600",
|
|
bgColor: "bg-orange-50",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{cards.map((card) => {
|
|
const Icon = card.icon;
|
|
|
|
return (
|
|
<Card key={card.title} className="p-6 hover:shadow-sm transition-shadow">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">{card.title}</p>
|
|
<p className="text-3xl font-bold mt-2">{card.value}</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg ${card.bgColor}`}>
|
|
<Icon className={`h-6 w-6 ${card.color}`} />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|