refactor(wizard): redesign step summary layout with step indicator

shop/components/order-wizard.tsx

@@ -939,10 +939,10 @@ export function OrderWizard({
         {step === 4 && (
           <motion.div
             key="step4"
-            initial={{ opacity: 0, scale: 0.95 }}
+            initial={{ opacity: 0, scale: 0.98 }}
             animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            className="space-y-6 text-center"
+            exit={{ opacity: 0, scale: 0.98 }}
+            className="w-full"
           >
             <StepSummary
               finalItemsToShow={finalItemsToShow}

shop/components/wizard/step-summary.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
 import { Button } from '@/components/ui/button'
-import { ShieldCheck, Building2, Calendar, Loader2 } from 'lucide-react'
+import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react'
 import * as Icons from 'lucide-react'
 import { Category, Product, EndCustomer, Profile } from '@/lib/types'
 
@@ -64,23 +64,106 @@ export function StepSummary({
   setOrderNotes,
 }: StepSummaryProps) {
   return (
-    <Card className="glass-dark border-primary/30 max-w-2xl mx-auto shadow-primary/10 shadow-2xl">
-      <CardHeader>
-        <div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-primary/50">
-          <ShieldCheck className="w-10 h-10 text-primary" />
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start max-w-6xl mx-auto text-left">
+      {/* LINKER BEREICH: Linksbündige Überschrift & Notizfeld */}
+      <div className="lg:col-span-5 space-y-6">
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
+              <ShieldCheck className="w-6 h-6 text-primary" />
             </div>
-        <CardTitle className="text-3xl text-white">Anfrage prüfen</CardTitle>
-        <CardDescription className="text-slate-300">
-          Fast fertig! Bitte überprüfen Sie Ihre Auswahl.
-        </CardDescription>
+            <span className="text-xs font-bold uppercase tracking-widest text-sky-400 bg-sky-500/10 px-3 py-1 rounded-full border border-sky-500/20">
+              Schritt 4 von 4 — Abschluss
+            </span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
+            Anfrage prüfen
+          </h2>
+          <p className="text-slate-300 text-base leading-relaxed">
+            Fast fertig! Bitte überprüfen Sie Ihre ausgewählte Konfiguration vor dem Absenden.
+          </p>
+        </div>
+
+        {/* Kunden-Info Card */}
+        {selectedEndCustomer && (
+          <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-2">
+            <div className="flex items-center gap-2 text-sky-400 font-bold text-sm">
+              <Building2 className="w-4 h-4" />
+              <span>Ausgewählter Endkunde</span>
+            </div>
+            <p className="text-white font-bold text-base">{selectedEndCustomer.company_name}</p>
+            <p className="text-slate-400 text-xs">{selectedEndCustomer.first_name} {selectedEndCustomer.last_name}</p>
+            <p className="text-slate-400 text-xs">{selectedEndCustomer.zip} {selectedEndCustomer.city}</p>
+          </div>
+        )}
+
+        {/* Anmerkungen / Notizfeld (Links) */}
+        <div className="space-y-2 pt-2">
+          <label htmlFor="order-notes" className="block text-sm font-bold text-white">
+            Anmerkungen / Hinweise (optional)
+          </label>
+          <textarea
+            id="order-notes"
+            rows={4}
+            value={orderNotes}
+            onChange={e => setOrderNotes(e.target.value)}
+            placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
+            className="w-full p-4 rounded-xl bg-slate-900/90 border border-slate-800 text-sm text-white placeholder-slate-500 focus:border-sky-400 focus:outline-none transition-colors duration-200 resize-none shadow-inner"
+          />
+        </div>
+
+        <p className="text-xs text-slate-500 italic">
+          Mit dem Klick auf „{initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'}“ akzeptieren Sie unsere AGB und die{' '}
+          <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
+            Datenschutzerklärung
+          </a>.
+        </p>
+
+        {/* Aktions-Buttons Links */}
+        <div className="space-y-3 pt-2">
+          <Button
+            className="w-full h-14 text-lg font-bold bg-primary hover:bg-primary/90 shadow-[0_0_20px_rgba(59,130,246,0.3)] rounded-xl"
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              initialOrder ? (
+                <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird aktualisiert...</>
+              ) : (
+                <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird versendet...</>
+              )
+            ) : (
+              initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'
+            )}
+          </Button>
+          <Button variant="ghost" className="w-full text-slate-400 hover:text-white" onClick={prevStep}>
+            Noch etwas ändern
+          </Button>
+        </div>
+      </div>
+
+      {/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */}
+      <div className="lg:col-span-7">
+        <Card className="glass-dark border-primary/30 shadow-primary/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col max-h-[calc(100vh-6rem)]">
+          <CardHeader className="shrink-0 border-b border-white/10 pb-4">
+            <CardTitle className="text-xl text-white flex items-center justify-between">
+              <span>Zusammenfassung der Positionen</span>
+              <span className="text-xs font-normal text-sky-400 bg-sky-500/10 px-3 py-1 rounded-full border border-sky-500/20">
+                {finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
+              </span>
+            </CardTitle>
           </CardHeader>
-      <CardContent className="space-y-6 text-left">
-        <div className="p-4 rounded-lg bg-white/5 space-y-6">
+
+          {/* Scrollbarer Content der Aufschlüsselung */}
+          <CardContent className="space-y-6 text-left flex-1 overflow-y-auto pt-6 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent pr-2">
+            <div className="p-4 rounded-xl bg-white/5 space-y-6">
               {finalItemsToShow.map((item, itemIdx) => (
                 <div key={itemIdx} className="space-y-3 border-b border-white/10 pb-4 last:border-0 last:pb-0">
-              <div className="flex justify-between items-center bg-white/5 p-2 rounded">
+                  <div className="flex justify-between items-center bg-white/5 p-2.5 rounded-lg border border-white/5">
                     <span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
-                <span className="text-xs text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
+                    <span className="text-xs text-sky-400 font-semibold uppercase px-2 py-0.5 rounded bg-sky-500/10 border border-sky-500/20">
+                      {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                    </span>
                   </div>
 
                   {visibleCategories.map(cat => {
@@ -102,213 +185,113 @@ export function StepSummary({
                     const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
 
                     return (
-                  <div key={cat.id} className="space-y-1 pl-2">
-                    <div className="text-slate-400 font-semibold text-xs flex items-center gap-1">
-                      <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary" />
-                      <span>{cat.name}</span>
-                    </div>
+                      <div key={cat.id} className="text-sm space-y-1.5 pl-2">
+                        <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">{cat.name}:</span>
                         {sortedProds.map((prod, idx) => {
                           const isFree = idx < freeLimit
-                      const actualPrice = isFree ? 0 : prod.base_price
-                      const catTotal =
-                        Number(actualPrice) +
-                        (sel?.moduleIds?.reduce((acc: number, mId: string) => {
-                          const mod = prod.modules?.find(m => m.id === mId)
-                          const qty = item.moduleQuantities[mId] || 1
-                          return acc + (Number(mod?.price ?? 0) * qty)
-                        }, 0) || 0)
+                          const isAbo = item.billingInterval === 'monthly'
+                          const displayPrice = isFree ? 0 : (isAbo ? (prod.monthly_price ?? prod.base_price) : prod.base_price)
+                          return (
+                            <div key={prod.id} className="flex justify-between text-slate-200">
+                              <span className="flex items-center gap-1.5">
+                                <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
+                                {prod.name}
+                                {isFree && <span className="text-[10px] bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded border border-green-500/30">Inklusive</span>}
+                              </span>
+                              <span className="font-mono text-xs">
+                                {isFree ? '0,00 €' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(displayPrice)}
+                              </span>
+                            </div>
+                          )
+                        })}
+
+                        {/* Selected Modules */}
+                        {sel?.moduleIds && sel.moduleIds.length > 0 && (
+                          <div className="pl-4 space-y-1 pt-1">
+                            {sel.moduleIds.map((mId: string) => {
+                              let modObj: any = null
+                              products.forEach(p => {
+                                const found = p.modules?.find(m => m.id === mId)
+                                if (found) modObj = found
+                              })
+                              if (!modObj) return null
+
+                              const isAbo = item.billingInterval === 'monthly'
+                              const qty = item.moduleQuantities?.[mId] || 1
+                              const unitPrice = isAbo ? (modObj.monthly_price ?? modObj.price) : modObj.price
+                              const totalPrice = unitPrice * qty
 
                               return (
-                        <div key={prod.id} className="pl-3">
-                          <div className="flex justify-between font-semibold text-sm text-white">
-                            <span>
-                              {prod.name} {isFree && <span className="text-[10px] text-green-400 font-semibold">(Frei)</span>}
-                            </span>
-                            <span>
-                              {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(catTotal)}
+                                <div key={mId} className="flex justify-between text-slate-400 text-xs">
+                                  <span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span>
+                                  <span className="font-mono">
+                                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
                                   </span>
                                 </div>
-                          {sel?.moduleIds && sel.moduleIds.length > 0 && (
-                            <p className="text-xs text-slate-400 mt-0.5">
-                              Module: {sel.moduleIds
-                                .map((id: string) => {
-                                  const mod = prod.modules?.find(m => m.id === id)
-                                  const qty = item.moduleQuantities[id] || 1
-                                  return mod ? `${mod.name}${mod.has_quantity ? ` (x${qty})` : ''}` : ''
-                                })
-                                .filter(Boolean)
-                                .join(', ')}
-                            </p>
+                              )
+                            })}
+                          </div>
                         )}
                       </div>
                     )
                   })}
                 </div>
-                )
-              })}
-            </div>
               ))}
-          {linkedFeeProducts && linkedFeeProducts.length > 0 && (
-            <div className="space-y-3 border-b border-white/10 pb-4 last:border-0 last:pb-0">
-              <div className="flex justify-between items-center bg-white/5 p-2 rounded">
-                <span className="text-white font-bold text-sm">Backoffice</span>
-              </div>
-              {linkedFeeProducts.map(p => (
-                <div key={p.id} className="pl-2 space-y-1">
-                  <div className="flex justify-between font-semibold text-sm text-white pl-3">
-                    <span>{p.name}</span>
-                    <span>
-                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(p.base_price)}
-                      {' '}<span className="text-slate-400 text-[10px] font-normal">{p.billing_interval === 'monthly' ? '/ mtl.' : 'einmalig'}</span>
-                    </span>
-                  </div>
+
+              {/* Gebühren & Zusatz-Positionen */}
+              {linkedFeeProducts.length > 0 && (
+                <div className="border-t border-white/10 pt-3 space-y-2">
+                  <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">Service & Gebühren:</span>
+                  {linkedFeeProducts.map(fp => (
+                    <div key={fp.id} className="flex justify-between text-xs text-slate-300">
+                      <span>{fp.name}</span>
+                      <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span>
                     </div>
                   ))}
                 </div>
               )}
-          <Separator className="bg-white/10" />
-          <div className="text-sm text-slate-300 space-y-1">
-            {selectedEndCustomer ? (
-              <>
-                <p className="font-semibold text-white flex items-center gap-2">
-                  <Building2 className="w-3.5 h-3.5 text-primary" />
-                  {selectedEndCustomer.company_name}
-                </p>
-                <p>{[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}</p>
-                <p>{[selectedEndCustomer.street, selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(', ')}</p>
-                <p className="text-xs text-slate-500 mt-1">Endkunde Ihres Partners</p>
-                {lastLicenseDate && (
-                  <p className="text-xs text-slate-400 flex items-center gap-1 mt-1 font-mono">
-                    <Calendar className="w-3.5 h-3.5 text-primary" />
-                    Letzte Lizenz vom: {new Date(lastLicenseDate).toLocaleDateString('de-DE')}
-                  </p>
-                )}
-              </>
-            ) : (
-              <>
-                <p className="font-semibold text-white">{customerData.company_name}</p>
-                <p>{customerData.first_name} {customerData.last_name}</p>
-                <p>{customerData.address}, {customerData.zip_code} {customerData.city}</p>
-              </>
-            )}
-          </div>
-        </div>
-        {oneTimeTotal > 0 && monthlyTotal > 0 ? (
-          <div className="space-y-4 border-t border-white/10 pt-4">
-            <div className="space-y-1">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmaliger Betrag:</p>
-              <div className="flex justify-between text-sm text-slate-400">
-                <span>Netto:</span>
-                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
-              </div>
-              <div className="flex justify-between text-sm text-slate-400">
-                <span>zzgl. 19% MwSt.:</span>
-                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
-              </div>
-              <div className="flex justify-between text-base font-bold text-white">
-                <span>Brutto:</span>
-                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
-              </div>
-            </div>
-            {updatePriceModifier.label && (
-              <div className="text-sm text-green-400 font-semibold bg-green-500/10 p-2 rounded border border-green-500/20 my-1">
-                {updatePriceModifier.label}
-              </div>
-            )}
-            <div className="space-y-1 pt-2 border-t border-white/10">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlicher Betrag:</p>
-              <div className="flex justify-between text-sm text-slate-400">
-                <span>Netto:</span>
-                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
-              </div>
-              <div className="flex justify-between text-sm text-slate-400">
-                <span>zzgl. 19% MwSt.:</span>
-                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
-              </div>
-              <div className="flex justify-between text-base font-bold text-white">
-                <span>Brutto:</span>
-                <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
-              </div>
-            </div>
-          </div>
-        ) : oneTimeTotal > 0 ? (
-          <div className="space-y-1 border-t border-white/10 pt-4">
-            <div className="flex justify-between text-sm text-slate-400">
-              <span>Netto-Gesamtbetrag:</span>
-              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
-            </div>
-            <div className="flex justify-between text-sm text-slate-400">
-              <span>zzgl. 19% MwSt.:</span>
-              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
-            </div>
-            {updatePriceModifier.label && (
-              <div className="text-sm text-green-400 font-semibold bg-green-500/10 p-2 rounded border border-green-500/20 my-1">
-                {updatePriceModifier.label}
-              </div>
-            )}
-            <div className="flex justify-between text-xl font-bold text-blue-500 dark:text-blue-400 pt-1 border-t border-white/5">
-              <span>Gesamtbetrag (brutto):</span>
-              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-1 border-t border-white/10 pt-4">
-            <div className="flex justify-between text-sm text-slate-400">
-              <span>Netto-Gesamtbetrag:</span>
-              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
-            </div>
-            <div className="flex justify-between text-sm text-slate-400">
-              <span>zzgl. 19% MwSt.:</span>
-              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
-            </div>
-            <div className="flex justify-between text-xl font-bold text-blue-500 dark:text-blue-400 pt-1 border-t border-white/5">
-              <span>Gesamtbetrag (brutto):</span>
-              <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
-            </div>
-          </div>
-        )}
-        {/* Anmerkungen / Notizfeld */}
-        <div className="space-y-2 border-t border-white/10 pt-4">
-          <label htmlFor="order-notes" className="block text-sm font-semibold text-white flex items-center gap-2">
-            <span>Anmerkungen / Hinweise zur Bestellung (optional)</span>
-          </label>
-          <textarea
-            id="order-notes"
-            rows={3}
-            value={orderNotes}
-            onChange={e => setOrderNotes(e.target.value)}
-            placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
-            className="w-full p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm text-white placeholder-slate-500 focus:border-sky-400 focus:outline-none transition-colors duration-200 resize-none"
-          />
             </div>
 
-        <p className="text-xs text-slate-500 italic">
-          Mit dem Klick auf „Kostenpflichtig bestellen" akzeptieren Sie unsere AGB und die{' '}
-          <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
-            Datenschutzerklärung
-          </a>.
-        </p>
-      </CardContent>
-      <CardFooter className="flex flex-col gap-4">
-        <Button
-          className="w-full h-14 text-xl font-bold bg-primary hover:bg-primary/90"
-          onClick={handleSubmit}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            initialOrder ? (
-              <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird aktualisiert...</>
-            ) : (
-              <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird versendet...</>
-            )
-          ) : (
-            initialOrder ? 'Anfrage aktualisieren' : 'Anfrage versenden'
+            {/* Summen-Berechnung */}
+            {oneTimeTotal > 0 ? (
+              <div className="space-y-1.5 border-t border-white/10 pt-4">
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>Netto-Gesamtbetrag:</span>
+                  <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
+                </div>
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>zzgl. 19% MwSt.:</span>
+                  <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
+                </div>
+                {updatePriceModifier.label && (
+                  <div className="text-sm text-green-400 font-semibold bg-green-500/10 p-2 rounded border border-green-500/20 my-1">
+                    {updatePriceModifier.label}
+                  </div>
                 )}
-        </Button>
-        <Button variant="ghost" className="w-full text-white" onClick={prevStep}>
-          Noch etwas ändern
-        </Button>
-      </CardFooter>
+                <div className="flex justify-between text-lg font-bold text-sky-400 pt-2 border-t border-white/5">
+                  <span>Gesamtbetrag (brutto):</span>
+                  <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-1.5 border-t border-white/10 pt-4">
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>Netto-Gesamtbetrag:</span>
+                  <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
+                </div>
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>zzgl. 19% MwSt.:</span>
+                  <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
+                </div>
+                <div className="flex justify-between text-lg font-bold text-sky-400 pt-2 border-t border-white/5">
+                  <span>Gesamtbetrag (brutto):</span>
+                  <span className="font-mono">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
+                </div>
+              </div>
+            )}
+          </CardContent>
         </Card>
+      </div>
+    </div>
   )
 }