Compare commits
4 Commits
2f2cba1687
...
9593cbdb79
| Author | SHA1 | Date | |
|---|---|---|---|
|
9593cbdb79 | ||
|
|
0404a1dd83 | ||
|
|
6eeb56d62a | ||
|
|
17e5b27dfc |
@@ -854,11 +854,11 @@ export function OrderWizard({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 pt-2 pb-6">
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 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 className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-5 space-y-5 sticky top-2">
|
||||
<div>
|
||||
<h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
|
||||
Fortschritt
|
||||
|
||||
@@ -145,7 +145,7 @@ export function StepCustomer({
|
||||
|
||||
return (
|
||||
<Card className="glass-dark border-white/10">
|
||||
<CardHeader>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-2xl flex items-center gap-2 text-white">
|
||||
<User className="w-6 h-6 text-primary" />
|
||||
Für wen bestellen Sie?
|
||||
|
||||
@@ -86,38 +86,7 @@ export function StepSummary({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vertikaler Status-Stepper */}
|
||||
<div className="space-y-4 py-4 border-t border-b border-white/5">
|
||||
<p className="text-[10px] font-bold uppercase tracking-wider text-slate-500">
|
||||
Schritt 4 von 4 — Zusammenfassung & Abschluss
|
||||
</p>
|
||||
<div className="flex flex-col gap-3 pl-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||
<Icons.Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-sm text-slate-400 font-medium">Kunde</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||
<Icons.Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-sm text-slate-400 font-medium">Modell</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
|
||||
<Icons.Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-sm text-slate-400 font-medium">Software</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
|
||||
4
|
||||
</div>
|
||||
<span className="text-sm text-white font-bold">Abschluss</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Kunden-Info Card */}
|
||||
|
||||
@@ -258,61 +258,77 @@ export function SummarySidebar({
|
||||
))}
|
||||
</div> {/* Warenkorb List (Scrollable) */}
|
||||
{basketItems.length > 0 && (
|
||||
<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="shrink-0 pt-2 pb-0 border-t border-white/10 space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs text-slate-400">
|
||||
<span className="font-semibold uppercase tracking-wider">Kassen ({basketItems.length}):</span>
|
||||
<span className="text-[10px] text-slate-500">Zum Bearbeiten anklicken</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 max-h-36 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
||||
{basketItems.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left ${
|
||||
idx === editingIdx
|
||||
? 'border-primary/50 bg-primary/10 text-white shadow-[0_0_12px_rgba(59,130,246,0.15)]'
|
||||
: 'border-white/10 bg-slate-900/60 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'}
|
||||
</span>
|
||||
{basketItems.map((item, idx) => {
|
||||
const isEditing = idx === editingIdx
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => editBasketItem(idx)}
|
||||
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left cursor-pointer group ${
|
||||
isEditing
|
||||
? 'border-primary bg-primary/15 text-white shadow-[0_0_12px_rgba(59,130,246,0.25)]'
|
||||
: 'border-white/10 bg-slate-900/60 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'}
|
||||
</span>
|
||||
{isEditing && (
|
||||
<span className="text-[9px] px-1.5 py-0.2 rounded bg-primary text-slate-950 font-extrabold uppercase">
|
||||
Aktiv
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{item.licenseNumber && (
|
||||
<p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
editBasketItem(idx)
|
||||
setIsOpen(true)
|
||||
}}
|
||||
title="Name / Lizenz bearbeiten"
|
||||
>
|
||||
<Pencil className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
deleteBasketItem(idx)
|
||||
}}
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{item.licenseNumber && (
|
||||
<p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
|
||||
onClick={() => {
|
||||
editBasketItem(idx)
|
||||
setIsOpen(true)
|
||||
}}
|
||||
title="Bearbeiten"
|
||||
>
|
||||
<Pencil className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
|
||||
onClick={() => deleteBasketItem(idx)}
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
|
||||
<CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-1.5 border-t border-white/10 bg-slate-950/80">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
Reference in New Issue
Block a user