feat(wizard): optimize step 3 layout and add category navigation

shop/components/wizard/step-software.tsx

@@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { ShoppingCart, Check, AlertCircle, Lock } from 'lucide-react'
 import * as Icons from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { Category, Product, CategorySelection } from '@/lib/types'
 
 interface StepSoftwareProps {
@@ -27,6 +28,7 @@ interface StepSoftwareProps {
   billingBadgeClass: (interval: string) => string
   /** Modul-IDs, die bereits lizenziert sind (Upgrade-Modus) */
   existingModuleIds?: string[]
+  activeCategoryId: string | null
 }
 
 function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -49,76 +51,85 @@ export function StepSoftware({
   billingLabel,
   billingBadgeClass,
   existingModuleIds = [],
+  activeCategoryId,
 }: StepSoftwareProps) {
+  const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
+
+  if (!currentCategory) return null
+
+  const catProducts = products.filter(p => {
+    if (p.category_id !== currentCategory.id) return false
+    return selectedBillingInterval === 'one_time'
+      ? p.show_in_kauf !== false
+      : p.show_in_abo !== false
+  })
+  const sel = selections[currentCategory.id]
+  const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
+
   return (
-    <Card className="glass-dark border-white/10">
-      <CardHeader>
-        <CardTitle className="text-2xl flex items-center gap-2 text-white">
-          <ShoppingCart className="w-6 h-6 text-blue-400" />
-          Software wählen
+    <Card className="glass-dark border-white/10 h-full flex flex-col">
+      <CardHeader className="border-b border-white/5 pb-4">
+        <CardTitle className="text-xl flex items-center gap-2 text-white">
+          <ShoppingCart className="w-5 h-5 text-blue-400" />
+          Optionen wählen
         </CardTitle>
-        <CardDescription className="text-slate-300">
-          Wählen Sie pro Kategorie mindestens einen Artikel aus.
+        <CardDescription className="text-slate-400">
+          Passen Sie die Konfiguration für {currentCategory.name} an.
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-8">
-            {visibleCategories.map((cat, idx) => {
-              const catProducts = products.filter(p => {
-                if (p.category_id !== cat.id) return false
-                return selectedBillingInterval === 'one_time'
-                  ? p.show_in_kauf !== false
-                  : p.show_in_abo !== false
-              })
-              const sel = selections[cat.id]
-              const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
-
-              return (
-                <div key={cat.id}>
-                  {idx > 0 && <Separator className="bg-white/10 mb-8" />}
-
-                  {/* Category header */}
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
-                      <CategoryIcon icon={cat.icon} className="w-4 h-4 text-primary" />
-                    </div>
-                    <div>
-                      <h3 className="font-bold text-white text-lg">{cat.name}</h3>
-                      {cat.description && (
-                        <p className="text-slate-400 text-xs">{cat.description}</p>
-                      )}
-                    </div>
-                    {sel?.productIds && sel.productIds.length > 0 ? (
-                      <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
-                        <Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
-                      </Badge>
-                    ) : sel?.productId ? (
-                      <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
-                        <Check className="w-3 h-3 mr-1" /> Ausgewählt
-                      </Badge>
-                    ) : cat.is_required ? (
-                      <Badge variant="destructive" className="ml-auto opacity-80">
-                        <AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
-                      </Badge>
-                    ) : (
-                      <Badge variant="outline" className="ml-auto border-white/20 text-slate-400">
-                        Optional
-                      </Badge>
-                    )}
-                  </div>
+      <CardContent className="flex-1 overflow-y-auto pt-6 space-y-6">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={currentCategory.id}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className="space-y-6"
+          >
+            {/* Category header */}
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
+                <CategoryIcon icon={currentCategory.icon} className="w-4 h-4 text-primary" />
+              </div>
+              <div>
+                <h3 className="font-bold text-white text-base">{currentCategory.name}</h3>
+                {currentCategory.description && (
+                  <p className="text-slate-400 text-xs">{currentCategory.description}</p>
+                )}
+              </div>
+              {sel?.productIds && sel.productIds.length > 0 ? (
+                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
+                  <Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
+                </Badge>
+              ) : sel?.productId ? (
+                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
+                  <Check className="w-3 h-3 mr-1" /> Ausgewählt
+                </Badge>
+              ) : currentCategory.is_required ? (
+                <Badge variant="destructive" className="ml-auto opacity-80">
+                  <AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
+                </Badge>
+              ) : (
+                <Badge variant="outline" className="ml-auto border-white/20 text-slate-400">
+                  Optional
+                </Badge>
+              )}
+            </div>
 
                   {catProducts.length === 0 ? (
                     <p className="text-slate-500 text-sm italic">
                       Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
                     </p>
-                  ) : cat.allow_multiselect ? (
+                  ) : currentCategory.allow_multiselect ? (
                     <div className="grid gap-3">
                       {catProducts.map(product => {
                         const isChecked = sel?.productIds?.includes(product.id) ?? false
-                        const disabled = isProductDisabled(product, cat.id)
+                        const disabled = isProductDisabled(product, currentCategory.id)
                         return (
                           <div key={product.id} className="relative">
                             <Label
-                              onClick={() => !disabled && selectProduct(cat.id, product.id)}
+                              onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
                               className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${disabled
                                 ? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
                                 : isChecked
@@ -163,21 +174,21 @@ export function StepSoftware({
                   ) : (
                     <RadioGroup
                       value={sel?.productId ?? ''}
-                      onValueChange={id => selectProduct(cat.id, id)}
+                      onValueChange={id => selectProduct(currentCategory.id, id)}
                       className="grid gap-3"
                     >
                       {catProducts.map(product => {
-                        const disabled = isProductDisabled(product, cat.id)
+                        const disabled = isProductDisabled(product, currentCategory.id)
                         return (
                           <div key={product.id} className="relative">
                             <RadioGroupItem
                               value={product.id}
-                              id={`${cat.id}-${product.id}`}
+                              id={`${currentCategory.id}-${product.id}`}
                               disabled={disabled}
                               className="peer sr-only"
                             />
                             <Label
-                              htmlFor={disabled ? undefined : `${cat.id}-${product.id}`}
+                              htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
                               className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled
                                 ? 'opacity-50 cursor-not-allowed'
                                 : 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer'
@@ -234,14 +245,14 @@ export function StepSoftware({
                           >
                             <div className="flex items-start space-x-3">
                               <Checkbox
-                                id={`mod-${cat.id}-${module.id}`}
+                                id={`mod-${currentCategory.id}-${module.id}`}
                                 checked={checked}
-                                onCheckedChange={() => !isExistingLicense && toggleModule(cat.id, module.id)}
+                                onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
                                 disabled={disabled}
                               />
                               <div className="flex-1">
                                 <Label
-                                  htmlFor={isExistingLicense ? undefined : `mod-${cat.id}-${module.id}`}
+                                  htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
                                   className={`font-medium flex justify-between text-white ${
                                     isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                                   }`}
@@ -309,9 +320,8 @@ export function StepSoftware({
                       })}
                     </div>
                   )}
-                </div>
-              )
-            })}
+          </motion.div>
+        </AnimatePresence>
       </CardContent>
     </Card>
   )