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

17
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,7 +45,8 @@ 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]">
<Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-slate-300">Umsatz aktueller Monat</CardTitle> <CardTitle className="text-sm font-medium text-slate-300">Umsatz aktueller Monat</CardTitle>
<TrendingUp className="h-4 w-4 text-primary" /> <TrendingUp className="h-4 w-4 text-primary" />
@@ -56,8 +58,10 @@ export default async function AdminDashboard() {
<p className="text-xs text-slate-400">Nur fertige Bestellungen</p> <p className="text-xs text-slate-400">Nur fertige Bestellungen</p>
</CardContent> </CardContent>
</Card> </Card>
</Link>
<Card className="glass-dark border-white/5"> <Link href="/admin/orders" className="block transition-transform duration-300 hover:scale-[1.02]">
<Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-slate-300">Bestellungen</CardTitle> <CardTitle className="text-sm font-medium text-slate-300">Bestellungen</CardTitle>
<ShoppingCart className="h-4 w-4 text-primary" /> <ShoppingCart className="h-4 w-4 text-primary" />
@@ -67,8 +71,10 @@ export default async function AdminDashboard() {
<p className="text-xs text-slate-400">Gesamt</p> <p className="text-xs text-slate-400">Gesamt</p>
</CardContent> </CardContent>
</Card> </Card>
</Link>
<Card className="glass-dark border-white/5"> <Link href="/admin/products" className="block transition-transform duration-300 hover:scale-[1.02]">
<Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-slate-300">Produkte</CardTitle> <CardTitle className="text-sm font-medium text-slate-300">Produkte</CardTitle>
<Package className="h-4 w-4 text-primary" /> <Package className="h-4 w-4 text-primary" />
@@ -78,8 +84,10 @@ export default async function AdminDashboard() {
<p className="text-xs text-slate-400">Im Katalog</p> <p className="text-xs text-slate-400">Im Katalog</p>
</CardContent> </CardContent>
</Card> </Card>
</Link>
<Card className="glass-dark border-white/5"> <Link href="/admin/users" className="block transition-transform duration-300 hover:scale-[1.02]">
<Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-slate-300">Kunden</CardTitle> <CardTitle className="text-sm font-medium text-slate-300">Kunden</CardTitle>
<Users className="h-4 w-4 text-primary" /> <Users className="h-4 w-4 text-primary" />
@@ -89,6 +97,7 @@ export default async function AdminDashboard() {
<p className="text-xs text-slate-400">Registrierte User</p> <p className="text-xs text-slate-400">Registrierte User</p>
</CardContent> </CardContent>
</Card> </Card>
</Link>
</div> </div>
{/* Letzte Bestellungen – Client Component mit 30s-Polling */} {/* Letzte Bestellungen – Client Component mit 30s-Polling */}