fix(wizard): fix UI/UX and usability glitches

- constrain viewport height on wizard routes in HeaderWrapper - remove nested scrollbar in step-software - add active module glows and tooltips for locked licenses - show device name badge in step 3 card header when editing - update main action button text in summary sidebar when editing - implement double-click inline delete confirmation in step-summary - animate customer accordion and add tab-index key bindings
2026-08-20 17:16:25 +02:00
parent ea1906f9e4
commit e0d9c1d20e
6 changed files with 84 additions and 35 deletions
--- a/shop/components/HeaderWrapper.tsx
+++ b/shop/components/HeaderWrapper.tsx
@@ -17,8 +17,10 @@ export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {
    return <>{children}</>;
  }

+  const isWizard = pathname === "/order" || pathname === "/wizard";
+
  return (
-    <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
+    <div className={`flex flex-col ${isWizard ? "h-screen overflow-hidden" : "min-h-screen"} bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white`}>
      {/* Demo Banner */}
      <DemoWrapper>
        <div
@@ -31,7 +33,7 @@ export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {

      {navbar}
      
-      <main className="flex-1">
+      <main className={`flex-1 ${isWizard ? "overflow-hidden" : ""}`}>
        {children}
      </main>
    </div>
--- a/shop/components/customer-accordion-list.tsx
+++ b/shop/components/customer-accordion-list.tsx
@@ -1,6 +1,7 @@
 'use client'

 import React, { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import type { EndCustomerWithDevices, FlattenedDevice } from '@/lib/types'
 import {
@@ -250,7 +251,16 @@ export function CustomerAccordionList({ customers }: CustomerAccordionListProps)
              {/* Akkordeon-Header */}
              <div
                onClick={() => toggleCustomer(customer.id)}
-                className="p-5 flex items-center justify-between cursor-pointer hover:bg-white/[0.02] transition-colors select-none gap-4 flex-wrap"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    toggleCustomer(customer.id)
+                  }
+                }}
+                tabIndex={0}
+                role="button"
+                aria-expanded={isOpen}
+                className="p-5 flex items-center justify-between cursor-pointer hover:bg-white/[0.02] transition-colors select-none gap-4 flex-wrap focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
              >
                <div className="flex items-center gap-4 min-w-[240px]">
                  <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary font-bold">
@@ -324,28 +334,38 @@ export function CustomerAccordionList({ customers }: CustomerAccordionListProps)
              </div>

              {/* Ausgeklappter Bereich mit Kassen */}
-              {isOpen && (
-                <div className="border-t border-white/5 bg-slate-950/40 p-5 space-y-3">
-                  {devices.length === 0 ? (
-                    <div className="text-slate-500 text-sm py-4 text-center">
-                      Keine Kassen oder Bestellungen für diesen Kunden vorhanden.
+              <AnimatePresence initial={false}>
+                {isOpen && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2, ease: 'easeInOut' }}
+                    className="overflow-hidden border-t border-white/5 bg-slate-950/40"
+                  >
+                    <div className="p-5 space-y-3">
+                      {devices.length === 0 ? (
+                        <div className="text-slate-500 text-sm py-4 text-center">
+                          Keine Kassen oder Bestellungen für diesen Kunden vorhanden.
+                        </div>
+                      ) : (
+                        <div className="space-y-3">
+                          <p className="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">
+                            Zugeordnete Kassen ({devices.length})
+                          </p>
+                          {devices.map((device, idx) => (
+                            <DeviceCard
+                              key={`${device.orderId}-${device.deviceId}-${idx}`}
+                              device={device}
+                              customerId={customer.id}
+                            />
+                          ))}
+                        </div>
+                      )}
                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      <p className="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">
-                        Zugeordnete Kassen ({devices.length})
-                      </p>
-                      {devices.map((device, idx) => (
-                        <DeviceCard
-                          key={`${device.orderId}-${device.deviceId}-${idx}`}
-                          device={device}
-                          customerId={customer.id}
-                        />
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
+                  </motion.div>
+                )}
+              </AnimatePresence>
            </Card>
          )
        })}
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -1085,6 +1085,7 @@ export function OrderWizard({
                    billingBadgeClass={billingBadgeClass}
                    existingModuleIds={existingModuleIds}
                    activeCategoryId={activeCategoryId}
+                    editingDeviceName={editingIdx !== null ? (basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`) : null}
                  />
                </div>
              </div>
--- a/shop/components/wizard/step-software.tsx
+++ b/shop/components/wizard/step-software.tsx
@@ -29,6 +29,7 @@ interface StepSoftwareProps {
  /** Modul-IDs, die bereits lizenziert sind (Upgrade-Modus) */
  existingModuleIds?: string[]
  activeCategoryId: string | null
+  editingDeviceName?: string | null
 }

 export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -52,6 +53,7 @@ export function StepSoftware({
  billingBadgeClass,
  existingModuleIds = [],
  activeCategoryId,
+  editingDeviceName = null,
 }: StepSoftwareProps) {
  const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null

@@ -69,15 +71,22 @@ export function StepSoftware({
  return (
    <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 font-bold">
-          <ShoppingCart className="w-5 h-5 text-primary" />
-          Optionen wählen
+        <CardTitle className="text-xl flex items-center justify-between gap-2 text-white font-bold flex-wrap">
+          <div className="flex items-center gap-2">
+            <ShoppingCart className="w-5 h-5 text-primary" />
+            <span>Optionen wählen</span>
+          </div>
+          {editingDeviceName && (
+            <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1 px-2.5 py-1 rounded-lg animate-pulse shrink-0">
+              ✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
+            </Badge>
+          )}
        </CardTitle>
        <CardDescription className="text-slate-400">
          Passen Sie die Konfiguration für {currentCategory.name} an.
        </CardDescription>
      </CardHeader>
-      <CardContent className="flex-1 overflow-y-auto pt-6 space-y-6">
+      <CardContent className="flex-1 pt-6 space-y-6">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentCategory.id}
@@ -260,13 +269,14 @@ export function StepSoftware({
                    return (
                      <div
                        key={module.id}
+                        title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
                        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-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] text-white'
                                : 'border-white/5 bg-white/5 hover:bg-white/10'
                        }`}
                      >
--- a/shop/components/wizard/step-summary.tsx
+++ b/shop/components/wizard/step-summary.tsx
@@ -70,6 +70,8 @@ export function StepSummary({
  onAddNewBasketItem,
  onDeleteBasketItem,
 }: StepSummaryProps) {
+  const [confirmDeleteIdx, setConfirmDeleteIdx] = React.useState<number | null>(null)
+
  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left">
      {/* LINKER BEREICH: Scrollbares Bedienfeld */}
@@ -211,16 +213,26 @@ export function StepSummary({
                      {onDeleteBasketItem && (
                        <Button
                          type="button"
-                          variant="ghost"
+                          variant={confirmDeleteIdx === itemIdx ? "destructive" : "ghost"}
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation()
-                            onDeleteBasketItem(itemIdx)
+                            if (confirmDeleteIdx === itemIdx) {
+                              onDeleteBasketItem(itemIdx)
+                              setConfirmDeleteIdx(null)
+                            } else {
+                              setConfirmDeleteIdx(itemIdx)
+                            }
                          }}
-                          className="h-7 px-2 text-xs text-slate-400 hover:text-red-400 hover:bg-red-500/20 gap-1 rounded-lg"
-                          title="Kasse löschen"
+                          onMouseLeave={() => setConfirmDeleteIdx(null)}
+                          className={`h-7 px-2 text-xs transition-all ${
+                            confirmDeleteIdx === itemIdx
+                              ? 'bg-red-600 text-white hover:bg-red-700 font-bold px-3 shadow-[0_0_10px_rgba(220,38,38,0.5)]'
+                              : 'text-slate-400 hover:text-red-400 hover:bg-red-500/20'
+                          } gap-1 rounded-lg`}
                        >
-                          <Icons.Trash2 className="w-3 h-3" /> Löschen
+                          <Icons.Trash2 className="w-3.5 h-3.5" />
+                          {confirmDeleteIdx === itemIdx ? 'Wirklich löschen?' : 'Löschen'}
                        </Button>
                      )}
                    </div>
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -283,7 +283,11 @@ export function SummarySidebar({
            onClick={nextStep}
            disabled={isNextStepDisabled && basketItems.length === 0}
          >
-            Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
+            {editingIdx !== null ? (
+              <>Änderungen für &quot;{basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`}&quot; übernehmen</>
+            ) : (
+              <>Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" /></>
+            )}
          </Button>
          <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-7 text-xs" onClick={prevStep}>
            Zurück zum Abrechnungsmodell