From 18228fa8b48d1be5cdbef241cf46c75ac7eb5173 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 22:28:01 +0200
Subject: [PATCH] feat(wizard): add vertical progress stepper with step click
 navigation

---
 shop/components/order-wizard.tsx            | 11 ++-
 shop/components/wizard/progress-stepper.tsx | 76 ++++++++++++++++++++-
 2 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 6e60846..c69d035 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -543,13 +543,22 @@ export function OrderWizard({
         addToBasket()
       }
     }
+    setDirection(1)
     setStep(s => s + 1)
   }
 
   const prevStep = () => {
+    setDirection(-1)
     setStep(s => s - 1)
   }
 
+  const goToStep = (targetStep: number) => {
+    if (targetStep < step) {
+      setDirection(-1)
+      setStep(targetStep)
+    }
+  }
+
   function handleBillingIntervalChange(val: 'one_time' | 'monthly') {
     setSelectedBillingInterval(val)
     if (val === 'monthly') {
@@ -866,7 +875,7 @@ export function OrderWizard({
               Bestell-Wizard
             </p>
           </div>
-          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+          <ProgressStepper step={step} basketItemsCount={basketItems.length} orientation="vertical" onStepClick={goToStep} />
 
           {/* Step 3 Categories inside left sidebar */}
           {step === 3 && (
diff --git a/shop/components/wizard/progress-stepper.tsx b/shop/components/wizard/progress-stepper.tsx
index f571f6c..2bc44e7 100644
--- a/shop/components/wizard/progress-stepper.tsx
+++ b/shop/components/wizard/progress-stepper.tsx
@@ -7,14 +7,86 @@ import { Check } from 'lucide-react'
 interface ProgressStepperProps {
   step: number
   basketItemsCount: number
+  orientation?: 'horizontal' | 'vertical'
+  onStepClick?: (step: number) => void
 }
 
 const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']
 
-export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
-  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
+export function ProgressStepper({ step, basketItemsCount, orientation = 'horizontal', onStepClick }: ProgressStepperProps) {
   const progressPercent = ((step - 1) / 3) * 100
 
+  if (orientation === 'vertical') {
+    return (
+      <div className="relative py-2">
+        <div className="flex flex-col gap-6 relative">
+          {/* Static Background Vertical Line */}
+          <div className="absolute left-[19px] top-[20px] bottom-[20px] w-[2px] bg-slate-800 z-0 rounded-full" />
+
+          {/* Animated Active Vertical Line */}
+          <motion.div
+            className="absolute left-[19px] top-[20px] w-[2px] bg-gradient-to-b from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
+            initial={{ height: '0%' }}
+            animate={{ height: `${progressPercent * 0.75}%` }}
+            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
+          />
+
+          {[1, 2, 3, 4].map(s => {
+            const isDone = step > s
+            const isActive = step === s
+            const isClickable = onStepClick && s < step
+
+            return (
+              <div 
+                key={s} 
+                onClick={() => isClickable && onStepClick(s)}
+                className={`relative z-10 flex items-center gap-3 ${isClickable ? 'cursor-pointer group' : ''}`}
+              >
+                <motion.div
+                  initial={false}
+                  animate={{
+                    scale: isActive ? 1.1 : 1,
+                  }}
+                  transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+                  className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 shrink-0 ${
+                    isDone
+                      ? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400 group-hover:scale-105'
+                      : isActive
+                      ? 'bg-slate-950 border-2 border-sky-400 text-sky-400 shadow-[0_0_20px_rgba(56,189,248,0.7)]'
+                      : 'bg-slate-900 border-2 border-slate-800 text-slate-500'
+                  }`}
+                >
+                  {isDone ? <Check className="w-5 h-5 stroke-[3]" /> : s}
+                </motion.div>
+
+                <div className="flex flex-col">
+                  <span
+                    className={`text-xs font-bold tracking-wide transition-colors duration-300 flex items-center gap-1.5 ${
+                      isActive || isDone ? 'text-sky-300' : 'text-slate-500'
+                    }`}
+                  >
+                    {STEP_LABELS[s - 1]}
+                    {s === 3 && basketItemsCount > 0 && (
+                      <span className="bg-sky-500 text-slate-950 text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-extrabold shadow-sm">
+                        {basketItemsCount}
+                      </span>
+                    )}
+                  </span>
+                  {isClickable && (
+                    <span className="text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      Zurück zu Schritt {s}
+                    </span>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
+
   return (
     <div className="max-w-xl mx-auto mb-10 px-4">
       <div className="flex justify-between relative">