feat(wizard): unify partner and customer selection list UI
All checks were successful
Staging Build / build (push) Successful in 2m57s
All checks were successful
Staging Build / build (push) Successful in 2m57s
This commit is contained in:
DanielS
@@ -5,6 +5,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
|
||||
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,
|
||||
@@ -16,6 +17,7 @@ import {
|
||||
ChevronLeft,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Users,
|
||||
} from 'lucide-react'
|
||||
import { EndCustomer } from '@/lib/types'
|
||||
|
||||
@@ -57,26 +59,51 @@ export function StepCustomer({
|
||||
isCreatingCustomer,
|
||||
nextStep,
|
||||
}: StepCustomerProps) {
|
||||
const [pageSize, setPageSize] = useState<number>(10)
|
||||
const [currentPage, setCurrentPage] = useState<number>(1)
|
||||
|
||||
// ─── PARTNER SELECTION STATE & PAGINATION (Admins only) ──────────────────────
|
||||
const [partnerSearchTerm, setPartnerSearchTerm] = useState('')
|
||||
const [partnerPageSize, setPartnerPageSize] = useState<number>(10)
|
||||
const [partnerCurrentPage, setPartnerCurrentPage] = useState<number>(1)
|
||||
|
||||
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])
|
||||
|
||||
// Filter partner companies by partnerSearchTerm
|
||||
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)
|
||||
return companies.filter(
|
||||
(c: any) => c.name?.toLowerCase().includes(term) || c.id?.toLowerCase().includes(term)
|
||||
)
|
||||
}, [companies, partnerSearchTerm])
|
||||
|
||||
// Reset page to 1 when search or company filter or pageSize changes
|
||||
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 company (if admin and selectedCompanyId != 'all')
|
||||
// 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') {
|
||||
@@ -85,7 +112,7 @@ export function StepCustomer({
|
||||
return list
|
||||
}, [endCustomers, isAdmin, selectedCompanyId])
|
||||
|
||||
// Search filter
|
||||
// Customer search filter
|
||||
const filteredCustomers = useMemo(() => {
|
||||
const term = searchTerm.toLowerCase().trim()
|
||||
if (!term) return customersByCompany
|
||||
@@ -99,14 +126,22 @@ export function StepCustomer({
|
||||
)
|
||||
}, [customersByCompany, searchTerm])
|
||||
|
||||
const totalCount = filteredCustomers.length
|
||||
const totalPages = Math.ceil(totalCount / pageSize) || 1
|
||||
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])
|
||||
|
||||
// Click handler for customer selection
|
||||
const handleSelectCustomer = (customer: EndCustomer) => {
|
||||
setSelectedEndCustomerId(customer.id)
|
||||
if (isAdmin && customer.partner_id && (selectedCompanyId === 'all' || !selectedCompanyId)) {
|
||||
setSelectedCompanyId(customer.partner_id)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="glass-dark border-white/10">
|
||||
<CardHeader>
|
||||
@@ -115,45 +150,194 @@ export function StepCustomer({
|
||||
Für wen bestellen Sie?
|
||||
</CardTitle>
|
||||
<CardDescription className="text-slate-300">
|
||||
Wählen Sie einen Endkunden aus oder legen Sie einen neuen an.
|
||||
Wählen Sie den Partner (für Admins) und den Endkunden aus oder legen Sie einen neuen an.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Admin Partner Dropdown with Search */}
|
||||
<CardContent className="space-y-8">
|
||||
{/* ─── 1. ADMIN PARTNER SELECTION (Unified Card/List with Pagination) ─── */}
|
||||
{isAdmin && (
|
||||
<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-3">
|
||||
<Label htmlFor="order-company" className="text-white font-medium flex items-center gap-2">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
Partner-Auswahl (Admin-Funktion)
|
||||
</Label>
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
<div className="p-5 rounded-2xl bg-slate-900/60 border border-primary/20 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..."
|
||||
placeholder="Partner suchen nach Name oder ID..."
|
||||
value={partnerSearchTerm}
|
||||
onChange={(e) => setPartnerSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-slate-900 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
|
||||
className="pl-9 bg-slate-950/80 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
id="order-company"
|
||||
value={selectedCompanyId || 'all'}
|
||||
onChange={(e) => setSelectedCompanyId(e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-white/10 bg-slate-900 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary text-white"
|
||||
|
||||
<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-950 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')}
|
||||
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-slate-950/40 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<option value="all">Alle Partner (Firmenübergreifend)</option>
|
||||
{filteredCompanies.map((c: any) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<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">
|
||||
<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">
|
||||
{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>
|
||||
|
||||
{/* 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)}
|
||||
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-slate-950/40 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<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">
|
||||
<Building2 className="w-4 h-4 text-slate-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white text-sm">{c.name}</p>
|
||||
<p className="text-xs text-slate-500 font-mono">ID: {c.id}</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'
|
||||
}`}
|
||||
>
|
||||
{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-slate-950/40 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 */}
|
||||
{/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={customerMode === 'select' ? 'default' : 'ghost'}
|
||||
@@ -173,13 +357,17 @@ export function StepCustomer({
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Modus A: Bestandskunde wählen */}
|
||||
{/* ─── 2. CUSTOMER SELECTION (Unified Card/List with Pagination) ─── */}
|
||||
{customerMode === 'select' && (
|
||||
<div className="space-y-4">
|
||||
{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">Keine Endkunden vorhanden.</p>
|
||||
<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"
|
||||
@@ -191,7 +379,7 @@ export function StepCustomer({
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Search & Page Size Header */}
|
||||
{/* 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" />
|
||||
@@ -205,7 +393,7 @@ export function StepCustomer({
|
||||
|
||||
{/* Page Size Selector */}
|
||||
<div className="flex items-center gap-2 self-end sm:self-auto">
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">Einträge pro Seite:</span>
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
@@ -224,45 +412,58 @@ export function StepCustomer({
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Kundenliste */}
|
||||
{/* Customer Card List */}
|
||||
<div className="space-y-2 max-h-80 overflow-y-auto pr-1">
|
||||
{paginatedCustomers.map((customer) => (
|
||||
<label
|
||||
key={customer.id}
|
||||
className={`flex items-start p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
selectedEndCustomerId === customer.id
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-white/5 bg-white/5 hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="end_customer"
|
||||
value={customer.id}
|
||||
checked={selectedEndCustomerId === customer.id}
|
||||
onChange={() => setSelectedEndCustomerId(customer.id)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-white">{customer.company_name}</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
{[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>
|
||||
{paginatedCustomers.map((customer) => {
|
||||
const isSelected = selectedEndCustomerId === customer.id
|
||||
|
||||
return (
|
||||
<div
|
||||
key={customer.id}
|
||||
onClick={() => handleSelectCustomer(customer)}
|
||||
className={`flex items-start p-4 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">{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-sm 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>
|
||||
{selectedEndCustomerId === customer.id && (
|
||||
<Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Pagination Footer */}
|
||||
{/* 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 {(currentPage - 1) * pageSize + 1} bis{' '}
|
||||
{Math.min(currentPage * pageSize, totalCount)} von {totalCount} Kunden
|
||||
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">
|
||||
@@ -283,27 +484,27 @@ export function StepCustomer({
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
<ChevronLeft className="w-3.5 h-3.5 mr-1" /> Vorherige
|
||||
<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 {totalPages}
|
||||
Seite {currentPage} von {totalCustomerPages}
|
||||
</span>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
|
||||
disabled={currentPage === totalCustomerPages}
|
||||
className="h-8 px-2.5 border-white/10 text-white"
|
||||
>
|
||||
Nächste <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||
Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(totalPages)}
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage(totalCustomerPages)}
|
||||
disabled={currentPage === totalCustomerPages}
|
||||
className="h-8 px-2 text-slate-400 hover:text-white"
|
||||
title="Letzte Seite"
|
||||
>
|
||||
@@ -318,7 +519,7 @@ export function StepCustomer({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modus B: Neuen Kunden anlegen */}
|
||||
{/* ─── 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">
|
||||
{(
|
||||
|
||||
Reference in New Issue
Block a user