feat: make orders list clearer and put navbar globally except for admin area

shop/app/admin/orders/page.tsx

@@ -1,19 +1,13 @@
 import { createClient } from '@/lib/supabase/server'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { FileText, Download, ExternalLink } from 'lucide-react'
-import Link from 'next/link'
-
+import { OrdersTable } from '@/components/admin/orders-table'
 import { Suspense } from 'react'
 
 export default async function AdminOrdersPage() {
   return (
-    <div className="space-y-6">
+    <div className="p-8 space-y-6">
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight text-white">Bestellungen & Rechnungen</h1>
+          <h1 className="text-3xl font-bold tracking-tight text-gradient">Bestellungen & Rechnungen</h1>
           <p className="text-slate-400">Verwalten Sie alle Kundenbestellungen und greifen Sie auf generierte PDFs zu.</p>
         </div>
       </div>
@@ -34,75 +28,8 @@ async function OrdersData() {
     .order('created_at', { ascending: false })
 
   if (error) {
-    return <div>Fehler beim Laden der Bestellungen: {error.message}</div>
+    return <div className="text-red-500">Fehler beim Laden der Bestellungen: {error.message}</div>
   }
 
-  return (
-    <Card className="glass-dark border-white/10">
-      <CardContent className="p-0">
-        <Table>
-          <TableHeader>
-            <TableRow className="border-white/10 hover:bg-transparent">
-              <TableHead className="w-[140px] text-slate-200">Bestellnr.</TableHead>
-              <TableHead className="text-slate-200">Datum</TableHead>
-              <TableHead className="text-slate-200">Kunde</TableHead>
-              <TableHead className="text-slate-200">Betrag</TableHead>
-              <TableHead className="text-slate-200">Status</TableHead>
-              <TableHead className="text-right text-slate-200">Rechnung</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {orders?.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={6} className="text-center py-12 text-muted-foreground">
-                  Noch keine Bestellungen vorhanden.
-                </TableCell>
-              </TableRow>
-            ) : (
-              orders?.map((order) => (
-                <TableRow key={order.id} className="border-white/5 hover:bg-white/5">
-                  <TableCell className="font-mono text-xs text-primary font-semibold">
-                    {order.order_number ?? order.id.slice(0, 8) + '...'}
-                  </TableCell>
-                  <TableCell className="text-slate-300">
-                    {new Date(order.created_at).toLocaleDateString('de-DE')}
-                  </TableCell>
-                  <TableCell>
-                    <div className="font-medium text-white">{order.customer_data?.company_name || 'Privatkunde'}</div>
-                    <div className="text-xs text-slate-400">{order.customer_data?.first_name} {order.customer_data?.last_name}</div>
-                  </TableCell>
-                  <TableCell className="font-semibold text-white">
-                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={order.status === 'completed' ? 'default' : 'secondary'} className="capitalize">
-                      {order.status}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {order.pdf_url ? (
-                      <div className="flex justify-end gap-2">
-                        <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20">
-                          <a href={order.pdf_url} target="_blank" rel="noopener noreferrer">
-                            <ExternalLink className="w-4 h-4 mr-2" /> Ansehen
-                          </a>
-                        </Button>
-                        <Button variant="secondary" size="sm" asChild className="h-8">
-                          <a href={order.pdf_url} download>
-                            <Download className="w-4 h-4" />
-                          </a>
-                        </Button>
-                      </div>
-                    ) : (
-                      <span className="text-xs text-muted-foreground italic">Kein PDF</span>
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  )
+  return <OrdersTable initialOrders={orders || []} />
 }

shop/app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Geist } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { InactivityTracker } from "@/components/inactivity-tracker";
+import { HeaderWrapper } from "@/components/HeaderWrapper";
+import { Navbar } from "@/components/Navbar";
 import "./globals.css";
 
 const defaultUrl = process.env.VERCEL_URL
@@ -35,7 +37,9 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <InactivityTracker />
+          <HeaderWrapper navbar={<Navbar />}>
             {children}
+          </HeaderWrapper>
         </ThemeProvider>
       </body>
     </html>

shop/app/page.tsx

@@ -5,15 +5,7 @@ import { Navbar } from '@/components/Navbar'
 
 export default function Home() {
   return (
-    <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
-      {/* Demo Banner */}
-      <div id="demo-banner" className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50">
-        ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
-      </div>
-
-      <Navbar />
-
-      <main className="flex-1">
+    <>
       {/* Hero Section: Zielgerichtet auf Lizenzen */}
       <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 px-4 overflow-hidden relative">
         <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full -z-10 opacity-30" />
@@ -104,7 +96,6 @@ export default function Home() {
           </div>
         </div>
       </section>
-      </main>
 
       {/* Footer */}
       <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-[#020617]">
@@ -114,6 +105,6 @@ export default function Home() {
           <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="https://caspos.de/datenschutz/" target="_blank" rel="noopener noreferrer">Datenschutz</Link>
         </nav>
       </footer>
-    </div>
+    </>
   )
 }

shop/components/HeaderWrapper.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+interface HeaderWrapperProps {
+  navbar: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {
+  const pathname = usePathname();
+  const isAdmin = pathname?.startsWith("/admin");
+
+  if (isAdmin) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
+      {/* Demo Banner */}
+      <div
+        id="demo-banner"
+        className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50"
+      >
+        ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
+      </div>
+
+      {navbar}
+      
+      <main className="flex-1">
+        {children}
+      </main>
+    </div>
+  );
+}

shop/components/admin/orders-table.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Download, ExternalLink, Search } from "lucide-react";
+
+interface OrdersTableProps {
+  initialOrders: any[];
+}
+
+const statusLabel: Record<string, string> = {
+  pending: 'Eingegangen',
+  active: 'In Bearbeitung',
+  completed: 'Abgeschlossen',
+  cancelled: 'Storniert',
+};
+
+const statusClass: Record<string, string> = {
+  pending: 'bg-amber-500/20 text-amber-400 border border-amber-500/30',
+  active: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
+  completed: 'bg-green-500/20 text-green-400 border border-green-500/30',
+  cancelled: 'bg-red-500/20 text-red-400 border border-red-500/30',
+};
+
+export function OrdersTable({ initialOrders }: OrdersTableProps) {
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  const filteredOrders = initialOrders.filter((order) => {
+    const orderNum = (order.order_number || "").toLowerCase();
+    const company = (order.customer_data?.company_name || "").toLowerCase();
+    const contact = `${order.customer_data?.first_name || ""} ${order.customer_data?.last_name || ""}`.toLowerCase();
+    
+    const matchesSearch = 
+      orderNum.includes(search.toLowerCase()) ||
+      company.includes(search.toLowerCase()) ||
+      contact.includes(search.toLowerCase());
+
+    const matchesStatus = statusFilter === "all" || order.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  return (
+    <div className="space-y-4">
+      {/* Filterleiste */}
+      <div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center bg-white/5 p-4 rounded-xl border border-white/5">
+        <div className="relative w-full md:max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+          <Input
+            placeholder="Bestellung, Firma oder Name suchen..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10 bg-slate-950/40 border-white/10 text-white placeholder:text-slate-500"
+          />
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant={statusFilter === "all" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setStatusFilter("all")}
+            className="text-xs"
+          >
+            Alle
+          </Button>
+          <Button
+            variant={statusFilter === "pending" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setStatusFilter("pending")}
+            className="text-xs border-amber-500/20 hover:bg-amber-500/10 text-amber-400"
+          >
+            Eingegangen
+          </Button>
+          <Button
+            variant={statusFilter === "active" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setStatusFilter("active")}
+            className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400"
+          >
+            In Bearbeitung
+          </Button>
+          <Button
+            variant={statusFilter === "completed" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setStatusFilter("completed")}
+            className="text-xs border-green-500/20 hover:bg-green-500/10 text-green-400"
+          >
+            Abgeschlossen
+          </Button>
+          <Button
+            variant={statusFilter === "cancelled" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setStatusFilter("cancelled")}
+            className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400"
+          >
+            Storniert
+          </Button>
+        </div>
+      </div>
+
+      {/* Tabelle */}
+      <div className="rounded-xl border border-white/5 bg-black/20 overflow-hidden backdrop-blur-xl">
+        <Table>
+          <TableHeader>
+            <TableRow className="border-white/10 bg-white/5 hover:bg-transparent">
+              <TableHead className="w-[140px] text-slate-200">Bestellnr.</TableHead>
+              <TableHead className="text-slate-200">Datum</TableHead>
+              <TableHead className="text-slate-200">Kunde</TableHead>
+              <TableHead className="text-slate-200">Auswahl</TableHead>
+              <TableHead className="text-slate-200">Betrag</TableHead>
+              <TableHead className="text-slate-200">Status</TableHead>
+              <TableHead className="text-right text-slate-200">Aktionen</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredOrders.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
+                  Keine Bestellungen gefunden.
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredOrders.map((order) => {
+                const items = order.order_data?.items || [];
+                return (
+                  <TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors">
+                    <TableCell className="font-mono text-xs text-primary font-semibold">
+                      #{order.order_number || order.id.slice(0, 8)}
+                    </TableCell>
+                    <TableCell className="text-slate-300 text-sm">
+                      {new Date(order.created_at).toLocaleDateString('de-DE', {
+                        day: '2-digit', month: '2-digit', year: 'numeric'
+                      })}
+                    </TableCell>
+                    <TableCell>
+                      <div className="font-semibold text-white text-sm">
+                        {order.customer_data?.company_name || 'Privatkunde'}
+                      </div>
+                      <div className="text-xs text-slate-400">
+                        {order.customer_data?.first_name} {order.customer_data?.last_name}
+                      </div>
+                    </TableCell>
+                    <TableCell className="max-w-[200px]">
+                      <div className="flex flex-wrap gap-1">
+                        {items.map((item: any) => (
+                          <span
+                            key={item.product_id}
+                            className="text-[10px] bg-white/5 border border-white/10 rounded-full px-2 py-0.5 text-slate-300 inline-block"
+                          >
+                            {item.product_name}
+                            {item.selected_modules?.length > 0 && (
+                              <span className="text-slate-500 ml-1">+{item.selected_modules.length}</span>
+                            )}
+                          </span>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell className="font-bold text-white text-sm">
+                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
+                    </TableCell>
+                    <TableCell>
+                      <Badge className={`text-xs px-2 py-0.5 rounded ${statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'}`}>
+                        {statusLabel[order.status] ?? order.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {order.pdf_url ? (
+                        <div className="flex justify-end gap-1.5">
+                          <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
+                            <a href={order.pdf_url} target="_blank" rel="noopener noreferrer">
+                              <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF
+                            </a>
+                          </Button>
+                          <Button variant="secondary" size="sm" asChild className="h-8 text-xs">
+                            <a href={order.pdf_url} download>
+                              <Download className="w-3.5 h-3.5" />
+                            </a>
+                          </Button>
+                        </div>
+                      ) : (
+                        <span className="text-xs text-slate-500 italic">Keine Rechnung</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}