411 lines
21 KiB
TypeScript
411 lines
21 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Button } from '@/components/ui/button'
|
||
import { ShoppingCart, Check, AlertCircle, Lock, X, Info } from 'lucide-react'
|
||
import * as Icons from 'lucide-react'
|
||
import { motion, AnimatePresence } from 'framer-motion'
|
||
import { Category, Product, CategorySelection } from '@/lib/types'
|
||
|
||
interface StepSoftwareProps {
|
||
visibleCategories: Category[]
|
||
products: Product[]
|
||
selections: Record<string, CategorySelection>
|
||
selectProduct: (catId: string, prodId: string) => void
|
||
isProductDisabled: (prod: Product, catId: string) => boolean
|
||
isModuleDisabled: (mod: any, selectedModIds: string[]) => boolean
|
||
toggleModule: (catId: string, modId: string) => void
|
||
moduleQuantities: Record<string, number>
|
||
setModuleQuantities: React.Dispatch<React.SetStateAction<Record<string, number>>>
|
||
selectedBillingInterval: 'one_time' | 'monthly'
|
||
billingLabel: (interval: string) => string
|
||
billingBadgeClass: (interval: string) => string
|
||
/** Modul-IDs, die bereits lizenziert sind (Upgrade-Modus) */
|
||
existingModuleIds?: string[]
|
||
activeCategoryId: string | null
|
||
editingDeviceName?: string | null
|
||
onCancelEdit?: () => void
|
||
productValidationErrors?: string[]
|
||
}
|
||
|
||
export 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 StepSoftware({
|
||
visibleCategories,
|
||
products,
|
||
selections,
|
||
selectProduct,
|
||
isProductDisabled,
|
||
isModuleDisabled,
|
||
toggleModule,
|
||
moduleQuantities,
|
||
setModuleQuantities,
|
||
selectedBillingInterval,
|
||
billingLabel,
|
||
billingBadgeClass,
|
||
existingModuleIds = [],
|
||
activeCategoryId,
|
||
editingDeviceName = null,
|
||
onCancelEdit,
|
||
productValidationErrors = [],
|
||
}: StepSoftwareProps) {
|
||
const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
|
||
|
||
if (!currentCategory) return null
|
||
|
||
const catProducts = products.filter(p => {
|
||
if (p.category_id !== currentCategory.id) return false
|
||
return selectedBillingInterval === 'one_time'
|
||
? p.show_in_kauf !== false
|
||
: p.show_in_abo !== false
|
||
})
|
||
const sel = selections[currentCategory.id]
|
||
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
|
||
|
||
return (
|
||
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden">
|
||
{/* ─── FIXED CARD HEADER ─── */}
|
||
<CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 shrink-0 bg-slate-950/40">
|
||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||
<div className="flex items-center gap-2.5">
|
||
<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>
|
||
|
||
{editingDeviceName && (
|
||
<div className="flex items-center gap-2">
|
||
<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">
|
||
✏️ Bearbeite Kasse: "{editingDeviceName}"
|
||
</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>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
|
||
{/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
|
||
<CardContent className="p-5 space-y-5">
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={currentCategory.id}
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.2 }}
|
||
className="space-y-5"
|
||
>
|
||
{/* Category selection status header */}
|
||
{(() => {
|
||
const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0)
|
||
return (
|
||
<div className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all ${
|
||
isMissingRequired
|
||
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
|
||
: 'bg-white/5 border-white/10'
|
||
}`}>
|
||
<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'
|
||
}`}>
|
||
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<h3 className="font-bold text-white text-xs flex items-center gap-2 flex-wrap">
|
||
<span>{currentCategory.name}</span>
|
||
{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">
|
||
PFLICHTFELD AUSWÄHLEN!
|
||
</span>
|
||
)}
|
||
</h3>
|
||
<p className="text-slate-400 text-[11px] mt-0.5">
|
||
{currentCategory.allow_multiselect ? 'Mehrfachauswahl möglich' : 'Einzelauswahl'}
|
||
</p>
|
||
</div>
|
||
{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 shrink-0">
|
||
<Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
|
||
</Badge>
|
||
) : sel?.productId ? (
|
||
<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
|
||
</Badge>
|
||
) : 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 shrink-0">
|
||
<AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen!
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5 shrink-0">
|
||
Optional
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
)
|
||
})()}
|
||
|
||
{/* Products List */}
|
||
{catProducts.length === 0 ? (
|
||
<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.
|
||
</p>
|
||
) : currentCategory.allow_multiselect ? (
|
||
<div className="grid gap-2.5">
|
||
{catProducts.map(product => {
|
||
const isChecked = sel?.productIds?.includes(product.id) ?? false
|
||
const disabled = isProductDisabled(product, currentCategory.id)
|
||
return (
|
||
<div key={product.id} className="relative">
|
||
<Label
|
||
onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
|
||
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'
|
||
: isChecked
|
||
? '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'
|
||
}`}
|
||
>
|
||
<div className="flex justify-between w-full items-center">
|
||
<div className="flex items-center gap-2.5">
|
||
<Checkbox
|
||
checked={isChecked}
|
||
disabled={disabled}
|
||
onCheckedChange={() => { }}
|
||
className="border-white/20 data-[state=checked]:bg-primary rounded"
|
||
/>
|
||
<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`}>
|
||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
|
||
</span>
|
||
</div>
|
||
<span className="text-primary font-bold text-xs">
|
||
{new Intl.NumberFormat('de-DE', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
}).format(product.base_price)}{' '}
|
||
<span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
|
||
</span>
|
||
</div>
|
||
{product.description && (
|
||
<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 && (
|
||
<span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
|
||
{product.modules.length} optionale Module verfügbar
|
||
</span>
|
||
)}
|
||
</Label>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
) : (
|
||
<RadioGroup
|
||
value={sel?.productId ?? ''}
|
||
onValueChange={id => selectProduct(currentCategory.id, id)}
|
||
className="grid gap-2.5"
|
||
>
|
||
{catProducts.map(product => {
|
||
const disabled = isProductDisabled(product, currentCategory.id)
|
||
const isChecked = sel?.productId === product.id
|
||
return (
|
||
<div key={product.id} className="relative">
|
||
<RadioGroupItem
|
||
value={product.id}
|
||
id={`${currentCategory.id}-${product.id}`}
|
||
disabled={disabled}
|
||
className="peer sr-only"
|
||
/>
|
||
<Label
|
||
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
|
||
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'
|
||
: isChecked
|
||
? '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'
|
||
}`}
|
||
>
|
||
<div className="flex justify-between w-full items-center">
|
||
<div className="flex items-center gap-2.5">
|
||
<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`}>
|
||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
|
||
</span>
|
||
</div>
|
||
<span className="text-primary font-bold text-xs">
|
||
{new Intl.NumberFormat('de-DE', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
}).format(product.base_price)}{' '}
|
||
<span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
|
||
</span>
|
||
</div>
|
||
{product.description && (
|
||
<span className="text-[11px] text-slate-400 mt-1.5 font-normal leading-relaxed">{product.description}</span>
|
||
)}
|
||
{product.modules && product.modules.length > 0 && (
|
||
<span className="text-[10px] text-slate-500 mt-1 font-normal">
|
||
{product.modules.length} optionale Module verfügbar
|
||
</span>
|
||
)}
|
||
</Label>
|
||
</div>
|
||
)
|
||
})}
|
||
</RadioGroup>
|
||
)}
|
||
|
||
{/* Modules Section */}
|
||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||
<div className="mt-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
|
||
<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" />
|
||
Zusatzmodule für {selectedProduct.name}
|
||
</p>
|
||
<div className="space-y-2">
|
||
{selectedProduct.modules.map(module => {
|
||
const isExistingLicense = existingModuleIds.includes(module.id)
|
||
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
|
||
const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
|
||
return (
|
||
<div
|
||
key={module.id}
|
||
title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
|
||
className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
|
||
isExistingLicense
|
||
? 'border-primary/20 bg-primary/5 opacity-75'
|
||
: disabled
|
||
? 'border-white/5 bg-white/5 opacity-40'
|
||
: checked
|
||
? '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'
|
||
}`}
|
||
>
|
||
<div className="flex items-start space-x-3">
|
||
<Checkbox
|
||
id={`mod-${currentCategory.id}-${module.id}`}
|
||
checked={checked}
|
||
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
|
||
disabled={disabled}
|
||
className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<Label
|
||
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
||
className={`font-semibold text-xs flex justify-between text-white ${
|
||
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||
}`}
|
||
>
|
||
<span className="flex items-center gap-1.5 flex-wrap">
|
||
{module.name}
|
||
{isExistingLicense && (
|
||
<span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
|
||
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
|
||
</span>
|
||
)}
|
||
</span>
|
||
<span className="text-primary font-bold text-xs ml-2 shrink-0">
|
||
{isExistingLicense ? (
|
||
<span className="text-slate-500 text-[11px] font-normal">inkl.</span>
|
||
) : (
|
||
<>+{new Intl.NumberFormat('de-DE', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
}).format(module.price)}</>
|
||
)}
|
||
</span>
|
||
</Label>
|
||
{module.description && (
|
||
<p className="text-[11px] text-slate-400 mt-1 leading-relaxed">{module.description}</p>
|
||
)}
|
||
{!isExistingLicense && disabled && (
|
||
<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" />
|
||
{module.requirements?.length && !module.requirements.some(
|
||
reqId => sel?.moduleIds.includes(reqId)
|
||
)
|
||
? 'Benötigt weitere Module'
|
||
: 'Nicht kombinierbar mit aktueller Auswahl'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scalable Quantity */}
|
||
{checked && !isExistingLicense && module.has_quantity && (
|
||
<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-[11px] text-slate-400 font-medium">Menge:</Label>
|
||
<Input
|
||
id={`qty-${module.id}`}
|
||
type="number"
|
||
min={1}
|
||
max={999}
|
||
value={moduleQuantities[module.id] || 1}
|
||
onChange={(e) => {
|
||
const val = Math.max(1, parseInt(e.target.value) || 1)
|
||
setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
|
||
}}
|
||
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-[11px] text-slate-400">
|
||
Gesamt:{' '}
|
||
<span className="text-primary font-bold">
|
||
{new Intl.NumberFormat('de-DE', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
}).format(module.price * (moduleQuantities[module.id] || 1))}
|
||
</span>
|
||
</span>
|
||
</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>
|
||
</AnimatePresence>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|