style(wizard): refine step 3 UI styling and micro interactions
All checks were successful
Staging Build / build (push) Successful in 3m0s
All checks were successful
Staging Build / build (push) Successful in 3m0s
This commit is contained in:
DanielS
@@ -229,12 +229,12 @@ export function StepSoftware({
|
||||
|
||||
{/* Modules */}
|
||||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||||
<div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||
<p className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
<div className="mt-6 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4 shadow-lg">
|
||||
<p className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
Zusatzmodule für {selectedProduct.name}
|
||||
</p>
|
||||
<div className="space-y-2.5">
|
||||
<div className="space-y-3">
|
||||
{selectedProduct.modules.map(module => {
|
||||
const isExistingLicense = existingModuleIds.includes(module.id)
|
||||
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
|
||||
@@ -242,14 +242,14 @@ export function StepSoftware({
|
||||
return (
|
||||
<div
|
||||
key={module.id}
|
||||
className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
|
||||
className={`flex flex-col p-4 rounded-xl border transition-all duration-300 ${
|
||||
isExistingLicense
|
||||
? 'border-primary/20 bg-primary/5 opacity-75'
|
||||
? 'border-slate-800 bg-slate-900/30 opacity-60 cursor-not-allowed'
|
||||
: disabled
|
||||
? 'border-white/5 bg-white/5 opacity-40'
|
||||
? 'border-slate-800/40 bg-slate-900/20 opacity-40 cursor-not-allowed'
|
||||
: checked
|
||||
? 'border-primary/30 bg-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
? 'border-primary/40 bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
|
||||
: 'border-slate-800 bg-slate-900/50 hover:bg-slate-900 hover:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
@@ -258,19 +258,19 @@ export function StepSoftware({
|
||||
checked={checked}
|
||||
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
|
||||
disabled={disabled}
|
||||
className="rounded border-white/20 data-[state=checked]:bg-primary"
|
||||
className="rounded border-slate-700 data-[state=checked]:bg-primary data-[state=checked]:border-primary transition-colors"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Label
|
||||
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
||||
className={`font-semibold text-sm flex justify-between text-white ${
|
||||
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
isExistingLicense ? 'cursor-not-allowed' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="flex items-center gap-2 flex-wrap">
|
||||
{module.name}
|
||||
{isExistingLicense && (
|
||||
<span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
|
||||
<span className="inline-flex items-center gap-1 text-[9px] px-2 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700 font-semibold uppercase tracking-wider">
|
||||
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -93,14 +93,21 @@ export function SummarySidebar({
|
||||
|
||||
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[] = []
|
||||
@@ -165,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>
|
||||
@@ -176,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>
|
||||
@@ -191,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-sky-400">
|
||||
<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-sky-400">
|
||||
<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>
|
||||
@@ -238,14 +245,14 @@ 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>
|
||||
))}
|
||||
@@ -253,85 +260,80 @@ export function SummarySidebar({
|
||||
|
||||
{/* Kassen-Liste unten (selectable) */}
|
||||
{basketItems.length > 0 && (
|
||||
<div className="shrink-0 pt-3 pb-2 mb-4 border-t border-white/10 space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
|
||||
<div className="flex flex-wrap gap-2 max-h-36 overflow-y-auto pr-1 pb-1 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) => (
|
||||
<button
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
|
||||
className={`flex items-center gap-2 text-xs px-3 py-2.5 rounded-lg border transition-all duration-200 text-left group ${
|
||||
className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
|
||||
selectedBasketIdx === idx
|
||||
? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
|
||||
? 'border-sky-500/50 bg-sky-500/10 text-white shadow-[0_0_12px_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'
|
||||
? 'border-blue-500/40 bg-blue-500/10 text-white'
|
||||
: 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-slate-900'
|
||||
}`}
|
||||
>
|
||||
<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 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>
|
||||
</div>
|
||||
{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-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 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)
|
||||
if (selectedBasketIdx === idx) setSelectedBasketIdx(null)
|
||||
}}
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Selected basket item actions */}
|
||||
{selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
|
||||
<div className="flex items-center gap-2 pt-2 border-t border-white/5">
|
||||
<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>
|
||||
<CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-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-sky-500/40 bg-sky-500/10 text-sky-200 hover:bg-sky-500/20 hover:text-white gap-2 h-9 text-xs font-semibold shadow-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={!hasActiveSelection && isNextStepDisabled}
|
||||
>
|
||||
<UserPlus className="w-3.5 h-3.5" /> {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>
|
||||
<Button
|
||||
className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400"
|
||||
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-1 w-4 h-4" />
|
||||
Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" className="w-full text-slate-400 hover:text-white h-8 text-xs" 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>
|
||||
|
||||
Reference in New Issue
Block a user