refactor: improve wizard layouts and animations
This commit is contained in:
DanielS
@@ -17,14 +17,7 @@ export default async function OrderPage({ searchParams }: PageProps) {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-primary/30">
|
<div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-primary/30">
|
||||||
<div className="container mx-auto py-10">
|
<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" />}>
|
<Suspense fallback={<div className="h-96 w-full animate-pulse bg-white/5 rounded-2xl" />}>
|
||||||
<OrderDataWrapper
|
<OrderDataWrapper
|
||||||
|
|||||||
@@ -792,6 +792,18 @@ export function OrderWizard({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}>
|
<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 */}
|
{/* Global Stepper for Steps 1, 2, 4 */}
|
||||||
{step !== 3 && (
|
{step !== 3 && (
|
||||||
<div className="pt-12 pb-6">
|
<div className="pt-12 pb-6">
|
||||||
@@ -867,10 +879,10 @@ export function OrderWizard({
|
|||||||
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
|
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
|
<h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
|
||||||
Software konfigurieren
|
Konfigurieren Sie Ihre Lösung
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-slate-400 text-sm">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -885,20 +897,18 @@ export function OrderWizard({
|
|||||||
<button
|
<button
|
||||||
key={cat.id}
|
key={cat.id}
|
||||||
onClick={() => setActiveCategoryId(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 ${
|
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
|
||||||
isActive
|
|
||||||
? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
|
? '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'
|
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{/* Left glow line for active category */}
|
{/* Left glow line for active category */}
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className={`p-2 rounded-lg transition-colors ${
|
<div className={`p-2 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
|
||||||
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" />
|
<CategoryIcon icon={cat.icon} className="w-4 h-4" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { useState, useMemo, useEffect } from 'react'
|
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 { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
|
||||||
import { Label } from '@/components/ui/label'
|
import { Label } from '@/components/ui/label'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
@@ -154,448 +155,469 @@ export function StepCustomer({
|
|||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-8">
|
<CardContent className="space-y-8">
|
||||||
{/* ─── 1. ADMIN PARTNER SELECTION ─── */}
|
<div className={isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-8 items-start' : 'space-y-8'}>
|
||||||
{isAdmin && (
|
{/* ─── 1. ADMIN PARTNER SELECTION ─── */}
|
||||||
<div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
{isAdmin && (
|
||||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
<div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
|
||||||
<div>
|
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||||
<Label className="text-white font-bold text-base flex items-center gap-2">
|
<div>
|
||||||
<Building2 className="w-5 h-5 text-primary" />
|
<Label className="text-white font-bold text-base flex items-center gap-2">
|
||||||
Partner-Auswahl (Admin-Funktion)
|
<Building2 className="w-5 h-5 text-primary" />
|
||||||
</Label>
|
Partner-Auswahl (Admin-Funktion)
|
||||||
<p className="text-xs text-slate-400 mt-0.5">
|
</Label>
|
||||||
Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder "Alle Partner".
|
<p className="text-xs text-slate-400 mt-0.5">
|
||||||
</p>
|
Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder "Alle Partner".
|
||||||
</div>
|
</p>
|
||||||
<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>
|
</div>
|
||||||
|
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
|
||||||
|
Admin Modus
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dynamic Partner Cards */}
|
{/* Partner Header Controls: Search & Page Size */}
|
||||||
{paginatedCompanies.map((c: any) => {
|
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
|
||||||
const isSelected = selectedCompanyId === c.id
|
<div className="relative flex-1">
|
||||||
const customerCount = customerCountMap[c.id] || 0
|
<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 className="flex items-center gap-2 self-end sm:self-auto">
|
||||||
<div
|
<span className="text-xs text-slate-400 whitespace-nowrap">Partner pro Seite:</span>
|
||||||
key={c.id}
|
<select
|
||||||
onClick={() => {
|
value={partnerPageSize}
|
||||||
setSelectedCompanyId(c.id)
|
onChange={(e) => setPartnerPageSize(Number(e.target.value))}
|
||||||
setSelectedEndCustomerId(null)
|
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"
|
||||||
}}
|
|
||||||
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-3">
|
<option value={10}>10</option>
|
||||||
<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">
|
<option value={20}>20</option>
|
||||||
<Building2 className="w-4 h-4 text-slate-400" />
|
<option value={50}>50</option>
|
||||||
</div>
|
</select>
|
||||||
<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>
|
||||||
)}
|
|
||||||
</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>
|
||||||
|
|
||||||
<div className="flex items-center gap-1">
|
{/* Partner Card List */}
|
||||||
<Button
|
<div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
|
||||||
variant="ghost"
|
{/* Reserved Fixed Card: Alle Partner */}
|
||||||
size="sm"
|
<div
|
||||||
onClick={() => setPartnerCurrentPage(1)}
|
onClick={() => {
|
||||||
disabled={partnerCurrentPage === 1}
|
setSelectedCompanyId('all')
|
||||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
setSelectedEndCustomerId(null)
|
||||||
title="Erste Seite"
|
}}
|
||||||
|
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" />
|
<div className="flex items-center gap-3">
|
||||||
</Button>
|
<div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
|
||||||
<Button
|
<Users className="w-4 h-4" />
|
||||||
variant="outline"
|
</div>
|
||||||
size="sm"
|
<div>
|
||||||
onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
|
<p className="font-semibold text-white text-sm">
|
||||||
disabled={partnerCurrentPage === 1}
|
Alle Partner (Firmenübergreifend)
|
||||||
className="h-8 px-2.5 border-white/10 text-white"
|
</p>
|
||||||
>
|
<p className="text-xs text-slate-400">
|
||||||
<ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
|
Zeigt Kunden aller registrierten Partnerunternehmen an
|
||||||
</Button>
|
</p>
|
||||||
|
</div>
|
||||||
<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>
|
</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 */}
|
{/* Dynamic Partner Cards */}
|
||||||
<div className="flex items-center gap-2 self-end sm:self-auto">
|
{paginatedCompanies.map((c: any) => {
|
||||||
<span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
|
const isSelected = selectedCompanyId === c.id
|
||||||
<select
|
const customerCount = customerCountMap[c.id] || 0
|
||||||
value={pageSize}
|
|
||||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
return (
|
||||||
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
|
||||||
|
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>
|
<div className="flex items-center gap-3">
|
||||||
<option value={20}>20</option>
|
<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">
|
||||||
<option value={50}>50</option>
|
<Building2 className="w-4 h-4 text-slate-400" />
|
||||||
</select>
|
</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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
|
||||||
{filteredCustomers.length === 0 ? (
|
<div className="flex items-center gap-1">
|
||||||
<div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
|
<Button
|
||||||
Keine passenden Kunden gefunden.
|
variant="ghost"
|
||||||
</div>
|
size="sm"
|
||||||
) : (
|
onClick={() => setPartnerCurrentPage(1)}
|
||||||
<>
|
disabled={partnerCurrentPage === 1}
|
||||||
{/* Customer Card List */}
|
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||||
<div className="space-y-2 max-h-80 overflow-y-auto pr-1">
|
title="Erste Seite"
|
||||||
{paginatedCustomers.map((customer) => {
|
>
|
||||||
const isSelected = selectedEndCustomerId === customer.id
|
<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 (
|
<span className="px-2 font-medium text-slate-300">
|
||||||
<div
|
Seite {partnerCurrentPage} von {totalPartnerPages}
|
||||||
key={customer.id}
|
</span>
|
||||||
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 */}
|
<Button
|
||||||
<div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
|
variant="outline"
|
||||||
<div>
|
size="sm"
|
||||||
Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '}
|
onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
|
||||||
{Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden
|
disabled={partnerCurrentPage === totalPartnerPages}
|
||||||
</div>
|
className="h-8 px-2.5 border-white/10 text-white"
|
||||||
|
>
|
||||||
<div className="flex items-center gap-1">
|
Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||||
<Button
|
</Button>
|
||||||
variant="ghost"
|
<Button
|
||||||
size="sm"
|
variant="ghost"
|
||||||
onClick={() => setCurrentPage(1)}
|
size="sm"
|
||||||
disabled={currentPage === 1}
|
onClick={() => setPartnerCurrentPage(totalPartnerPages)}
|
||||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
disabled={partnerCurrentPage === totalPartnerPages}
|
||||||
title="Erste Seite"
|
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||||
>
|
title="Letzte Seite"
|
||||||
<ChevronsLeft className="w-4 h-4" />
|
>
|
||||||
</Button>
|
<ChevronsRight className="w-4 h-4" />
|
||||||
<Button
|
</Button>
|
||||||
variant="outline"
|
</div>
|
||||||
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>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
|
{/* ─── 2. CUSTOMER WRAPPER ─── */}
|
||||||
{customerMode === 'create' && (
|
<div className="space-y-6">
|
||||||
<div className="grid md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10">
|
{/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
|
||||||
{(
|
<div className="flex gap-2">
|
||||||
[
|
|
||||||
{ 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
|
<Button
|
||||||
onClick={handleCreateCustomer}
|
variant={customerMode === 'select' ? 'default' : 'ghost'}
|
||||||
disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
|
size="sm"
|
||||||
className="gap-2"
|
onClick={() => setCustomerMode('select')}
|
||||||
|
className={`gap-2 ${customerMode === 'select' ? '' : 'text-white'}`}
|
||||||
>
|
>
|
||||||
{isCreatingCustomer ? (
|
<Building2 className="w-4 h-4" /> Bestandskunde wählen
|
||||||
<Loader2 className="w-4 h-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<UserPlus className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
Kunden speichern & auswählen
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant={customerMode === 'create' ? 'default' : 'ghost'}
|
||||||
className="text-white"
|
size="sm"
|
||||||
onClick={() => setCustomerMode('select')}
|
onClick={() => setCustomerMode('create')}
|
||||||
|
className={`gap-2 ${customerMode === 'create' ? '' : 'text-white'}`}
|
||||||
>
|
>
|
||||||
Abbrechen
|
<UserPlus className="w-4 h-4" /> Neuen Kunden anlegen
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</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>
|
||||||
)}
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter className="flex justify-end border-t border-white/10 pt-6">
|
<CardFooter className="flex justify-end border-t border-white/10 pt-6">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user