feat: initial implementation of modern modular webshop (shop core)
This commit is contained in:
57
shop/app/admin/layout.tsx
Normal file
57
shop/app/admin/layout.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import Link from 'next/link'
|
||||
import { LayoutDashboard, Package, Settings, Users, LogOut } from 'lucide-react'
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex min-h-screen bg-[#020617] text-white">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl flex flex-col">
|
||||
<div className="p-6">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<Package className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-xl tracking-tighter">Admin Panel</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 space-y-2 py-4">
|
||||
<Link href="/admin" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
|
||||
<LayoutDashboard className="w-5 h-5" />
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary border border-primary/20">
|
||||
<Package className="w-5 h-5" />
|
||||
Produkte
|
||||
</Link>
|
||||
<Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
|
||||
<Users className="w-5 h-5" />
|
||||
Bestellungen
|
||||
</Link>
|
||||
<Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
|
||||
<Settings className="w-5 h-5" />
|
||||
Einstellungen
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-white/5">
|
||||
<button className="flex w-full items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
|
||||
<LogOut className="w-5 h-5" />
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="container mx-auto max-w-7xl">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
87
shop/app/admin/page.tsx
Normal file
87
shop/app/admin/page.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Package, ShoppingCart, Users, TrendingUp } from 'lucide-react'
|
||||
|
||||
export default function AdminDashboard() {
|
||||
return (
|
||||
<div className="p-8 space-y-8">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-gradient">Dashboard</h2>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="glass-dark border-white/5">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Umsatz gesamt</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-primary" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">€12,234.56</div>
|
||||
<p className="text-xs text-muted-foreground">+20.1% zum Vormonat</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="glass-dark border-white/5">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Bestellungen</CardTitle>
|
||||
<ShoppingCart className="h-4 w-4 text-primary" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">+573</div>
|
||||
<p className="text-xs text-muted-foreground">+12% zur Vorwoche</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="glass-dark border-white/5">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Produkte</CardTitle>
|
||||
<Package className="h-4 w-4 text-primary" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">12</div>
|
||||
<p className="text-xs text-muted-foreground">+2 neue Module</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="glass-dark border-white/5">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Kunden</CardTitle>
|
||||
<Users className="h-4 w-4 text-primary" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">2,450</div>
|
||||
<p className="text-xs text-muted-foreground">+180 heute</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<Card className="col-span-4 glass-dark border-white/5">
|
||||
<CardHeader>
|
||||
<CardTitle>Übersicht</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pl-2">
|
||||
<div className="h-[200px] flex items-center justify-center text-muted-foreground">
|
||||
[Chart Platzhalter]
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="col-span-3 glass-dark border-white/5">
|
||||
<CardHeader>
|
||||
<CardTitle>Letzte Bestellungen</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs font-bold">
|
||||
JD
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<p className="text-sm font-medium">John Doe</p>
|
||||
<p className="text-xs text-muted-foreground">john.doe@example.com</p>
|
||||
</div>
|
||||
<div className="font-medium">+€450.00</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
shop/app/admin/products/page.tsx
Normal file
39
shop/app/admin/products/page.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { getProducts } from '@/lib/actions/products'
|
||||
|
||||
import { ProductList } from '@/components/admin/product-list'
|
||||
import { CreateProductDialog } from '@/components/admin/create-product-dialog'
|
||||
import { Package, Plus } from 'lucide-react'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
export default async function AdminProductsPage() {
|
||||
return (
|
||||
<div className="flex-1 space-y-8 p-8 pt-6">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight text-gradient flex items-center gap-3">
|
||||
<Package className="w-8 h-8 text-primary" />
|
||||
Produkte & Module
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Verwalte deine Hauptprodukte und deren zubuchbare Module.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CreateProductDialog>
|
||||
<button className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
|
||||
<Plus className="mr-2 h-4 w-4" /> Produkt hinzufügen
|
||||
</button>
|
||||
</CreateProductDialog>
|
||||
</div>
|
||||
</div>
|
||||
<Suspense fallback={<div className="h-40 w-full animate-pulse bg-white/5 rounded-xl" />}>
|
||||
<ProductDataWrapper />
|
||||
</Suspense>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function ProductDataWrapper() {
|
||||
const products = await getProducts()
|
||||
return <ProductList initialProducts={products} />
|
||||
}
|
||||
Reference in New Issue
Block a user