Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Daniel:7346b42ff30bc791ca5276d4743e84690f1a4c82
Branches Tags
Daniel:main Daniel:staging Daniel:develop Daniel:productiv
..
compare: Daniel:46699e8bf32595949c85d526f9446d51ed7160e6
Branches Tags
Daniel:staging Daniel:develop Daniel:main Daniel:productiv

3 Commits
7346b42ff3 ... 46699e8bf3

Author SHA1 Message Date
DanielS
46699e8bf3 style(wizard): refine step 3 UI styling and micro interactions
All checks were successful
Staging Build / build (push) Successful in 3m0s
Details
2026-08-11 17:30:17 +02:00
DanielS
866c5522f2 fix(setup): make SMTP optional and adjust setup check 2026-08-11 17:27:14 +02:00
DanielS
1478c61ea8 feat(wizard): move progress stepper to left sidebar 2026-08-11 17:26:49 +02:00
7 changed files with 282 additions and 285 deletions
Expand all files Collapse all files

9
shop/components/SetupWizard.tsx
View File

@@ -44,14 +44,13 @@ export function SetupWizard() {
adminForm.firstName.trim().length > 0 && adminForm.firstName.trim().length > 0 &&
adminForm.lastName.trim().length > 0 adminForm.lastName.trim().length > 0
// Validation checks for SMTP form // Validation checks for SMTP form (optional step)
const isSmtpFormValid = const isSmtpFormValid =
smtpForm.host.trim().length > 0 && smtpForm.host.trim().length === 0 ||
!isNaN(Number(smtpForm.port)) && (!isNaN(Number(smtpForm.port)) && smtpForm.user.trim().length > 0)
smtpForm.user.trim().length > 0
const handleFinishSetup = async () => { const handleFinishSetup = async () => {
if (!isAdminFormValid || !isSmtpFormValid) return if (!isAdminFormValid) return
setLoading(true) setLoading(true)
setErrorMsg('') setErrorMsg('')

229
shop/components/order-wizard.tsx
View File

@@ -844,138 +844,110 @@ export function OrderWizard({
} }
return ( return (
<div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}> <div className="max-w-7xl mx-auto px-4 py-6">
{/* Dynamic Header */} <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
{step !== 3 && ( {/* Left Side Status Stepper for ALL steps */}
<div className="text-center mb-12"> <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">
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient"> <div>
Konfigurieren Sie Ihre Lösung <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
</h1> Fortschritt
<p className="text-slate-400 text-lg max-w-2xl mx-auto"> </h2>
Wählen Sie das passende Paket und die benötigten Module für Ihr Business. <p className="text-lg font-extrabold text-white">
</p> Bestell-Wizard
</p>
</div>
<ProgressStepper step={step} basketItemsCount={basketItems.length} orientation="vertical" />
</div> </div>
)}
{/* Global Stepper for Steps 1, 2, 4 */} {/* Right Main Content Column */}
{step !== 3 && ( <div className="lg:col-span-9 space-y-6">
<div className="pt-12 pb-6"> {/* Dynamic Header */}
<ProgressStepper step={step} basketItemsCount={basketItems.length} /> {step !== 3 && (
</div> <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"> <AnimatePresence mode="wait">
{/* Step 1: Customer */} {/* Step 1: Customer */}
{step === 1 && ( {step === 1 && (
<motion.div <motion.div
key="step1" key="step1"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }} exit={{ opacity: 0, x: -20 }}
className="space-y-6" className="space-y-6"
> >
<StepCustomer <StepCustomer
isAdmin={isAdmin} isAdmin={isAdmin}
companies={companies} companies={companies}
selectedCompanyId={selectedCompanyId} selectedCompanyId={selectedCompanyId}
setSelectedCompanyId={setSelectedCompanyId} setSelectedCompanyId={setSelectedCompanyId}
customerMode={customerMode} customerMode={customerMode}
setCustomerMode={setCustomerMode} setCustomerMode={setCustomerMode}
endCustomers={endCustomers} endCustomers={endCustomers}
searchTerm={searchTerm} searchTerm={searchTerm}
setSearchTerm={setSearchTerm} setSearchTerm={setSearchTerm}
filteredEndCustomers={filteredEndCustomers} filteredEndCustomers={filteredEndCustomers}
selectedEndCustomerId={selectedEndCustomerId} selectedEndCustomerId={selectedEndCustomerId}
setSelectedEndCustomerId={setSelectedEndCustomerId} setSelectedEndCustomerId={setSelectedEndCustomerId}
newCustomerForm={newCustomerForm} newCustomerForm={newCustomerForm}
setNewCustomerForm={setNewCustomerForm} setNewCustomerForm={setNewCustomerForm}
handleCreateCustomer={handleCreateCustomer} handleCreateCustomer={handleCreateCustomer}
isCreatingCustomer={isCreatingCustomer} isCreatingCustomer={isCreatingCustomer}
nextStep={nextStep} nextStep={nextStep}
/> />
</motion.div> </motion.div>
)} )}
{/* Step 2: Billing Model */} {/* Step 2: Billing Model */}
{step === 2 && ( {step === 2 && (
<motion.div <motion.div
key="step2" key="step2"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }} exit={{ opacity: 0, x: -20 }}
className="space-y-6" className="space-y-6"
> >
<StepBilling <StepBilling
selectedBillingInterval={selectedBillingInterval} selectedBillingInterval={selectedBillingInterval}
handleBillingIntervalChange={handleBillingIntervalChange} handleBillingIntervalChange={handleBillingIntervalChange}
customerMode={customerMode} customerMode={customerMode}
selectedEndCustomerId={selectedEndCustomerId} selectedEndCustomerId={selectedEndCustomerId}
lastLicenseDate={lastLicenseDate} lastLicenseDate={lastLicenseDate}
setLastLicenseDate={setLastLicenseDate} setLastLicenseDate={setLastLicenseDate}
prevStep={prevStep} prevStep={prevStep}
nextStep={nextStep} nextStep={nextStep}
/> />
</motion.div> </motion.div>
)} )}
{/* Step 3: Software Selector */}
{step === 3 && ( {step === 3 && (
<motion.div <motion.div
key="step3" key="step3"
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }} exit={{ opacity: 0, x: -20 }}
className="h-[calc(100vh-140px)] overflow-hidden" 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"
> >
<div className="grid grid-cols-1 lg:grid-cols-6 gap-6 h-full items-stretch"> <div className="grid grid-cols-1 lg:grid-cols-6 gap-4 h-full items-stretch">
{/* LEFT: Categories Sidebar Menu */} {/* LEFT inside step 3: Categories Sidebar Menu */}
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6"> <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> <div>
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient"> <h1 className="text-xl font-extrabold tracking-tight mb-1 text-gradient">
Konfigurieren Sie Ihre Lösung Kategorien & Optionen
</h1> </h1>
<p className="text-slate-400 text-sm"> <p className="text-slate-400 text-xs">
Wählen Sie das passende Paket und die benötigten Module für Ihr Business. Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
</p> </p>
</div> </div>
{/* Left Sidebar Status Stepper (matching ProgressStepper sky-blue design) */} <div className="flex flex-col gap-2.5">
<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">
{visibleCategories.map((cat) => { {visibleCategories.map((cat) => {
const sel = selections[cat.id] const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -987,8 +959,8 @@ export function OrderWizard({
key={cat.id} key={cat.id}
onClick={() => setActiveCategoryId(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 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.15)]' ? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]'
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10' : '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 */} {/* Left glow line for active category */}
@@ -1012,11 +984,11 @@ export function OrderWizard({
{/* Status indicators */} {/* Status indicators */}
{hasSelection ? ( {hasSelection ? (
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-green-500/30 text-green-400 bg-green-500/10"> <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 Ausgewählt
</span> </span>
) : isRequired ? ( ) : isRequired ? (
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-red-500/30 text-red-400 bg-red-500/10"> <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 Erforderlich
</span> </span>
) : null} ) : null}
@@ -1027,8 +999,8 @@ export function OrderWizard({
</div> </div>
{/* CENTER: Scrollable Category Selection */} {/* CENTER: Scrollable Category Selection */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-white/5 px-4"> <div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-slate-800 p-2 px-3">
<div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent"> <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{/* Upgrade-Modus Hinweis-Banner */} {/* Upgrade-Modus Hinweis-Banner */}
{upgradeMode && lockedDeviceId && ( {upgradeMode && lockedDeviceId && (
<div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2"> <div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
@@ -1059,9 +1031,8 @@ export function OrderWizard({
</div> </div>
</div> </div>
{/* RIGHT: Stepper Header + Summary sidebar */} {/* RIGHT: Summary sidebar */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden pl-4"> <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2">
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
<SummarySidebar <SummarySidebar
visibleCategories={visibleCategories} visibleCategories={visibleCategories}
@@ -1143,6 +1114,8 @@ export function OrderWizard({
{/* Toast Notification Container */} {/* Toast Notification Container */}
<ToastNotification toast={toast} onClose={() => setToast(null)} /> <ToastNotification toast={toast} onClose={() => setToast(null)} />
</div>
</div>
</div> </div>
) )
} }

60
shop/components/wizard/progress-stepper.tsx
View File

@@ -7,14 +7,70 @@ import { Check } from 'lucide-react'
interface ProgressStepperProps { interface ProgressStepperProps {
step: number step: number
basketItemsCount: number basketItemsCount: number
orientation?: 'horizontal' | 'vertical'
} }
const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss'] const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']
export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) { export function ProgressStepper({ step, basketItemsCount, orientation = 'horizontal' }: ProgressStepperProps) {
// Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
const progressPercent = ((step - 1) / 3) * 100 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 ( return (
<div className="max-w-xl mx-auto mb-10 px-4"> <div className="max-w-xl mx-auto mb-10 px-4">
<div className="flex justify-between relative"> <div className="flex justify-between relative">

26
shop/components/wizard/step-software.tsx
View File

@@ -229,12 +229,12 @@ export function StepSoftware({
{/* Modules */} {/* Modules */}
{selectedProduct?.modules && selectedProduct.modules.length > 0 && ( {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
<div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4"> <div className="mt-6 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4 shadow-lg">
<p className="text-sm font-bold text-white flex items-center gap-2"> <p className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-primary" /> <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
Zusatzmodule für {selectedProduct.name} Zusatzmodule für {selectedProduct.name}
</p> </p>
<div className="space-y-2.5"> <div className="space-y-3">
{selectedProduct.modules.map(module => { {selectedProduct.modules.map(module => {
const isExistingLicense = existingModuleIds.includes(module.id) const isExistingLicense = existingModuleIds.includes(module.id)
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? []) const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -242,14 +242,14 @@ export function StepSoftware({
return ( return (
<div <div
key={module.id} 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 isExistingLicense
? 'border-primary/20 bg-primary/5 opacity-75' ? 'border-slate-800 bg-slate-900/30 opacity-60 cursor-not-allowed'
: disabled : disabled
? 'border-white/5 bg-white/5 opacity-40' ? 'border-slate-800/40 bg-slate-900/20 opacity-40 cursor-not-allowed'
: checked : checked
? 'border-primary/30 bg-primary/5' ? 'border-primary/40 bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
: 'border-white/5 bg-white/5 hover:bg-white/10' : 'border-slate-800 bg-slate-900/50 hover:bg-slate-900 hover:border-slate-700'
}`} }`}
> >
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
@@ -258,19 +258,19 @@ export function StepSoftware({
checked={checked} checked={checked}
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)} onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
disabled={disabled} 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"> <div className="flex-1">
<Label <Label
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`} htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
className={`font-semibold text-sm flex justify-between text-white ${ 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} {module.name}
{isExistingLicense && ( {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 <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
</span> </span>
)} )}

35
shop/components/wizard/step-summary.tsx
View File

@@ -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="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"> <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="space-y-4">
<div className="flex items-center gap-3"> <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"> <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> </p>
</div> </div>
</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> </div>
{/* Kunden-Info Card */} {/* Kunden-Info Card */}

169
shop/components/wizard/summary-sidebar.tsx
View File

@@ -93,14 +93,21 @@ export function SummarySidebar({
return ( return (
<div className="h-full flex flex-col"> <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"> <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"> <CardHeader className="shrink-0 pb-3 border-b border-white/5">
<CardTitle className="text-white text-lg">Zusammenfassung</CardTitle> <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> </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 */} {/* 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 => { {visibleCategories.map(cat => {
const sel = selections[cat.id] const sel = selections[cat.id]
const selectedProds: Product[] = [] const selectedProds: Product[] = []
@@ -165,9 +172,9 @@ export function SummarySidebar({
{/* Pricing block */} {/* Pricing block */}
<Separator className="bg-white/10" /> <Separator className="bg-white/10" />
{oneTimeTotal > 0 && monthlyTotal > 0 ? ( {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"> <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"> <div className="flex justify-between text-xs text-slate-400">
<span>Netto:</span> <span>Netto:</span>
<span className="tabular-nums">{fmt(oneTimeNet)}</span> <span className="tabular-nums">{fmt(oneTimeNet)}</span>
@@ -176,13 +183,13 @@ export function SummarySidebar({
<span>zzgl. 19% MwSt.:</span> <span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(oneTimeTax)}</span> <span className="tabular-nums">{fmt(oneTimeTax)}</span>
</div> </div>
<div className="flex justify-between text-sm font-bold text-white"> <div className="flex justify-between text-sm font-extrabold text-white pt-1">
<span>Gesamt (brutto):</span> <span>Brutto:</span>
<span className="tabular-nums">{fmt(oneTimeGross)}</span> <span className="tabular-nums text-sky-400">{fmt(oneTimeGross)}</span>
</div> </div>
</div> </div>
<div className="space-y-1 pt-2 border-t border-white/10"> <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"> <div className="flex justify-between text-xs text-slate-400">
<span>Netto:</span> <span>Netto:</span>
<span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span> <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
@@ -191,39 +198,39 @@ export function SummarySidebar({
<span>zzgl. 19% MwSt.:</span> <span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span> <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
</div> </div>
<div className="flex justify-between text-sm font-bold text-white"> <div className="flex justify-between text-sm font-extrabold text-white pt-1">
<span>Gesamt (brutto):</span> <span>Brutto:</span>
<span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span> <span className="tabular-nums text-sky-400">{fmt(monthlyGross)} / mtl.</span>
</div> </div>
</div> </div>
</div> </div>
) : oneTimeTotal > 0 ? ( ) : 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"> <div className="flex justify-between text-xs text-slate-400">
<span>Netto-Gesamtbetrag:</span> <span>Netto:</span>
<span className="tabular-nums">{fmt(oneTimeNet)}</span> <span className="tabular-nums">{fmt(oneTimeNet)}</span>
</div> </div>
<div className="flex justify-between text-xs text-slate-400"> <div className="flex justify-between text-xs text-slate-400">
<span>zzgl. 19% MwSt.:</span> <span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(oneTimeTax)}</span> <span className="tabular-nums">{fmt(oneTimeTax)}</span>
</div> </div>
<div className="flex justify-between text-base font-bold text-sky-400"> <div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
<span>Gesamtbetrag (brutto):</span> <span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(oneTimeGross)}</span> <span className="tabular-nums">{fmt(oneTimeGross)}</span>
</div> </div>
</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"> <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> <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
</div> </div>
<div className="flex justify-between text-xs text-slate-400"> <div className="flex justify-between text-xs text-slate-400">
<span>zzgl. 19% MwSt.:</span> <span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span> <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
</div> </div>
<div className="flex justify-between text-base font-bold text-sky-400"> <div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
<span>Gesamtbetrag (brutto):</span> <span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span> <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
</div> </div>
</div> </div>
@@ -238,14 +245,14 @@ export function SummarySidebar({
</div> </div>
)} )}
{!allCategoriesFilled && ( {!allCategoriesFilled && (
<p className="text-xs text-destructive flex items-center gap-1"> <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 h-3" /> <AlertCircle className="w-3.5 h-3.5 shrink-0 text-amber-400" />
Bitte aus jeder Pflichtkategorie einen Artikel wählen. Bitte aus jeder Pflichtkategorie einen Artikel wählen.
</p> </p>
)} )}
{productValidationErrors.map((err, errIdx) => ( {productValidationErrors.map((err, errIdx) => (
<p key={errIdx} className="text-xs text-destructive flex items-center gap-1"> <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 h-3 text-destructive" /> <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
{err} {err}
</p> </p>
))} ))}
@@ -253,86 +260,80 @@ export function SummarySidebar({
{/* Kassen-Liste unten (selectable) */} {/* Kassen-Liste unten (selectable) */}
{basketItems.length > 0 && ( {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 border-t border-white/10 space-y-2">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p> <p className="text-xs font-semibold text-slate-400 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-col gap-2 max-h-32 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{basketItems.map((item, idx) => ( {basketItems.map((item, idx) => (
<button <div
key={idx} key={idx}
onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)} className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
selectedBasketIdx === idx 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 : idx === editingIdx
? 'bg-blue-500/10 border-blue-500/30 text-white' ? 'border-blue-500/40 bg-blue-500/10 text-white'
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover: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> <div className="flex-1 min-w-0 pr-2">
{item.licenseNumber && ( <div className="flex items-center gap-1.5">
<span className="text-[10px] text-slate-500 truncate max-w-[80px]">{item.licenseNumber}</span> <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">
</button> {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> </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> </div>
)} )}
</CardContent> </CardContent>
<CardFooter className="flex flex-col gap-3 shrink-0"> <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
<Button <Button
type="button" type="button"
variant="outline" 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-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)} 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 speichern' : '+ Weitere Kasse hinzufügen'}
</Button> </Button>
<Separator className="bg-white/10 my-1" />
<Button <Button
className="w-full h-12 text-lg" 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} onClick={nextStep}
disabled={basketItems.length === 0 && isNextStepDisabled} disabled={basketItems.length === 0 && isNextStepDisabled}
> >
Weiter <ChevronRight className="ml-2 w-5 h-5" /> Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
</Button> </Button>
<Button variant="ghost" className="w-full text-white" onClick={prevStep}> <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-7 text-xs" onClick={prevStep}>
Zurück zum Abrechnungsmodell Zurück zum Abrechnungsmodell
</Button> </Button>
</CardFooter> </CardFooter>

39
shop/lib/actions/setup.ts
View File

@@ -34,10 +34,10 @@ export async function isSetupNeeded(): Promise<boolean> {
if (authError) { if (authError) {
console.error('Error checking auth users list:', authError) console.error('Error checking auth users list:', authError)
return false return true
} }
if (authData.users.length > 0) { if (authData && authData.users && authData.users.length > 0) {
return false return false
} }
@@ -48,13 +48,13 @@ export async function isSetupNeeded(): Promise<boolean> {
if (dbError) { if (dbError) {
console.error('Error checking users table status:', dbError) console.error('Error checking users table status:', dbError)
return false return true
} }
return count === 0 return count === 0
} catch (e) { } catch (e) {
console.error('Exception checking setup status:', e) console.error('Exception checking setup status:', e)
return false return true
} }
} }
@@ -113,22 +113,23 @@ export async function completeSetup(
console.error('Error updating admin profile:', profileError) console.error('Error updating admin profile:', profileError)
} }
// 5. Store SMTP configuration in public.settings // 5. Store SMTP configuration in public.settings (optional)
const { error: smtpError } = await admin if (smtpData.host && smtpData.host.trim().length > 0) {
.from('settings') const { error: smtpError } = await admin
.upsert({ .from('settings')
id: 'smtp', .upsert({
host: smtpData.host, id: 'smtp',
port: smtpData.port, host: smtpData.host,
secure: smtpData.secure, port: smtpData.port,
user: smtpData.user, secure: smtpData.secure,
pass: smtpData.pass, user: smtpData.user,
updated_at: new Date().toISOString(), pass: smtpData.pass,
}) updated_at: new Date().toISOString(),
})
if (smtpError) { if (smtpError) {
console.error('Error saving SMTP settings:', smtpError) console.error('Error saving SMTP settings:', smtpError)
return { success: false, error: `Fehler beim Speichern der SMTP-Einstellungen: ${smtpError.message}` } }
} }
revalidatePath('/') revalidatePath('/')