blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync client segment badge colors
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m20s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-25 13:19:26 -03:00
parent eb77dd3ba2
commit af01eba4a7
1 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/Clients.tsx
View File

@@ -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> = {
'Sem análise': 'border-zinc-600/30 bg-zinc-600/15 text-zinc-300',
'Campeão': 'border-emerald-500/30 bg-emerald-500/15 text-emerald-300',
'Potencial Leal': 'border-sky-500/30 bg-sky-500/15 text-sky-300',
'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'
type ClientTypeStyle = {
bg: string;
border: string;
text: string;
};
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>