75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { FileText, Clipboard, CheckCircle, Clock } from "lucide-react";
|
|
import { DashboardStats } from "@/types/dashboard";
|
|
|
|
export interface StatsCardsProps {
|
|
stats: DashboardStats | undefined;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export function StatsCards({ stats, isLoading }: StatsCardsProps) {
|
|
if (isLoading || !stats) {
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[...Array(4)].map((_, i) => (
|
|
<Card key={i} className="p-6 h-[100px] animate-pulse bg-muted" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
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>
|
|
);
|
|
}
|