878 lines
42 KiB
TypeScript
878 lines
42 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useMemo, useEffect } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import {
|
|
User,
|
|
Building2,
|
|
UserPlus,
|
|
Search,
|
|
Check,
|
|
Loader2,
|
|
ChevronRight,
|
|
ChevronLeft,
|
|
ChevronsLeft,
|
|
ChevronsRight,
|
|
Users,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
X,
|
|
CreditCard,
|
|
Mail,
|
|
MapPin,
|
|
CheckCircle2,
|
|
Building,
|
|
} from 'lucide-react'
|
|
import { EndCustomer } from '@/lib/types'
|
|
|
|
interface StepCustomerProps {
|
|
isAdmin: boolean
|
|
companies: any[]
|
|
selectedCompanyId: string | null
|
|
setSelectedCompanyId: (id: string | null) => void
|
|
customerMode: 'select' | 'create'
|
|
setCustomerMode: (mode: 'select' | 'create') => void
|
|
endCustomers: EndCustomer[]
|
|
searchTerm: string
|
|
setSearchTerm: (term: string) => void
|
|
filteredEndCustomers: EndCustomer[]
|
|
selectedEndCustomerId: string | null
|
|
setSelectedEndCustomerId: (id: string | null) => void
|
|
newCustomerForm: any
|
|
setNewCustomerForm: React.Dispatch<React.SetStateAction<any>>
|
|
handleCreateCustomer: () => Promise<void>
|
|
isCreatingCustomer: boolean
|
|
nextStep: () => void
|
|
}
|
|
|
|
export function StepCustomer({
|
|
isAdmin,
|
|
companies,
|
|
selectedCompanyId,
|
|
setSelectedCompanyId,
|
|
customerMode,
|
|
setCustomerMode,
|
|
endCustomers,
|
|
searchTerm,
|
|
setSearchTerm,
|
|
selectedEndCustomerId,
|
|
setSelectedEndCustomerId,
|
|
newCustomerForm,
|
|
setNewCustomerForm,
|
|
handleCreateCustomer,
|
|
isCreatingCustomer,
|
|
nextStep,
|
|
}: StepCustomerProps) {
|
|
// ─── PARTNER SELECTION STATE & PAGINATION (Admins only) ──────────────────────
|
|
const [partnerSearchTerm, setPartnerSearchTerm] = useState('')
|
|
const [partnerPageSize, setPartnerPageSize] = useState<number>(10)
|
|
const [partnerCurrentPage, setPartnerCurrentPage] = useState<number>(1)
|
|
|
|
// Drawer / Sheet state for customer creation
|
|
const [showBankDetails, setShowBankDetails] = useState(false)
|
|
|
|
// Drawer visibility is mapped to customerMode === 'create'
|
|
const isDrawerOpen = customerMode === 'create'
|
|
|
|
const openDrawer = () => setCustomerMode('create')
|
|
const closeDrawer = () => {
|
|
setCustomerMode('select')
|
|
setShowBankDetails(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
setPartnerCurrentPage(1)
|
|
}, [partnerSearchTerm, partnerPageSize])
|
|
|
|
// Count non-anonymized customers per partner company
|
|
const customerCountMap = useMemo(() => {
|
|
const counts: Record<string, number> = {}
|
|
endCustomers.forEach((c) => {
|
|
if (!c.is_anonymized && c.partner_id) {
|
|
counts[c.partner_id] = (counts[c.partner_id] || 0) + 1
|
|
}
|
|
})
|
|
return counts
|
|
}, [endCustomers])
|
|
|
|
const filteredCompanies = useMemo(() => {
|
|
const term = partnerSearchTerm.toLowerCase().trim()
|
|
if (!term) return companies
|
|
return companies.filter(
|
|
(c: any) => c.name?.toLowerCase().includes(term) || c.id?.toLowerCase().includes(term)
|
|
)
|
|
}, [companies, partnerSearchTerm])
|
|
|
|
const totalPartnerCount = filteredCompanies.length
|
|
const totalPartnerPages = Math.ceil(totalPartnerCount / partnerPageSize) || 1
|
|
|
|
const paginatedCompanies = useMemo(() => {
|
|
const from = (partnerCurrentPage - 1) * partnerPageSize
|
|
return filteredCompanies.slice(from, from + partnerPageSize)
|
|
}, [filteredCompanies, partnerCurrentPage, partnerPageSize])
|
|
|
|
// ─── CUSTOMER SELECTION STATE & PAGINATION ──────────────────────────────────
|
|
const [pageSize, setPageSize] = useState<number>(10)
|
|
const [currentPage, setCurrentPage] = useState<number>(1)
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1)
|
|
}, [searchTerm, selectedCompanyId, pageSize])
|
|
|
|
// Filter customers by selected partner (if admin and selectedCompanyId != 'all')
|
|
const customersByCompany = useMemo(() => {
|
|
let list = endCustomers.filter((c) => !c.is_anonymized)
|
|
if (isAdmin && selectedCompanyId && selectedCompanyId !== 'all') {
|
|
list = list.filter((c) => c.partner_id === selectedCompanyId)
|
|
}
|
|
return list
|
|
}, [endCustomers, isAdmin, selectedCompanyId])
|
|
|
|
// Customer search filter
|
|
const filteredCustomers = useMemo(() => {
|
|
const term = searchTerm.toLowerCase().trim()
|
|
if (!term) return customersByCompany
|
|
return customersByCompany.filter(
|
|
(c) =>
|
|
c.company_name?.toLowerCase().includes(term) ||
|
|
c.first_name?.toLowerCase().includes(term) ||
|
|
c.last_name?.toLowerCase().includes(term) ||
|
|
c.city?.toLowerCase().includes(term) ||
|
|
c.zip?.toLowerCase().includes(term) ||
|
|
c.email?.toLowerCase().includes(term)
|
|
)
|
|
}, [customersByCompany, searchTerm])
|
|
|
|
const totalCustomerCount = filteredCustomers.length
|
|
const totalCustomerPages = Math.ceil(totalCustomerCount / pageSize) || 1
|
|
|
|
const paginatedCustomers = useMemo(() => {
|
|
const from = (currentPage - 1) * pageSize
|
|
return filteredCustomers.slice(from, from + pageSize)
|
|
}, [filteredCustomers, currentPage, pageSize])
|
|
|
|
// Selected customer object for summary chip / info
|
|
const activeCustomer = useMemo(() => {
|
|
return endCustomers.find((c) => c.id === selectedEndCustomerId) || null
|
|
}, [endCustomers, selectedEndCustomerId])
|
|
|
|
// Click handler for customer selection
|
|
const handleSelectCustomer = (customer: EndCustomer) => {
|
|
setSelectedEndCustomerId(customer.id)
|
|
if (isAdmin && customer.partner_id && (selectedCompanyId === 'all' || !selectedCompanyId)) {
|
|
setSelectedCompanyId(customer.partner_id)
|
|
}
|
|
}
|
|
|
|
// Handle form submission with enter or button
|
|
const onSubmitCustomerForm = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!newCustomerForm.company_name?.trim()) return
|
|
await handleCreateCustomer()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col overflow-hidden relative">
|
|
{/* ─── 1. FIXED HEADER (shrink-0) ─── */}
|
|
<CardHeader className="py-2.5 px-4 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
|
<div>
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2 text-white">
|
|
<User className="w-4 h-4 text-primary" />
|
|
Für wen bestellen Sie?
|
|
</CardTitle>
|
|
<CardDescription className="text-[11px] text-slate-300 mt-0.5">
|
|
Wählen Sie den Endkunden für die Lizenzierung aus oder legen Sie schnell einen neuen Datensatz an.
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
onClick={openDrawer}
|
|
size="sm"
|
|
className="gap-1.5 shrink-0 bg-primary hover:bg-primary/90 text-white font-medium shadow-md shadow-primary/20 h-8 text-xs"
|
|
>
|
|
<UserPlus className="w-3.5 h-3.5" /> Kunde anlegen
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
{/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-hidden) ─── */}
|
|
<div className="flex-1 min-h-0 overflow-hidden p-3">
|
|
<div className={`h-full ${isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch' : 'flex flex-col'}`}>
|
|
{/* ─── 2A. ADMIN PARTNER SELECTION ─── */}
|
|
{isAdmin && (
|
|
<div className="p-3 rounded-xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-2">
|
|
<div className="flex items-center justify-between gap-2 flex-wrap shrink-0">
|
|
<div>
|
|
<Label className="text-white font-bold text-xs flex items-center gap-1.5">
|
|
<Building2 className="w-3.5 h-3.5 text-primary" />
|
|
Partner-Auswahl (Admin)
|
|
</Label>
|
|
<p className="text-[10px] text-slate-400">
|
|
Filtert die Kundenliste nach Partner
|
|
</p>
|
|
</div>
|
|
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-[9px] px-1.5 py-0">
|
|
Admin Modus
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Partner Search & Page Size */}
|
|
<div className="flex gap-2 items-center shrink-0">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
|
|
<Input
|
|
placeholder="Partner suchen..."
|
|
value={partnerSearchTerm}
|
|
onChange={(e) => setPartnerSearchTerm(e.target.value)}
|
|
className="pl-8 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={partnerPageSize}
|
|
onChange={(e) => setPartnerPageSize(Number(e.target.value))}
|
|
className="h-8 rounded-md border border-white/10 bg-slate-900 px-2 text-[11px] text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary shrink-0"
|
|
>
|
|
<option value={10}>10</option>
|
|
<option value={20}>20</option>
|
|
<option value={50}>50</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Partner Card List (Scrollable) */}
|
|
<div className="space-y-1.5 flex-1 min-h-0 overflow-y-auto pr-1 py-0.5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
|
{/* Reserved Fixed Card: Alle Partner */}
|
|
<div
|
|
onClick={() => {
|
|
setSelectedCompanyId('all')
|
|
setSelectedEndCustomerId(null)
|
|
}}
|
|
className={`flex items-center justify-between p-2 rounded-lg border cursor-pointer transition-all select-none ${
|
|
selectedCompanyId === 'all' || !selectedCompanyId
|
|
? 'border-primary bg-primary/10 shadow-sm shadow-primary/10'
|
|
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-6 h-6 rounded-md bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
|
|
<Users className="w-3 h-3" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-white text-xs leading-tight">
|
|
Alle Partner (Firmenübergreifend)
|
|
</p>
|
|
<p className="text-[10px] text-slate-400 leading-tight">
|
|
{endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{(selectedCompanyId === 'all' || !selectedCompanyId) && (
|
|
<Check className="w-3.5 h-3.5 text-primary shrink-0" />
|
|
)}
|
|
</div>
|
|
|
|
{/* 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-2 rounded-lg border cursor-pointer transition-all select-none ${
|
|
isSelected
|
|
? 'border-primary bg-primary/10 shadow-sm shadow-primary/10'
|
|
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<div className="w-6 h-6 rounded-md bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
|
|
<Building2 className="w-3 h-3 text-slate-400" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-semibold text-white text-xs truncate leading-tight">{c.name}</p>
|
|
{(c.street || c.zip || c.city) && (
|
|
<p className="text-[10px] text-slate-400 truncate leading-tight">
|
|
{[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<Badge
|
|
variant="outline"
|
|
className={`text-[9px] px-1.5 py-0 ${
|
|
customerCount > 0
|
|
? 'border-green-500/30 text-green-400 bg-green-500/10'
|
|
: 'border-white/10 text-slate-500 bg-white/5'
|
|
}`}
|
|
>
|
|
{customerCount}
|
|
</Badge>
|
|
{isSelected && <Check className="w-3.5 h-3.5 text-primary shrink-0" />}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{filteredCompanies.length === 0 && (
|
|
<div className="p-2 text-center text-slate-400 text-xs bg-white/5 rounded-lg border border-white/5 my-auto">
|
|
Keine Partner gefunden.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Partner Pagination Footer */}
|
|
<div className="flex items-center justify-between border-t border-white/10 pt-1.5 text-[10px] text-slate-400 shrink-0">
|
|
<div>
|
|
{Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} / {totalPartnerCount} Partner
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setPartnerCurrentPage(1)}
|
|
disabled={partnerCurrentPage === 1}
|
|
className="h-5 px-1 text-slate-400 hover:text-white"
|
|
>
|
|
<ChevronsLeft className="w-3 h-3" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
|
|
disabled={partnerCurrentPage === 1}
|
|
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
|
|
>
|
|
<ChevronLeft className="w-2.5 h-2.5 mr-0.5" /> Zurück
|
|
</Button>
|
|
<span className="px-1 text-slate-300">
|
|
{partnerCurrentPage} / {totalPartnerPages}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
|
|
disabled={partnerCurrentPage === totalPartnerPages}
|
|
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
|
|
>
|
|
Vor <ChevronRight className="w-2.5 h-2.5 ml-0.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setPartnerCurrentPage(totalPartnerPages)}
|
|
disabled={partnerCurrentPage === totalPartnerPages}
|
|
className="h-5 px-1 text-slate-400 hover:text-white"
|
|
>
|
|
<ChevronsRight className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ─── 2B. CUSTOMER SELECTION LIST (Scrollable Panel) ─── */}
|
|
<div className="p-3 rounded-xl bg-white/5 border border-white/10 flex flex-col h-full overflow-hidden justify-between space-y-2">
|
|
<div className="flex items-center justify-between gap-2 shrink-0">
|
|
<div className="min-w-0">
|
|
<Label className="text-white font-bold text-xs flex items-center gap-1.5">
|
|
<User className="w-3.5 h-3.5 text-primary" />
|
|
Kunden-Auswahl
|
|
</Label>
|
|
<p className="text-[10px] text-slate-400 truncate">
|
|
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
|
? `Partner: "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
|
|
: 'Alle Endkunden'}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={openDrawer}
|
|
className="border-primary/40 text-primary hover:bg-primary/10 h-7 text-xs gap-1.5 shrink-0"
|
|
>
|
|
<UserPlus className="w-3 h-3" /> Neuer Kunde
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Customer Search */}
|
|
<div className="relative shrink-0">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
|
|
<Input
|
|
placeholder="Kunden suchen nach Name, Ort, PLZ, E-Mail..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-8 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
{/* Customer Card List (Isolated Scrollable Area) */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-1.5 py-0.5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
|
{customersByCompany.length === 0 ? (
|
|
<div className="p-4 rounded-xl bg-white/5 border border-white/10 text-center space-y-2 my-auto">
|
|
<Building2 className="w-6 h-6 text-slate-600 mx-auto" />
|
|
<p className="text-slate-400 text-xs">
|
|
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
|
? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
|
|
: 'Noch keine Endkunden vorhanden.'}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={openDrawer}
|
|
className="border-white/10 text-white text-xs h-7"
|
|
>
|
|
<UserPlus className="w-3 h-3 mr-1.5" /> Ersten Kunden anlegen
|
|
</Button>
|
|
</div>
|
|
) : filteredCustomers.length === 0 ? (
|
|
<div className="p-3 text-center text-slate-400 text-xs bg-white/5 rounded-lg border border-white/5 my-auto">
|
|
Keine passenden Kunden für "{searchTerm}" gefunden.
|
|
</div>
|
|
) : (
|
|
paginatedCustomers.map((customer) => {
|
|
const isSelected = selectedEndCustomerId === customer.id
|
|
|
|
return (
|
|
<div
|
|
key={customer.id}
|
|
onClick={() => handleSelectCustomer(customer)}
|
|
className={`flex items-start p-2 rounded-lg border cursor-pointer transition-all select-none ${
|
|
isSelected
|
|
? 'border-primary bg-primary/10 shadow-md 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 min-w-0 pr-2">
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
<p className="font-semibold text-white text-xs truncate leading-tight">{customer.company_name}</p>
|
|
{isAdmin && customer.partner_id && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-[9px] px-1 py-0 border-white/10 text-slate-400 bg-white/5 leading-tight"
|
|
>
|
|
Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-[10px] text-slate-400 mt-0.5 truncate leading-tight">
|
|
{[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>
|
|
{customer.email && (
|
|
<p className="text-[10px] text-slate-500 mt-0.5 flex items-center gap-1 truncate leading-tight">
|
|
<Mail className="w-2.5 h-2.5 shrink-0" /> {customer.email}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{isSelected && <Check className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />}
|
|
</div>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
|
|
{/* Customer Pagination */}
|
|
{totalCustomerCount > 0 && (
|
|
<div className="flex items-center justify-between border-t border-white/10 pt-1.5 text-[10px] text-slate-400 shrink-0 flex-wrap gap-1.5">
|
|
<div className="flex items-center gap-1.5">
|
|
<span>
|
|
{Math.min(currentPage * pageSize, totalCustomerCount)} / {totalCustomerCount} Kunden
|
|
</span>
|
|
<select
|
|
value={pageSize}
|
|
onChange={(e) => setPageSize(Number(e.target.value))}
|
|
className="h-5 rounded border border-white/10 bg-slate-900 px-1 text-[10px] text-white 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 className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(1)}
|
|
disabled={currentPage === 1}
|
|
className="h-5 px-1 text-slate-400 hover:text-white"
|
|
>
|
|
<ChevronsLeft className="w-3 h-3" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
|
disabled={currentPage === 1}
|
|
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
|
|
>
|
|
<ChevronLeft className="w-2.5 h-2.5 mr-0.5" /> Zurück
|
|
</Button>
|
|
<span className="px-1 text-slate-300">
|
|
{currentPage} / {totalCustomerPages}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
|
|
disabled={currentPage === totalCustomerPages}
|
|
className="h-5 px-1.5 border-white/10 text-white text-[10px]"
|
|
>
|
|
Vor <ChevronRight className="w-2.5 h-2.5 ml-0.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(totalCustomerPages)}
|
|
disabled={currentPage === totalCustomerPages}
|
|
className="h-5 px-1 text-slate-400 hover:text-white"
|
|
>
|
|
<ChevronsRight className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
|
|
<div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-4 py-2.5 flex flex-col sm:flex-row items-center justify-between gap-2 z-10">
|
|
{/* Selected Customer Summary Chip */}
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
{activeCustomer ? (
|
|
<div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-primary/10 border border-primary/30 text-white min-w-0">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-primary shrink-0" />
|
|
<div className="text-xs truncate">
|
|
<span className="text-slate-400">Ausgewählt:</span>{' '}
|
|
<strong className="text-white font-semibold">{activeCustomer.company_name}</strong>
|
|
{(activeCustomer.city || activeCustomer.zip) && (
|
|
<span className="text-slate-400 ml-1">
|
|
({[activeCustomer.zip, activeCustomer.city].filter(Boolean).join(' ')})
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-xs text-slate-400 flex items-center gap-1.5">
|
|
<User className="w-3.5 h-3.5 text-slate-500" />
|
|
<span>Bitte wählen Sie einen Kunden aus, um fortzufahren.</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Next Button */}
|
|
<Button
|
|
onClick={nextStep}
|
|
disabled={!selectedEndCustomerId}
|
|
className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-5 shadow-md shadow-primary/20 h-8 text-xs gap-1.5"
|
|
>
|
|
Weiter zu Schritt 2 <ChevronRight className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* ─── 4. SLIDE-OVER DRAWER FOR CUSTOMER CREATION ─── */}
|
|
<AnimatePresence>
|
|
{isDrawerOpen && (
|
|
<div className="fixed inset-0 z-50 overflow-hidden">
|
|
{/* Backdrop */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
onClick={closeDrawer}
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
/>
|
|
|
|
<div className="fixed inset-y-0 right-0 max-w-full flex pl-10">
|
|
<motion.div
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
|
|
className="w-screen max-w-xl bg-slate-900 border-l border-white/10 shadow-2xl flex flex-col justify-between"
|
|
>
|
|
{/* Drawer Header */}
|
|
<div className="p-5 border-b border-white/10 flex items-center justify-between bg-slate-950/60 shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-xl bg-primary/20 border border-primary/30 flex items-center justify-center text-primary">
|
|
<UserPlus className="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-bold text-white">Neuen Kunden anlegen</h3>
|
|
<p className="text-xs text-slate-400">
|
|
{isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
|
|
? `Für Partner: ${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}`
|
|
: 'Erstellen und direkt für die Bestellung auswählen'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={closeDrawer}
|
|
className="text-slate-400 hover:text-white rounded-full h-8 w-8"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Drawer Body / Form */}
|
|
<form id="new-customer-form" onSubmit={onSubmitCustomerForm} className="p-5 overflow-y-auto flex-1 space-y-5 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
|
{/* Basic Info Section */}
|
|
<div className="space-y-3.5">
|
|
<div className="flex items-center gap-2 pb-1 border-b border-white/5">
|
|
<Building className="w-3.5 h-3.5 text-primary" />
|
|
<span className="text-xs font-bold uppercase tracking-wider text-slate-300">
|
|
Stammdaten & Anschrift
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3.5">
|
|
<div className="md:col-span-2 space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">Firmenname *</Label>
|
|
<Input
|
|
required
|
|
value={newCustomerForm.company_name || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, company_name: e.target.value }))
|
|
}
|
|
placeholder="z. B. Musterfirma GmbH & Co. KG"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">USt-IdNr.</Label>
|
|
<Input
|
|
value={newCustomerForm.vat_id || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, vat_id: e.target.value }))
|
|
}
|
|
placeholder="z. B. DE123456789"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">E-Mail</Label>
|
|
<Input
|
|
type="email"
|
|
value={newCustomerForm.email || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, email: e.target.value }))
|
|
}
|
|
placeholder="buchhaltung@muster.de"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">Vorname</Label>
|
|
<Input
|
|
value={newCustomerForm.first_name || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, first_name: e.target.value }))
|
|
}
|
|
placeholder="Max"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">Nachname</Label>
|
|
<Input
|
|
value={newCustomerForm.last_name || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, last_name: e.target.value }))
|
|
}
|
|
placeholder="Mustermann"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2 space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">Straße & Hausnummer</Label>
|
|
<Input
|
|
value={newCustomerForm.street || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, street: e.target.value }))
|
|
}
|
|
placeholder="Hauptstraße 12"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">PLZ</Label>
|
|
<Input
|
|
value={newCustomerForm.zip || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, zip: e.target.value }))
|
|
}
|
|
placeholder="10115"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs font-semibold">Ort</Label>
|
|
<Input
|
|
value={newCustomerForm.city || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, city: e.target.value }))
|
|
}
|
|
placeholder="Berlin"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Collapsible Bank Details Section */}
|
|
<div className="rounded-xl border border-white/10 bg-slate-950/40 overflow-hidden">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowBankDetails((prev) => !prev)}
|
|
className="w-full flex items-center justify-between p-3 text-left hover:bg-white/5 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<CreditCard className="w-3.5 h-3.5 text-slate-400" />
|
|
<div>
|
|
<p className="text-xs font-bold text-white">Optionale Zahlungs-/Bankdaten</p>
|
|
<p className="text-[10px] text-slate-400">SEPA-Lastschrift, IBAN & BIC hinterlegen</p>
|
|
</div>
|
|
</div>
|
|
{showBankDetails ? (
|
|
<ChevronUp className="w-3.5 h-3.5 text-slate-400" />
|
|
) : (
|
|
<ChevronDown className="w-3.5 h-3.5 text-slate-400" />
|
|
)}
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{showBankDetails && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="p-3.5 border-t border-white/10 space-y-3 bg-white/[0.02]"
|
|
>
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs">Kontoinhaber</Label>
|
|
<Input
|
|
value={newCustomerForm.bank_owner || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, bank_owner: e.target.value }))
|
|
}
|
|
placeholder="Max Mustermann"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs">IBAN</Label>
|
|
<Input
|
|
value={newCustomerForm.bank_iban || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, bank_iban: e.target.value }))
|
|
}
|
|
placeholder="DE89370400440532013000"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8 font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2.5">
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs">BIC</Label>
|
|
<Input
|
|
value={newCustomerForm.bank_bic || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, bank_bic: e.target.value }))
|
|
}
|
|
placeholder="SOLADE21XXX"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8 font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-slate-300 text-xs">Bankname</Label>
|
|
<Input
|
|
value={newCustomerForm.bank_name || ''}
|
|
onChange={(e) =>
|
|
setNewCustomerForm((prev: any) => ({ ...prev, bank_name: e.target.value }))
|
|
}
|
|
placeholder="Musterbank"
|
|
className="bg-slate-950/70 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-xs h-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Drawer Footer */}
|
|
<div className="p-4 border-t border-white/10 bg-slate-950/60 flex items-center justify-end gap-2.5 shrink-0">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={closeDrawer}
|
|
disabled={isCreatingCustomer}
|
|
className="text-slate-300 hover:text-white h-8 text-xs"
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
form="new-customer-form"
|
|
disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
|
|
className="gap-2 bg-primary hover:bg-primary/90 text-white font-semibold px-4 h-8 text-xs"
|
|
>
|
|
{isCreatingCustomer ? (
|
|
<>
|
|
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
|
Speichere Kunde...
|
|
</>
|
|
) : (
|
|
<>
|
|
<UserPlus className="w-3.5 h-3.5" />
|
|
Kunden anlegen & auswählen
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</>
|
|
)
|
|
}
|