Sync client segment badge colors

src/pages/Clients.tsx

@@ -7,19 +7,31 @@ import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, range
 import type { ClientSortOption, ClientSummary } from '../analytics/clients';
 import { formatDisplayName, removeTrailingSellerId } from '../displayFormatters';
 
-const clientTypeStyles: Record<string, string> = {
+type ClientTypeStyle = {
-  'Sem análise': 'border-zinc-600/30 bg-zinc-600/15 text-zinc-300',
+  bg: string;
-  'Campeão': 'border-emerald-500/30 bg-emerald-500/15 text-emerald-300',
+  border: string;
-  'Potencial Leal': 'border-sky-500/30 bg-sky-500/15 text-sky-300',
+  text: string;
-  'Novo Cliente': 'border-cyan-500/30 bg-cyan-500/15 text-cyan-300',
-  'Cliente Leal': 'border-blue-500/30 bg-blue-500/15 text-blue-300',
-  'Precisa de Atenção': 'border-amber-500/30 bg-amber-500/15 text-amber-300',
-  'Quase Dormindo': 'border-orange-500/30 bg-orange-500/15 text-orange-300',
-  'Em Risco': 'border-rose-500/30 bg-rose-500/15 text-rose-300',
-  'Hibernando': 'border-fuchsia-500/30 bg-fuchsia-500/15 text-fuchsia-300',
-  'Perdido': 'border-zinc-500/30 bg-zinc-500/15 text-zinc-300'
 };
 
+const clientTypeStyles: Record<string, ClientTypeStyle> = {
+  'Sem análise': { bg: 'rgba(140, 146, 152, 0.08)', border: 'rgba(140, 146, 152, 0.24)', text: '#b3b7bb' },
+  'Campeão': { bg: 'rgba(24, 214, 181, 0.10)', border: 'rgba(24, 214, 181, 0.34)', text: '#18D6B5' },
+  'Potencial Leal': { bg: 'rgba(163, 230, 53, 0.10)', border: 'rgba(163, 230, 53, 0.34)', text: '#A3E635' },
+  'Novo Cliente': { bg: 'rgba(37, 194, 255, 0.10)', border: 'rgba(37, 194, 255, 0.34)', text: '#25C2FF' },
+  'Cliente Leal': { bg: 'rgba(110, 165, 255, 0.10)', border: 'rgba(110, 165, 255, 0.34)', text: '#6EA5FF' },
+  'Precisa de Atenção': { bg: 'rgba(255, 194, 71, 0.11)', border: 'rgba(255, 194, 71, 0.34)', text: '#FFC247' },
+  'Quase Dormindo': { bg: 'rgba(255, 138, 61, 0.11)', border: 'rgba(255, 138, 61, 0.34)', text: '#FF8A3D' },
+  'Em Risco': { bg: 'rgba(255, 93, 125, 0.11)', border: 'rgba(255, 93, 125, 0.34)', text: '#FF5D7D' },
+  'Hibernando': { bg: 'rgba(199, 125, 255, 0.11)', border: 'rgba(199, 125, 255, 0.34)', text: '#C77DFF' },
+  'Perdido': { bg: 'rgba(140, 146, 152, 0.08)', border: 'rgba(140, 146, 152, 0.24)', text: '#b3b7bb' }
+};
+
+const clientTypePillStyle = (style: ClientTypeStyle) => ({
+  backgroundColor: style.bg,
+  borderColor: style.border,
+  color: style.text
+});
+
 const clientTypes = [
   'Sem análise',
   'Campeão',
@@ -586,7 +598,10 @@ const Clients = () => {
               </tr>
             </thead>
             <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
-              {paginatedData.map((client, index) => (
+              {paginatedData.map((client, index) => {
+                const clientTypeStyle = clientTypeStyles[client.clientType] || clientTypeStyles.Perdido;
+
+                return (
                 <tr key={client.customerKey} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
                   <td className="px-6 py-2.5">
                     <span className="inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold bg-zinc-100 dark:bg-dark-border text-zinc-500 dark:text-dark-muted">
@@ -595,7 +610,10 @@ const Clients = () => {
                   </td>
                   <td className="px-6 py-2.5 font-semibold text-zinc-900 dark:text-dark-text">{client.name}</td>
                   <td className="px-6 py-2.5">
-                    <span className={`inline-flex rounded-full border px-3 py-1 text-xs font-bold ${clientTypeStyles[client.clientType] || clientTypeStyles.Perdido}`}>
+                    <span
+                      className="inline-flex rounded-full border px-3 py-1 text-xs font-bold"
+                      style={clientTypePillStyle(clientTypeStyle)}
+                    >
                       {client.clientType}
                     </span>
                   </td>
@@ -626,7 +644,8 @@ const Clients = () => {
                     </Link>
                   </td>
                 </tr>
-              ))}
+              );
+              })}
             </tbody>
           </table>
         </div>