300 lines
14 KiB
TypeScript
300 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Pencil, Trash2, UserPlus, ChevronRight, AlertCircle, Check } from 'lucide-react'
|
|
import { Category, Product, CategorySelection } from '@/lib/types'
|
|
|
|
interface SummarySidebarProps {
|
|
visibleCategories: Category[]
|
|
selections: Record<string, CategorySelection>
|
|
products: Product[]
|
|
moduleQuantities: Record<string, number>
|
|
billingLabel: (interval: string) => string
|
|
oneTimeTotal: number
|
|
monthlyTotal: number
|
|
oneTimeNet: number
|
|
oneTimeTax: number
|
|
oneTimeGross: number
|
|
monthlyNet: number
|
|
monthlyTax: number
|
|
monthlyGross: number
|
|
updatePriceModifier: { label?: string }
|
|
allCategoriesFilled: boolean
|
|
productValidationErrors: string[]
|
|
basketItems: any[]
|
|
editingIdx: number | null
|
|
editBasketItem: (idx: number) => void
|
|
deleteBasketItem: (idx: number) => void
|
|
deviceName: string
|
|
setDeviceName: (name: string) => void
|
|
addToBasket: () => void
|
|
isNextStepDisabled: boolean
|
|
hasActiveSelection: boolean
|
|
nextStep: () => void
|
|
prevStep: () => void
|
|
}
|
|
|
|
export function SummarySidebar({
|
|
visibleCategories,
|
|
selections,
|
|
products,
|
|
moduleQuantities,
|
|
billingLabel,
|
|
oneTimeTotal,
|
|
monthlyTotal,
|
|
oneTimeNet,
|
|
oneTimeTax,
|
|
oneTimeGross,
|
|
monthlyNet,
|
|
monthlyTax,
|
|
monthlyGross,
|
|
updatePriceModifier,
|
|
allCategoriesFilled,
|
|
productValidationErrors,
|
|
basketItems,
|
|
editingIdx,
|
|
editBasketItem,
|
|
deleteBasketItem,
|
|
deviceName,
|
|
setDeviceName,
|
|
addToBasket,
|
|
isNextStepDisabled,
|
|
hasActiveSelection,
|
|
nextStep,
|
|
prevStep,
|
|
}: SummarySidebarProps) {
|
|
return (
|
|
<div className="sticky top-32 max-h-[70vh] flex flex-col">
|
|
<Card className="glass-dark border-primary/20 backdrop-blur-lg bg-slate-950/75 flex flex-col max-h-[70vh]">
|
|
<CardHeader className="shrink-0">
|
|
<CardTitle className="text-white">Zusammenfassung</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 flex-1 overflow-y-auto subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
|
{visibleCategories.map(cat => {
|
|
const sel = selections[cat.id]
|
|
const selectedProds: Product[] = []
|
|
if (cat.allow_multiselect && sel?.productIds) {
|
|
sel.productIds.forEach(pId => {
|
|
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 (
|
|
<div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1">
|
|
{cat.is_required ? (
|
|
<AlertCircle className="w-3 h-3 text-destructive" />
|
|
) : (
|
|
<span className="w-3 h-3 inline-block" />
|
|
)}
|
|
{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}
|
|
</div>
|
|
)
|
|
|
|
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">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400 font-medium">{cat.name}</span>
|
|
</div>
|
|
{sortedProds.map((prod, idx) => {
|
|
const isFree = idx < freeLimit
|
|
const actualPrice = isFree ? 0 : prod.base_price
|
|
return (
|
|
<div key={prod.id} className="space-y-0.5 pl-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span>
|
|
<span className="text-white">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(actualPrice)}
|
|
{' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
|
|
</span>
|
|
</div>
|
|
{sel.moduleIds.map(mId => {
|
|
const mod = prod.modules?.find(m => m.id === mId)
|
|
const qty = moduleQuantities[mId] || 1
|
|
return mod ? (
|
|
<div key={mId} className="flex justify-between text-xs pl-2">
|
|
<span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
|
|
<span className="text-slate-300">
|
|
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * qty)}
|
|
</span>
|
|
</div>
|
|
) : null
|
|
})}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
})}
|
|
<Separator className="bg-white/10" />
|
|
{oneTimeTotal > 0 && monthlyTotal > 0 ? (
|
|
<div className="space-y-3">
|
|
<div className="space-y-1">
|
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
|
|
<div className="flex justify-between text-xs text-slate-400">
|
|
<span>Netto:</span>
|
|
<span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm font-bold text-white">
|
|
<span>Gesamt (brutto):</span>
|
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1 pt-2 border-t border-white/10">
|
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
|
|
<div className="flex justify-between text-xs text-slate-400">
|
|
<span>Netto:</span>
|
|
<span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm font-bold text-white">
|
|
<span>Gesamt (brutto):</span>
|
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : oneTimeTotal > 0 ? (
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-xs text-slate-400">
|
|
<span>Netto-Gesamtbetrag:</span>
|
|
<span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
|
|
<span>Gesamtbetrag (brutto):</span>
|
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-xs text-slate-400">
|
|
<span>Netto-Gesamtbetrag:</span>
|
|
<span>{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>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
|
|
</div>
|
|
<div className="flex justify-between text-base font-bold text-blue-500 dark:text-blue-400">
|
|
<span>Gesamtbetrag (brutto):</span>
|
|
<span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{updatePriceModifier.label && (
|
|
<div className="text-xs text-green-400 bg-green-500/10 p-2.5 rounded-lg border border-green-500/20 space-y-1">
|
|
<p className="font-semibold flex items-center gap-1">
|
|
<Check className="w-3.5 h-3.5" />
|
|
Update-Rabatt aktiv
|
|
</p>
|
|
<p>{updatePriceModifier.label}</p>
|
|
</div>
|
|
)}
|
|
{!allCategoriesFilled && (
|
|
<p className="text-xs text-destructive flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
Bitte aus jeder Pflichtkategorie einen Artikel wählen.
|
|
</p>
|
|
)}
|
|
{productValidationErrors.map((err, errIdx) => (
|
|
<p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3 text-destructive" />
|
|
{err}
|
|
</p>
|
|
))}
|
|
{basketItems.length > 0 && (
|
|
<div className="pt-4 border-t border-white/10 space-y-2">
|
|
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Warenkorb ({basketItems.length}):</p>
|
|
<div className="space-y-1.5">
|
|
{basketItems.map((item, idx) => (
|
|
<div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
|
|
<div className="flex flex-col">
|
|
<span className="text-white font-medium">{item.deviceName}</span>
|
|
<span className="text-[10px] text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
|
|
onClick={() => editBasketItem(idx)}
|
|
title="Kasse bearbeiten"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
|
|
onClick={() => deleteBasketItem(idx)}
|
|
title="Kasse löschen"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
<CardFooter className="flex flex-col gap-3 shrink-0">
|
|
<div className="w-full space-y-2">
|
|
<Label htmlFor="device-name" className="text-xs text-slate-400">Kassenname (optional)</Label>
|
|
<Input
|
|
id="device-name"
|
|
placeholder="z.B. Hauptkasse, Theke"
|
|
value={deviceName}
|
|
onChange={e => setDeviceName(e.target.value)}
|
|
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
|
|
onClick={addToBasket}
|
|
disabled={isNextStepDisabled}
|
|
>
|
|
<UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Änderungen an Kasse speichern' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
|
|
</Button>
|
|
<Separator className="bg-white/10 my-1" />
|
|
<Button
|
|
className="w-full h-12 text-lg"
|
|
onClick={nextStep}
|
|
disabled={basketItems.length === 0 && isNextStepDisabled}
|
|
>
|
|
Weiter <ChevronRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
<Button variant="ghost" className="w-full text-white" onClick={prevStep}>
|
|
Zurück zum Abrechnungsmodell
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|