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

refactor(wizard): optimize ui ux with no-page-scroll and hub flow
All checks were successful
Staging Build / build (push) Successful in 3m16s
Details

Browse Source
This commit is contained in:
DanielS
2026-09-07 22:26:13 +02:00
parent 2a1897141e
commit 694e8dfbc1
6 changed files with 1523 additions and 1022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -202,7 +202,7 @@ export function OrderWizard({
// Formular-State für neuen Endkunden // Formular-State für neuen Endkunden
const [newCustomerForm, setNewCustomerForm] = useState({ const [newCustomerForm, setNewCustomerForm] = useState({
company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '', company_name: '', vat_id: '', email: '', first_name: '', last_name: '', street: '', zip: '', city: '',
bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '', bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
}) })
const [isCreatingCustomer, setIsCreatingCustomer] = useState(false) const [isCreatingCustomer, setIsCreatingCustomer] = useState(false)
@@ -614,7 +614,7 @@ export function OrderWizard({
setSelectedEndCustomerId(created.id) setSelectedEndCustomerId(created.id)
setCustomerMode('select') setCustomerMode('select')
setNewCustomerForm({ setNewCustomerForm({
company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '', company_name: '', vat_id: '', email: '', first_name: '', last_name: '', street: '', zip: '', city: '',
bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '', bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
}) })
} catch (e: any) { } catch (e: any) {
@@ -624,7 +624,7 @@ export function OrderWizard({
} }
} }
const addToBasket = async () => { const addToBasket = async (proceedToSummary: boolean = false) => {
const normLicense = licenseNumber.trim().toUpperCase() const normLicense = licenseNumber.trim().toUpperCase()
if (normLicense) { if (normLicense) {
const isDuplicateInBasket = basketItems.some( const isDuplicateInBasket = basketItems.some(
@@ -676,6 +676,11 @@ export function OrderWizard({
} }
}) })
setSelections(resetSels) setSelections(resetSels)
if (proceedToSummary) {
setDirection(1)
setStep(4)
}
} }
const resetFormForNewDevice = () => { const resetFormForNewDevice = () => {
@@ -1098,6 +1103,8 @@ export function OrderWizard({
existingModuleIds={existingModuleIds} existingModuleIds={existingModuleIds}
activeCategoryId={activeCategoryId} activeCategoryId={activeCategoryId}
editingDeviceName={editingIdx !== null ? (basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`) : null} editingDeviceName={editingIdx !== null ? (basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`) : null}
onCancelEdit={resetFormForNewDevice}
productValidationErrors={productValidationErrors}
/> />
</div> </div>
</div> </div>
@@ -1122,19 +1129,15 @@ export function OrderWizard({
updatePriceModifier={updatePriceModifier} updatePriceModifier={updatePriceModifier}
allCategoriesFilled={allCategoriesFilled} allCategoriesFilled={allCategoriesFilled}
productValidationErrors={productValidationErrors} productValidationErrors={productValidationErrors}
basketItems={basketItems}
editingIdx={editingIdx} editingIdx={editingIdx}
editBasketItem={editBasketItem}
deleteBasketItem={deleteBasketItem}
deviceName={deviceName} deviceName={deviceName}
setDeviceName={setDeviceName} setDeviceName={setDeviceName}
licenseNumber={licenseNumber} licenseNumber={licenseNumber}
setLicenseNumber={setLicenseNumber} setLicenseNumber={setLicenseNumber}
addToBasket={addToBasket} onSaveAndProceed={() => addToBasket(true)}
isNextStepDisabled={isNextStepDisabled} isNextStepDisabled={isNextStepDisabled}
hasActiveSelection={hasActiveSelection} hasActiveSelection={hasActiveSelection}
showValidationWarning={showValidationWarning} showValidationWarning={showValidationWarning}
nextStep={nextStep}
prevStep={prevStep} prevStep={prevStep}
/> />
</div> </div>

277
shop/components/wizard/step-billing.tsx
View File

@@ -1,11 +1,24 @@
'use client' 'use client'
import React from 'react' import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card' import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { CreditCard, Calendar, Check, ChevronLeft, ChevronRight } from 'lucide-react' import { Badge } from '@/components/ui/badge'
import {
CreditCard,
Calendar,
Check,
ChevronLeft,
ChevronRight,
RefreshCw,
ShoppingBag,
ShieldCheck,
CheckCircle2,
Info,
} from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
interface StepBillingProps { interface StepBillingProps {
selectedBillingInterval: 'one_time' | 'monthly' selectedBillingInterval: 'one_time' | 'monthly'
@@ -28,105 +41,207 @@ export function StepBilling({
prevStep, prevStep,
nextStep, nextStep,
}: StepBillingProps) { }: StepBillingProps) {
// Optionale Validierung falls Datum bei Kauf Pflicht wäre, oder prüfen ob Modell gewählt ist
const isOneTime = selectedBillingInterval === 'one_time'
const isMonthly = selectedBillingInterval === 'monthly'
return ( return (
<Card className="glass-dark border-white/10"> <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
<CardHeader> {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
<CardTitle className="text-2xl flex items-center gap-2 text-white"> <CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
<CreditCard className="w-6 h-6 text-primary" /> <div className="flex items-center justify-between gap-3">
Abrechnungsmodell wählen <div>
</CardTitle> <CardTitle className="text-xl font-bold flex items-center gap-2 text-white">
<CardDescription className="text-slate-300"> <CreditCard className="w-5 h-5 text-primary" />
Möchten Sie Lizenzen dauerhaft kaufen oder monatlich mieten? Abrechnungsmodell wählen
</CardDescription> </CardTitle>
<CardDescription className="text-xs text-slate-300 mt-0.5">
Wählen Sie zwischen monatlicher Miete (Abonnement) oder einmaligem Softwarekauf.
</CardDescription>
</div>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
Schritt 2 von 4
</Badge>
</div>
</CardHeader> </CardHeader>
<CardContent>
<div className="grid md:grid-cols-2 gap-6 py-4"> {/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-y-auto) ─── */}
{/* Option 1: Kauf */} <div className="flex-1 min-h-0 overflow-y-auto p-6 flex flex-col justify-center max-w-4xl mx-auto w-full scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div <div className="space-y-6 my-auto">
onClick={() => handleBillingIntervalChange('one_time')} {/* Abrechnungsmodell Cards */}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[12rem] h-auto hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'one_time' <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]' {/* Option 1: Miete / Abo */}
: 'border-white/5 bg-white/5 hover:border-white/20' <div
onClick={() => handleBillingIntervalChange('monthly')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
isMonthly
? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
: 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
}`} }`}
> >
<div className="flex flex-col justify-between h-full">
<div> <div>
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center justify-between gap-3 mb-4">
<div className={`p-3 rounded-xl ${selectedBillingInterval === 'one_time' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}> <div className={`p-3.5 rounded-xl ${isMonthly ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
<CreditCard className="w-6 h-6" /> <RefreshCw className={`w-6 h-6 ${isMonthly ? 'animate-spin-slow' : ''}`} />
</div> </div>
<h3 className="text-lg font-bold text-white">Einmaliger Kauf</h3> {isMonthly && (
<div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
<Check className="w-3.5 h-3.5" />
</div>
)}
</div> </div>
<p className="text-slate-400 text-sm">
Einmalige Anschaffungskosten für die Softwarelizenz. Keine monatlichen Mietgebühren. <div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-white">Miete / Abo</h3>
<Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/30 text-blue-400">
Empfohlen
</Badge>
</div>
<p className="text-xs font-medium text-slate-300">
Fortlaufende monatliche Abrechnung
</p>
</div>
<p className="text-slate-400 text-xs mt-3 leading-relaxed">
Maximale Flexibilität: Inklusive sämtlicher Software-Updates, Cloud-Dienste und technischem Support. Jederzeit kündbar oder anpassbar.
</p> </p>
</div> </div>
{selectedBillingInterval === 'one_time' && ( <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
<div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white"> <span className="text-slate-400">Zahlungsintervall:</span>
<Check className="w-4 h-4" /> <span className="text-primary font-semibold">monatlich</span>
</div> </div>
)} </div>
{selectedBillingInterval === 'one_time' && customerMode === 'select' && selectedEndCustomerId && ( {/* Option 2: Kauf / Einmalkauf */}
<div <div
onClick={(e) => e.stopPropagation()} onClick={() => handleBillingIntervalChange('one_time')}
className="mt-4 pt-4 border-t border-white/5 space-y-2 cursor-default" className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
> isOneTime
<Label htmlFor="last-license-date" className="text-white text-xs font-medium flex items-center gap-2"> ? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
<Calendar className="w-3.5 h-3.5 text-primary" /> : 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
Datum der letzten CASPOS-Lizenz }`}
</Label> >
<Input <div>
id="last-license-date" <div className="flex items-center justify-between gap-3 mb-4">
type="date" <div className={`p-3.5 rounded-xl ${isOneTime ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
value={lastLicenseDate} <ShoppingBag className="w-6 h-6" />
onChange={e => setLastLicenseDate(e.target.value)} </div>
className="bg-[#0b1329] border-white/10 text-white text-xs h-8 focus:border-primary" {isOneTime && (
/> <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
<p className="text-[10px] text-slate-500"> <Check className="w-3.5 h-3.5" />
Ermöglicht automatische Ermittlung von Update-Gebühren. </div>
)}
</div>
<div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-white">Kauf / Einmalkauf</h3>
<Badge variant="outline" className="text-[10px] bg-slate-500/10 border-slate-500/30 text-slate-300">
Klassisch
</Badge>
</div>
<p className="text-xs font-medium text-slate-300">
Einmalige Lizenzgebühr
</p> </p>
</div> </div>
)}
<p className="text-slate-400 text-xs mt-3 leading-relaxed">
Dauerhafte Lizenzrechte für die gekaufte Version inklusive 12 Monate kostenfreier Updates. Keine laufenden monatlichen Mietgebühren.
</p>
</div>
<div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
<span className="text-slate-400">Zahlungsintervall:</span>
<span className="text-slate-200 font-semibold">einmalig</span>
</div>
</div> </div>
</div> </div>
{/* Option 2: Abo */} {/* Dynamische Stichtagsabfrage bei Kauf */}
<div <AnimatePresence>
onClick={() => handleBillingIntervalChange('monthly')} {isOneTime && (
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[12rem] h-auto hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'monthly' <motion.div
? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]' initial={{ opacity: 0, y: 10, height: 0 }}
: 'border-white/5 bg-white/5 hover:border-white/20' animate={{ opacity: 1, y: 0, height: 'auto' }}
}`} exit={{ opacity: 0, y: -10, height: 0 }}
> transition={{ duration: 0.25 }}
<div> className="overflow-hidden"
<div className="flex items-center gap-3 mb-3"> >
<div className={`p-3 rounded-xl ${selectedBillingInterval === 'monthly' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}> <div className="p-5 rounded-2xl bg-gradient-to-r from-slate-900/90 to-slate-900/60 border border-white/10 space-y-3 shadow-lg">
<Calendar className="w-6 h-6" /> <div className="flex items-start gap-3">
<div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30 shrink-0 mt-0.5">
<Calendar className="w-4 h-4" />
</div>
<div className="space-y-1 flex-1">
<Label htmlFor="last-license-date" className="text-white text-xs font-bold flex items-center gap-2">
Datum des letzten CASPOS-Kaufs (Stichtag)
</Label>
<p className="text-[11px] text-slate-400 leading-normal">
Datum des letzten Kaufs zur automatischen Berechnung der Update-Staffel (z. B. 15% innerhalb 1 Jahr, 30% bis 2 Jahre, 50% bis 3 Jahre).
</p>
</div>
</div>
<div className="pt-2 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<div className="relative flex-1 max-w-sm">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<Input
id="last-license-date"
type="date"
value={lastLicenseDate}
onChange={(e) => setLastLicenseDate(e.target.value)}
className="pl-9 bg-slate-950/80 border-white/10 text-white text-xs h-9 focus:border-primary"
/>
</div>
{lastLicenseDate && (
<Badge variant="outline" className="bg-emerald-500/10 border-emerald-500/30 text-emerald-400 text-xs px-2.5 py-1 flex items-center gap-1.5 self-start sm:self-auto">
<CheckCircle2 className="w-3.5 h-3.5" /> Stichtag gesetzt
</Badge>
)}
</div>
</div> </div>
<h3 className="text-lg font-bold text-white">Monatliches Abo (Miete)</h3> </motion.div>
</div>
<p className="text-slate-400 text-sm">
Laufende monatliche Gebühren. Inklusive aller Updates und flexibler Laufzeit.
</p>
</div>
{selectedBillingInterval === 'monthly' && (
<div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
<Check className="w-4 h-4" />
</div>
)} )}
</div> </AnimatePresence>
</div> </div>
</CardContent> </div>
<CardFooter className="flex justify-between border-t border-white/10 pt-6">
<Button variant="ghost" className="text-white" onClick={prevStep}> {/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
<ChevronLeft className="mr-2 w-4 h-4" /> Zurück <div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
{/* Back Button */}
<Button
variant="outline"
onClick={prevStep}
className="w-full sm:w-auto border-white/10 text-white hover:bg-white/10 h-9 text-xs gap-1.5"
>
<ChevronLeft className="w-4 h-4" /> Zurück zu Schritt 1
</Button> </Button>
<Button onClick={nextStep}>
Weiter zur Software <ChevronRight className="ml-2 w-4 h-4" /> {/* Selected Model Status Chip */}
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white text-xs">
<span className="text-slate-400">Gewähltes Modell:</span>
<Badge
variant="outline"
className={`text-xs px-2 py-0.5 ${
isMonthly
? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
: 'border-slate-500/30 text-slate-300 bg-slate-500/10'
}`}
>
{isMonthly ? 'Monatliches Abo' : 'Einmaliger Kauf'}
</Badge>
</div>
{/* Next Button */}
<Button
onClick={nextStep}
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-1.5"
>
Weiter zu Schritt 3 <ChevronRight className="w-4 h-4" />
</Button> </Button>
</CardFooter> </div>
</Card> </Card>
) )
} }

1097
shop/components/wizard/step-customer.tsx
View File

File diff suppressed because it is too large Load Diff

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

@@ -2,13 +2,13 @@
import React from 'react' import React from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card' import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Checkbox } from '@/components/ui/checkbox' import { Checkbox } from '@/components/ui/checkbox'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { ShoppingCart, Check, AlertCircle, Lock } from 'lucide-react' import { Button } from '@/components/ui/button'
import { ShoppingCart, Check, AlertCircle, Lock, X, Info } from 'lucide-react'
import * as Icons from 'lucide-react' import * as Icons from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { Category, Product, CategorySelection } from '@/lib/types' import { Category, Product, CategorySelection } from '@/lib/types'
@@ -30,6 +30,8 @@ interface StepSoftwareProps {
existingModuleIds?: string[] existingModuleIds?: string[]
activeCategoryId: string | null activeCategoryId: string | null
editingDeviceName?: string | null editingDeviceName?: string | null
onCancelEdit?: () => void
productValidationErrors?: string[]
} }
export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) { export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -54,6 +56,8 @@ export function StepSoftware({
existingModuleIds = [], existingModuleIds = [],
activeCategoryId, activeCategoryId,
editingDeviceName = null, editingDeviceName = null,
onCancelEdit,
productValidationErrors = [],
}: StepSoftwareProps) { }: StepSoftwareProps) {
const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
@@ -69,24 +73,46 @@ export function StepSoftware({
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
return ( return (
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl"> <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden">
<CardHeader className="border-b border-white/5 pb-4"> {/* ─── FIXED CARD HEADER ─── */}
<CardTitle className="text-xl flex items-center justify-between gap-2 text-white font-bold flex-wrap"> <CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 shrink-0 bg-slate-950/40">
<div className="flex items-center gap-2"> <div className="flex items-center justify-between gap-3 flex-wrap">
<ShoppingCart className="w-5 h-5 text-primary" /> <div className="flex items-center gap-2.5">
<span>Optionen wählen</span> <div className="p-2 rounded-xl bg-primary/20 text-primary border border-primary/30">
<ShoppingCart className="w-4 h-4" />
</div>
<div>
<CardTitle className="text-base font-bold text-white">
{currentCategory.name}
</CardTitle>
<CardDescription className="text-xs text-slate-400 mt-0.5">
{currentCategory.description || 'Passen Sie die Konfiguration für diese Kategorie an.'}
</CardDescription>
</div>
</div> </div>
{editingDeviceName && ( {editingDeviceName && (
<Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1 px-2.5 py-1 rounded-lg animate-pulse shrink-0"> <div className="flex items-center gap-2">
✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot; <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-3 py-1 rounded-lg animate-pulse shrink-0">
</Badge> ✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
</Badge>
{onCancelEdit && (
<Button
size="sm"
variant="ghost"
onClick={onCancelEdit}
className="h-7 text-xs text-slate-400 hover:text-white hover:bg-white/10 px-2"
>
<X className="w-3.5 h-3.5 mr-1" /> Neuer Entwurf
</Button>
)}
</div>
)} )}
</CardTitle> </div>
<CardDescription className="text-slate-400">
Passen Sie die Konfiguration für {currentCategory.name} an.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex-1 pt-6 space-y-6">
{/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
<CardContent className="p-5 space-y-5">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.div <motion.div
key={currentCategory.id} key={currentCategory.id}
@@ -94,49 +120,49 @@ export function StepSoftware({
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }} exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="space-y-6" className="space-y-5"
> >
{/* Category header */} {/* Category selection status header */}
{(() => { {(() => {
const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0) const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0)
return ( return (
<div className={`flex items-center gap-3 p-4 rounded-xl border transition-all ${ <div className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all ${
isMissingRequired isMissingRequired
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold' ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: 'bg-white/5 border-white/10' : 'bg-white/5 border-white/10'
}`}> }`}>
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${ <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
isMissingRequired ? 'bg-red-500/20 text-red-400' : 'bg-primary/20 text-primary' isMissingRequired ? 'bg-red-500/20 text-red-400' : 'bg-primary/20 text-primary'
}`}> }`}>
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4" /> <CategoryIcon icon={currentCategory.icon} className="w-4 h-4" />
</div> </div>
<div> <div className="min-w-0 flex-1">
<h3 className="font-bold text-white text-sm flex items-center gap-2"> <h3 className="font-bold text-white text-xs flex items-center gap-2 flex-wrap">
{currentCategory.name} <span>{currentCategory.name}</span>
{isMissingRequired && ( {isMissingRequired && (
<span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.5 rounded-full font-extrabold animate-pulse tracking-wider"> <span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.5 rounded-full font-extrabold animate-pulse tracking-wider">
PFLICHTFELD AUSWÄHLEN! PFLICHTFELD AUSWÄHLEN!
</span> </span>
)} )}
</h3> </h3>
{currentCategory.description && ( <p className="text-slate-400 text-[11px] mt-0.5">
<p className="text-slate-400 text-xs mt-0.5">{currentCategory.description}</p> {currentCategory.allow_multiselect ? 'Mehrfachauswahl möglich' : 'Einzelauswahl'}
)} </p>
</div> </div>
{sel?.productIds && sel.productIds.length > 0 ? ( {sel?.productIds && sel.productIds.length > 0 ? (
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full"> <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
<Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt <Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
</Badge> </Badge>
) : sel?.productId ? ( ) : sel?.productId ? (
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full"> <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
<Check className="w-3 h-3 mr-1" /> Ausgewählt <Check className="w-3 h-3 mr-1" /> Ausgewählt
</Badge> </Badge>
) : currentCategory.is_required ? ( ) : currentCategory.is_required ? (
<Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold"> <Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
<AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen! <AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen!
</Badge> </Badge>
) : ( ) : (
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5"> <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5 shrink-0">
Optional Optional
</Badge> </Badge>
)} )}
@@ -144,12 +170,13 @@ export function StepSoftware({
) )
})()} })()}
{/* Products List */}
{catProducts.length === 0 ? ( {catProducts.length === 0 ? (
<p className="text-slate-500 text-sm italic"> <p className="text-slate-500 text-xs italic p-4 bg-white/5 rounded-xl border border-white/5 text-center">
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden. Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
</p> </p>
) : currentCategory.allow_multiselect ? ( ) : currentCategory.allow_multiselect ? (
<div className="grid gap-3"> <div className="grid gap-2.5">
{catProducts.map(product => { {catProducts.map(product => {
const isChecked = sel?.productIds?.includes(product.id) ?? false const isChecked = sel?.productIds?.includes(product.id) ?? false
const disabled = isProductDisabled(product, currentCategory.id) const disabled = isProductDisabled(product, currentCategory.id)
@@ -157,27 +184,27 @@ export function StepSoftware({
<div key={product.id} className="relative"> <div key={product.id} className="relative">
<Label <Label
onClick={() => !disabled && selectProduct(currentCategory.id, product.id)} onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed' ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
: isChecked : isChecked
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]' ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer' : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
}`} }`}
> >
<div className="flex justify-between w-full items-center"> <div className="flex justify-between w-full items-center">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5">
<Checkbox <Checkbox
checked={isChecked} checked={isChecked}
disabled={disabled} disabled={disabled}
onCheckedChange={() => { }} onCheckedChange={() => { }}
className="border-white/20 data-[state=checked]:bg-primary rounded" className="border-white/20 data-[state=checked]:bg-primary rounded"
/> />
<span className="font-bold text-sm text-white">{product.name}</span> <span className="font-bold text-xs text-white">{product.name}</span>
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}> <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'} {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
</span> </span>
</div> </div>
<span className="text-primary font-bold text-sm"> <span className="text-primary font-bold text-xs">
{new Intl.NumberFormat('de-DE', { {new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
@@ -186,10 +213,10 @@ export function StepSoftware({
</span> </span>
</div> </div>
{product.description && ( {product.description && (
<span className="text-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span> <span className="text-[11px] text-slate-400 mt-1.5 pl-6 font-normal leading-relaxed">{product.description}</span>
)} )}
{product.modules && product.modules.length > 0 && ( {product.modules && product.modules.length > 0 && (
<span className="text-[10px] text-slate-500 mt-1 pl-7 font-normal"> <span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
{product.modules.length} optionale Module verfügbar {product.modules.length} optionale Module verfügbar
</span> </span>
)} )}
@@ -202,7 +229,7 @@ export function StepSoftware({
<RadioGroup <RadioGroup
value={sel?.productId ?? ''} value={sel?.productId ?? ''}
onValueChange={id => selectProduct(currentCategory.id, id)} onValueChange={id => selectProduct(currentCategory.id, id)}
className="grid gap-3" className="grid gap-2.5"
> >
{catProducts.map(product => { {catProducts.map(product => {
const disabled = isProductDisabled(product, currentCategory.id) const disabled = isProductDisabled(product, currentCategory.id)
@@ -217,21 +244,21 @@ export function StepSoftware({
/> />
<Label <Label
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`} htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed' ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
: isChecked : isChecked
? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]' ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
: 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer' : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
}`} }`}
> >
<div className="flex justify-between w-full items-center"> <div className="flex justify-between w-full items-center">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2.5">
<span className="font-bold text-sm text-white">{product.name}</span> <span className="font-bold text-xs text-white">{product.name}</span>
<span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}> <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'} {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
</span> </span>
</div> </div>
<span className="text-primary font-bold text-sm"> <span className="text-primary font-bold text-xs">
{new Intl.NumberFormat('de-DE', { {new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
currency: 'EUR', currency: 'EUR',
@@ -240,7 +267,7 @@ export function StepSoftware({
</span> </span>
</div> </div>
{product.description && ( {product.description && (
<span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span> <span className="text-[11px] text-slate-400 mt-1.5 font-normal leading-relaxed">{product.description}</span>
)} )}
{product.modules && product.modules.length > 0 && ( {product.modules && product.modules.length > 0 && (
<span className="text-[10px] text-slate-500 mt-1 font-normal"> <span className="text-[10px] text-slate-500 mt-1 font-normal">
@@ -254,14 +281,14 @@ export function StepSoftware({
</RadioGroup> </RadioGroup>
)} )}
{/* Modules */} {/* Modules Section */}
{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-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
<p className="text-sm font-bold text-white flex items-center gap-2"> <p className="text-xs font-bold text-white flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-primary" /> <span className="w-1.5 h-1.5 rounded-full bg-primary" />
Zusatzmodule für {selectedProduct.name} Zusatzmodule für {selectedProduct.name}
</p> </p>
<div className="space-y-2.5"> <div className="space-y-2">
{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 ?? [])
@@ -270,13 +297,13 @@ export function StepSoftware({
<div <div
key={module.id} key={module.id}
title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined} title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${ className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
isExistingLicense isExistingLicense
? 'border-primary/20 bg-primary/5 opacity-75' ? 'border-primary/20 bg-primary/5 opacity-75'
: disabled : disabled
? 'border-white/5 bg-white/5 opacity-40' ? 'border-white/5 bg-white/5 opacity-40'
: checked : checked
? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] text-white' ? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40 text-white'
: 'border-white/5 bg-white/5 hover:bg-white/10' : 'border-white/5 bg-white/5 hover:bg-white/10'
}`} }`}
> >
@@ -286,12 +313,12 @@ 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-white/20 data-[state=checked]:bg-primary mt-0.5"
/> />
<div className="flex-1"> <div className="flex-1 min-w-0">
<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-xs flex justify-between text-white ${
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer' isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
}`} }`}
> >
@@ -303,9 +330,9 @@ export function StepSoftware({
</span> </span>
)} )}
</span> </span>
<span className="text-primary font-bold text-sm"> <span className="text-primary font-bold text-xs ml-2 shrink-0">
{isExistingLicense ? ( {isExistingLicense ? (
<span className="text-slate-500 text-xs font-normal">inkl.</span> <span className="text-slate-500 text-[11px] font-normal">inkl.</span>
) : ( ) : (
<>+{new Intl.NumberFormat('de-DE', { <>+{new Intl.NumberFormat('de-DE', {
style: 'currency', style: 'currency',
@@ -315,10 +342,10 @@ export function StepSoftware({
</span> </span>
</Label> </Label>
{module.description && ( {module.description && (
<p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p> <p className="text-[11px] text-slate-400 mt-1 leading-relaxed">{module.description}</p>
)} )}
{!isExistingLicense && disabled && ( {!isExistingLicense && disabled && (
<p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1"> <p className="text-[10px] text-red-400 mt-1 font-medium flex items-center gap-1">
<AlertCircle className="w-3 h-3 text-red-400 shrink-0" /> <AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
{module.requirements?.length && !module.requirements.some( {module.requirements?.length && !module.requirements.some(
reqId => sel?.moduleIds.includes(reqId) reqId => sel?.moduleIds.includes(reqId)
@@ -332,8 +359,8 @@ export function StepSoftware({
{/* Scalable Quantity */} {/* Scalable Quantity */}
{checked && !isExistingLicense && module.has_quantity && ( {checked && !isExistingLicense && module.has_quantity && (
<div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5"> <div className="flex items-center gap-3 mt-3 pl-7 pt-2.5 border-t border-white/5">
<Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label> <Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium">Menge:</Label>
<Input <Input
id={`qty-${module.id}`} id={`qty-${module.id}`}
type="number" type="number"
@@ -344,9 +371,9 @@ export function StepSoftware({
const val = Math.max(1, parseInt(e.target.value) || 1) const val = Math.max(1, parseInt(e.target.value) || 1)
setModuleQuantities(prev => ({ ...prev, [module.id]: val })) setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
}} }}
className="w-16 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary" className="w-16 h-7 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
/> />
<span className="text-xs text-slate-400"> <span className="text-[11px] text-slate-400">
Gesamt:{' '} Gesamt:{' '}
<span className="text-primary font-bold"> <span className="text-primary font-bold">
{new Intl.NumberFormat('de-DE', { {new Intl.NumberFormat('de-DE', {
@@ -363,6 +390,18 @@ export function StepSoftware({
</div> </div>
</div> </div>
)} )}
{/* Inline Validation Warnings */}
{productValidationErrors.length > 0 && (
<div className="p-3 rounded-xl bg-red-500/10 border border-red-500/30 space-y-1">
{productValidationErrors.map((err, errIdx) => (
<p key={errIdx} className="text-xs text-red-400 flex items-center gap-1.5 font-medium">
<AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
{err}
</p>
))}
</div>
)}
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
</CardContent> </CardContent>

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

@@ -1,11 +1,32 @@
'use client' 'use client'
import React from 'react' import React, { useState } from 'react'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card' import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react' import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import {
ShieldCheck,
Building2,
Calendar,
Loader2,
CheckCircle2,
Pencil,
Trash2,
Plus,
ChevronLeft,
MessageSquare,
FileText,
Lock,
Check,
X,
CreditCard,
User,
MapPin,
Send,
} from 'lucide-react'
import * as Icons from 'lucide-react' import * as Icons from 'lucide-react'
import { Category, Product, EndCustomer, Profile } from '@/lib/types' import { Category, Product, EndCustomer, Profile } from '@/lib/types'
@@ -70,300 +91,424 @@ export function StepSummary({
onAddNewBasketItem, onAddNewBasketItem,
onDeleteBasketItem, onDeleteBasketItem,
}: StepSummaryProps) { }: StepSummaryProps) {
const [confirmDeleteIdx, setConfirmDeleteIdx] = React.useState<number | null>(null) const [confirmDeleteIdx, setConfirmDeleteIdx] = useState<number | null>(null)
const [acceptedTerms, setAcceptedTerms] = useState(false)
const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
const totalPositionsCount = finalItemsToShow.length
const primaryInterval = finalItemsToShow[0]?.billingInterval || 'monthly'
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left"> <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
{/* LINKER BEREICH: Scrollbares Bedienfeld */} {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
<div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6"> <CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
<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 items-center justify-between gap-3">
<div className="flex items-center gap-3">
{/* Header & Status Stepper */} <div className="w-10 h-10 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/40 shrink-0 text-primary">
<div className="space-y-4"> <ShieldCheck className="w-5 h-5" />
<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">
<ShieldCheck className="w-6 h-6 text-primary" />
</div>
<div>
<h2 className="text-2xl font-extrabold text-white tracking-tight">
Anfrage prüfen
</h2>
<p className="text-slate-400 text-xs mt-0.5">
Fast fertig! Bitte überprüfen Sie Ihre ausgewählte Konfiguration.
</p>
</div>
</div> </div>
<div>
<CardTitle className="text-xl font-bold text-white flex items-center gap-2">
</div> Anfrage prüfen & absenden
</CardTitle>
{/* Kunden-Info Card */} <CardDescription className="text-xs text-slate-300 mt-0.5">
{selectedEndCustomer && ( Überprüfen Sie alle konfigurierten Kassen, Positionen und Konditionen vor der Freigabe.
<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-2"> </CardDescription>
<div className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-wider">
<Building2 className="w-4 h-4" />
<span>Ausgewählter Endkunde</span>
</div>
<p className="text-white font-bold text-sm">{selectedEndCustomer.company_name}</p>
<p className="text-slate-400 text-xs">Ansprechpartner: {[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}</p>
<p className="text-slate-400 text-xs">Adresse: {[selectedEndCustomer.street, [selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}</p>
</div> </div>
)}
{/* Anmerkungen / Notizfeld */}
<div className="space-y-2 pt-2">
<label htmlFor="order-notes" className="block text-xs font-bold text-white uppercase tracking-wider">
Anmerkungen / Hinweise (optional)
</label>
<textarea
id="order-notes"
rows={4}
value={orderNotes}
onChange={e => setOrderNotes(e.target.value)}
placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
className="w-full p-3 rounded-xl bg-white/5 border border-white/10 text-xs text-white placeholder-slate-500 focus:border-primary focus:outline-none transition-colors duration-200 resize-none shadow-inner"
/>
</div>
<p className="text-[10px] text-slate-500 leading-relaxed">
Mit dem Klick auf „{initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'}“ akzeptieren Sie unsere AGB und die{' '}
<a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
Datenschutzerklärung
</a>.
</p>
{/* Aktions-Buttons */}
<div className="space-y-3 pt-2">
<Button
className="w-full h-12 text-sm font-bold bg-primary hover:bg-primary/90 shadow-[0_0_15px_rgba(59,130,246,0.2)] rounded-xl"
onClick={handleSubmit}
disabled={isSubmitting}
>
{isSubmitting ? (
initialOrder ? (
<><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird aktualisiert...</>
) : (
<><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird versendet...</>
)
) : (
initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'
)}
</Button>
<Button variant="ghost" className="w-full text-slate-400 hover:text-white text-xs h-10" onClick={prevStep}>
Noch etwas ändern
</Button>
</div> </div>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
Schritt 4 von 4
</Badge>
</div> </div>
</div> </CardHeader>
{/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */} {/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
<div className="lg:col-span-7 flex flex-col h-full overflow-hidden pl-4"> <div className="flex-1 min-h-0 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col h-full"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-7xl mx-auto w-full items-start">
<CardHeader className="shrink-0 border-b border-white/5 pb-4"> {/* ─── LINKES RASTER (lg:col-span-7) – Auftragsübersicht & Kassen ─── */}
<CardTitle className="text-lg text-white flex items-center justify-between font-bold flex-wrap gap-2"> <div className="lg:col-span-7 space-y-5">
<div className="flex items-center gap-2"> {/* Kopf-Card: Endkunde & Abrechnungsmodell */}
<span>Zusammenfassung der Positionen</span> <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
<Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full"> <div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2.5 flex-wrap">
{finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'} <div className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-wider">
</Badge> <Building2 className="w-4 h-4" />
<span>Kunde & Abrechnung</span>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="text-[10px] bg-primary/10 border-primary/30 text-primary font-semibold">
{primaryInterval === 'one_time' ? 'Einmalkauf' : 'Monatliches Abo'}
</Badge>
{lastLicenseDate && (
<Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/30 text-emerald-400">
Stichtag: {new Date(lastLicenseDate).toLocaleDateString('de-DE')}
</Badge>
)}
</div>
</div> </div>
{onAddNewBasketItem && (
<Button
type="button"
variant="outline"
size="sm"
onClick={onAddNewBasketItem}
className="border-dashed border-primary/50 text-primary hover:bg-primary/10 text-xs font-bold gap-1.5 h-8 rounded-lg"
>
<Icons.UserPlus className="w-3.5 h-3.5" /> + Weitere Kasse anlegen
</Button>
)}
</CardTitle>
</CardHeader>
{/* Scrollbarer Content der Aufschlüsselung */} {selectedEndCustomer ? (
<CardContent className="space-y-6 text-left flex-1 overflow-y-auto pt-6 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent pr-2"> <div className="space-y-1">
<div className="space-y-6"> <h4 className="text-sm font-bold text-white">{selectedEndCustomer.company_name}</h4>
{finalItemsToShow.map((item, itemIdx) => ( <div className="flex items-center gap-3 text-xs text-slate-300 flex-wrap">
<div key={itemIdx} className="space-y-3 border-b border-white/5 pb-5 last:border-0 last:pb-0"> {(selectedEndCustomer.first_name || selectedEndCustomer.last_name) && (
<div <span className="flex items-center gap-1">
onClick={() => onEditBasketItem && onEditBasketItem(itemIdx)} <User className="w-3 h-3 text-slate-400" />
className={`flex justify-between items-center bg-white/5 p-3 rounded-xl border border-white/10 ${onEditBasketItem ? 'cursor-pointer hover:border-primary/50 hover:bg-white/10 transition-all group' : ''}`} {[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}
>
<div className="flex items-center gap-2">
<span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
{item.licenseNumber && (
<span className="text-[10px] text-slate-400">({item.licenseNumber})</span>
)}
</div>
<div className="flex items-center gap-2">
<span className={`text-[10px] px-2 py-0.5 rounded border ${item.billingInterval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
</span> </span>
{onEditBasketItem && ( )}
<Button {(selectedEndCustomer.street || selectedEndCustomer.zip || selectedEndCustomer.city) && (
type="button" <span className="flex items-center gap-1">
variant="ghost" <MapPin className="w-3 h-3 text-slate-400" />
size="sm" {[selectedEndCustomer.street, [selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
className="h-7 px-2 text-xs text-slate-300 group-hover:text-primary group-hover:bg-primary/20 gap-1 rounded-lg" </span>
> )}
<Icons.Pencil className="w-3 h-3" /> Bearbeiten {selectedEndCustomer.vat_id && (
</Button> <span className="text-slate-400">USt-IdNr: {selectedEndCustomer.vat_id}</span>
)} )}
{onDeleteBasketItem && (
<Button
type="button"
variant={confirmDeleteIdx === itemIdx ? "destructive" : "ghost"}
size="sm"
onClick={(e) => {
e.stopPropagation()
if (confirmDeleteIdx === itemIdx) {
onDeleteBasketItem(itemIdx)
setConfirmDeleteIdx(null)
} else {
setConfirmDeleteIdx(itemIdx)
}
}}
onMouseLeave={() => setConfirmDeleteIdx(null)}
className={`h-7 px-2 text-xs transition-all ${
confirmDeleteIdx === itemIdx
? 'bg-red-600 text-white hover:bg-red-700 font-bold px-3 shadow-[0_0_10px_rgba(220,38,38,0.5)]'
: 'text-slate-400 hover:text-red-400 hover:bg-red-500/20'
} gap-1 rounded-lg`}
>
<Icons.Trash2 className="w-3.5 h-3.5" />
{confirmDeleteIdx === itemIdx ? 'Wirklich löschen?' : 'Löschen'}
</Button>
)}
</div>
</div> </div>
</div>
) : (
<p className="text-xs text-slate-400 italic">Kein Endkunde zugewiesen (Partner-Bestellung).</p>
)}
</div>
{visibleCategories.map(cat => { {/* Kassenliste */}
const sel = item.selections[cat.id] <div className="space-y-3">
const selectedProds: Product[] = [] <div className="flex items-center justify-between">
if (cat.allow_multiselect && sel?.productIds) { <h3 className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center gap-2">
sel.productIds.forEach((pId: string) => { <span>Enthaltene Kassen ({finalItemsToShow.length})</span>
const p = products.find(prod => prod.id === pId) </h3>
if (p) selectedProds.push(p) {onAddNewBasketItem && (
}) <Button
} else if (sel?.productId) { type="button"
const p = products.find(prod => prod.id === sel.productId) variant="outline"
if (p) selectedProds.push(p) size="sm"
} onClick={onAddNewBasketItem}
className="border-dashed border-primary/40 text-primary hover:bg-primary/10 text-xs font-semibold gap-1.5 h-7"
>
<Plus className="w-3 h-3" /> Weitere Kasse hinzufügen
</Button>
)}
</div>
if (selectedProds.length === 0) return null {finalItemsToShow.length === 0 ? (
<div className="p-6 rounded-2xl bg-white/5 border border-white/10 text-center space-y-2">
<p className="text-xs text-slate-400 font-medium">Keine Kassen in der Aufstellung vorhanden.</p>
</div>
) : (
finalItemsToShow.map((item, itemIdx) => (
<div
key={itemIdx}
className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3 relative overflow-hidden"
>
{/* Kassen Header Bar */}
<div className="flex justify-between items-center bg-slate-950/40 p-2.5 rounded-xl border border-white/5">
<div className="flex items-center gap-2 min-w-0">
<span className="text-white font-bold text-xs truncate">
{item.deviceName || `Kasse ${itemIdx + 1}`}
</span>
{itemIdx > 0 && (
<Badge variant="outline" className="text-[9px] px-1.5 py-0 border-emerald-500/30 text-emerald-400 bg-emerald-500/10 shrink-0">
Kasse 2+
</Badge>
)}
{item.licenseNumber && (
<span className="text-[10px] text-slate-400 font-mono truncate">
({item.licenseNumber})
</span>
)}
</div>
const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price) <div className="flex items-center gap-1.5 shrink-0">
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0 <Badge
variant="outline"
className={`text-[9px] px-2 py-0.5 font-semibold ${
item.billingInterval === 'one_time'
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
: 'border-blue-500/30 text-blue-400 bg-blue-500/10'
}`}
>
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
</Badge>
return ( {onEditBasketItem && (
<div key={cat.id} className="text-sm space-y-2 pl-2"> <Button
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">{cat.name}:</span> type="button"
{sortedProds.map((prod, idx) => { variant="ghost"
const isFree = idx < freeLimit size="sm"
const isAbo = item.billingInterval === 'monthly' onClick={() => onEditBasketItem(itemIdx)}
const displayPrice = isFree ? 0 : (isAbo ? ((prod as any).monthly_price ?? prod.base_price) : prod.base_price) className="h-7 px-2 text-xs text-slate-300 hover:text-primary hover:bg-primary/20 gap-1 rounded-lg"
return ( title="Kasse in Schritt 3 bearbeiten"
<div key={prod.id} className="flex justify-between text-slate-200"> >
<span className="flex items-center gap-1.5"> <Pencil className="w-3 h-3" /> Bearbeiten
<CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" /> </Button>
{prod.name} )}
{isFree && <span className="text-[9px] bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded border border-green-500/30 font-bold uppercase">Inklusive</span>}
</span>
<span className="font-bold text-xs text-white">
{isFree ? '0,00 €' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(displayPrice)}
</span>
</div>
)
})}
{/* Selected Modules */} {onDeleteBasketItem && (
{sel?.moduleIds && sel.moduleIds.length > 0 && ( <Button
<div className="pl-4 space-y-1.5 pt-1"> type="button"
{sel.moduleIds.map((mId: string) => { variant={confirmDeleteIdx === itemIdx ? 'destructive' : 'ghost'}
let modObj: any = null size="sm"
products.forEach(p => { onClick={(e) => {
const found = p.modules?.find(m => m.id === mId) e.stopPropagation()
if (found) modObj = found if (confirmDeleteIdx === itemIdx) {
}) onDeleteBasketItem(itemIdx)
if (!modObj) return null setConfirmDeleteIdx(null)
} else {
setConfirmDeleteIdx(itemIdx)
}
}}
onMouseLeave={() => setConfirmDeleteIdx(null)}
className={`h-7 px-2 text-xs transition-all ${
confirmDeleteIdx === itemIdx
? 'bg-red-600 text-white hover:bg-red-700 font-bold px-2.5 shadow-md shadow-red-500/30'
: 'text-slate-400 hover:text-red-400 hover:bg-red-500/20'
} gap-1 rounded-lg`}
title="Kasse entfernen"
>
<Trash2 className="w-3 h-3" />
{confirmDeleteIdx === itemIdx ? 'Wirklich löschen?' : ''}
</Button>
)}
</div>
</div>
{/* Enthaltene Produkte & Module */}
<div className="space-y-2 text-xs">
{visibleCategories.map((cat) => {
const sel = item.selections[cat.id]
const selectedProds: Product[] = []
if (cat.allow_multiselect && sel?.productIds) {
sel.productIds.forEach((pId: string) => {
const p = products.find((prod) => prod.id === pId)
if (p) selectedProds.push(p)
})
} else if (sel?.productId) {
const p = products.find((prod) => prod.id === sel.productId)
if (p) selectedProds.push(p)
}
if (selectedProds.length === 0) return null
const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
return (
<div key={cat.id} className="space-y-1 pl-1">
<span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">
{cat.name}:
</span>
{sortedProds.map((prod, idx) => {
const isFree = idx < freeLimit
const isAbo = item.billingInterval === 'monthly' const isAbo = item.billingInterval === 'monthly'
const qty = item.moduleQuantities?.[mId] || 1 const displayPrice = isFree ? 0 : isAbo ? ((prod as any).monthly_price ?? prod.base_price) : prod.base_price
const unitPrice = isAbo ? (modObj.monthly_price ?? modObj.price) : modObj.price
const totalPrice = unitPrice * qty
return ( return (
<div key={mId} className="flex justify-between text-slate-400 text-xs"> <div key={prod.id} className="flex justify-between items-center text-slate-200 pl-2">
<span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span> <span className="flex items-center gap-1.5 truncate pr-2">
<span className="font-semibold text-slate-300"> <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)} <span className="truncate">{prod.name}</span>
{isFree && (
<span className="text-[9px] bg-green-500/20 text-green-400 px-1.5 py-0.2 rounded border border-green-500/30 font-bold uppercase shrink-0">
Inklusive
</span>
)}
</span>
<span className="font-bold text-xs text-white tabular-nums shrink-0">
{isFree ? '0,00 €' : fmt(displayPrice)}
</span> </span>
</div> </div>
) )
})} })}
</div>
)}
</div>
)
})}
</div>
))}
{/* Gebühren & Zusatz-Positionen */} {/* Selected Module Chips */}
{sel?.moduleIds && sel.moduleIds.length > 0 && (
<div className="pl-6 space-y-1 pt-0.5">
{sel.moduleIds.map((mId: string) => {
let modObj: any = null
products.forEach((p) => {
const found = p.modules?.find((m) => m.id === mId)
if (found) modObj = found
})
if (!modObj) return null
const isAbo = item.billingInterval === 'monthly'
const qty = item.moduleQuantities?.[mId] || 1
const unitPrice = isAbo ? (modObj.monthly_price ?? modObj.price) : modObj.price
const totalPrice = unitPrice * qty
return (
<div key={mId} className="flex justify-between text-slate-400 text-[11px]">
<span className="truncate pr-2">
+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}
</span>
<span className="font-semibold text-slate-300 tabular-nums shrink-0">
{fmt(totalPrice)}
</span>
</div>
)
})}
</div>
)}
</div>
)
})}
</div>
</div>
))
)}
{/* Service- & Zusatz-Positionen */}
{linkedFeeProducts.length > 0 && ( {linkedFeeProducts.length > 0 && (
<div className="border-t border-white/5 pt-4 space-y-2"> <div className="p-3.5 rounded-2xl bg-white/5 border border-white/10 space-y-2">
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">Service & Gebühren:</span> <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">
{linkedFeeProducts.map(fp => ( Service & Gebühren:
</span>
{linkedFeeProducts.map((fp) => (
<div key={fp.id} className="flex justify-between text-xs text-slate-300"> <div key={fp.id} className="flex justify-between text-xs text-slate-300">
<span>{fp.name}</span> <span>{fp.name}</span>
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span> <span className="font-bold text-white tabular-nums">{fmt(fp.base_price)}</span>
</div> </div>
))} ))}
</div> </div>
)} )}
</div> </div>
</div>
{/* Summen-Berechnung */} {/* ─── RECHTES RASTER (lg:col-span-5) – Notizen, Bedingungen & Summen ─── */}
{oneTimeTotal > 0 ? ( <div className="lg:col-span-5 space-y-5">
<div className="space-y-2 border-t border-white/10 pt-5"> {/* Glassmorphism Preiskalkulation */}
<div className="flex justify-between text-xs text-slate-400"> <div className="p-5 rounded-2xl bg-slate-950/80 border border-white/10 space-y-3 shadow-xl">
<span>Netto-Gesamtbetrag:</span> <div className="flex items-center gap-2 pb-2 border-b border-white/10">
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span> <CreditCard className="w-4 h-4 text-primary" />
</div> <h3 className="text-xs font-bold text-white uppercase tracking-wider">
<div className="flex justify-between text-xs text-slate-400"> Gesamte Preiskalkulation
<span>zzgl. 19% MwSt.:</span> </h3>
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span> </div>
</div>
{updatePriceModifier.label && ( {oneTimeTotal > 0 && (
<div className="text-xs text-green-400 font-semibold bg-green-500/10 p-2.5 rounded-xl border border-green-500/20 my-1"> <div className="space-y-1.5 text-xs">
{updatePriceModifier.label} <div className="flex justify-between text-slate-400">
<span>Einmalig (netto):</span>
<span className="tabular-nums font-mono text-white">{fmt(oneTimeNet)}</span>
</div>
<div className="flex justify-between text-slate-400">
<span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums font-mono text-white">{fmt(oneTimeTax)}</span>
</div>
{updatePriceModifier?.label && (
<div className="text-[11px] text-green-400 font-semibold bg-green-500/10 p-2 rounded-lg border border-green-500/20 my-1">
{updatePriceModifier.label}
</div>
)}
<div className="flex justify-between text-sm font-bold text-white pt-2 border-t border-white/5">
<span>Einmalig gesamt (brutto):</span>
<span className="tabular-nums font-mono text-primary font-extrabold text-base">{fmt(oneTimeGross)}</span>
</div> </div>
)}
<div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
<span>Gesamtbetrag (brutto):</span>
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
</div> </div>
)}
{monthlyTotal > 0 && (
<div className={`space-y-1.5 text-xs ${oneTimeTotal > 0 ? 'pt-3 border-t border-white/10' : ''}`}>
<div className="flex justify-between text-slate-400">
<span>Monatlich (netto):</span>
<span className="tabular-nums font-mono text-white">{fmt(monthlyNet)} / mtl.</span>
</div>
<div className="flex justify-between text-slate-400">
<span>zzgl. 19% MwSt.:</span>
<span className="tabular-nums font-mono text-white">{fmt(monthlyTax)} / mtl.</span>
</div>
<div className="flex justify-between text-sm font-bold text-white pt-2 border-t border-white/5">
<span>Monatlich gesamt (brutto):</span>
<span className="tabular-nums font-mono text-primary font-extrabold text-base">{fmt(monthlyGross)} / mtl.</span>
</div>
</div>
)}
</div>
{/* Bestellnotizen */}
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-2">
<Label htmlFor="order-notes" className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-1.5">
<MessageSquare className="w-3.5 h-3.5 text-primary" />
<span>Bestellnotizen / Bemerkungen (optional)</span>
</Label>
<textarea
id="order-notes"
rows={3}
value={orderNotes}
onChange={(e) => setOrderNotes(e.target.value)}
placeholder="Besondere Hinweise, Wunschtermine oder Ansprechpartner..."
className="w-full p-3 rounded-xl bg-slate-950/70 border border-white/10 text-xs text-white placeholder:text-slate-500 focus:border-primary focus:outline-none transition-colors resize-none scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"
/>
</div>
{/* Lizenzbestimmungen & B2B-Workflow Checkbox */}
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
<div className="flex items-start gap-3">
<Checkbox
id="terms-checkbox"
checked={acceptedTerms}
onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
/>
<Label htmlFor="terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
Ich bestätige die Richtigkeit der Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
<a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
Datenschutzerklärung
</a>.
</Label>
</div> </div>
) : (
<div className="space-y-2 border-t border-white/10 pt-5"> <div className="p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
<div className="flex justify-between text-xs text-slate-400"> <FileText className="w-4 h-4 text-primary shrink-0" />
<span>Netto-Gesamtbetrag:</span> <span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
</div>
<div className="flex justify-between text-xs text-slate-400">
<span>zzgl. 19% MwSt.:</span>
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
</div>
<div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
<span>Gesamtbetrag (brutto):</span>
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
</div>
</div> </div>
)} </div>
</CardContent> </div>
</Card> </div>
</div> </div>
</div>
{/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
<div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
{/* Back Button */}
<Button
variant="outline"
onClick={prevStep}
className="w-full sm:w-auto border-white/10 text-white hover:bg-white/10 h-9 text-xs gap-1.5"
>
<ChevronLeft className="w-4 h-4" /> Zurück zu Schritt 3
</Button>
{/* Info Chip */}
<div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white text-xs">
<span className="text-slate-400">Positionen:</span>
<strong className="text-white">{finalItemsToShow.length} Kassen</strong>
<span className="text-slate-600">|</span>
<span className="text-primary font-bold">
{oneTimeTotal > 0 ? fmt(oneTimeGross) : `${fmt(monthlyGross)} / mtl.`}
</span>
</div>
{/* Submit Button */}
<Button
onClick={handleSubmit}
disabled={isSubmitting || !acceptedTerms || finalItemsToShow.length === 0}
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-bold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-2"
>
{isSubmitting ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
{initialOrder ? 'Anfrage wird aktualisiert...' : 'Anfrage wird übertragen...'}
</>
) : (
<>
<Send className="w-3.5 h-3.5" />
{initialOrder ? 'Anfrage aktualisieren' : 'Anfrage verbindlich absenden'}
</>
)}
</Button>
</div>
</Card>
) )
} }

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

@@ -2,20 +2,20 @@
import React from 'react' import React from 'react'
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card' import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Pencil, Trash2, UserPlus, ChevronRight, AlertCircle, Check } from 'lucide-react' import { Badge } from '@/components/ui/badge'
import { Category, Product, CategorySelection } from '@/lib/types'
import { import {
Dialog, ChevronRight,
DialogContent, ChevronLeft,
DialogDescription, AlertCircle,
DialogFooter, Check,
DialogHeader, ShoppingCart,
DialogTitle, Save,
} from '@/components/ui/dialog' Plus,
} from 'lucide-react'
import { Category, Product, CategorySelection } from '@/lib/types'
interface SummarySidebarProps { interface SummarySidebarProps {
visibleCategories: Category[] visibleCategories: Category[]
@@ -34,19 +34,15 @@ interface SummarySidebarProps {
updatePriceModifier: { label?: string } updatePriceModifier: { label?: string }
allCategoriesFilled: boolean allCategoriesFilled: boolean
productValidationErrors: string[] productValidationErrors: string[]
basketItems: any[]
editingIdx: number | null editingIdx: number | null
editBasketItem: (idx: number) => void
deleteBasketItem: (idx: number) => void
deviceName: string deviceName: string
setDeviceName: (name: string) => void setDeviceName: (name: string) => void
licenseNumber: string licenseNumber: string
setLicenseNumber: (num: string) => void setLicenseNumber: (num: string) => void
addToBasket: () => void onSaveAndProceed: () => void
isNextStepDisabled: boolean isNextStepDisabled: boolean
hasActiveSelection: boolean hasActiveSelection: boolean
showValidationWarning?: boolean showValidationWarning?: boolean
nextStep: () => void
prevStep: () => void prevStep: () => void
} }
@@ -67,40 +63,56 @@ export function SummarySidebar({
updatePriceModifier, updatePriceModifier,
allCategoriesFilled, allCategoriesFilled,
productValidationErrors, productValidationErrors,
basketItems,
editingIdx, editingIdx,
editBasketItem,
deleteBasketItem,
deviceName, deviceName,
setDeviceName, setDeviceName,
licenseNumber, licenseNumber,
setLicenseNumber, setLicenseNumber,
addToBasket, onSaveAndProceed,
isNextStepDisabled, isNextStepDisabled,
hasActiveSelection,
showValidationWarning = false,
nextStep,
prevStep, prevStep,
}: SummarySidebarProps) { }: SummarySidebarProps) {
const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val) const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
return ( const isEditing = editingIdx !== null
<div className="h-full flex flex-col"> const currentDeviceTitle = isEditing
<Card className="bg-slate-900/80 backdrop-blur-xl border border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full"> ? `Kasse ${editingIdx + 1}`
<CardHeader className="shrink-0 pb-3 border-b border-white/5"> : (deviceName.trim() || 'Neue Kasse')
<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-4 pt-3 flex-1 flex flex-col overflow-hidden gap-3">
{/* Active Selections & Price - scrollable */} const isSaveDisabled = !allCategoriesFilled || productValidationErrors.length > 0
<div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
return (
<Card className="glass-dark border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full bg-slate-900/90 backdrop-blur-xl">
{/* ─── 1. TOP HEADER (shrink-0) ─── */}
<CardHeader className="shrink-0 pb-3 pt-4 px-4 border-b border-white/10 bg-slate-950/60">
<div className="flex items-center justify-between gap-2">
<CardTitle className="text-white text-sm font-bold flex items-center gap-2">
<ShoppingCart className="w-4 h-4 text-primary" />
<span>Kassen-Konfiguration</span>
</CardTitle>
<Badge
variant="outline"
className={`text-[10px] px-2 py-0.5 font-semibold ${
isEditing
? 'border-amber-500/40 bg-amber-500/10 text-amber-400'
: 'border-primary/40 bg-primary/10 text-primary'
}`}
>
{isEditing ? `Bearbeite #${editingIdx + 1}` : 'Neuer Eintrag'}
</Badge>
</div>
</CardHeader>
{/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
<CardContent className="p-4 flex-1 min-h-0 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{/* Aktuelle Kassen-Auswahl */}
<div className="space-y-3">
<div className="flex items-center justify-between text-xs font-bold text-slate-300 uppercase tracking-wider">
<span>Gewählte Positionen</span>
</div>
{/* Selected Categories List */}
<div className="space-y-2">
{visibleCategories.map(cat => { {visibleCategories.map(cat => {
const sel = selections[cat.id] const sel = selections[cat.id]
const selectedProds: Product[] = [] const selectedProds: Product[] = []
@@ -115,13 +127,13 @@ export function SummarySidebar({
} }
if (selectedProds.length === 0) return ( if (selectedProds.length === 0) return (
<div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1.5"> <div key={cat.id} className="text-[11px] text-slate-500 italic flex items-center gap-1.5">
{cat.is_required ? ( {cat.is_required ? (
<AlertCircle className="w-3 h-3 text-destructive shrink-0" /> <AlertCircle className="w-3 h-3 text-destructive shrink-0" />
) : ( ) : (
<span className="w-3 h-3 inline-block shrink-0" /> <span className="w-3 h-3 inline-block shrink-0" />
)} )}
<span>{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}</span> <span>{cat.name}: {cat.is_required ? 'nicht gewählt (Pflicht)' : 'nicht gewählt (optional)'}</span>
</div> </div>
) )
@@ -129,27 +141,26 @@ export function SummarySidebar({
const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0 const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
return ( return (
<div key={cat.id} className="space-y-1"> <div key={cat.id} className="space-y-0.5 text-xs">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{cat.name}</p> <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">{cat.name}</p>
{sortedProds.map((prod, idx) => { {sortedProds.map((prod, idx) => {
const isFree = idx < freeLimit const isFree = idx < freeLimit
const actualPrice = isFree ? 0 : prod.base_price const actualPrice = isFree ? 0 : prod.base_price
return ( return (
<div key={prod.id} className="space-y-0.5 pl-2"> <div key={prod.id} className="pl-1.5 space-y-0.5">
<div className="flex justify-between text-sm"> <div className="flex justify-between text-white text-xs">
<span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span> <span className="truncate pr-2">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Inkl.)</span>}</span>
<span className="text-white tabular-nums"> <span className="tabular-nums shrink-0 font-medium">
{fmt(actualPrice)} {fmt(actualPrice)}
{' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
</span> </span>
</div> </div>
{sel.moduleIds.map(mId => { {sel.moduleIds.map(mId => {
const mod = prod.modules?.find(m => m.id === mId) const mod = prod.modules?.find(m => m.id === mId)
const qty = moduleQuantities[mId] || 1 const qty = moduleQuantities[mId] || 1
return mod ? ( return mod ? (
<div key={mId} className="flex justify-between text-xs pl-2"> <div key={mId} className="flex justify-between text-[11px] text-slate-400 pl-2">
<span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span> <span className="truncate pr-2">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
<span className="text-slate-300 tabular-nums"> <span className="tabular-nums shrink-0 font-medium text-slate-300">
{fmt(mod.price * qty)} {fmt(mod.price * qty)}
</span> </span>
</div> </div>
@@ -161,150 +172,93 @@ export function SummarySidebar({
</div> </div>
) )
})} })}
</div>
{/* Pricing block */} {/* Pricing Box */}
<Separator className="bg-white/10" /> <div className="p-3 rounded-xl bg-slate-950/80 border border-white/10 space-y-2 text-xs">
{oneTimeTotal > 0 && monthlyTotal > 0 ? ( {oneTimeTotal > 0 && (
<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"> <div className="flex justify-between text-slate-400">
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Einmalig:</p> <span>Kaufpreis Kasse (netto):</span>
<div className="flex justify-between text-xs text-slate-400"> <span className="tabular-nums font-mono">{fmt(oneTimeNet)}</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-sm font-extrabold text-white pt-1">
<span>Brutto:</span>
<span className="tabular-nums text-sky-400">{fmt(oneTimeGross)}</span>
</div>
</div> </div>
<div className="space-y-1 pt-2 border-t border-white/10"> <div className="flex justify-between font-bold text-white">
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Monatlich:</p> <span>Kaufpreis Kasse (brutto):</span>
<div className="flex justify-between text-xs text-slate-400"> <span className="tabular-nums font-mono text-primary">{fmt(oneTimeGross)}</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-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 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:</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-extrabold text-sky-400 pt-1">
<span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(oneTimeGross)}</span>
</div>
</div>
) : (
<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:</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-extrabold text-sky-400 pt-1">
<span>Gesamt (brutto):</span>
<span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
</div> </div>
</div> </div>
)} )}
{updatePriceModifier.label && ( {monthlyTotal > 0 && (
<div className="text-xs text-green-400 bg-green-500/10 p-2.5 rounded-lg border border-green-500/20 space-y-1"> <div className={`space-y-1 ${oneTimeTotal > 0 ? 'pt-2 border-t border-white/10' : ''}`}>
<p className="font-semibold flex items-center gap-1"> <div className="flex justify-between text-slate-400">
<Check className="w-3.5 h-3.5" /> <span>Mietpreis Kasse (netto):</span>
Update-Rabatt aktiv <span className="tabular-nums font-mono">{fmt(monthlyNet)} / mtl.</span>
</p> </div>
<p>{updatePriceModifier.label}</p> <div className="flex justify-between font-bold text-white">
</div> <span>Mietpreis Kasse (brutto):</span>
)} <span className="tabular-nums font-mono text-primary">{fmt(monthlyGross)} / mtl.</span>
{!allCategoriesFilled && showValidationWarning && (
<div className="text-xs text-red-400 flex items-start gap-2 bg-red-500/10 p-3 rounded-xl border border-red-500/40 animate-eye-catcher">
<AlertCircle className="w-4 h-4 shrink-0 text-red-400 mt-0.5" />
<div>
<p className="font-extrabold uppercase tracking-wider text-[11px] text-red-300">Pflichtkategorie fehlt!</p>
<p className="text-[11px] text-slate-300 leading-relaxed">Bitte wählen Sie aus allen rot markierten Pflichtkategorien einen Artikel aus.</p>
</div> </div>
</div> </div>
)} )}
{!allCategoriesFilled && !showValidationWarning && ( </div>
<div className="text-xs text-slate-400 flex items-start gap-2 bg-slate-900/50 p-2.5 rounded-xl border border-white/5"> </div>
<AlertCircle className="w-4 h-4 shrink-0 text-slate-500 mt-0.5" />
<div> {/* Gerätename & Lizenznummer Eingabe */}
<p className="font-semibold text-[11px] text-slate-300">Pflichtkategorien beachten</p> <div className="pt-2 border-t border-white/10 space-y-2.5">
<p className="text-[11px] text-slate-400">Bitte wählen Sie für die Rot markierten Kategorien ein Produkt aus.</p> <p className="text-xs font-bold text-white uppercase tracking-wider">
</div> {isEditing ? `Kasse anpassen` : `Kassenbezeichnung`}
</div> </p>
)} <div className="space-y-1">
{productValidationErrors.map((err, errIdx) => ( <Label htmlFor="device-name-sidebar" className="text-[11px] text-slate-400">Kassenname (optional)</Label>
<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"> <Input
<AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" /> id="device-name-sidebar"
{err} placeholder="z. B. Kasse 1, Hauptkasse, Theke"
</p> value={deviceName}
))} onChange={e => setDeviceName(e.target.value)}
</div> {/* Kassenname & Lizenznummer Direkt-Eingabe */} className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg"
<div className="pt-3 border-t border-white/10 space-y-2.5"> />
<p className="text-xs font-bold text-white uppercase tracking-wider"> </div>
{editingIdx !== null ? `Kasse ${editingIdx + 1} bearbeiten` : `Kassenbezeichnung`} <div className="space-y-1">
</p> <Label htmlFor="license-number-sidebar" className="text-[11px] text-slate-400">Lizenznummer (optional)</Label>
<div className="space-y-1.5"> <Input
<Label htmlFor="device-name-sidebar" className="text-[11px] text-slate-400">Kassenname (optional)</Label> id="license-number-sidebar"
<Input placeholder="z. B. LIZ-12345"
id="device-name-sidebar" value={licenseNumber}
placeholder={`z.B. Kasse ${basketItems.length + 1}, Theke`} onChange={e => setLicenseNumber(e.target.value)}
value={deviceName} className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg font-mono uppercase"
onChange={e => setDeviceName(e.target.value)} />
className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg" </div>
/> </div>
</div> </CardContent>
<div className="space-y-1.5">
<Label htmlFor="license-number-sidebar" className="text-[11px] text-slate-400">Lizenznummer (optional)</Label> {/* ─── 3. FIXED BOTTOM ACTIONS (shrink-0) ─── */}
<Input <CardFooter className="flex flex-col gap-2 shrink-0 p-4 border-t border-white/10 bg-slate-950/90">
id="license-number-sidebar" {/* Primary Action Button: Save & Proceed immediately to Step 4 */}
placeholder="z.B. LIZ-12345 (eindeutig)" <Button
value={licenseNumber} className="w-full h-11 text-xs font-bold bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20 gap-2"
onChange={e => setLicenseNumber(e.target.value)} onClick={onSaveAndProceed}
className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg" disabled={isSaveDisabled}
/> >
</div> {isEditing ? (
</div> <>
</CardContent> <Save className="w-4 h-4" /> Änderungen speichern & zur Übersicht <ChevronRight className="w-4 h-4 ml-0.5" />
<CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80"> </>
<Button ) : (
className="w-full h-11 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} <Plus className="w-4 h-4" /> Kasse zum Auftrag hinzufügen <ChevronRight className="w-4 h-4 ml-0.5" />
disabled={isNextStepDisabled && basketItems.length === 0} </>
> )}
{editingIdx !== null ? ( </Button>
<>Änderungen für &quot;{basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`}&quot; übernehmen</>
) : ( {/* Back Button */}
<>Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" /></> <Button
)} variant="ghost"
</Button> className="w-full text-slate-400 hover:text-white h-7 text-xs"
<Button variant="ghost" className="w-full text-slate-400 hover:text-white h-7 text-xs" onClick={prevStep}> onClick={prevStep}
Zurück zum Abrechnungsmodell >
</Button> <ChevronLeft className="w-3 h-3 mr-1" /> Zurück zum Abrechnungsmodell
</CardFooter> </Button>
</Card> </CardFooter>
</div> </Card>
) )
} }