Changes

2026-01-28 00:26:48 +00:00
parent 80a60bf8d4
commit 3ce5a730d5
9 changed files with 787 additions and 1 deletions
@@ -0,0 +1,69 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Package, Users, CreditCard, TrendingUp } from "lucide-react";
+import { useAdminStats } from "@/hooks/useAdminData";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function AdminStats() {
+  const { data: stats, isLoading } = useAdminStats();
+
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <Skeleton className="h-4 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-8 w-16" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  const statCards = [
+    {
+      title: "Totala Ordrar",
+      value: stats?.totalOrders || 0,
+      icon: Package,
+      description: `${stats?.pendingOrders || 0} väntande`,
+    },
+    {
+      title: "Kunder",
+      value: stats?.totalCustomers || 0,
+      icon: Users,
+      description: "Registrerade kunder",
+    },
+    {
+      title: "Betalningar",
+      value: stats?.totalPayments || 0,
+      icon: CreditCard,
+      description: `${stats?.completedPayments || 0} genomförda`,
+    },
+    {
+      title: "Total Omsättning",
+      value: `${(stats?.totalRevenue || 0).toLocaleString("sv-SE")} kr`,
+      icon: TrendingUp,
+      description: "Totalt intjänat",
+    },
+  ];
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      {statCards.map((stat) => (
+        <Card key={stat.title}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
+            <stat.icon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stat.value}</div>
+            <p className="text-xs text-muted-foreground">{stat.description}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}