refactor(wizard): revert basket to direct edit/delete layout
This commit is contained in:
DanielS
@@ -81,13 +81,6 @@ 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)
|
||||
|
||||
@@ -207,7 +200,7 @@ export function SummarySidebar({
|
||||
<span>zzgl. 19% MwSt.:</span>
|
||||
<span className="tabular-nums">{fmt(oneTimeTax)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-base font-bold text-sky-400">
|
||||
<div className="flex justify-between text-base font-bold text-primary">
|
||||
<span>Gesamtbetrag (brutto):</span>
|
||||
<span className="tabular-nums">{fmt(oneTimeGross)}</span>
|
||||
</div>
|
||||
@@ -222,7 +215,7 @@ export function SummarySidebar({
|
||||
<span>zzgl. 19% MwSt.:</span>
|
||||
<span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-base font-bold text-sky-400">
|
||||
<div className="flex justify-between text-base font-bold text-primary">
|
||||
<span>Gesamtbetrag (brutto):</span>
|
||||
<span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
|
||||
</div>
|
||||
@@ -251,66 +244,48 @@ export function SummarySidebar({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Kassen-Liste unten (selectable) */}
|
||||
{/* Warenkorb List (Scrollable) */}
|
||||
{basketItems.length > 0 && (
|
||||
<div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
|
||||
<div className="flex flex-wrap gap-1.5 max-h-28 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
||||
<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">
|
||||
{basketItems.map((item, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
|
||||
className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
|
||||
selectedBasketIdx === idx
|
||||
? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
|
||||
: idx === editingIdx
|
||||
? 'bg-blue-500/10 border-blue-500/30 text-white'
|
||||
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="font-medium truncate max-w-[120px]">{item.deviceName}</span>
|
||||
{item.licenseNumber && (
|
||||
<span className="text-[10px] text-slate-500 truncate max-w-[80px]">{item.licenseNumber}</span>
|
||||
)}
|
||||
</button>
|
||||
<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">
|
||||
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
|
||||
{item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<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"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</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"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Selected basket item actions */}
|
||||
{selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-white font-medium truncate">{basketItems[selectedBasketIdx].deviceName}</p>
|
||||
<p className="text-[10px] text-slate-500 capitalize">
|
||||
{basketItems[selectedBasketIdx].billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
|
||||
{basketItems[selectedBasketIdx].licenseNumber ? ` · ${basketItems[selectedBasketIdx].licenseNumber}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-7 h-7 hover:bg-sky-500/20 text-sky-400 hover:text-sky-300"
|
||||
onClick={() => handleEditBasketItem(selectedBasketIdx)}
|
||||
title="Name / Lizenz bearbeiten"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-7 h-7 hover:bg-red-500/20 text-red-400 hover:text-red-300"
|
||||
onClick={() => {
|
||||
deleteBasketItem(selectedBasketIdx)
|
||||
setSelectedBasketIdx(null)
|
||||
}}
|
||||
title="Kasse löschen"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
@@ -318,7 +293,7 @@ export function SummarySidebar({
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full border-sky-500/30 text-white hover:bg-sky-500/10 gap-2 h-10 text-sm"
|
||||
className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
|
||||
onClick={() => setIsOpen(true)}
|
||||
disabled={isNextStepDisabled}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user