feat(wizard): move progress stepper to left sidebar
This commit is contained in:
DanielS
@@ -844,138 +844,110 @@ 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-gradient">
|
||||
Konfigurieren Sie Ihre Lösung
|
||||
</h1>
|
||||
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
|
||||
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
|
||||
</p>
|
||||
<div className="max-w-7xl mx-auto px-4 py-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
||||
{/* Left Side Status Stepper 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" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Global Stepper for Steps 1, 2, 4 */}
|
||||
{step !== 3 && (
|
||||
<div className="pt-12 pb-6">
|
||||
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
|
||||
</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 */}
|
||||
{step === 1 && (
|
||||
<motion.div
|
||||
key="step1"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<StepCustomer
|
||||
isAdmin={isAdmin}
|
||||
companies={companies}
|
||||
selectedCompanyId={selectedCompanyId}
|
||||
setSelectedCompanyId={setSelectedCompanyId}
|
||||
customerMode={customerMode}
|
||||
setCustomerMode={setCustomerMode}
|
||||
endCustomers={endCustomers}
|
||||
searchTerm={searchTerm}
|
||||
setSearchTerm={setSearchTerm}
|
||||
filteredEndCustomers={filteredEndCustomers}
|
||||
selectedEndCustomerId={selectedEndCustomerId}
|
||||
setSelectedEndCustomerId={setSelectedEndCustomerId}
|
||||
newCustomerForm={newCustomerForm}
|
||||
setNewCustomerForm={setNewCustomerForm}
|
||||
handleCreateCustomer={handleCreateCustomer}
|
||||
isCreatingCustomer={isCreatingCustomer}
|
||||
nextStep={nextStep}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<AnimatePresence mode="wait">
|
||||
{/* Step 1: Customer */}
|
||||
{step === 1 && (
|
||||
<motion.div
|
||||
key="step1"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<StepCustomer
|
||||
isAdmin={isAdmin}
|
||||
companies={companies}
|
||||
selectedCompanyId={selectedCompanyId}
|
||||
setSelectedCompanyId={setSelectedCompanyId}
|
||||
customerMode={customerMode}
|
||||
setCustomerMode={setCustomerMode}
|
||||
endCustomers={endCustomers}
|
||||
searchTerm={searchTerm}
|
||||
setSearchTerm={setSearchTerm}
|
||||
filteredEndCustomers={filteredEndCustomers}
|
||||
selectedEndCustomerId={selectedEndCustomerId}
|
||||
setSelectedEndCustomerId={setSelectedEndCustomerId}
|
||||
newCustomerForm={newCustomerForm}
|
||||
setNewCustomerForm={setNewCustomerForm}
|
||||
handleCreateCustomer={handleCreateCustomer}
|
||||
isCreatingCustomer={isCreatingCustomer}
|
||||
nextStep={nextStep}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Billing Model */}
|
||||
{step === 2 && (
|
||||
<motion.div
|
||||
key="step2"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<StepBilling
|
||||
selectedBillingInterval={selectedBillingInterval}
|
||||
handleBillingIntervalChange={handleBillingIntervalChange}
|
||||
customerMode={customerMode}
|
||||
selectedEndCustomerId={selectedEndCustomerId}
|
||||
lastLicenseDate={lastLicenseDate}
|
||||
setLastLicenseDate={setLastLicenseDate}
|
||||
prevStep={prevStep}
|
||||
nextStep={nextStep}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
{/* Step 3: Software Selector */}
|
||||
{/* Step 2: Billing Model */}
|
||||
{step === 2 && (
|
||||
<motion.div
|
||||
key="step2"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<StepBilling
|
||||
selectedBillingInterval={selectedBillingInterval}
|
||||
handleBillingIntervalChange={handleBillingIntervalChange}
|
||||
customerMode={customerMode}
|
||||
selectedEndCustomerId={selectedEndCustomerId}
|
||||
lastLicenseDate={lastLicenseDate}
|
||||
setLastLicenseDate={setLastLicenseDate}
|
||||
prevStep={prevStep}
|
||||
nextStep={nextStep}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
{step === 3 && (
|
||||
<motion.div
|
||||
key="step3"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="h-[calc(100vh-140px)] overflow-hidden"
|
||||
className="h-[calc(100vh-100px)] overflow-hidden"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-6 gap-6 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-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>
|
||||
{/* LEFT inside step 3: Categories Sidebar Menu */}
|
||||
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-4 overflow-y-auto">
|
||||
<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>
|
||||
|
||||
{/* 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">
|
||||
<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
|
||||
@@ -1059,9 +1031,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 pl-2">
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<SummarySidebar
|
||||
visibleCategories={visibleCategories}
|
||||
@@ -1143,6 +1114,8 @@ export function OrderWizard({
|
||||
|
||||
{/* Toast Notification Container */}
|
||||
<ToastNotification toast={toast} onClose={() => setToast(null)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,14 +7,70 @@ import { Check } from 'lucide-react'
|
||||
interface ProgressStepperProps {
|
||||
step: number
|
||||
basketItemsCount: number
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
}
|
||||
|
||||
const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']
|
||||
|
||||
export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
|
||||
// Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
|
||||
export function ProgressStepper({ step, basketItemsCount, orientation = 'horizontal' }: ProgressStepperProps) {
|
||||
const progressPercent = ((step - 1) / 3) * 100
|
||||
|
||||
if (orientation === 'vertical') {
|
||||
return (
|
||||
<div className="flex flex-col gap-6 relative py-2 pl-2">
|
||||
{/* Background Line */}
|
||||
<div className="absolute left-[20px] top-[20px] bottom-[20px] w-[2px] bg-slate-800 z-0 rounded-full" />
|
||||
|
||||
{/* Animated Active Line */}
|
||||
<motion.div
|
||||
className="absolute left-[20px] top-[20px] w-[2px] bg-gradient-to-b from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
|
||||
initial={{ height: '0%' }}
|
||||
animate={{ height: `${progressPercent}%` }}
|
||||
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
/>
|
||||
|
||||
{[1, 2, 3, 4].map(s => {
|
||||
const isDone = step > s
|
||||
const isActive = step === s
|
||||
|
||||
return (
|
||||
<div key={s} className="relative z-10 flex items-center gap-3">
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{
|
||||
scale: isActive ? 1.1 : 1,
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||||
className={`w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-300 ${
|
||||
isDone
|
||||
? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400'
|
||||
: isActive
|
||||
? 'bg-slate-950 border-2 border-sky-400 text-sky-400 shadow-[0_0_20px_rgba(56,189,248,0.7)]'
|
||||
: 'bg-slate-900 border-2 border-slate-800 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{isDone ? <Check className="w-4 h-4 stroke-[3]" /> : s}
|
||||
</motion.div>
|
||||
|
||||
<span
|
||||
className={`text-xs font-semibold tracking-wide transition-colors duration-300 flex items-center gap-1.5 ${
|
||||
isActive || isDone ? 'text-sky-300' : 'text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{STEP_LABELS[s - 1]}
|
||||
{s === 3 && basketItemsCount > 0 && (
|
||||
<span className="bg-sky-500 text-slate-950 text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-extrabold shadow-sm">
|
||||
{basketItemsCount}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto mb-10 px-4">
|
||||
<div className="flex justify-between relative">
|
||||
|
||||
@@ -70,7 +70,7 @@ export function StepSummary({
|
||||
<div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
|
||||
<div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
||||
|
||||
{/* Header & Status Stepper */}
|
||||
{/* Header */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
|
||||
@@ -85,39 +85,6 @@ export function StepSummary({
|
||||
</p>
|
||||
</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 */}
|
||||
|
||||
@@ -253,14 +253,14 @@ export function SummarySidebar({
|
||||
|
||||
{/* Kassen-Liste unten (selectable) */}
|
||||
{basketItems.length > 0 && (
|
||||
<div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
|
||||
<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-1.5 max-h-28 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
||||
<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">
|
||||
{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 ${
|
||||
className={`flex items-center gap-2 text-xs px-3 py-2.5 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
|
||||
@@ -278,7 +278,7 @@ export function SummarySidebar({
|
||||
|
||||
{/* Selected basket item actions */}
|
||||
{selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<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">
|
||||
@@ -314,25 +314,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-0">
|
||||
<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-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"
|
||||
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 bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : '+ Kasse anlegen')}
|
||||
</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 to-sky-500 hover:from-blue-500 hover:to-sky-400"
|
||||
onClick={nextStep}
|
||||
disabled={basketItems.length === 0 && isNextStepDisabled}
|
||||
>
|
||||
Weiter <ChevronRight className="ml-2 w-5 h-5" />
|
||||
Weiter <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-8 text-xs" onClick={prevStep}>
|
||||
Zurück zum Abrechnungsmodell
|
||||
</Button>
|
||||
</CardFooter>
|
||||
|
||||
Reference in New Issue
Block a user