Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(wizard): align partner and customer list color scheme
All checks were successful
Staging Build / build (push) Successful in 2m53s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-21 11:17:56 +02:00
parent f1877cf893
commit 3db3606f17
1 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
shop/components/wizard/step-customer.tsx
View File

@@ -154,9 +154,9 @@ export function StepCustomer({
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-8"> <CardContent className="space-y-8">
{/* ─── 1. ADMIN PARTNER SELECTION (Unified Card/List with Pagination) ─── */} {/* ─── 1. ADMIN PARTNER SELECTION ─── */}
{isAdmin && ( {isAdmin && (
<div className="p-5 rounded-2xl bg-slate-900/60 border border-primary/20 space-y-4"> <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 className="flex items-center justify-between gap-4 flex-wrap">
<div> <div>
<Label className="text-white font-bold text-base flex items-center gap-2"> <Label className="text-white font-bold text-base flex items-center gap-2">
@@ -180,7 +180,7 @@ export function StepCustomer({
placeholder="Partner suchen nach Name oder ID..." placeholder="Partner suchen nach Name oder ID..."
value={partnerSearchTerm} value={partnerSearchTerm}
onChange={(e) => setPartnerSearchTerm(e.target.value)} onChange={(e) => setPartnerSearchTerm(e.target.value)}
className="pl-9 bg-slate-950/80 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9" className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
/> />
</div> </div>
@@ -189,7 +189,7 @@ export function StepCustomer({
<select <select
value={partnerPageSize} value={partnerPageSize}
onChange={(e) => setPartnerPageSize(Number(e.target.value))} 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" 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={10}>10</option>
<option value={20}>20</option> <option value={20}>20</option>
@@ -206,11 +206,11 @@ export function StepCustomer({
className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${ className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
selectedCompanyId === 'all' || !selectedCompanyId selectedCompanyId === 'all' || !selectedCompanyId
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5' ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
: 'border-white/5 bg-slate-950/40 hover:bg-white/5' : 'border-white/5 bg-white/5 hover:bg-white/10'
}`} }`}
> >
<div className="flex items-center gap-3"> <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"> <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" /> <Users className="w-4 h-4" />
</div> </div>
<div> <div>
@@ -223,7 +223,7 @@ export function StepCustomer({
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Badge variant="outline" className="border-white/10 text-slate-300 text-xs"> <Badge variant="outline" className="border-white/10 text-slate-300 text-xs bg-white/5">
{endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt {endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
</Badge> </Badge>
{(selectedCompanyId === 'all' || !selectedCompanyId) && ( {(selectedCompanyId === 'all' || !selectedCompanyId) && (
@@ -244,11 +244,11 @@ export function StepCustomer({
className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${ className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
isSelected isSelected
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5' ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
: 'border-white/5 bg-slate-950/40 hover:bg-white/5' : 'border-white/5 bg-white/5 hover:bg-white/10'
}`} }`}
> >
<div className="flex items-center gap-3"> <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"> <div className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
<Building2 className="w-4 h-4 text-slate-400" /> <Building2 className="w-4 h-4 text-slate-400" />
</div> </div>
<div> <div>
@@ -263,7 +263,7 @@ export function StepCustomer({
className={`text-xs ${ className={`text-xs ${
customerCount > 0 customerCount > 0
? 'border-green-500/30 text-green-400 bg-green-500/10' ? 'border-green-500/30 text-green-400 bg-green-500/10'
: 'border-white/10 text-slate-500' : 'border-white/10 text-slate-500 bg-white/5'
}`} }`}
> >
{customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'} {customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'}
@@ -275,7 +275,7 @@ export function StepCustomer({
})} })}
{filteredCompanies.length === 0 && ( {filteredCompanies.length === 0 && (
<div className="p-4 text-center text-slate-400 text-xs bg-slate-950/40 rounded-xl border border-white/5"> <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 &quot;{partnerSearchTerm}&quot; gefunden. Keine Partner mit dem Suchbegriff &quot;{partnerSearchTerm}&quot; gefunden.
</div> </div>
)} )}
@@ -357,9 +357,23 @@ export function StepCustomer({
</Button> </Button>
</div> </div>
{/* ─── 2. CUSTOMER SELECTION (Unified Card/List with Pagination) ─── */} {/* ─── 2. CUSTOMER SELECTION ─── */}
{customerMode === 'select' && ( {customerMode === 'select' && (
<div className="space-y-4"> <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 ? ( {customersByCompany.length === 0 ? (
<div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3"> <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" /> <Building2 className="w-10 h-10 text-slate-600 mx-auto" />
@@ -387,7 +401,7 @@ export function StepCustomer({
placeholder="Kunden suchen nach Name, Ort, PLZ..." placeholder="Kunden suchen nach Name, Ort, PLZ..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500" className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
/> />
</div> </div>
@@ -407,8 +421,8 @@ export function StepCustomer({
</div> </div>
{filteredCustomers.length === 0 ? ( {filteredCustomers.length === 0 ? (
<div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center"> <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
<p className="text-slate-400">Keine passenden Kunden gefunden.</p> Keine passenden Kunden gefunden.
</div> </div>
) : ( ) : (
<> <>
@@ -421,7 +435,7 @@ export function StepCustomer({
<div <div
key={customer.id} key={customer.id}
onClick={() => handleSelectCustomer(customer)} onClick={() => handleSelectCustomer(customer)}
className={`flex items-start p-4 rounded-xl border-2 cursor-pointer transition-all select-none ${ className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
isSelected isSelected
? 'border-primary bg-primary/10 shadow-lg shadow-primary/5' ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
: 'border-white/5 bg-white/5 hover:bg-white/10' : 'border-white/5 bg-white/5 hover:bg-white/10'
@@ -437,7 +451,7 @@ export function StepCustomer({
/> />
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<p className="font-semibold text-white">{customer.company_name}</p> <p className="font-semibold text-white text-sm">{customer.company_name}</p>
{isAdmin && customer.partner_id && ( {isAdmin && customer.partner_id && (
<Badge <Badge
variant="outline" variant="outline"
@@ -447,7 +461,7 @@ export function StepCustomer({
</Badge> </Badge>
)} )}
</div> </div>
<p className="text-sm text-slate-400 mt-0.5"> <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].filter(Boolean).join(' ')}
{customer.first_name || customer.last_name ? ' · ' : ''} {customer.first_name || customer.last_name ? ' · ' : ''}
{[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')} {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}