Compare commits
4 Commits
2f63d716f2
...
1c9ae2ec31
| Author | SHA1 | Date | |
|---|---|---|---|
|
1c9ae2ec31 | ||
|
|
af261ce923 | ||
|
|
60b9bd89ef | ||
|
|
f9cb3c0685 |
@@ -262,7 +262,8 @@ export async function checkoutAction(params: {
|
||||
);
|
||||
const itemsWithDevice = itemSnapshot.items.map(i => ({
|
||||
...i,
|
||||
device_name: item.deviceName
|
||||
device_name: item.deviceName,
|
||||
license_number: item.licenseNumber
|
||||
}));
|
||||
orderItemsList.push(...itemsWithDevice);
|
||||
total += itemSnapshot.total;
|
||||
|
||||
@@ -90,7 +90,8 @@ export async function POST(request: Request) {
|
||||
);
|
||||
const itemsWithDevice = itemSnapshot.items.map(i => ({
|
||||
...i,
|
||||
device_name: item.deviceName
|
||||
device_name: item.deviceName,
|
||||
license_number: item.licenseNumber
|
||||
}));
|
||||
orderItemsList.push(...itemsWithDevice);
|
||||
total += itemSnapshot.total;
|
||||
|
||||
@@ -17,14 +17,7 @@ export default async function OrderPage({ searchParams }: PageProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-primary/30">
|
||||
<div className="container mx-auto py-10">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
|
||||
Konfigurieren Sie Ihre Lösung
|
||||
</h1>
|
||||
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
|
||||
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<Suspense fallback={<div className="h-96 w-full animate-pulse bg-white/5 rounded-2xl" />}>
|
||||
<OrderDataWrapper
|
||||
|
||||
@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { Product, ProductModule, Profile, EndCustomer, Order } from '@/lib/types'
|
||||
import { submitOrder, updateOrder } from '@/lib/actions/orders'
|
||||
import { createEndCustomer } from '@/lib/actions/end-customers'
|
||||
import { isLicenseNumberTaken } from '@/lib/actions/queries'
|
||||
import { Category } from '@/lib/types'
|
||||
import { Check } from 'lucide-react'
|
||||
|
||||
@@ -166,6 +167,7 @@ export function OrderWizard({
|
||||
if (upgradeMode && lockedDeviceId) return `${lockedDeviceId} – Upgrade`
|
||||
return ''
|
||||
})
|
||||
const [licenseNumber, setLicenseNumber] = useState<string>('')
|
||||
const [editingIdx, setEditingIdx] = useState<number | null>(null)
|
||||
const [orderNotes, setOrderNotes] = useState<string>('')
|
||||
const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
|
||||
@@ -593,9 +595,27 @@ export function OrderWizard({
|
||||
}
|
||||
}
|
||||
|
||||
const addToBasket = () => {
|
||||
const addToBasket = async () => {
|
||||
const normLicense = licenseNumber.trim().toUpperCase()
|
||||
if (normLicense) {
|
||||
const isDuplicateInBasket = basketItems.some(
|
||||
(item, idx) => idx !== editingIdx && item.licenseNumber?.toUpperCase().trim() === normLicense
|
||||
)
|
||||
if (isDuplicateInBasket) {
|
||||
setToast({ message: `Lizenznummer "${licenseNumber}" ist bereits im aktuellen Warenkorb vorhanden.`, type: 'error' })
|
||||
return
|
||||
}
|
||||
|
||||
const isTaken = await isLicenseNumberTaken(normLicense, initialOrder?.id)
|
||||
if (isTaken) {
|
||||
setToast({ message: `Lizenznummer "${licenseNumber}" wird bereits von einer anderen Bestellung verwendet.`, type: 'error' })
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const currentItem = {
|
||||
deviceName: deviceName || (editingIdx !== null ? basketItems[editingIdx]?.deviceName : `Kasse ${basketItems.length + 1}`),
|
||||
licenseNumber: normLicense,
|
||||
selections: JSON.parse(JSON.stringify(selections)),
|
||||
moduleQuantities: { ...moduleQuantities },
|
||||
billingInterval: selectedBillingInterval,
|
||||
@@ -614,6 +634,7 @@ export function OrderWizard({
|
||||
|
||||
// Reset current form config
|
||||
setDeviceName('')
|
||||
setLicenseNumber('')
|
||||
setModuleQuantities({})
|
||||
const resetSels: Record<string, CategorySelection> = {}
|
||||
categories.forEach(cat => {
|
||||
@@ -636,6 +657,7 @@ export function OrderWizard({
|
||||
setSelections(item.selections)
|
||||
setModuleQuantities(item.moduleQuantities)
|
||||
setDeviceName(item.deviceName)
|
||||
setLicenseNumber(item.licenseNumber || '')
|
||||
setSelectedBillingInterval(item.billingInterval)
|
||||
}
|
||||
|
||||
@@ -644,6 +666,7 @@ export function OrderWizard({
|
||||
setEditingIdx(null)
|
||||
setModuleQuantities({})
|
||||
setDeviceName('')
|
||||
setLicenseNumber('')
|
||||
|
||||
const resetSels: Record<string, CategorySelection> = {}
|
||||
categories.forEach(cat => {
|
||||
@@ -668,8 +691,24 @@ export function OrderWizard({
|
||||
try {
|
||||
let finalItems = [...basketItems]
|
||||
if (hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
|
||||
const normLicense = licenseNumber.trim().toUpperCase()
|
||||
if (normLicense) {
|
||||
const isDuplicateInBasket = basketItems.some(
|
||||
(item, idx) => idx !== editingIdx && item.licenseNumber?.toUpperCase().trim() === normLicense
|
||||
)
|
||||
if (isDuplicateInBasket) {
|
||||
throw new Error(`Lizenznummer "${licenseNumber}" ist bereits im aktuellen Warenkorb vorhanden.`)
|
||||
}
|
||||
|
||||
const isTaken = await isLicenseNumberTaken(normLicense, initialOrder?.id)
|
||||
if (isTaken) {
|
||||
throw new Error(`Lizenznummer "${licenseNumber}" wird bereits von einer anderen Bestellung verwendet.`)
|
||||
}
|
||||
}
|
||||
|
||||
const currentItem = {
|
||||
deviceName: deviceName || (editingIdx !== null ? basketItems[editingIdx]?.deviceName : `Kasse ${basketItems.length + 1}`),
|
||||
licenseNumber: normLicense,
|
||||
selections: JSON.parse(JSON.stringify(selections)),
|
||||
moduleQuantities: { ...moduleQuantities },
|
||||
billingInterval: selectedBillingInterval,
|
||||
@@ -685,6 +724,20 @@ export function OrderWizard({
|
||||
throw new Error('Bitte konfigurieren Sie mindestens eine Kasse.')
|
||||
}
|
||||
|
||||
// Check all license numbers in finalItems for duplicates
|
||||
const licenseNumbers = finalItems.map(item => item.licenseNumber?.toUpperCase().trim()).filter(Boolean)
|
||||
const uniqueLicenses = new Set(licenseNumbers)
|
||||
if (uniqueLicenses.size !== licenseNumbers.length) {
|
||||
throw new Error('Eine Lizenznummer darf im Warenkorb nicht mehrfach verwendet werden.')
|
||||
}
|
||||
|
||||
for (const lic of uniqueLicenses) {
|
||||
const isTaken = await isLicenseNumberTaken(lic, initialOrder?.id)
|
||||
if (isTaken) {
|
||||
throw new Error(`Die Lizenznummer "${lic}" wird bereits von einer anderen Bestellung verwendet.`)
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch('/api/orders/checkout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -792,6 +845,18 @@ export function OrderWizard({
|
||||
|
||||
return (
|
||||
<div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}>
|
||||
{/* Dynamic Header */}
|
||||
{step !== 3 && (
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
|
||||
Konfigurieren Sie Ihre Lösung
|
||||
</h1>
|
||||
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
|
||||
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Global Stepper for Steps 1, 2, 4 */}
|
||||
{step !== 3 && (
|
||||
<div className="pt-12 pb-6">
|
||||
@@ -867,10 +932,10 @@ export function OrderWizard({
|
||||
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
|
||||
Software konfigurieren
|
||||
Konfigurieren Sie Ihre Lösung
|
||||
</h1>
|
||||
<p className="text-slate-400 text-sm">
|
||||
Klicken Sie sich durch die Kategorien und wählen Sie Ihre Lizenzen.
|
||||
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -885,20 +950,18 @@ export function OrderWizard({
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategoryId(cat.id)}
|
||||
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
|
||||
isActive
|
||||
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
|
||||
? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
|
||||
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{/* Left glow line for active category */}
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
|
||||
)}
|
||||
|
||||
<div className={`p-2 rounded-lg transition-colors ${
|
||||
isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
|
||||
}`}>
|
||||
<div className={`p-2 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
|
||||
}`}>
|
||||
<CategoryIcon icon={cat.icon} className="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
@@ -913,14 +976,14 @@ export function OrderWizard({
|
||||
|
||||
{/* Status indicators */}
|
||||
{hasSelection ? (
|
||||
<div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 shrink-0">
|
||||
<Check className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-green-500/30 text-green-400 bg-green-500/10">
|
||||
Ausgewählt
|
||||
</span>
|
||||
) : isRequired ? (
|
||||
<div className="w-2 h-2 rounded-full bg-red-500 shrink-0 animate-pulse" />
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-600 uppercase tracking-wider shrink-0 font-medium">Opt</span>
|
||||
)}
|
||||
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-red-500/30 text-red-400 bg-red-500/10">
|
||||
Erforderlich
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
@@ -992,6 +1055,8 @@ export function OrderWizard({
|
||||
deleteBasketItem={deleteBasketItem}
|
||||
deviceName={deviceName}
|
||||
setDeviceName={setDeviceName}
|
||||
licenseNumber={licenseNumber}
|
||||
setLicenseNumber={setLicenseNumber}
|
||||
addToBasket={addToBasket}
|
||||
isNextStepDisabled={isNextStepDisabled}
|
||||
hasActiveSelection={hasActiveSelection}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useMemo, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@@ -154,448 +155,469 @@ export function StepCustomer({
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-8">
|
||||
{/* ─── 1. ADMIN PARTNER SELECTION ─── */}
|
||||
{isAdmin && (
|
||||
<div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<Label className="text-white font-bold text-base flex items-center gap-2">
|
||||
<Building2 className="w-5 h-5 text-primary" />
|
||||
Partner-Auswahl (Admin-Funktion)
|
||||
</Label>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder "Alle Partner".
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
|
||||
Admin Modus
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Partner Header Controls: Search & Page Size */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Partner suchen..."
|
||||
value={partnerSearchTerm}
|
||||
onChange={(e) => setPartnerSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 self-end sm:self-auto">
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">Partner pro Seite:</span>
|
||||
<select
|
||||
value={partnerPageSize}
|
||||
onChange={(e) => setPartnerPageSize(Number(e.target.value))}
|
||||
className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
<option value={50}>50</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Partner Card List */}
|
||||
<div className="space-y-2 max-h-72 overflow-y-auto pr-1">
|
||||
{/* Reserved Fixed Card: Alle Partner */}
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedCompanyId('all')
|
||||
setSelectedEndCustomerId(null)
|
||||
}}
|
||||
className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
|
||||
selectedCompanyId === 'all' || !selectedCompanyId
|
||||
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white text-sm">
|
||||
Alle Partner (Firmenübergreifend)
|
||||
</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Zeigt Kunden aller registrierten Partnerunternehmen an
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-white/10 text-slate-300 text-xs bg-white/5">
|
||||
{endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
|
||||
</Badge>
|
||||
{(selectedCompanyId === 'all' || !selectedCompanyId) && (
|
||||
<Check className="w-5 h-5 text-primary shrink-0" />
|
||||
)}
|
||||
<div className={isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-8 items-start' : 'space-y-8'}>
|
||||
{/* ─── 1. ADMIN PARTNER SELECTION ─── */}
|
||||
{isAdmin && (
|
||||
<div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<Label className="text-white font-bold text-base flex items-center gap-2">
|
||||
<Building2 className="w-5 h-5 text-primary" />
|
||||
Partner-Auswahl (Admin-Funktion)
|
||||
</Label>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder "Alle Partner".
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
|
||||
Admin Modus
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Dynamic Partner Cards */}
|
||||
{paginatedCompanies.map((c: any) => {
|
||||
const isSelected = selectedCompanyId === c.id
|
||||
const customerCount = customerCountMap[c.id] || 0
|
||||
{/* Partner Header Controls: Search & Page Size */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Partner suchen..."
|
||||
value={partnerSearchTerm}
|
||||
onChange={(e) => setPartnerSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={c.id}
|
||||
onClick={() => {
|
||||
setSelectedCompanyId(c.id)
|
||||
setSelectedEndCustomerId(null)
|
||||
}}
|
||||
className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
<div className="flex items-center gap-2 self-end sm:self-auto">
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">Partner pro Seite:</span>
|
||||
<select
|
||||
value={partnerPageSize}
|
||||
onChange={(e) => setPartnerPageSize(Number(e.target.value))}
|
||||
className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
|
||||
<Building2 className="w-4 h-4 text-slate-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white text-sm">{c.name}</p>
|
||||
{(c.street || c.zip || c.city) && (
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
{[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
customerCount > 0
|
||||
? 'border-green-500/30 text-green-400 bg-green-500/10'
|
||||
: 'border-white/10 text-slate-500 bg-white/5'
|
||||
}`}
|
||||
>
|
||||
{customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'}
|
||||
</Badge>
|
||||
{isSelected && <Check className="w-5 h-5 text-primary shrink-0" />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{filteredCompanies.length === 0 && (
|
||||
<div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
|
||||
Keine Partner mit dem Suchbegriff "{partnerSearchTerm}" gefunden.
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
<option value={50}>50</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Partner Pagination Controls */}
|
||||
<div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
|
||||
<div>
|
||||
Zeige {totalPartnerCount === 0 ? 0 : (partnerCurrentPage - 1) * partnerPageSize + 1} bis{' '}
|
||||
{Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} von {totalPartnerCount} Partnern
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage(1)}
|
||||
disabled={partnerCurrentPage === 1}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Erste Seite"
|
||||
{/* Partner Card List */}
|
||||
<div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
|
||||
{/* Reserved Fixed Card: Alle Partner */}
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedCompanyId('all')
|
||||
setSelectedEndCustomerId(null)
|
||||
}}
|
||||
className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
|
||||
selectedCompanyId === 'all' || !selectedCompanyId
|
||||
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<ChevronsLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={partnerCurrentPage === 1}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
<ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
|
||||
</Button>
|
||||
|
||||
<span className="px-2 font-medium text-slate-300">
|
||||
Seite {partnerCurrentPage} von {totalPartnerPages}
|
||||
</span>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
|
||||
disabled={partnerCurrentPage === totalPartnerPages}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage(totalPartnerPages)}
|
||||
disabled={partnerCurrentPage === totalPartnerPages}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Letzte Seite"
|
||||
>
|
||||
<ChevronsRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={customerMode === 'select' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setCustomerMode('select')}
|
||||
className={`gap-2 ${customerMode === 'select' ? '' : 'text-white'}`}
|
||||
>
|
||||
<Building2 className="w-4 h-4" /> Bestandskunde wählen
|
||||
</Button>
|
||||
<Button
|
||||
variant={customerMode === 'create' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setCustomerMode('create')}
|
||||
className={`gap-2 ${customerMode === 'create' ? '' : 'text-white'}`}
|
||||
>
|
||||
<UserPlus className="w-4 h-4" /> Neuen Kunden anlegen
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ─── 2. CUSTOMER SELECTION ─── */}
|
||||
{customerMode === 'select' && (
|
||||
<div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<Label className="text-white font-bold text-base flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-primary" />
|
||||
Kunden-Auswahl
|
||||
</Label>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
||||
? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
|
||||
: 'Alle verfügbaren Endkunden'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{customersByCompany.length === 0 ? (
|
||||
<div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3">
|
||||
<Building2 className="w-10 h-10 text-slate-600 mx-auto" />
|
||||
<p className="text-slate-400">
|
||||
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
||||
? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
|
||||
: 'Noch keine Endkunden vorhanden.'}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCustomerMode('create')}
|
||||
className="border-white/10 text-white"
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Customer Header Controls: Search & Page Size */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Kunden suchen nach Name, Ort, PLZ..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white text-sm">
|
||||
Alle Partner (Firmenübergreifend)
|
||||
</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Zeigt Kunden aller registrierten Partnerunternehmen an
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-white/10 text-slate-300 text-xs bg-white/5">
|
||||
{endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
|
||||
</Badge>
|
||||
{(selectedCompanyId === 'all' || !selectedCompanyId) && (
|
||||
<Check className="w-5 h-5 text-primary shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page Size Selector */}
|
||||
<div className="flex items-center gap-2 self-end sm:self-auto">
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
|
||||
{/* Dynamic Partner Cards */}
|
||||
{paginatedCompanies.map((c: any) => {
|
||||
const isSelected = selectedCompanyId === c.id
|
||||
const customerCount = customerCountMap[c.id] || 0
|
||||
|
||||
return (
|
||||
<div
|
||||
key={c.id}
|
||||
onClick={() => {
|
||||
setSelectedCompanyId(c.id)
|
||||
setSelectedEndCustomerId(null)
|
||||
}}
|
||||
className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
<option value={50}>50</option>
|
||||
</select>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
|
||||
<Building2 className="w-4 h-4 text-slate-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white text-sm">{c.name}</p>
|
||||
{(c.street || c.zip || c.city) && (
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
{[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
customerCount > 0
|
||||
? 'border-green-500/30 text-green-400 bg-green-500/10'
|
||||
: 'border-white/10 text-slate-500 bg-white/5'
|
||||
}`}
|
||||
>
|
||||
{customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'}
|
||||
</Badge>
|
||||
{isSelected && <Check className="w-5 h-5 text-primary shrink-0" />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{filteredCompanies.length === 0 && (
|
||||
<div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
|
||||
Keine Partner mit dem Suchbegriff "{partnerSearchTerm}" gefunden.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Partner Pagination Controls */}
|
||||
<div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
|
||||
<div>
|
||||
Zeige {totalPartnerCount === 0 ? 0 : (partnerCurrentPage - 1) * partnerPageSize + 1} bis{' '}
|
||||
{Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} von {totalPartnerCount} Partnern
|
||||
</div>
|
||||
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
|
||||
Keine passenden Kunden gefunden.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Customer Card List */}
|
||||
<div className="space-y-2 max-h-80 overflow-y-auto pr-1">
|
||||
{paginatedCustomers.map((customer) => {
|
||||
const isSelected = selectedEndCustomerId === customer.id
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage(1)}
|
||||
disabled={partnerCurrentPage === 1}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Erste Seite"
|
||||
>
|
||||
<ChevronsLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={partnerCurrentPage === 1}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
<ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
|
||||
</Button>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={customer.id}
|
||||
onClick={() => handleSelectCustomer(customer)}
|
||||
className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="end_customer"
|
||||
value={customer.id}
|
||||
checked={isSelected}
|
||||
onChange={() => handleSelectCustomer(customer)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-semibold text-white text-sm">{customer.company_name}</p>
|
||||
{isAdmin && customer.partner_id && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] border-white/10 text-slate-400 bg-white/5"
|
||||
>
|
||||
Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
{[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
|
||||
{customer.first_name || customer.last_name ? ' · ' : ''}
|
||||
{[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
{isSelected && <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<span className="px-2 font-medium text-slate-300">
|
||||
Seite {partnerCurrentPage} von {totalPartnerPages}
|
||||
</span>
|
||||
|
||||
{/* Customer Pagination Footer */}
|
||||
<div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
|
||||
<div>
|
||||
Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '}
|
||||
{Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Erste Seite"
|
||||
>
|
||||
<ChevronsLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
<ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
|
||||
</Button>
|
||||
|
||||
<span className="px-2 font-medium text-slate-300">
|
||||
Seite {currentPage} von {totalCustomerPages}
|
||||
</span>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
|
||||
disabled={currentPage === totalCustomerPages}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(totalCustomerPages)}
|
||||
disabled={currentPage === totalCustomerPages}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Letzte Seite"
|
||||
>
|
||||
<ChevronsRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
|
||||
disabled={partnerCurrentPage === totalPartnerPages}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setPartnerCurrentPage(totalPartnerPages)}
|
||||
disabled={partnerCurrentPage === totalPartnerPages}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Letzte Seite"
|
||||
>
|
||||
<ChevronsRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
|
||||
{customerMode === 'create' && (
|
||||
<div className="grid md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10">
|
||||
{(
|
||||
[
|
||||
{ label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' },
|
||||
{ label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
|
||||
{ label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
|
||||
{ label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
|
||||
{ label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' },
|
||||
{ label: 'PLZ', key: 'zip', span: false, placeholder: '' },
|
||||
{ label: 'Ort', key: 'city', span: false, placeholder: '' },
|
||||
{ label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
|
||||
{ label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
|
||||
{ label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
|
||||
{ label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
|
||||
] as const
|
||||
).map(({ label, key, span, placeholder }) => (
|
||||
<div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
|
||||
<Label className="text-slate-300 text-sm">{label}</Label>
|
||||
<Input
|
||||
value={newCustomerForm[key] || ''}
|
||||
onChange={(e) =>
|
||||
setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value }))
|
||||
}
|
||||
placeholder={placeholder}
|
||||
className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="md:col-span-2 flex gap-2">
|
||||
{/* ─── 2. CUSTOMER WRAPPER ─── */}
|
||||
<div className="space-y-6">
|
||||
{/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleCreateCustomer}
|
||||
disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
|
||||
className="gap-2"
|
||||
variant={customerMode === 'select' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setCustomerMode('select')}
|
||||
className={`gap-2 ${customerMode === 'select' ? '' : 'text-white'}`}
|
||||
>
|
||||
{isCreatingCustomer ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<UserPlus className="w-4 h-4" />
|
||||
)}
|
||||
Kunden speichern & auswählen
|
||||
<Building2 className="w-4 h-4" /> Bestandskunde wählen
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-white"
|
||||
onClick={() => setCustomerMode('select')}
|
||||
variant={customerMode === 'create' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setCustomerMode('create')}
|
||||
className={`gap-2 ${customerMode === 'create' ? '' : 'text-white'}`}
|
||||
>
|
||||
Abbrechen
|
||||
<UserPlus className="w-4 h-4" /> Neuen Kunden anlegen
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{/* ─── 2. CUSTOMER SELECTION ─── */}
|
||||
{customerMode === 'select' && (
|
||||
<motion.div
|
||||
key="select"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<Label className="text-white font-bold text-base flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-primary" />
|
||||
Kunden-Auswahl
|
||||
</Label>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
||||
? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
|
||||
: 'Alle verfügbaren Endkunden'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{customersByCompany.length === 0 ? (
|
||||
<div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3">
|
||||
<Building2 className="w-10 h-10 text-slate-600 mx-auto" />
|
||||
<p className="text-slate-400">
|
||||
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
||||
? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
|
||||
: 'Noch keine Endkunden vorhanden.'}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCustomerMode('create')}
|
||||
className="border-white/10 text-white"
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Customer Header Controls: Search & Page Size */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Kunden suchen nach Name, Ort, PLZ..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Page Size Selector */}
|
||||
<div className="flex items-center gap-2 self-end sm:self-auto">
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
<option value={50}>50</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
|
||||
Keine passenden Kunden gefunden.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Customer Card List */}
|
||||
<div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
|
||||
{paginatedCustomers.map((customer) => {
|
||||
const isSelected = selectedEndCustomerId === customer.id
|
||||
|
||||
return (
|
||||
<div
|
||||
key={customer.id}
|
||||
onClick={() => handleSelectCustomer(customer)}
|
||||
className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="end_customer"
|
||||
value={customer.id}
|
||||
checked={isSelected}
|
||||
onChange={() => handleSelectCustomer(customer)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-semibold text-white text-sm">{customer.company_name}</p>
|
||||
{isAdmin && customer.partner_id && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] border-white/10 text-slate-400 bg-white/5"
|
||||
>
|
||||
Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
{[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
|
||||
{customer.first_name || customer.last_name ? ' · ' : ''}
|
||||
{[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
{isSelected && <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Customer Pagination Footer */}
|
||||
<div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
|
||||
<div>
|
||||
Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '}
|
||||
{Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Erste Seite"
|
||||
>
|
||||
<ChevronsLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
<ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
|
||||
</Button>
|
||||
|
||||
<span className="px-2 font-medium text-slate-300">
|
||||
Seite {currentPage} von {totalCustomerPages}
|
||||
</span>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
|
||||
disabled={currentPage === totalCustomerPages}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(totalCustomerPages)}
|
||||
disabled={currentPage === totalCustomerPages}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Letzte Seite"
|
||||
>
|
||||
<ChevronsRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
|
||||
{customerMode === 'create' && (
|
||||
<motion.div
|
||||
key="create"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10"
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' },
|
||||
{ label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
|
||||
{ label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
|
||||
{ label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
|
||||
{ label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' },
|
||||
{ label: 'PLZ', key: 'zip', span: false, placeholder: '' },
|
||||
{ label: 'Ort', key: 'city', span: false, placeholder: '' },
|
||||
{ label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
|
||||
{ label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
|
||||
{ label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
|
||||
{ label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
|
||||
] as const
|
||||
).map(({ label, key, span, placeholder }) => (
|
||||
<div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
|
||||
<Label className="text-slate-300 text-sm">{label}</Label>
|
||||
<Input
|
||||
value={newCustomerForm[key] || ''}
|
||||
onChange={(e) =>
|
||||
setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value }))
|
||||
}
|
||||
placeholder={placeholder}
|
||||
className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="md:col-span-2 flex gap-2">
|
||||
<Button
|
||||
onClick={handleCreateCustomer}
|
||||
disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
|
||||
className="gap-2"
|
||||
>
|
||||
{isCreatingCustomer ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<UserPlus className="w-4 h-4" />
|
||||
)}
|
||||
Kunden speichern & auswählen
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-white"
|
||||
onClick={() => setCustomerMode('select')}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end border-t border-white/10 pt-6">
|
||||
<Button
|
||||
|
||||
@@ -67,10 +67,10 @@ export function StepSoftware({
|
||||
const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
|
||||
|
||||
return (
|
||||
<Card className="glass-dark border-white/10 h-full flex flex-col">
|
||||
<Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl">
|
||||
<CardHeader className="border-b border-white/5 pb-4">
|
||||
<CardTitle className="text-xl flex items-center gap-2 text-white">
|
||||
<ShoppingCart className="w-5 h-5 text-blue-400" />
|
||||
<CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
|
||||
<ShoppingCart className="w-5 h-5 text-primary" />
|
||||
Optionen wählen
|
||||
</CardTitle>
|
||||
<CardDescription className="text-slate-400">
|
||||
@@ -88,238 +88,253 @@ export function StepSoftware({
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Category header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-3 bg-white/5 p-4 rounded-xl border border-white/10">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
|
||||
<CategoryIcon icon={currentCategory.icon} className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-white text-base">{currentCategory.name}</h3>
|
||||
<h3 className="font-bold text-white text-sm">{currentCategory.name}</h3>
|
||||
{currentCategory.description && (
|
||||
<p className="text-slate-400 text-xs">{currentCategory.description}</p>
|
||||
<p className="text-slate-400 text-xs mt-0.5">{currentCategory.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{sel?.productIds && sel.productIds.length > 0 ? (
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
|
||||
<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">
|
||||
<Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
|
||||
<Check className="w-3 h-3 mr-1" /> Ausgewählt
|
||||
</Badge>
|
||||
) : currentCategory.is_required ? (
|
||||
<Badge variant="destructive" className="ml-auto opacity-80">
|
||||
<AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
|
||||
<Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/20 text-red-400 border border-red-500/30">
|
||||
<AlertCircle className="w-3 h-3 mr-1" /> Erforderlich
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="ml-auto border-white/20 text-slate-400">
|
||||
<Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5">
|
||||
Optional
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{catProducts.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm italic">
|
||||
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
|
||||
</p>
|
||||
) : currentCategory.allow_multiselect ? (
|
||||
<div className="grid gap-3">
|
||||
{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-4 rounded-xl border-2 transition-all ${disabled
|
||||
? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
|
||||
: isChecked
|
||||
? 'border-primary bg-primary/5 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 items-center gap-3">
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={() => { }}
|
||||
className="border-white/20 data-[state=checked]:bg-primary"
|
||||
/>
|
||||
<span className="font-bold text-base text-white">{product.name}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
|
||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-primary font-semibold text-sm">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}{' '}
|
||||
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
|
||||
</span>
|
||||
</div>
|
||||
{product.description && (
|
||||
<span className="text-sm text-slate-300 mt-1 pl-7">{product.description}</span>
|
||||
)}
|
||||
{product.modules && product.modules.length > 0 && (
|
||||
<span className="text-xs text-slate-500 mt-1 pl-7">
|
||||
{product.modules.length} optionale Module verfügbar
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<RadioGroup
|
||||
value={sel?.productId ?? ''}
|
||||
onValueChange={id => selectProduct(currentCategory.id, id)}
|
||||
className="grid gap-3"
|
||||
>
|
||||
{catProducts.map(product => {
|
||||
const disabled = isProductDisabled(product, currentCategory.id)
|
||||
return (
|
||||
<div key={product.id} className="relative">
|
||||
<RadioGroupItem
|
||||
value={product.id}
|
||||
id={`${currentCategory.id}-${product.id}`}
|
||||
{catProducts.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm italic">
|
||||
Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
|
||||
</p>
|
||||
) : currentCategory.allow_multiselect ? (
|
||||
<div className="grid gap-3">
|
||||
{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-4 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.1)]'
|
||||
: '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-3">
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
disabled={disabled}
|
||||
className="peer sr-only"
|
||||
onCheckedChange={() => { }}
|
||||
className="border-white/20 data-[state=checked]:bg-primary rounded"
|
||||
/>
|
||||
<span className="font-bold text-sm 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-sm">
|
||||
{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-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span>
|
||||
)}
|
||||
{product.modules && product.modules.length > 0 && (
|
||||
<span className="text-[10px] text-slate-500 mt-1 pl-7 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-3"
|
||||
>
|
||||
{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-4 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.1)]'
|
||||
: '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">
|
||||
<span className="font-bold text-sm 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-sm">
|
||||
{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-xs text-slate-400 mt-2 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 */}
|
||||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||||
<div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||
<p className="text-sm 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.5">
|
||||
{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}
|
||||
className={`flex flex-col p-4 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/30 bg-primary/5'
|
||||
: '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"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Label
|
||||
htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
|
||||
className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer'
|
||||
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
||||
className={`font-semibold text-sm flex justify-between text-white ${
|
||||
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-base text-white">{product.name}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
|
||||
{product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
|
||||
<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>
|
||||
</div>
|
||||
<span className="text-primary font-semibold text-sm">
|
||||
{new Intl.NumberFormat('de-DE', {
|
||||
)}
|
||||
</span>
|
||||
<span className="text-primary font-bold text-sm">
|
||||
{isExistingLicense ? (
|
||||
<span className="text-slate-500 text-xs font-normal">inkl.</span>
|
||||
) : (
|
||||
<>+{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(product.base_price)}{' '}
|
||||
<span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
|
||||
</span>
|
||||
</div>
|
||||
{product.description && (
|
||||
<span className="text-sm text-slate-300 mt-1">{product.description}</span>
|
||||
)}
|
||||
{product.modules && product.modules.length > 0 && (
|
||||
<span className="text-xs text-slate-500 mt-1">
|
||||
{product.modules.length} optionale Module verfügbar
|
||||
</span>
|
||||
)}
|
||||
}).format(module.price)}</>
|
||||
)}
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</RadioGroup>
|
||||
)}
|
||||
|
||||
{/* Modules */}
|
||||
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
|
||||
<div className="mt-4 space-y-3 pl-2 border-l-2 border-primary/30">
|
||||
<p className="text-sm font-semibold text-white ml-2">Zusatzmodule:</p>
|
||||
{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}
|
||||
className={`flex flex-col p-3 rounded-lg border ml-2 transition-colors ${
|
||||
isExistingLicense
|
||||
? 'border-primary/20 bg-primary/5 opacity-75'
|
||||
: disabled
|
||||
? 'border-white/5 bg-white/5 opacity-50'
|
||||
: '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}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<Label
|
||||
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
|
||||
className={`font-medium flex justify-between text-white ${
|
||||
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
{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-semibold">
|
||||
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-primary font-bold">
|
||||
{isExistingLicense ? (
|
||||
<span className="text-slate-500 text-xs">inkl.</span>
|
||||
) : (
|
||||
<>+{new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(module.price)}</>
|
||||
)}
|
||||
</span>
|
||||
</Label>
|
||||
{module.description && (
|
||||
<p className="text-xs text-slate-400">{module.description}</p>
|
||||
)}
|
||||
{!isExistingLicense && disabled && (
|
||||
<p className="text-[10px] text-destructive mt-1">
|
||||
{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-8 pt-2 border-t border-white/5">
|
||||
<Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400">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-20 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg"
|
||||
/>
|
||||
<span className="text-xs text-slate-500">
|
||||
Gesamt: {new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(module.price * (moduleQuantities[module.id] || 1))}
|
||||
</span>
|
||||
</div>
|
||||
{module.description && (
|
||||
<p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
|
||||
)}
|
||||
{!isExistingLicense && disabled && (
|
||||
<p className="text-[10px] text-red-400 mt-1.5 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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scalable Quantity */}
|
||||
{checked && !isExistingLicense && module.has_quantity && (
|
||||
<div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5">
|
||||
<Label htmlFor={`qty-${module.id}`} className="text-xs 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-8 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">
|
||||
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>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</CardContent>
|
||||
|
||||
@@ -32,6 +32,8 @@ interface SummarySidebarProps {
|
||||
deleteBasketItem: (idx: number) => void
|
||||
deviceName: string
|
||||
setDeviceName: (name: string) => void
|
||||
licenseNumber: string
|
||||
setLicenseNumber: (num: string) => void
|
||||
addToBasket: () => void
|
||||
isNextStepDisabled: boolean
|
||||
hasActiveSelection: boolean
|
||||
@@ -62,6 +64,8 @@ export function SummarySidebar({
|
||||
deleteBasketItem,
|
||||
deviceName,
|
||||
setDeviceName,
|
||||
licenseNumber,
|
||||
setLicenseNumber,
|
||||
addToBasket,
|
||||
isNextStepDisabled,
|
||||
hasActiveSelection,
|
||||
@@ -231,7 +235,10 @@ export function SummarySidebar({
|
||||
<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>
|
||||
<span className="text-[10px] text-slate-400 capitalize">
|
||||
{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
|
||||
{item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Button
|
||||
@@ -272,6 +279,16 @@ export function SummarySidebar({
|
||||
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full space-y-2">
|
||||
<Label htmlFor="license-number" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
|
||||
<Input
|
||||
id="license-number"
|
||||
placeholder="z.B. LIZ-12345"
|
||||
value={licenseNumber}
|
||||
onChange={e => setLicenseNumber(e.target.value)}
|
||||
className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
|
||||
@@ -260,4 +260,29 @@ export async function getCustomersForWizard(
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a license number is already taken by any active order.
|
||||
*/
|
||||
export async function isLicenseNumberTaken(licenseNumber: string, excludeOrderId?: string): Promise<boolean> {
|
||||
const normalized = licenseNumber?.trim().toUpperCase()
|
||||
if (!normalized) return false
|
||||
|
||||
const supabase = await createClient()
|
||||
let query = supabase
|
||||
.from('orders')
|
||||
.select('id')
|
||||
.contains('order_snapshot', { items: [{ license_number: normalized }] })
|
||||
|
||||
if (excludeOrderId) {
|
||||
query = query.neq('id', excludeOrderId)
|
||||
}
|
||||
|
||||
const { data, error } = await query
|
||||
if (error) {
|
||||
console.error('Error checking license number:', error)
|
||||
return false
|
||||
}
|
||||
return !!(data && data.length > 0)
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user