gpt-engineer-app[bot]
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|