feat(admin): extend wysiwyg live editor

- Add is_required and allow_multiselect category toggles

- Implement module-popover for product module assignment

- Add cascade-protected deletion for categories and products

- Add sidebar link with AdminNavLink active states

shop/app/admin/layout.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link'
-import { LayoutDashboard, Package, Settings, Users, LayoutGrid, ShoppingCart, Wrench, Database, Building2 } from 'lucide-react'
+import { LayoutDashboard, Package, Settings, Users, LayoutGrid, ShoppingCart, Wrench, Database, Building2, Sparkles } from 'lucide-react'
 import { redirect } from 'next/navigation'
 import { createClient } from '@/lib/supabase/server'
 import { AdminLogoutButton } from '@/components/admin/logout-menu-item'
 import { DemoWrapper } from '@/components/DemoWrapper'
+import { AdminNavLink } from '@/components/admin/admin-nav-link'
 
 export default async function AdminLayout({
   children,
@@ -41,53 +42,58 @@ export default async function AdminLayout({
         </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-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+          <AdminNavLink href="/admin">
             <LayoutDashboard className="w-5 h-5" />
             Dashboard
-          </Link>
-          <Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/products">
             <Package className="w-5 h-5" />
             Produkte
-          </Link>
-          <Link href="/admin/categories" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/categories">
             <LayoutGrid className="w-5 h-5" />
             Kategorien
-          </Link>
-          <Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/wysiwyg">
+            <Sparkles className="w-5 h-5 text-primary" />
+            ✨ Order-Wizard (Live)
+          </AdminNavLink>
+          <AdminNavLink href="/admin/orders">
             <ShoppingCart className="w-5 h-5" />
             Bestellungen
-          </Link>
-          <Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/users">
             <Users className="w-5 h-5" />
             Benutzer
-          </Link>
+          </AdminNavLink>
 
-          <Link href="/admin/companies" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+          <AdminNavLink href="/admin/companies">
             <Building2 className="w-5 h-5" />
             Firmen
-          </Link>
+          </AdminNavLink>
 
           {!isVerwaltung && (
             <>
               <div className="pt-2 pb-1 px-3">
                 <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-600">Einstellungen</span>
               </div>
-              <Link href="/admin/einstellungen" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+              <AdminNavLink href="/admin/einstellungen">
                 <Settings className="w-5 h-5" />
                 Allgemein
-              </Link>
-              <Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+              </AdminNavLink>
+              <AdminNavLink href="/admin/settings">
                 <Wrench className="w-5 h-5" />
                 SMTP
-              </Link>
-              <Link href="/admin/tools" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
+              </AdminNavLink>
+              <AdminNavLink href="/admin/tools">
                 <Database className="w-5 h-5" />
                 DB-Tools
-              </Link>
+              </AdminNavLink>
             </>
           )}
         </nav>
 
+
         <div className="p-4 border-t border-slate-200 dark:border-white/5 space-y-4">
           <AdminLogoutButton />
           <div className="px-3 pt-2 flex items-center gap-2 border-t border-slate-200 dark:border-white/5 opacity-60">

shop/app/admin/wysiwyg/components/inline-input.tsx

@@ -26,8 +26,26 @@ export function InlineInput({ value, onSave, className, type = 'text' }: InlineI
 
   const handleBlur = async () => {
     setIsEditing(false)
-    if (currentValue !== value) {
-      await onSave(currentValue)
+    const trimmed = currentValue.trim()
+    
+    if (type === 'number') {
+      const parsed = parseFloat(trimmed)
+      if (isNaN(parsed) || trimmed === '') {
+        setCurrentValue(value)
+        return
+      }
+      const finalVal = parsed.toString()
+      if (finalVal !== value) {
+        await onSave(finalVal)
+      }
+    } else {
+      if (trimmed === '') {
+        setCurrentValue(value)
+        return
+      }
+      if (trimmed !== value) {
+        await onSave(trimmed)
+      }
     }
   }
 

shop/app/admin/wysiwyg/components/module-popover.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { ProductModule } from '@/lib/types'
+import { Plus, Search } from 'lucide-react'
+
+interface ModulePopoverProps {
+  assignedModules: ProductModule[]
+  allModules: ProductModule[]
+  onAddModule: (module: ProductModule) => void
+}
+
+export function ModulePopover({ assignedModules, allModules, onAddModule }: ModulePopoverProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Filter modules that are not already assigned to this product
+  // We match by name to treat identical modules across products as the same entity
+  const availableModules = allModules.filter(m => {
+    const isAssigned = assignedModules.some(am => am.name.toLowerCase() === m.name.toLowerCase())
+    const matchesSearch = m.name.toLowerCase().includes(search.toLowerCase()) || 
+                          (m.description && m.description.toLowerCase().includes(search.toLowerCase()))
+    return !isAssigned && matchesSearch
+  })
+
+  // Deduplicate available modules by name to show a clean list
+  const uniqueAvailableModules: ProductModule[] = []
+  const seenNames = new Set<string>()
+  for (const m of availableModules) {
+    const nameKey = m.name.toLowerCase()
+    if (!seenNames.has(nameKey)) {
+      seenNames.add(nameKey)
+      uniqueAvailableModules.push(m)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  return (
+    <div className="relative inline-block" ref={popoverRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-black rounded-lg transition-all"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Modul hinzufügen
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 mt-2 z-50 w-72 bg-slate-900 border border-white/10 rounded-xl shadow-2xl p-3 space-y-3">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder="Modul suchen..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-400 outline-none focus:border-primary/50 transition-colors"
+            />
+          </div>
+
+          <div className="max-h-60 overflow-y-auto space-y-1 pr-1 custom-scrollbar">
+            {uniqueAvailableModules.length > 0 ? (
+              uniqueAvailableModules.map((mod) => (
+                <button
+                  key={mod.id}
+                  onClick={() => {
+                    onAddModule(mod)
+                    setIsOpen(false)
+                    setSearch('')
+                  }}
+                  className="w-full text-left p-2 hover:bg-white/5 rounded-lg transition-colors group"
+                >
+                  <div className="font-medium text-xs text-white group-hover:text-primary transition-colors">
+                    {mod.name}
+                  </div>
+                  {mod.description && (
+                    <div className="text-[10px] text-slate-400 line-clamp-1 mt-0.5">
+                      {mod.description}
+                    </div>
+                  )}
+                  <div className="text-[10px] text-primary font-mono mt-1">
+                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price)}
+                  </div>
+                </button>
+              ))
+            ) : (
+              <div className="text-[11px] text-slate-400 text-center py-4">
+                Keine passenden Module gefunden.
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

shop/app/admin/wysiwyg/page.tsx

@@ -26,8 +26,23 @@ export default async function WysiwygAdminPage() {
   )
 }
 
+import { createClient } from '@/lib/supabase/server'
+
 async function WysiwygDataWrapper() {
   const products = await getProducts().catch(() => [])
   const categories = await getCategories().catch(() => [])
-  return <WysiwygAdminClient initialProducts={products} initialCategories={categories} />
+  
+  const supabase = await createClient()
+  const { data: allModules } = await supabase
+    .from('product_modules')
+    .select('*')
+    .order('name', { ascending: true })
+
+  return (
+    <WysiwygAdminClient 
+      initialProducts={products} 
+      initialCategories={categories} 
+      allModules={allModules || []} 
+    />
+  )
 }

shop/app/admin/wysiwyg/wysiwyg-client.tsx

@@ -1,22 +1,65 @@
 'use client'
 
 import { useState, useTransition } from 'react'
-import { Category, Product } from '@/lib/types'
-import { updateProduct, createProduct, updateCategory, createCategory } from '@/lib/actions/products'
+import { Category, Product, ProductModule } from '@/lib/types'
+import { updateProduct, createProduct, updateCategory, createCategory, deleteProduct, deleteCategory } from '@/lib/actions/products'
 import { InlineInput } from './components/inline-input'
+import { ModulePopover } from './components/module-popover'
+import { Trash2 } from 'lucide-react'
 
 export function WysiwygAdminClient({
   initialCategories,
-  initialProducts
+  initialProducts,
+  allModules
 }: {
   initialCategories: Category[]
   initialProducts: Product[]
+  allModules: ProductModule[]
 }) {
   const [mode, setMode] = useState<'purchase' | 'subscription'>('purchase')
   const [categories, setCategories] = useState(initialCategories)
   const [products, setProducts] = useState(initialProducts)
   const [isPending, startTransition] = useTransition()
 
+  const handleDeleteCategory = async (catId: string) => {
+    // Cascade-Check: check if there are products belonging to this category
+    const categoryProducts = products.filter(p => p.category_id === catId)
+    if (categoryProducts.length > 0) {
+      alert(`Diese Kategorie enthält noch ${categoryProducts.length} Produkte. Bitte lösche oder verschiebe diese zuerst!`)
+      return
+    }
+
+    if (!window.confirm('Möchten Sie diese Kategorie wirklich löschen?')) {
+      return
+    }
+
+    startTransition(async () => {
+      try {
+        await deleteCategory(catId)
+        setCategories(categories.filter(c => c.id !== catId))
+      } catch (e) {
+        console.error(e)
+        alert('Fehler beim Löschen der Kategorie.')
+      }
+    })
+  }
+
+  const handleDeleteProduct = async (prodId: string) => {
+    if (!window.confirm('Möchten Sie dieses Produkt wirklich löschen?')) {
+      return
+    }
+
+    startTransition(async () => {
+      try {
+        await deleteProduct(prodId)
+        setProducts(products.filter(p => p.id !== prodId))
+      } catch (e) {
+        console.error(e)
+        alert('Fehler beim Löschen des Produkts.')
+      }
+    })
+  }
+
   // Filterung der Kategorien nach aktivem Modus
   const filteredCategories = categories.filter(cat => 
     mode === 'purchase' ? cat.show_in_kauf : cat.show_in_abo
@@ -68,6 +111,17 @@ export function WysiwygAdminClient({
     })
   }
 
+  const handleCategoryToggle = async (catId: string, fields: Partial<Category>) => {
+    startTransition(async () => {
+      try {
+        setCategories(categories.map(c => c.id === catId ? { ...c, ...fields } : c))
+        await updateCategory(catId, fields)
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  }
+
   return (
     <div className={`p-6 max-w-7xl mx-auto space-y-6 ${isPending ? 'opacity-70 pointer-events-none' : ''}`}>
       <div className="flex justify-between items-center border-b border-white/10 pb-4">
@@ -89,7 +143,7 @@ export function WysiwygAdminClient({
             Abo-Modus (Monatlich)
           </button>
         </div>
-        {isPending && <span className="text-xs text-primary animate-pulse">Speichere Änderungen...</span>}
+        {isPending && <span className="text-xs text-primary animate-pulse font-medium">Speichere Änderungen...</span>}
       </div>
 
       <div className="space-y-8">
@@ -98,8 +152,8 @@ export function WysiwygAdminClient({
           .map(cat => {
             const catProducts = filteredProducts.filter(p => p.category_id === cat.id)
             return (
-              <div key={cat.id} className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-4">
-                <div className="flex justify-between items-start">
+              <div key={cat.id} className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-4 shadow-xl">
+                <div className="flex justify-between items-start border-b border-white/5 pb-4">
                   <div className="w-full">
                     <InlineInput
                       value={cat.name}
@@ -117,40 +171,130 @@ export function WysiwygAdminClient({
                       }}
                       className="text-slate-400 text-sm mt-1 block w-full"
                     />
+                    
+                    {/* Kategorie Attribute (Toggles) */}
+                    <div className="flex items-center gap-6 mt-3 text-xs text-slate-400">
+                      <label className="flex items-center gap-2 cursor-pointer select-none">
+                        <input
+                          type="checkbox"
+                          checked={cat.is_required}
+                          onChange={(e) => handleCategoryToggle(cat.id, { is_required: e.target.checked })}
+                          className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
+                        />
+                        <span>Pflichtauswahl (is_required)</span>
+                      </label>
+                      <label className="flex items-center gap-2 cursor-pointer select-none">
+                        <input
+                          type="checkbox"
+                          checked={cat.allow_multiselect}
+                          onChange={(e) => handleCategoryToggle(cat.id, { allow_multiselect: e.target.checked })}
+                          className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
+                        />
+                        <span>Mehrfachauswahl (allow_multiselect)</span>
+                      </label>
+                    </div>
                   </div>
+                  <button
+                    onClick={() => handleDeleteCategory(cat.id)}
+                    className="p-2 text-slate-500 hover:text-red-500 hover:bg-white/5 rounded-lg transition-all ml-4 flex-shrink-0"
+                    title="Kategorie löschen"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
                   {catProducts.map(prod => (
-                    <div key={prod.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2 relative group">
-                      <InlineInput
-                        value={prod.name}
-                        onSave={async (newName) => {
-                          await updateProduct(prod.id, { name: newName }, prod.modules || [])
-                          setProducts(products.map(p => p.id === prod.id ? { ...p, name: newName } : p))
-                        }}
-                        className="font-semibold text-white block"
-                      />
-                      <InlineInput
-                        value={prod.description || ''}
-                        onSave={async (newDesc) => {
-                          await updateProduct(prod.id, { description: newDesc }, prod.modules || [])
-                          setProducts(products.map(p => p.id === prod.id ? { ...p, description: newDesc } : p))
-                        }}
-                        className="text-xs text-slate-400 block"
-                      />
-                      <div className="text-primary font-mono text-sm flex items-center space-x-1">
+                    <div key={prod.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-3 relative group flex flex-col justify-between">
+                      <div className="space-y-2">
+                        <div className="flex justify-between items-start gap-2">
+                          <div className="flex-1">
+                            <InlineInput
+                              value={prod.name}
+                              onSave={async (newName) => {
+                                  await updateProduct(prod.id, { name: newName }, prod.modules || [])
+                                  setProducts(products.map(p => p.id === prod.id ? { ...p, name: newName } : p))
+                              }}
+                              className="font-semibold text-white block"
+                            />
+                          </div>
+                          <button
+                            onClick={() => handleDeleteProduct(prod.id)}
+                            className="p-1 text-slate-500 hover:text-red-500 hover:bg-white/5 rounded transition-all opacity-0 group-hover:opacity-100 flex-shrink-0"
+                            title="Produkt löschen"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </div>
                         <InlineInput
-                          value={prod.base_price.toString()}
-                          type="number"
-                          onSave={async (newPrice) => {
-                            const priceNum = parseFloat(newPrice) || 0
-                            await updateProduct(prod.id, { base_price: priceNum }, prod.modules || [])
-                            setProducts(products.map(p => p.id === prod.id ? { ...p, base_price: priceNum } : p))
+                          value={prod.description || ''}
+                          onSave={async (newDesc) => {
+                            await updateProduct(prod.id, { description: newDesc }, prod.modules || [])
+                            setProducts(products.map(p => p.id === prod.id ? { ...p, description: newDesc } : p))
                           }}
-                          className="inline-block"
-                        /> 
-                        <span>€</span>
+                          className="text-xs text-slate-400 block"
+                        />
+                        <div className="text-primary font-mono text-sm flex items-center space-x-1">
+                          <InlineInput
+                            value={prod.base_price.toString()}
+                            type="number"
+                            onSave={async (newPrice) => {
+                              const priceNum = parseFloat(newPrice) || 0
+                              await updateProduct(prod.id, { base_price: priceNum }, prod.modules || [])
+                              setProducts(products.map(p => p.id === prod.id ? { ...p, base_price: priceNum } : p))
+                            }}
+                            className="inline-block"
+                          /> 
+                          <span>€</span>
+                        </div>
+
+                        {/* Modul-Badges */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold block">Module:</span>
+                          <div className="flex flex-wrap gap-1">
+                            {(prod.modules || []).length > 0 ? (
+                              (prod.modules || []).map((m) => (
+                                <span key={m.id} className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-white/10 text-slate-300 font-medium">
+                                  {m.name}
+                                  <button
+                                    onClick={async () => {
+                                      const updatedModules = (prod.modules || []).filter(mod => mod.id !== m.id)
+                                      setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules } : p))
+                                      await updateProduct(prod.id, {}, updatedModules)
+                                    }}
+                                    className="text-slate-500 hover:text-white font-bold transition-colors ml-0.5"
+                                    title="Modul entfernen"
+                                  >
+                                    ×
+                                  </button>
+                                </span>
+                              ))
+                            ) : (
+                              <span className="text-[10px] text-slate-500 italic">Keine Module</span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Modul hinzufügen Popover */}
+                      <div className="mt-3 pt-2 border-t border-white/5">
+                        <ModulePopover
+                          assignedModules={prod.modules || []}
+                          allModules={allModules}
+                          onAddModule={async (mod) => {
+                            const newMod = {
+                              name: mod.name,
+                              description: mod.description,
+                              price: mod.price,
+                              requirements: mod.requirements || [],
+                              exclusions: mod.exclusions || [],
+                              has_quantity: mod.has_quantity || false
+                            }
+                            const updatedModules = [...(prod.modules || []), newMod]
+                            setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules as any } : p))
+                            await updateProduct(prod.id, {}, updatedModules)
+                          }}
+                        />
                       </div>
                     </div>
                   ))}
@@ -160,7 +304,7 @@ export function WysiwygAdminClient({
                     className="flex flex-col items-center justify-center p-4 border border-dashed border-white/20 hover:border-primary/50 rounded-xl text-slate-400 hover:text-primary transition h-full min-h-[140px]"
                   >
                     <span className="text-2xl mb-1">+</span>
-                    <span className="text-xs">Produkt hinzufügen</span>
+                    <span className="text-xs font-medium">Produkt hinzufügen</span>
                   </button>
                 </div>
               </div>
@@ -172,7 +316,7 @@ export function WysiwygAdminClient({
           className="w-full py-4 border border-dashed border-white/20 hover:border-primary/50 rounded-2xl flex items-center justify-center text-slate-400 hover:text-primary transition"
         >
           <span className="text-xl mr-2">+</span>
-          <span>Neue Kategorie hinzufügen</span>
+          <span className="font-medium">Neue Kategorie hinzufügen</span>
         </button>
       </div>
     </div>

shop/components/admin/admin-nav-link.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ReactNode } from 'react'
+
+interface AdminNavLinkProps {
+  href: string
+  children: ReactNode
+}
+
+export function AdminNavLink({ href, children }: AdminNavLinkProps) {
+  const pathname = usePathname()
+  const isActive = pathname === href
+
+  return (
+    <Link
+      href={href}
+      className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
+        isActive
+          ? 'bg-primary text-black font-semibold'
+          : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5'
+      }`}
+    >
+      {children}
+    </Link>
+  )
+}