From 1c9ae2ec3158d4ca72cedd9bf83676262f53d504 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Mon, 10 Aug 2026 23:38:09 +0200
Subject: [PATCH] style: refine step 3 software select UI

---
 shop/components/wizard/step-software.tsx | 421 ++++++++++++-----------
 1 file changed, 218 insertions(+), 203 deletions(-)

diff --git a/shop/components/wizard/step-software.tsx b/shop/components/wizard/step-software.tsx
index 61af183..2bbecc4 100644
--- a/shop/components/wizard/step-software.tsx
+++ b/shop/components/wizard/step-software.tsx
@@ -67,10 +67,10 @@ export function StepSoftware({
   const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
 
   return (
-    <Card className="glass-dark border-white/10 h-full flex flex-col">
+    <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl">
       <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" />
+        <CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
+          <ShoppingCart className="w-5 h-5 text-primary" />
           Optionen wählen
         </CardTitle>
         <CardDescription className="text-slate-400">
@@ -88,238 +88,253 @@ export function StepSoftware({
             className="space-y-6"
           >
             {/* Category header */}
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-3 bg-white/5 p-4 rounded-xl border border-white/10">
               <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>
+                <h3 className="font-bold text-white text-sm">{currentCategory.name}</h3>
                 {currentCategory.description && (
-                  <p className="text-slate-400 text-xs">{currentCategory.description}</p>
+                  <p className="text-slate-400 text-xs mt-0.5">{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">
+                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
                   <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">
+                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
                   <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 variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/20 text-red-400 border border-red-500/30">
+                  <AlertCircle className="w-3 h-3 mr-1" /> Erforderlich
                 </Badge>
               ) : (
-                <Badge variant="outline" className="ml-auto border-white/20 text-slate-400">
+                <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5">
                   Optional
                 </Badge>
               )}
             </div>
 
-                  {catProducts.length === 0 ? (
-                    <p className="text-slate-500 text-sm italic">
-                      Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
-                    </p>
-                  ) : currentCategory.allow_multiselect ? (
-                    <div className="grid gap-3">
-                      {catProducts.map(product => {
-                        const isChecked = sel?.productIds?.includes(product.id) ?? false
-                        const disabled = isProductDisabled(product, currentCategory.id)
-                        return (
-                          <div key={product.id} className="relative">
-                            <Label
-                              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
-                                  ? 'border-primary bg-primary/5 cursor-pointer'
-                                  : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
-                              }`}
-                            >
-                              <div className="flex justify-between w-full items-center">
-                                <div className="flex items-center gap-3">
-                                  <Checkbox
-                                    checked={isChecked}
-                                    disabled={disabled}
-                                    onCheckedChange={() => { }}
-                                    className="border-white/20 data-[state=checked]:bg-primary"
-                                  />
-                                  <span className="font-bold text-base text-white">{product.name}</span>
-                                  <span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
-                                    {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
-                                  </span>
-                                </div>
-                                <span className="text-primary font-semibold text-sm">
-                                  {new Intl.NumberFormat('de-DE', {
-                                    style: 'currency',
-                                    currency: 'EUR',
-                                  }).format(product.base_price)}{' '}
-                                  <span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
-                                </span>
-                              </div>
-                              {product.description && (
-                                <span className="text-sm text-slate-300 mt-1 pl-7">{product.description}</span>
-                              )}
-                              {product.modules && product.modules.length > 0 && (
-                                <span className="text-xs text-slate-500 mt-1 pl-7">
-                                  {product.modules.length} optionale Module verfügbar
-                                </span>
-                              )}
-                            </Label>
-                          </div>
-                        )
-                      })}
-                    </div>
-                  ) : (
-                    <RadioGroup
-                      value={sel?.productId ?? ''}
-                      onValueChange={id => selectProduct(currentCategory.id, id)}
-                      className="grid gap-3"
-                    >
-                      {catProducts.map(product => {
-                        const disabled = isProductDisabled(product, currentCategory.id)
-                        return (
-                          <div key={product.id} className="relative">
-                            <RadioGroupItem
-                              value={product.id}
-                              id={`${currentCategory.id}-${product.id}`}
+            {catProducts.length === 0 ? (
+              <p className="text-slate-500 text-sm italic">
+                Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
+              </p>
+            ) : currentCategory.allow_multiselect ? (
+              <div className="grid gap-3">
+                {catProducts.map(product => {
+                  const isChecked = sel?.productIds?.includes(product.id) ?? false
+                  const disabled = isProductDisabled(product, currentCategory.id)
+                  return (
+                    <div key={product.id} className="relative">
+                      <Label
+                        onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
+                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
+                          ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
+                          : isChecked
+                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
+                            : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
+                        }`}
+                      >
+                        <div className="flex justify-between w-full items-center">
+                          <div className="flex items-center gap-3">
+                            <Checkbox
+                              checked={isChecked}
                               disabled={disabled}
-                              className="peer sr-only"
+                              onCheckedChange={() => { }}
+                              className="border-white/20 data-[state=checked]:bg-primary rounded"
                             />
+                            <span className="font-bold text-sm text-white">{product.name}</span>
+                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                            </span>
+                          </div>
+                          <span className="text-primary font-bold text-sm">
+                            {new Intl.NumberFormat('de-DE', {
+                              style: 'currency',
+                              currency: 'EUR',
+                            }).format(product.base_price)}{' '}
+                            <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
+                          </span>
+                        </div>
+                        {product.description && (
+                          <span className="text-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span>
+                        )}
+                        {product.modules && product.modules.length > 0 && (
+                          <span className="text-[10px] text-slate-500 mt-1 pl-7 font-normal">
+                            {product.modules.length} optionale Module verfügbar
+                          </span>
+                        )}
+                      </Label>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <RadioGroup
+                value={sel?.productId ?? ''}
+                onValueChange={id => selectProduct(currentCategory.id, id)}
+                className="grid gap-3"
+              >
+                {catProducts.map(product => {
+                  const disabled = isProductDisabled(product, currentCategory.id)
+                  const isChecked = sel?.productId === product.id
+                  return (
+                    <div key={product.id} className="relative">
+                      <RadioGroupItem
+                        value={product.id}
+                        id={`${currentCategory.id}-${product.id}`}
+                        disabled={disabled}
+                        className="peer sr-only"
+                      />
+                      <Label
+                        htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
+                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
+                          ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
+                          : isChecked
+                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
+                            : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
+                        }`}
+                      >
+                        <div className="flex justify-between w-full items-center">
+                          <div className="flex items-center gap-2">
+                            <span className="font-bold text-sm text-white">{product.name}</span>
+                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                            </span>
+                          </div>
+                          <span className="text-primary font-bold text-sm">
+                            {new Intl.NumberFormat('de-DE', {
+                              style: 'currency',
+                              currency: 'EUR',
+                            }).format(product.base_price)}{' '}
+                            <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
+                          </span>
+                        </div>
+                        {product.description && (
+                          <span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span>
+                        )}
+                        {product.modules && product.modules.length > 0 && (
+                          <span className="text-[10px] text-slate-500 mt-1 font-normal">
+                            {product.modules.length} optionale Module verfügbar
+                          </span>
+                        )}
+                      </Label>
+                    </div>
+                  )
+                })}
+              </RadioGroup>
+            )}
+
+            {/* Modules */}
+            {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
+              <div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
+                <p className="text-sm font-bold text-white flex items-center gap-2">
+                  <span className="w-1.5 h-1.5 rounded-full bg-primary" />
+                  Zusatzmodule für {selectedProduct.name}
+                </p>
+                <div className="space-y-2.5">
+                  {selectedProduct.modules.map(module => {
+                    const isExistingLicense = existingModuleIds.includes(module.id)
+                    const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
+                    const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
+                    return (
+                      <div
+                        key={module.id}
+                        className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
+                          isExistingLicense
+                            ? 'border-primary/20 bg-primary/5 opacity-75'
+                            : disabled
+                              ? 'border-white/5 bg-white/5 opacity-40'
+                              : checked
+                                ? 'border-primary/30 bg-primary/5'
+                                : 'border-white/5 bg-white/5 hover:bg-white/10'
+                        }`}
+                      >
+                        <div className="flex items-start space-x-3">
+                          <Checkbox
+                            id={`mod-${currentCategory.id}-${module.id}`}
+                            checked={checked}
+                            onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
+                            disabled={disabled}
+                            className="rounded border-white/20 data-[state=checked]:bg-primary"
+                          />
+                          <div className="flex-1">
                             <Label
-                              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'
+                              htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
+                              className={`font-semibold text-sm flex justify-between text-white ${
+                                isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                               }`}
                             >
-                              <div className="flex justify-between w-full items-center">
-                                <div className="flex items-center gap-2">
-                                  <span className="font-bold text-base text-white">{product.name}</span>
-                                  <span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
-                                    {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
+                              <span className="flex items-center gap-1.5 flex-wrap">
+                                {module.name}
+                                {isExistingLicense && (
+                                  <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
+                                    <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
                                   </span>
-                                </div>
-                                <span className="text-primary font-semibold text-sm">
-                                  {new Intl.NumberFormat('de-DE', {
+                                )}
+                              </span>
+                              <span className="text-primary font-bold text-sm">
+                                {isExistingLicense ? (
+                                  <span className="text-slate-500 text-xs font-normal">inkl.</span>
+                                ) : (
+                                  <>+{new Intl.NumberFormat('de-DE', {
                                     style: 'currency',
                                     currency: 'EUR',
-                                  }).format(product.base_price)}{' '}
-                                  <span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
-                                </span>
-                              </div>
-                              {product.description && (
-                                <span className="text-sm text-slate-300 mt-1">{product.description}</span>
-                              )}
-                              {product.modules && product.modules.length > 0 && (
-                                <span className="text-xs text-slate-500 mt-1">
-                                  {product.modules.length} optionale Module verfügbar
-                                </span>
-                              )}
+                                  }).format(module.price)}</>
+                                )}
+                              </span>
                             </Label>
-                          </div>
-                        )
-                      })}
-                    </RadioGroup>
-                  )}
-
-                  {/* Modules */}
-                  {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
-                    <div className="mt-4 space-y-3 pl-2 border-l-2 border-primary/30">
-                      <p className="text-sm font-semibold text-white ml-2">Zusatzmodule:</p>
-                      {selectedProduct.modules.map(module => {
-                        const isExistingLicense = existingModuleIds.includes(module.id)
-                        const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
-                        const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
-                        return (
-                          <div
-                            key={module.id}
-                            className={`flex flex-col p-3 rounded-lg border ml-2 transition-colors ${
-                              isExistingLicense
-                                ? 'border-primary/20 bg-primary/5 opacity-75'
-                                : disabled
-                                  ? 'border-white/5 bg-white/5 opacity-50'
-                                  : 'border-white/5 bg-white/5 hover:bg-white/10'
-                            }`}
-                          >
-                            <div className="flex items-start space-x-3">
-                              <Checkbox
-                                id={`mod-${currentCategory.id}-${module.id}`}
-                                checked={checked}
-                                onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
-                                disabled={disabled}
-                              />
-                              <div className="flex-1">
-                                <Label
-                                  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'
-                                  }`}
-                                >
-                                  <span className="flex items-center gap-1.5">
-                                    {module.name}
-                                    {isExistingLicense && (
-                                      <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-semibold">
-                                        <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
-                                      </span>
-                                    )}
-                                  </span>
-                                  <span className="text-primary font-bold">
-                                    {isExistingLicense ? (
-                                      <span className="text-slate-500 text-xs">inkl.</span>
-                                    ) : (
-                                      <>+{new Intl.NumberFormat('de-DE', {
-                                        style: 'currency',
-                                        currency: 'EUR',
-                                      }).format(module.price)}</>
-                                    )}
-                                  </span>
-                                </Label>
-                                {module.description && (
-                                  <p className="text-xs text-slate-400">{module.description}</p>
-                                )}
-                                {!isExistingLicense && disabled && (
-                                  <p className="text-[10px] text-destructive mt-1">
-                                    {module.requirements?.length && !module.requirements.some(
-                                      reqId => sel?.moduleIds.includes(reqId)
-                                    )
-                                      ? 'Benötigt weitere Module'
-                                      : 'Nicht kombinierbar mit aktueller Auswahl'}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {/* Scalable Quantity */}
-                            {checked && !isExistingLicense && module.has_quantity && (
-                              <div className="flex items-center gap-3 mt-3 pl-8 pt-2 border-t border-white/5">
-                                <Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400">Menge:</Label>
-                                <Input
-                                  id={`qty-${module.id}`}
-                                  type="number"
-                                  min={1}
-                                  max={999}
-                                  value={moduleQuantities[module.id] || 1}
-                                  onChange={(e) => {
-                                    const val = Math.max(1, parseInt(e.target.value) || 1)
-                                    setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
-                                  }}
-                                  className="w-20 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg"
-                                />
-                                <span className="text-xs text-slate-500">
-                                  Gesamt: {new Intl.NumberFormat('de-DE', {
-                                    style: 'currency',
-                                    currency: 'EUR',
-                                  }).format(module.price * (moduleQuantities[module.id] || 1))}
-                                </span>
-                              </div>
+                            {module.description && (
+                              <p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
+                            )}
+                            {!isExistingLicense && disabled && (
+                              <p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1">
+                                <AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
+                                {module.requirements?.length && !module.requirements.some(
+                                  reqId => sel?.moduleIds.includes(reqId)
+                                )
+                                  ? 'Benötigt weitere Module'
+                                  : 'Nicht kombinierbar mit aktueller Auswahl'}
+                              </p>
                             )}
                           </div>
-                        )
-                      })}
-                    </div>
-                  )}
+                        </div>
+
+                        {/* Scalable Quantity */}
+                        {checked && !isExistingLicense && module.has_quantity && (
+                          <div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5">
+                            <Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label>
+                            <Input
+                              id={`qty-${module.id}`}
+                              type="number"
+                              min={1}
+                              max={999}
+                              value={moduleQuantities[module.id] || 1}
+                              onChange={(e) => {
+                                const val = Math.max(1, parseInt(e.target.value) || 1)
+                                setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
+                              }}
+                              className="w-16 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
+                            />
+                            <span className="text-xs text-slate-400">
+                              Gesamt:{' '}
+                              <span className="text-primary font-bold">
+                                {new Intl.NumberFormat('de-DE', {
+                                  style: 'currency',
+                                  currency: 'EUR',
+                                }).format(module.price * (moduleQuantities[module.id] || 1))}
+                              </span>
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
           </motion.div>
         </AnimatePresence>
       </CardContent>