style(wizard): move categories list under left sidebar status stepper
All checks were successful
Staging Build / build (push) Successful in 2m52s
All checks were successful
Staging Build / build (push) Successful in 2m52s
This commit is contained in:
DanielS
@@ -845,8 +845,18 @@ export function OrderWizard({
|
||||
|
||||
return (
|
||||
<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-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 for ALL steps */}
|
||||
{/* 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">
|
||||
@@ -857,21 +867,62 @@ export function OrderWizard({
|
||||
</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" />
|
||||
)}
|
||||
|
||||
<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">
|
||||
{/* Dynamic Header */}
|
||||
{step !== 3 && (
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-extrabold tracking-tight mb-2 text-gradient">
|
||||
Konfigurieren Sie Ihre Lösung
|
||||
</h1>
|
||||
<p className="text-slate-400 text-base">
|
||||
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{/* Step 1: Customer */}
|
||||
@@ -932,74 +983,12 @@ export function OrderWizard({
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="h-[calc(100vh-100px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
|
||||
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-4 h-full items-stretch">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
|
||||
|
||||
{/* LEFT inside step 3: Categories Sidebar Menu */}
|
||||
<div className="lg:col-span-2 flex flex-col justify-start p-3 pr-2 space-y-4 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
||||
<div>
|
||||
<h1 className="text-xl font-extrabold tracking-tight mb-1 text-gradient">
|
||||
Kategorien & Optionen
|
||||
</h1>
|
||||
<p className="text-slate-400 text-xs">
|
||||
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{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.2)]'
|
||||
: 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{/* 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-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10 shadow-sm">
|
||||
Ausgewählt
|
||||
</span>
|
||||
) : isRequired ? (
|
||||
<span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10 shadow-sm">
|
||||
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-slate-800 p-2 px-3">
|
||||
{/* 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 && (
|
||||
|
||||
Reference in New Issue
Block a user