Initial commit

2026-05-19 22:20:29 +02:00
commit 0fbe856dce
173 changed files with 38316 additions and 0 deletions
@@ -0,0 +1,84 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import {
+  Clock,
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
+  TrendingUp,
+} from "lucide-react";
+import type { DashboardStats } from "@/types";
+
+interface StatsCardsProps {
+  stats: DashboardStats;
+}
+
+export function StatsCards({ stats }: StatsCardsProps) {
+  const cards = [
+    {
+      label: "Awaiting Review",
+      value: stats.awaitingReview,
+      icon: Clock,
+      color: "text-amber-400",
+      bg: "bg-amber-500/10",
+      ring: "ring-amber-500/20",
+    },
+    {
+      label: "Needs Revisions",
+      value: stats.needsRevisions,
+      icon: AlertCircle,
+      color: "text-orange-400",
+      bg: "bg-orange-500/10",
+      ring: "ring-orange-500/20",
+    },
+    {
+      label: "Approved",
+      value: stats.approved,
+      icon: CheckCircle2,
+      color: "text-emerald-400",
+      bg: "bg-emerald-500/10",
+      ring: "ring-emerald-500/20",
+    },
+    {
+      label: "Overdue Tasks",
+      value: stats.tasksOverdue ?? stats.overdue,
+      icon: XCircle,
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      ring: "ring-red-500/20",
+    },
+    {
+      label: "Active Projects",
+      value: stats.activeProjects,
+      icon: TrendingUp,
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      ring: "ring-blue-500/20",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+      {cards.map((card) => {
+        const Icon = card.icon;
+        return (
+          <Card key={card.label}>
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between mb-3">
+                <div className={cn("p-2 rounded-md", card.bg)}>
+                  <Icon className={cn("h-4 w-4", card.color)} />
+                </div>
+              </div>
+              <p className="text-3xl font-bold text-white">
+                {card.value}
+              </p>
+              <p className="text-sm text-zinc-400 mt-0.5">{card.label}</p>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}