e0d9c1d20e
- constrain viewport height on wizard routes in HeaderWrapper - remove nested scrollbar in step-software - add active module glows and tooltips for locked licenses - show device name badge in step 3 card header when editing - update main action button text in summary sidebar when editing - implement double-click inline delete confirmation in step-summary - animate customer accordion and add tab-index key bindings
370 lines
18 KiB
TypeScript
370 lines
18 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react'
|
|
import * as Icons from 'lucide-react'
|
|
import { Category, Product, EndCustomer, Profile } from '@/lib/types'
|
|
|
|
interface StepSummaryProps {
|
|
finalItemsToShow: any[]
|
|
visibleCategories: Category[]
|
|
products: Product[]
|
|
oneTimeTotal: number
|
|
monthlyTotal: number
|
|
oneTimeNet: number
|
|
oneTimeTax: number
|
|
oneTimeGross: number
|
|
monthlyNet: number
|
|
monthlyTax: number
|
|
monthlyGross: number
|
|
updatePriceModifier: { label?: string }
|
|
selectedEndCustomer: EndCustomer | null
|
|
customerData: Partial<Profile>
|
|
lastLicenseDate: string
|
|
handleSubmit: () => Promise<void>
|
|
isSubmitting: boolean
|
|
initialOrder: any
|
|
prevStep: () => void
|
|
linkedFeeProducts?: Product[]
|
|
orderNotes: string
|
|
setOrderNotes: (notes: string) => void
|
|
onEditBasketItem?: (idx: number) => void
|
|
onAddNewBasketItem?: () => void
|
|
onDeleteBasketItem?: (idx: number) => void
|
|
}
|
|
|
|
function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
|
|
const LucideIcon = icon ? (Icons as any)[icon] : null
|
|
if (!LucideIcon) return <Icons.HelpCircle className={className} />
|
|
return <LucideIcon className={className} />
|
|
}
|
|
|
|
export function StepSummary({
|
|
finalItemsToShow,
|
|
visibleCategories,
|
|
products,
|
|
oneTimeTotal,
|
|
monthlyTotal,
|
|
oneTimeNet,
|
|
oneTimeTax,
|
|
oneTimeGross,
|
|
monthlyNet,
|
|
monthlyTax,
|
|
monthlyGross,
|
|
updatePriceModifier,
|
|
selectedEndCustomer,
|
|
customerData,
|
|
lastLicenseDate,
|
|
handleSubmit,
|
|
isSubmitting,
|
|
initialOrder,
|
|
prevStep,
|
|
linkedFeeProducts = [],
|
|
orderNotes,
|
|
setOrderNotes,
|
|
onEditBasketItem,
|
|
onAddNewBasketItem,
|
|
onDeleteBasketItem,
|
|
}: StepSummaryProps) {
|
|
const [confirmDeleteIdx, setConfirmDeleteIdx] = React.useState<number | null>(null)
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left">
|
|
{/* LINKER BEREICH: Scrollbares Bedienfeld */}
|
|
<div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
|
|
<div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
|
|
|
{/* Header & Status Stepper */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
|
|
<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>
|
|
|
|
{/* Kunden-Info Card */}
|
|
{selectedEndCustomer && (
|
|
<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-2">
|
|
<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>
|
|
)}
|
|
|
|
{/* 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>
|
|
</div>
|
|
|
|
{/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */}
|
|
<div className="lg:col-span-7 flex flex-col h-full overflow-hidden pl-4">
|
|
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col h-full">
|
|
<CardHeader className="shrink-0 border-b border-white/5 pb-4">
|
|
<CardTitle className="text-lg text-white flex items-center justify-between font-bold flex-wrap gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<span>Zusammenfassung der Positionen</span>
|
|
<Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full">
|
|
{finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
|
|
</Badge>
|
|
</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 */}
|
|
<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-6">
|
|
{finalItemsToShow.map((item, itemIdx) => (
|
|
<div key={itemIdx} className="space-y-3 border-b border-white/5 pb-5 last:border-0 last:pb-0">
|
|
<div
|
|
onClick={() => onEditBasketItem && onEditBasketItem(itemIdx)}
|
|
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' : ''}`}
|
|
>
|
|
<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>
|
|
{onEditBasketItem && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs text-slate-300 group-hover:text-primary group-hover:bg-primary/20 gap-1 rounded-lg"
|
|
>
|
|
<Icons.Pencil className="w-3 h-3" /> Bearbeiten
|
|
</Button>
|
|
)}
|
|
{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>
|
|
|
|
{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="text-sm space-y-2 pl-2">
|
|
<span className="text-slate-500 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 displayPrice = isFree ? 0 : (isAbo ? ((prod as any).monthly_price ?? prod.base_price) : prod.base_price)
|
|
return (
|
|
<div key={prod.id} className="flex justify-between text-slate-200">
|
|
<span className="flex items-center gap-1.5">
|
|
<CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
|
|
{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 */}
|
|
{sel?.moduleIds && sel.moduleIds.length > 0 && (
|
|
<div className="pl-4 space-y-1.5 pt-1">
|
|
{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-xs">
|
|
<span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span>
|
|
<span className="font-semibold text-slate-300">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
|
|
</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
))}
|
|
|
|
{/* Gebühren & Zusatz-Positionen */}
|
|
{linkedFeeProducts.length > 0 && (
|
|
<div className="border-t border-white/5 pt-4 space-y-2">
|
|
<span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">Service & Gebühren:</span>
|
|
{linkedFeeProducts.map(fp => (
|
|
<div key={fp.id} className="flex justify-between text-xs text-slate-300">
|
|
<span>{fp.name}</span>
|
|
<span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Summen-Berechnung */}
|
|
{oneTimeTotal > 0 ? (
|
|
<div className="space-y-2 border-t border-white/10 pt-5">
|
|
<div className="flex justify-between text-xs text-slate-400">
|
|
<span>Netto-Gesamtbetrag:</span>
|
|
<span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</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(oneTimeTax)}</span>
|
|
</div>
|
|
{updatePriceModifier.label && (
|
|
<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">
|
|
{updatePriceModifier.label}
|
|
</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>
|
|
) : (
|
|
<div className="space-y-2 border-t border-white/10 pt-5">
|
|
<div className="flex justify-between text-xs text-slate-400">
|
|
<span>Netto-Gesamtbetrag:</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>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|