251205:0000 Just start debug backend/frontend

frontend/components/dashboard/stats-cards.tsx

@@ -0,0 +1,64 @@
+"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>
+  );
+}