feat(crm): end_customers table, RLS, wizard customer selector, /my-customers CRUD, GDPR anonymization

shop/app/layout.tsx

@@ -9,7 +9,7 @@ const defaultUrl = process.env.VERCEL_URL
 
 export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
-  title: "CASPOSShop | Modulare Software-Lösungen",
+  title: "CASPOS-Shop | Die Kasse",
   description: "Konfigurieren und bestellen Sie Ihre maßgeschneiderte Business-Software in Minuten.",
 };
 

shop/app/my-customers/[id]/page.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, Save, AlertTriangle, Loader2, Building2, ShoppingBag, Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { getEndCustomer, updateEndCustomer, anonymizeEndCustomer } from '@/lib/actions/end-customers'
+import type { EndCustomer } from '@/lib/types'
+
+export default function CustomerDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const router = useRouter()
+  const [customer, setCustomer] = useState<EndCustomer | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [anonymizing, setAnonymizing] = useState(false)
+  const [showGdprConfirm, setShowGdprConfirm] = useState(false)
+  const [form, setForm] = useState({
+    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+  })
+
+  useEffect(() => {
+    params.then(({ id }) => {
+      getEndCustomer(id).then(c => {
+        if (!c) { router.push('/my-customers'); return }
+        setCustomer(c)
+        setForm({
+          company_name: c.company_name ?? '',
+          vat_id: c.vat_id ?? '',
+          first_name: c.first_name ?? '',
+          last_name: c.last_name ?? '',
+          street: c.street ?? '',
+          zip: c.zip ?? '',
+          city: c.city ?? '',
+        })
+        setLoading(false)
+      })
+    })
+  }, [params, router])
+
+  const handleSave = async () => {
+    if (!customer || !form.company_name.trim()) return
+    setSaving(true)
+    try {
+      await updateEndCustomer(customer.id, form)
+      setCustomer(prev => prev ? { ...prev, ...form } : prev)
+      alert('Kundendaten gespeichert.')
+    } catch (e) {
+      alert('Fehler beim Speichern.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleAnonymize = async () => {
+    if (!customer) return
+    setAnonymizing(true)
+    try {
+      await anonymizeEndCustomer(customer.id)
+      router.push('/my-customers')
+    } catch (e) {
+      alert('Fehler bei der Anonymisierung.')
+      setAnonymizing(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-[#020617] flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin text-primary" />
+      </div>
+    )
+  }
+
+  if (!customer) return null
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
+      <div className="max-w-3xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="flex items-center gap-4">
+          <Link href="/my-customers">
+            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
+              <ArrowLeft className="w-4 h-4 mr-2" /> Meine Kunden
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-2xl font-extrabold tracking-tight flex items-center gap-2">
+              <Building2 className="w-6 h-6 text-primary" />
+              {customer.is_anonymized ? '[Anonymisiert]' : customer.company_name}
+            </h1>
+            <p className="text-slate-400 text-xs mt-0.5">
+              Kunden-ID: <span className="font-mono">{customer.id.slice(0, 8)}…</span>
+            </p>
+          </div>
+          {customer.is_anonymized && (
+            <Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1 ml-auto">
+              <AlertTriangle className="w-3 h-3" /> Anonymisiert
+            </Badge>
+          )}
+        </div>
+
+        {/* Bearbeitungsformular */}
+        {!customer.is_anonymized && (
+          <Card className="glass-dark border-white/10">
+            <CardHeader>
+              <CardTitle className="text-white">Stammdaten bearbeiten</CardTitle>
+              <CardDescription className="text-slate-400">
+                Änderungen wirken sich nur auf zukünftige Bestellungen aus. Bestehende Snapshots bleiben unverändert.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid md:grid-cols-2 gap-4">
+                {([
+                  { label: 'Firmenname *', key: 'company_name', span: true },
+                  { label: 'USt-IdNr.', key: 'vat_id', span: false },
+                  { label: 'Vorname', key: 'first_name', span: false },
+                  { label: 'Nachname', key: 'last_name', span: false },
+                  { label: 'Straße & Hausnummer', key: 'street', span: true },
+                  { label: 'PLZ', key: 'zip', span: false },
+                  { label: 'Ort', key: 'city', span: false },
+                ] as const).map(({ label, key, span }) => (
+                  <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
+                    <Label className="text-slate-300 text-sm">{label}</Label>
+                    <Input
+                      value={form[key]}
+                      onChange={e => setForm(prev => ({ ...prev, [key]: e.target.value }))}
+                      className="bg-white/5 border-white/10 text-white"
+                    />
+                  </div>
+                ))}
+              </div>
+              <div className="flex gap-3 pt-2">
+                <Button onClick={handleSave} disabled={saving || !form.company_name.trim()} className="gap-2">
+                  {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+                  Speichern
+                </Button>
+                <Link href={`/my-orders`}>
+                  <Button variant="outline" className="border-white/10 hover:bg-white/5 gap-2">
+                    <ShoppingBag className="w-4 h-4" /> Bestellungen ansehen
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* DSGVO Anonymisierung */}
+        {!customer.is_anonymized && (
+          <Card className="glass-dark border-red-500/20 bg-red-500/5">
+            <CardHeader>
+              <CardTitle className="text-red-400 flex items-center gap-2">
+                <Trash2 className="w-5 h-5" />
+                Recht auf Vergessenwerden (DSGVO)
+              </CardTitle>
+              <CardDescription className="text-slate-400">
+                Auf Wunsch des Endkunden können Sie dessen personenbezogene Daten unwiderruflich anonymisieren.
+                Bestehende Bestelldaten (PDF-Rechnungen, Snapshots) werden aus steuerrechtlichen Gründen
+                <strong className="text-white"> nicht </strong> gelöscht.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {!showGdprConfirm ? (
+                <Button
+                  variant="outline"
+                  className="border-red-500/30 text-red-400 hover:bg-red-500/10 gap-2"
+                  onClick={() => setShowGdprConfirm(true)}
+                >
+                  <Trash2 className="w-4 h-4" /> Kundendaten anonymisieren
+                </Button>
+              ) : (
+                <div className="space-y-3 p-4 rounded-lg bg-red-500/10 border border-red-500/30">
+                  <p className="text-sm text-red-300 font-semibold">
+                    ⚠️ Diese Aktion ist unwiderruflich. Alle personenbezogenen Daten werden überschrieben.
+                  </p>
+                  <div className="flex gap-3">
+                    <Button
+                      onClick={handleAnonymize}
+                      disabled={anonymizing}
+                      className="bg-red-600 hover:bg-red-700 gap-2"
+                    >
+                      {anonymizing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
+                      Ja, unwiderruflich anonymisieren
+                    </Button>
+                    <Button variant="ghost" onClick={() => setShowGdprConfirm(false)}>
+                      Abbrechen
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Bereits anonymisiert */}
+        {customer.is_anonymized && (
+          <Card className="glass-dark border-white/10">
+            <CardContent className="py-8 text-center space-y-2">
+              <AlertTriangle className="w-10 h-10 text-amber-400 mx-auto" />
+              <p className="text-slate-300">Dieser Endkunde wurde bereits anonymisiert.</p>
+              <p className="text-slate-500 text-sm">Die Daten können nicht wiederhergestellt werden.</p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}

shop/app/my-customers/new/page.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, UserPlus, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { createEndCustomer } from '@/lib/actions/end-customers'
+
+export default function NewCustomerPage() {
+  const router = useRouter()
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState({
+    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+  })
+
+  const handleSave = async () => {
+    if (!form.company_name.trim()) return
+    setSaving(true)
+    try {
+      await createEndCustomer(form)
+      router.push('/my-customers')
+    } catch (e) {
+      alert('Fehler beim Anlegen des Kunden.')
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <div className="flex items-center gap-4">
+          <Link href="/my-customers">
+            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
+              <ArrowLeft className="w-4 h-4 mr-2" /> Zurück
+            </Button>
+          </Link>
+          <h1 className="text-2xl font-extrabold tracking-tight flex items-center gap-2">
+            <UserPlus className="w-6 h-6 text-primary" />
+            Neuen Endkunden anlegen
+          </h1>
+        </div>
+
+        <Card className="glass-dark border-white/10">
+          <CardHeader>
+            <CardTitle className="text-white">Stammdaten</CardTitle>
+            <CardDescription className="text-slate-400">
+              Legen Sie einen neuen Endkunden an. Diese Daten stehen sofort im Bestellwizard zur Auswahl.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid md:grid-cols-2 gap-4">
+              {([
+                { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / KG / Einzelunternehmen' },
+                { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
+                { label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
+                { label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
+                { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: 'Musterstraße 1' },
+                { label: 'PLZ', key: 'zip', span: false, placeholder: '12345' },
+                { label: 'Ort', key: 'city', span: false, placeholder: 'Musterstadt' },
+              ] as const).map(({ label, key, span, placeholder }) => (
+                <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
+                  <Label className="text-slate-300 text-sm">{label}</Label>
+                  <Input
+                    value={form[key]}
+                    onChange={e => setForm(prev => ({ ...prev, [key]: e.target.value }))}
+                    placeholder={placeholder}
+                    className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
+                  />
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-3 pt-2">
+              <Button
+                onClick={handleSave}
+                disabled={saving || !form.company_name.trim()}
+                className="gap-2"
+              >
+                {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
+                Kunden anlegen
+              </Button>
+              <Link href="/my-customers">
+                <Button variant="ghost">Abbrechen</Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

shop/app/my-customers/page.tsx

@@ -0,0 +1,151 @@
+import { createClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+import Link from 'next/link'
+import { getEndCustomers } from '@/lib/actions/end-customers'
+import { ArrowLeft, Building2, Plus, Edit2, AlertTriangle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+export default async function MyCustomersPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/auth/login')
+
+  const customers = await getEndCustomers()
+
+  // Anzahl Bestellungen pro Endkunde
+  const { data: orderCounts } = await supabase
+    .from('orders')
+    .select('end_customer_id')
+    .not('end_customer_id', 'is', null)
+
+  const countMap: Record<string, number> = {}
+  ;(orderCounts ?? []).forEach(o => {
+    if (o.end_customer_id) {
+      countMap[o.end_customer_id] = (countMap[o.end_customer_id] ?? 0) + 1
+    }
+  })
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
+      <div className="max-w-5xl mx-auto space-y-8">
+        {/* Header */}
+        <div className="flex items-center justify-between gap-4 flex-wrap">
+          <div className="flex items-center gap-4">
+            <Link href="/">
+              <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
+                <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
+              </Button>
+            </Link>
+            <div>
+              <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+                <Building2 className="w-8 h-8 text-primary" />
+                Meine Kunden
+              </h1>
+              <p className="text-slate-400 text-sm mt-1">
+                Verwalten Sie Ihre Endkunden – deren Daten werden für Bestellungen verwendet.
+              </p>
+            </div>
+          </div>
+          <Link href="/my-customers/new">
+            <Button className="gap-2">
+              <Plus className="w-4 h-4" /> Kunde hinzufügen
+            </Button>
+          </Link>
+        </div>
+
+        {/* Keine Kunden */}
+        {customers.length === 0 && (
+          <Card className="glass-dark border-white/10">
+            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
+              <Building2 className="w-12 h-12 text-slate-600" />
+              <p className="text-slate-400 text-lg">Noch keine Endkunden angelegt.</p>
+              <Link href="/my-customers/new">
+                <Button><Plus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen</Button>
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Kundenliste */}
+        {customers.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-white/10 text-left">
+                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Unternehmen</th>
+                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden sm:table-cell">Adresse</th>
+                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden md:table-cell">Bestellungen</th>
+                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
+                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">Aktionen</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-white/5">
+                {customers.map(customer => (
+                  <tr key={customer.id} className="hover:bg-white/3 transition-colors">
+                    <td className="py-4 pr-4">
+                      <p className="font-semibold text-white">{customer.company_name}</p>
+                      {(customer.first_name || customer.last_name) && (
+                        <p className="text-sm text-slate-400">
+                          {[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
+                        </p>
+                      )}
+                      {customer.vat_id && (
+                        <p className="text-xs text-slate-500">{customer.vat_id}</p>
+                      )}
+                    </td>
+                    <td className="py-4 pr-4 hidden sm:table-cell">
+                      <p className="text-sm text-slate-300">
+                        {customer.street ?? '–'}
+                      </p>
+                      <p className="text-sm text-slate-400">
+                        {[customer.zip, customer.city].filter(Boolean).join(' ') || '–'}
+                      </p>
+                    </td>
+                    <td className="py-4 pr-4 hidden md:table-cell">
+                      <Link href={`/my-orders?customer=${customer.id}`} className="group">
+                        <span className="text-primary font-bold group-hover:underline">
+                          {countMap[customer.id] ?? 0}
+                        </span>
+                        <span className="text-slate-500 text-xs ml-1">Bestellung(en)</span>
+                      </Link>
+                    </td>
+                    <td className="py-4 pr-4">
+                      {customer.is_anonymized ? (
+                        <Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1">
+                          <AlertTriangle className="w-3 h-3" /> Anonymisiert
+                        </Badge>
+                      ) : (
+                        <Badge className="bg-green-500/10 text-green-400 border-green-500/20">Aktiv</Badge>
+                      )}
+                    </td>
+                    <td className="py-4 text-right">
+                      {!customer.is_anonymized && (
+                        <Link href={`/my-customers/${customer.id}`}>
+                          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white gap-1">
+                            <Edit2 className="w-3.5 h-3.5" /> Bearbeiten
+                          </Button>
+                        </Link>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {/* DSGVO-Hinweis */}
+        <div className="p-4 rounded-xl bg-amber-500/5 border border-amber-500/20 text-xs text-amber-300/80 space-y-1">
+          <p className="font-semibold flex items-center gap-2"><AlertTriangle className="w-3.5 h-3.5" /> DSGVO-Hinweis</p>
+          <p>
+            Die hier gespeicherten Kundendaten unterliegen der DSGVO. Auf Wunsch Ihrer Endkunden können Sie deren Daten
+            über die Bearbeitungsmaske anonymisieren (Recht auf Vergessenwerden). Bestehende Bestellungen bleiben aus
+            steuerrechtlichen Gründen unverändert.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

shop/app/order/page.tsx

@@ -1,5 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { getProducts, getCategories } from '@/lib/actions/products'
+import { getEndCustomers } from '@/lib/actions/end-customers'
 import { OrderWizard } from '@/components/order-wizard'
 import { redirect } from 'next/navigation'
 import { Suspense } from 'react'
@@ -35,7 +36,8 @@ async function OrderDataWrapper() {
 
   const products = await getProducts()
   const categories = await getCategories()
-  
+  const endCustomers = await getEndCustomers()
+
   // Fetch profile if exists
   const { data: profile } = await supabase
     .from('profiles')
@@ -43,5 +45,5 @@ async function OrderDataWrapper() {
     .eq('id', user.id)
     .single()
 
-  return <OrderWizard products={products} categories={categories} initialProfile={profile} />
+  return <OrderWizard products={products} categories={categories} initialProfile={profile} initialEndCustomers={endCustomers} />
 }

shop/app/page.tsx

@@ -22,6 +22,9 @@ export default function Home() {
           <Link className="text-sm font-medium hover:text-primary transition-colors" href="/order">
             Bestellen
           </Link>
+          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/my-customers">
+            Meine Kunden
+          </Link>
           <Link className="text-sm font-medium hover:text-primary transition-colors" href="/my-orders">
             Meine Bestellungen
           </Link>