From 3db3606f17ddafa43ff03c3abd64f741c045c2e8 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 21 Jul 2026 11:17:56 +0200
Subject: [PATCH] style(wizard): align partner and customer list color scheme

---
 shop/components/wizard/step-customer.tsx | 52 +++++++++++++++---------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/shop/components/wizard/step-customer.tsx b/shop/components/wizard/step-customer.tsx
index 5aa41ac..396dd75 100644
--- a/shop/components/wizard/step-customer.tsx
+++ b/shop/components/wizard/step-customer.tsx
@@ -154,9 +154,9 @@ export function StepCustomer({
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-8">
-        {/* ─── 1. ADMIN PARTNER SELECTION (Unified Card/List with Pagination) ─── */}
+        {/* ─── 1. ADMIN PARTNER SELECTION ─── */}
         {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>
                 <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..."
                   value={partnerSearchTerm}
                   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>
 
@@ -189,7 +189,7 @@ export function StepCustomer({
                 <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"
+                  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>
@@ -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 ${
                   selectedCompanyId === 'all' || !selectedCompanyId
                     ? '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="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" />
                   </div>
                   <div>
@@ -223,7 +223,7 @@ export function StepCustomer({
                   </div>
                 </div>
                 <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
                   </Badge>
                   {(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 ${
                       isSelected
                         ? '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="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" />
                       </div>
                       <div>
@@ -263,7 +263,7 @@ export function StepCustomer({
                         className={`text-xs ${
                           customerCount > 0
                             ? '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'}
@@ -275,7 +275,7 @@ export function StepCustomer({
               })}
 
               {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.
                 </div>
               )}
@@ -357,9 +357,23 @@ export function StepCustomer({
           </Button>
         </div>
 
-        {/* ─── 2. CUSTOMER SELECTION (Unified Card/List with Pagination) ─── */}
+        {/* ─── 2. CUSTOMER SELECTION ─── */}
         {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 ? (
               <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" />
@@ -387,7 +401,7 @@ export function StepCustomer({
                       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"
+                      className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
                     />
                   </div>
 
@@ -407,8 +421,8 @@ export function StepCustomer({
                 </div>
 
                 {filteredCustomers.length === 0 ? (
-                  <div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center">
-                    <p className="text-slate-400">Keine passenden Kunden gefunden.</p>
+                  <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>
                 ) : (
                   <>
@@ -421,7 +435,7 @@ export function StepCustomer({
                           <div
                             key={customer.id}
                             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
                                 ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
                                 : 'border-white/5 bg-white/5 hover:bg-white/10'
@@ -437,7 +451,7 @@ export function StepCustomer({
                             />
                             <div className="flex-1">
                               <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 && (
                                   <Badge
                                     variant="outline"
@@ -447,7 +461,7 @@ export function StepCustomer({
                                   </Badge>
                                 )}
                               </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 ? ' · ' : ''}
                                 {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}