Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: resolve wizard conflicts with layout updates and clean fixes
Some checks failed
Staging Build / build (push) Failing after 32s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-11 22:16:35 +02:00
parent b72e16706e f500a63e97
commit f40268992d
2 changed files with 227 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
shop/components/order-wizard.tsx
View File

@@ -94,7 +94,6 @@ export function OrderWizard({
const router = useRouter()
// Upgrade-Mode: starte direkt bei Schritt 3 (Software)
const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1))
const [direction, setDirection] = useState(1)
const [isSubmitting, setIsSubmitting] = useState(false)
const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(
initialOrder?.company_id ?? (isAdmin ? 'all' : null)
@@ -544,12 +543,10 @@ export function OrderWizard({
addToBasket()
}
}
setDirection(1)
setStep(s => s + 1)
}
const prevStep = () => {
setDirection(-1)
setStep(s => s - 1)
}
@@ -847,34 +844,94 @@ export function OrderWizard({
}
return (
<div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}>
{/* Dynamic Header */}
{step !== 3 && (
<div className="text-center mb-12">
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-white">
<div className="max-w-7xl mx-auto px-4 py-6">
{/* Global Main Header over all columns */}
<div className="mb-6">
<h1 className="text-3xl font-extrabold tracking-tight mb-1 text-gradient">
Konfigurieren Sie Ihre Lösung
</h1>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
<p className="text-slate-400 text-sm">
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
{/* Left Side Status Stepper & Categories for ALL steps */}
<div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-6 space-y-6 sticky top-6">
<div>
<h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
Fortschritt
</h2>
<p className="text-lg font-extrabold text-white">
Bestell-Wizard
</p>
</div>
<ProgressStepper step={step} basketItemsCount={basketItems.length} orientation="vertical" />
{/* Step 3 Categories inside left sidebar */}
{step === 3 && (
<div className="pt-4 border-t border-white/10 space-y-3">
<h3 className="text-xs font-bold uppercase tracking-wider text-slate-400">
Kategorien
</h3>
<div className="flex flex-col gap-2">
{visibleCategories.map((cat) => {
const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
const isRequired = cat.is_required
const isActive = activeCategoryId === cat.id
return (
<button
key={cat.id}
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
: 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
}`}
>
{isActive && (
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
)}
{/* Global Stepper for Steps 1, 2, 4 */}
{step !== 3 && (
<div className="pt-12 pb-6">
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
<div className={`p-1.5 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'}`}>
<CategoryIcon icon={cat.icon} className="w-3.5 h-3.5" />
</div>
<div className="flex-1 min-w-0">
<p className={`text-xs font-semibold truncate ${isActive ? 'text-white' : 'text-slate-300 group-hover:text-white'}`}>
{cat.name}
</p>
</div>
{hasSelection ? (
<span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
✓
</span>
) : isRequired ? (
<span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10">
!
</span>
) : null}
</button>
)
})}
</div>
</div>
)}
</div>
{/* Right Main Content Column */}
<div className="lg:col-span-9 space-y-6">
<AnimatePresence mode="wait">
{/* Step 1: Customer */}
{step === 1 && (
<motion.div
key="step1"
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="space-y-6"
>
<StepCustomer
@@ -903,9 +960,9 @@ export function OrderWizard({
{step === 2 && (
<motion.div
key="step2"
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="space-y-6"
>
<StepBilling
@@ -920,118 +977,19 @@ export function OrderWizard({
/>
</motion.div>
)}
{/* Step 3: Software Selector */}
{step === 3 && (
<motion.div
key="step3"
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="h-[calc(100vh-140px)] overflow-hidden"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-6 h-full items-stretch">
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
{/* LEFT: Categories Sidebar Menu */}
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
<div>
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-white">
Konfigurieren Sie Ihre Lösung
</h1>
<p className="text-slate-400 text-sm">
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
</p>
</div>
{/* Left Sidebar Status Stepper (matching ProgressStepper sky-blue design) */}
<div className="space-y-2 py-4 border-t border-b border-white/5">
<p className="text-xs font-bold uppercase tracking-wider text-slate-500">
Status
</p>
<div className="flex flex-row flex-wrap items-center gap-x-3 gap-y-2 pl-1">
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
<Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
</div>
<span className="text-xs text-sky-300 font-semibold">Kunde</span>
</div>
<div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
<Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
</div>
<span className="text-xs text-sky-300 font-semibold">Modell</span>
</div>
<div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-slate-950 border-2 border-sky-400 text-sky-400 flex items-center justify-center text-xs font-bold shadow-[0_0_15px_rgba(56,189,248,0.5)]">
3
</div>
<span className="text-xs text-sky-300 font-bold">Software</span>
</div>
<div className="w-6 h-[2px] bg-slate-800 rounded-full" />
<div className="flex items-center gap-1.5">
<div className="w-6 h-6 rounded-full bg-slate-900 border-2 border-slate-800 text-slate-500 flex items-center justify-center text-xs">
4
</div>
<span className="text-xs text-slate-500 font-medium">Abschluss</span>
</div>
</div>
</div>
<div className="flex flex-col gap-2">
{visibleCategories.map((cat) => {
const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
const isRequired = cat.is_required
const isActive = activeCategoryId === cat.id
return (
<button
key={cat.id}
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
}`}
>
{/* Left glow line for active category */}
{isActive && (
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
)}
<div className={`p-2 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
}`}>
<CategoryIcon icon={cat.icon} className="w-4 h-4" />
</div>
<div className="flex-1 min-w-0">
<p className={`text-sm font-semibold truncate ${isActive ? 'text-white' : 'text-slate-300 group-hover:text-white'}`}>
{cat.name}
</p>
<p className="text-[11px] text-slate-500 truncate mt-0.5">
{cat.description || 'Optionen ansehen'}
</p>
</div>
{/* Status indicators */}
{hasSelection ? (
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-green-500/30 text-green-400 bg-green-500/10">
Ausgewählt
</span>
) : isRequired ? (
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-red-500/30 text-red-400 bg-red-500/10">
Erforderlich
</span>
) : null}
</button>
)
})}
</div>
</div>
{/* CENTER: Scrollable Category Selection */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-white/5 px-4">
<div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
{/* LEFT: Scrollable Category Selection */}
<div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-2 px-3">
<div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{/* Upgrade-Modus Hinweis-Banner */}
{upgradeMode && lockedDeviceId && (
<div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
@@ -1062,9 +1020,8 @@ export function OrderWizard({
</div>
</div>
{/* RIGHT: Stepper Header + Summary sidebar */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden pl-4">
{/* RIGHT: Summary sidebar */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2">
<div className="flex-1 overflow-hidden">
<SummarySidebar
visibleCategories={visibleCategories}
@@ -1111,9 +1068,9 @@ export function OrderWizard({
{step === 4 && (
<motion.div
key="step4"
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
className="h-[calc(100vh-140px)] overflow-hidden w-full"
>
<StepSummary
@@ -1147,5 +1104,7 @@ export function OrderWizard({
{/* Toast Notification Container */}
<ToastNotification toast={toast} onClose={() => setToast(null)} />
</div>
</div>
</div>
)
}

136
shop/components/wizard/summary-sidebar.tsx
View File

@@ -81,19 +81,33 @@ export function SummarySidebar({
prevStep,
}: SummarySidebarProps) {
const [isOpen, setIsOpen] = React.useState(false)
const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
// When editing a basket item via pencil, open the modal for that item
const handleEditBasketItem = (idx: number) => {
editBasketItem(idx)
setIsOpen(true)
}
const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
return (
<div className="h-full flex flex-col">
<Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
<CardHeader className="shrink-0 pb-3">
<CardTitle className="text-white text-lg">Zusammenfassung</CardTitle>
<Card className="bg-slate-900/80 backdrop-blur-xl border border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full">
<CardHeader className="shrink-0 pb-3 border-b border-white/5">
<CardTitle className="text-white text-base font-bold flex items-center justify-between">
<span>Zusammenfassung</span>
{basketItems.length > 0 && (
<span className="text-xs bg-sky-500/20 text-sky-300 border border-sky-500/30 px-2 py-0.5 rounded-full font-semibold">
{basketItems.length} {basketItems.length === 1 ? 'Kasse' : 'Kassen'}
</span>
)}
</CardTitle>
</CardHeader>
<CardContent className="p-5 pt-0 flex-1 flex flex-col overflow-hidden gap-3">
<CardContent className="p-4 pt-3 flex-1 flex flex-col overflow-hidden gap-3">
{/* Active Selections & Price - scrollable */}
<div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
<div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{visibleCategories.map(cat => {
const sel = selections[cat.id]
const selectedProds: Product[] = []
@@ -158,9 +172,9 @@ export function SummarySidebar({
{/* Pricing block */}
<Separator className="bg-white/10" />
{oneTimeTotal > 0 && monthlyTotal > 0 ? (
<div className="space-y-3">
<div className="space-y-3 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
<div className="space-y-1">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Einmalig:</p>
<div className="flex justify-between text-xs text-slate-400">
<span>Netto:</span>
<span className="tabular-nums">{fmt(oneTimeNet)}</span>
@@ -169,13 +183,13 @@ export function SummarySidebar({
<span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(oneTimeTax)}</span>
</div>
<div className="flex justify-between text-sm font-bold text-white">
<span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(oneTimeGross)}</span>
<div className="flex justify-between text-sm font-extrabold text-white pt-1">
<span>Brutto:</span>
<span className="tabular-nums text-sky-400">{fmt(oneTimeGross)}</span>
</div>
</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">Monatlich:</p>
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Monatlich:</p>
<div className="flex justify-between text-xs text-slate-400">
<span>Netto:</span>
<span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
@@ -184,39 +198,39 @@ export function SummarySidebar({
<span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
</div>
<div className="flex justify-between text-sm font-bold text-white">
<span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
<div className="flex justify-between text-sm font-extrabold text-white pt-1">
<span>Brutto:</span>
<span className="tabular-nums text-sky-400">{fmt(monthlyGross)} / mtl.</span>
</div>
</div>
</div>
) : oneTimeTotal > 0 ? (
<div className="space-y-1">
<div className="space-y-1 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
<div className="flex justify-between text-xs text-slate-400">
<span>Netto-Gesamtbetrag:</span>
<span>Netto:</span>
<span className="tabular-nums">{fmt(oneTimeNet)}</span>
</div>
<div className="flex justify-between text-xs text-slate-400">
<span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(oneTimeTax)}</span>
</div>
<div className="flex justify-between text-base font-bold text-primary">
<span>Gesamtbetrag (brutto):</span>
<div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
<span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(oneTimeGross)}</span>
</div>
</div>
) : (
<div className="space-y-1">
<div className="space-y-1 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
<div className="flex justify-between text-xs text-slate-400">
<span>Netto-Gesamtbetrag:</span>
<span>Netto:</span>
<span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
</div>
<div className="flex justify-between text-xs text-slate-400">
<span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
</div>
<div className="flex justify-between text-base font-bold text-primary">
<span>Gesamtbetrag (brutto):</span>
<div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
<span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
</div>
</div>
@@ -231,56 +245,69 @@ export function SummarySidebar({
</div>
)}
{!allCategoriesFilled && (
<p className="text-xs text-destructive flex items-center gap-1">
<AlertCircle className="w-3 h-3" />
<p className="text-xs text-amber-400 flex items-center gap-1 bg-amber-500/10 p-2 rounded-lg border border-amber-500/20">
<AlertCircle className="w-3.5 h-3.5 shrink-0 text-amber-400" />
Bitte aus jeder Pflichtkategorie einen Artikel wählen.
</p>
)}
{productValidationErrors.map((err, errIdx) => (
<p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
<AlertCircle className="w-3 h-3 text-destructive" />
<p key={errIdx} className="text-xs text-red-400 flex items-center gap-1 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
<AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
{err}
</p>
))}
</div>
{/* Warenkorb List (Scrollable) */}
{/* Kassen-Liste unten (selectable) */}
{basketItems.length > 0 && (
<div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({basketItems.length}):</p>
<div className="flex-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
<div className="shrink-0 pt-3 pb-2 border-t border-white/10 space-y-2">
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
<div className="flex flex-col gap-2 max-h-32 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{basketItems.map((item, idx) => (
<div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-primary/50 shadow-[0_0_10px_rgba(var(--oklch-primary),0.3)]' : 'border-white/10'}`}>
<div className="flex flex-col">
<span className="text-white font-medium">{item.deviceName}</span>
<span className="text-[10px] text-slate-400 capitalize">
<div
key={idx}
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
selectedBasketIdx === idx
? 'border-sky-500/50 bg-sky-500/10 text-white shadow-[0_0_12px_rgba(56,189,248,0.15)]'
: idx === editingIdx
? 'border-blue-500/40 bg-blue-500/10 text-white'
: 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-slate-900'
}`}
>
<div className="flex-1 min-w-0 pr-2">
<div className="flex items-center gap-1.5">
<span className="font-bold text-xs text-white truncate">{item.deviceName}</span>
<span className="text-[9px] px-1.5 py-0.2 rounded border border-white/10 text-slate-400 bg-white/5 uppercase">
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
{item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
</span>
</div>
<div className="flex items-center gap-1.5">
{item.licenseNumber && (
<p className="text-[10px] text-slate-400 truncate mt-0.5">{item.licenseNumber}</p>
)}
</div>
<div className="flex items-center gap-1 shrink-0">
<Button
type="button"
variant="ghost"
size="icon"
className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
onClick={() => {
editBasketItem(idx)
setIsOpen(true)
}}
title="Kasse bearbeiten"
className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
onClick={() => handleEditBasketItem(idx)}
title="Bearbeiten"
>
<Pencil className="w-3.5 h-3.5" />
<Pencil className="w-3 h-3" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
onClick={() => deleteBasketItem(idx)}
title="Kasse löschen"
className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
onClick={() => {
deleteBasketItem(idx)
if (selectedBasketIdx === idx) setSelectedBasketIdx(null)
}}
title="Löschen"
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className="w-3 h-3" />
</Button>
</div>
</div>
@@ -289,25 +316,24 @@ export function SummarySidebar({
</div>
)}
</CardContent>
<CardFooter className="flex flex-col gap-3 shrink-0">
<CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
<Button
type="button"
variant="outline"
className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
className="w-full border-dashed border-primary/50 text-primary hover:bg-primary/10 transition-all rounded-xl h-9 text-xs font-bold gap-1.5 shadow-sm"
onClick={() => setIsOpen(true)}
disabled={isNextStepDisabled}
disabled={!hasActiveSelection && isNextStepDisabled}
>
<UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
<UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse speichern' : '+ Weitere Kasse hinzufügen'}
</Button>
<Separator className="bg-white/10 my-1" />
<Button
className="w-full h-12 text-lg"
className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 via-sky-500 to-cyan-400 hover:opacity-90 shadow-[0_0_20px_rgba(56,189,248,0.3)] transition-all"
onClick={nextStep}
disabled={basketItems.length === 0 && isNextStepDisabled}
>
Weiter <ChevronRight className="ml-2 w-5 h-5" />
Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
</Button>
<Button variant="ghost" className="w-full text-white" onClick={prevStep}>
<Button variant="ghost" className="w-full text-slate-400 hover:text-white h-7 text-xs" onClick={prevStep}>
Zurück zum Abrechnungsmodell
</Button>
</CardFooter>