Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make admin dashboard KPI cards clickable links

Browse Source
This commit is contained in:
DanielS
2026-08-11 00:45:58 +02:00
parent 4b8dfd5b20
commit e09c247f43
1 changed files with 51 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
shop/app/admin/page.tsx
View File

@@ -3,6 +3,7 @@ import { createAdminClient } from '@/lib/supabase/admin'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Package, ShoppingCart, Users, TrendingUp } from 'lucide-react' import { Package, ShoppingCart, Users, TrendingUp } from 'lucide-react'
import { AdminRecentOrders } from '@/components/admin/recent-orders' import { AdminRecentOrders } from '@/components/admin/recent-orders'
import Link from 'next/link'
// ─── KPI-Daten aus DB ──────────────────────────────────────────────────────── // ─── KPI-Daten aus DB ────────────────────────────────────────────────────────
async function getKpis() { async function getKpis() {
@@ -44,51 +45,59 @@ export default async function AdminDashboard() {
{/* KPI Cards – echte DB-Daten */} {/* KPI Cards – echte DB-Daten */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card className="glass-dark border-white/5"> <Link href="/admin/orders" className="block transition-transform duration-300 hover:scale-[1.02]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardTitle className="text-sm font-medium text-slate-300">Umsatz aktueller Monat</CardTitle> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<TrendingUp className="h-4 w-4 text-primary" /> <CardTitle className="text-sm font-medium text-slate-300">Umsatz aktueller Monat</CardTitle>
</CardHeader> <TrendingUp className="h-4 w-4 text-primary" />
<CardContent> </CardHeader>
<div className="text-2xl font-bold text-white"> <CardContent>
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalRevenue)} <div className="text-2xl font-bold text-white">
</div> {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalRevenue)}
<p className="text-xs text-slate-400">Nur fertige Bestellungen</p> </div>
</CardContent> <p className="text-xs text-slate-400">Nur fertige Bestellungen</p>
</Card> </CardContent>
</Card>
</Link>
<Card className="glass-dark border-white/5"> <Link href="/admin/orders" className="block transition-transform duration-300 hover:scale-[1.02]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardTitle className="text-sm font-medium text-slate-300">Bestellungen</CardTitle> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<ShoppingCart className="h-4 w-4 text-primary" /> <CardTitle className="text-sm font-medium text-slate-300">Bestellungen</CardTitle>
</CardHeader> <ShoppingCart className="h-4 w-4 text-primary" />
<CardContent> </CardHeader>
<div className="text-2xl font-bold text-white">{orderCount}</div> <CardContent>
<p className="text-xs text-slate-400">Gesamt</p> <div className="text-2xl font-bold text-white">{orderCount}</div>
</CardContent> <p className="text-xs text-slate-400">Gesamt</p>
</Card> </CardContent>
</Card>
</Link>
<Card className="glass-dark border-white/5"> <Link href="/admin/products" className="block transition-transform duration-300 hover:scale-[1.02]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardTitle className="text-sm font-medium text-slate-300">Produkte</CardTitle> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<Package className="h-4 w-4 text-primary" /> <CardTitle className="text-sm font-medium text-slate-300">Produkte</CardTitle>
</CardHeader> <Package className="h-4 w-4 text-primary" />
<CardContent> </CardHeader>
<div className="text-2xl font-bold text-white">{productCount}</div> <CardContent>
<p className="text-xs text-slate-400">Im Katalog</p> <div className="text-2xl font-bold text-white">{productCount}</div>
</CardContent> <p className="text-xs text-slate-400">Im Katalog</p>
</Card> </CardContent>
</Card>
</Link>
<Card className="glass-dark border-white/5"> <Link href="/admin/users" className="block transition-transform duration-300 hover:scale-[1.02]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardTitle className="text-sm font-medium text-slate-300">Kunden</CardTitle> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<Users className="h-4 w-4 text-primary" /> <CardTitle className="text-sm font-medium text-slate-300">Kunden</CardTitle>
</CardHeader> <Users className="h-4 w-4 text-primary" />
<CardContent> </CardHeader>
<div className="text-2xl font-bold text-white">{userCount}</div> <CardContent>
<p className="text-xs text-slate-400">Registrierte User</p> <div className="text-2xl font-bold text-white">{userCount}</div>
</CardContent> <p className="text-xs text-slate-400">Registrierte User</p>
</Card> </CardContent>
</Card>
</Link>
</div> </div>
{/* Letzte Bestellungen – Client Component mit 30s-Polling */} {/* Letzte Bestellungen – Client Component mit 30s-Polling */}