feat(orders): idempotency guard, order numbers, button lock, success page, my-orders, admin polling

2026-06-17 01:48:06 +02:00
parent 48920828ea
commit d96be1ace9
10 changed files with 624 additions and 57 deletions
--- a/shop/components/admin/recent-orders.tsx
+++ b/shop/components/admin/recent-orders.tsx
@@ -0,0 +1,140 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import Link from 'next/link'
+
+type RecentOrder = {
+  id: string
+  order_number: string
+  created_at: string
+  total_price: number
+  status: string
+  customer_data?: {
+    company_name?: string
+    first_name?: string
+    last_name?: string
+  }
+}
+
+const statusClass: Record<string, string> = {
+  pending: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  active: 'bg-green-500/20 text-green-400 border-green-500/30',
+  cancelled: 'bg-red-500/20 text-red-400 border-red-500/30',
+}
+
+const statusLabel: Record<string, string> = {
+  pending: 'Eingegangen',
+  active: 'In Bearbeitung',
+  cancelled: 'Storniert',
+}
+
+const POLL_INTERVAL_MS = 30_000
+
+export function AdminRecentOrders() {
+  const [orders, setOrders] = useState<RecentOrder[]>([])
+  const [newOrderIds, setNewOrderIds] = useState<Set<string>>(new Set())
+  const [lastChecked, setLastChecked] = useState<Date>(new Date())
+  const knownIds = useRef<Set<string>>(new Set())
+
+  const fetchOrders = async () => {
+    try {
+      const res = await fetch('/api/admin/recent-orders', { cache: 'no-store' })
+      if (!res.ok) return
+      const { orders: fresh } = await res.json()
+
+      // Neue Bestellungen erkennen (Highlight)
+      const freshIds = new Set<string>(fresh.map((o: RecentOrder) => o.id))
+      const newOnes = new Set<string>()
+      freshIds.forEach(id => {
+        if (!knownIds.current.has(id)) newOnes.add(id)
+      })
+      knownIds.current = freshIds
+
+      setOrders(fresh)
+      setNewOrderIds(newOnes)
+      setLastChecked(new Date())
+
+      // Highlight nach 5 Sekunden entfernen
+      if (newOnes.size > 0) {
+        setTimeout(() => setNewOrderIds(new Set()), 5000)
+      }
+    } catch (e) {
+      console.error('Polling error:', e)
+    }
+  }
+
+  useEffect(() => {
+    fetchOrders()
+    const interval = setInterval(fetchOrders, POLL_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <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-slate-400 italic">
+            [Umsatz-Chart – folgt in nächstem Update]
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="col-span-3 glass-dark border-white/5">
+        <CardHeader className="flex flex-row items-center justify-between pb-3">
+          <CardTitle>Neue Bestellungen</CardTitle>
+          <span className="text-[10px] text-slate-500">
+            Aktualisiert: {lastChecked.toLocaleTimeString('de-DE')}
+          </span>
+        </CardHeader>
+        <CardContent>
+          {orders.length === 0 ? (
+            <p className="text-slate-500 text-sm italic text-center py-8">Noch keine Bestellungen</p>
+          ) : (
+            <div className="space-y-3">
+              {orders.map(order => {
+                const isNew = newOrderIds.has(order.id)
+                const customerName =
+                  order.customer_data?.company_name ||
+                  `${order.customer_data?.first_name ?? ''} ${order.customer_data?.last_name ?? ''}`.trim() ||
+                  'Unbekannt'
+
+                return (
+                  <Link key={order.id} href="/admin/orders" className="block">
+                    <div
+                      className={`flex items-center gap-3 p-3 rounded-lg transition-all duration-500 ${
+                        isNew
+                          ? 'bg-primary/10 border border-primary/30 shadow-[0_0_12px_rgba(59,130,246,0.2)]'
+                          : 'bg-white/5 hover:bg-white/10 border border-white/5'
+                      }`}
+                    >
+                      <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs font-bold shrink-0">
+                        {customerName.slice(0, 2).toUpperCase()}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-white truncate">{customerName}</p>
+                        <p className="text-xs text-slate-500 font-mono">#{order.order_number}</p>
+                      </div>
+                      <div className="text-right shrink-0 space-y-1">
+                        <p className="font-medium text-white text-sm">
+                          {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
+                        </p>
+                        <Badge className={`text-[10px] ${statusClass[order.status] ?? ''}`}>
+                          {statusLabel[order.status] ?? order.status}
+                        </Badge>
+                      </div>
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}