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

Refine RFM page table UX
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m27s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-12 12:29:40 -03:00
parent fe8d0ff105
commit ba27a342f8
1 changed files with 71 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/pages/Rfm.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { Database, Download, Filter, Loader2, Search, Sparkles, Users } from 'lucide-react';
import { ChevronLeft, ChevronRight, Download, Filter, Loader2, Search, Users } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import { exportToCSV, fetchRfmAnalytics } from '../dataService';
import type { DateRange, RfmAnalytics, RfmClient, RfmSegment } from '../types';
@@ -68,178 +68,6 @@ const segmentByScore: Record<string, string> = {
'1-1': 'lost'
};
const demoClients: RfmClient[] = [
{
name: 'Ana Paula Ribeiro',
phone: '+55 11 90000-0001',
monetary: 4820,
frequency: 12,
quantityPurchased: 38,
lastPurchaseDate: '2026-06-10',
recencyDays: 1,
recencyScore: 3,
frequencyScore: 3,
monetaryScore: 3,
valueScore: 3,
rfmScore: '333',
segmentKey: 'champions',
segmentLabel: 'Champions'
},
{
name: 'Bruno Ferreira',
phone: '+55 11 90000-0002',
monetary: 1680,
frequency: 5,
quantityPurchased: 14,
lastPurchaseDate: '2026-06-09',
recencyDays: 2,
recencyScore: 3,
frequencyScore: 2,
monetaryScore: 2,
valueScore: 2,
rfmScore: '322',
segmentKey: 'potential_loyalists',
segmentLabel: 'Potenciais Leais'
},
{
name: 'Carla Mendes',
phone: '+55 11 90000-0003',
monetary: 249,
frequency: 1,
quantityPurchased: 2,
lastPurchaseDate: '2026-06-08',
recencyDays: 3,
recencyScore: 3,
frequencyScore: 1,
monetaryScore: 1,
valueScore: 1,
rfmScore: '311',
segmentKey: 'new_customers',
segmentLabel: 'Novos Clientes'
},
{
name: 'Diego Nascimento',
phone: '+55 11 90000-0004',
monetary: 3920,
frequency: 10,
quantityPurchased: 31,
lastPurchaseDate: '2026-05-24',
recencyDays: 18,
recencyScore: 2,
frequencyScore: 3,
monetaryScore: 3,
valueScore: 3,
rfmScore: '233',
segmentKey: 'loyal_customers',
segmentLabel: 'Clientes Leais'
},
{
name: 'Elisa Costa',
phone: '+55 11 90000-0005',
monetary: 1210,
frequency: 4,
quantityPurchased: 9,
lastPurchaseDate: '2026-05-18',
recencyDays: 24,
recencyScore: 2,
frequencyScore: 2,
monetaryScore: 2,
valueScore: 2,
rfmScore: '222',
segmentKey: 'need_attention',
segmentLabel: 'Precisam de Atenção'
},
{
name: 'Felipe Azevedo',
phone: '+55 11 90000-0006',
monetary: 390,
frequency: 2,
quantityPurchased: 3,
lastPurchaseDate: '2026-05-12',
recencyDays: 30,
recencyScore: 2,
frequencyScore: 1,
monetaryScore: 1,
valueScore: 1,
rfmScore: '211',
segmentKey: 'about_to_sleep',
segmentLabel: 'Quase Dormindo'
},
{
name: 'Gabriela Martins',
phone: '+55 11 90000-0007',
monetary: 5350,
frequency: 14,
quantityPurchased: 44,
lastPurchaseDate: '2026-03-28',
recencyDays: 75,
recencyScore: 1,
frequencyScore: 3,
monetaryScore: 3,
valueScore: 3,
rfmScore: '133',
segmentKey: 'at_risk',
segmentLabel: 'Em Risco'
},
{
name: 'Henrique Lima',
phone: '+55 11 90000-0008',
monetary: 980,
frequency: 4,
quantityPurchased: 8,
lastPurchaseDate: '2026-03-06',
recencyDays: 97,
recencyScore: 1,
frequencyScore: 2,
monetaryScore: 2,
valueScore: 2,
rfmScore: '122',
segmentKey: 'hibernating',
segmentLabel: 'Hibernando'
},
{
name: 'Isabela Rocha',
phone: '+55 11 90000-0009',
monetary: 120,
frequency: 1,
quantityPurchased: 1,
lastPurchaseDate: '2026-01-29',
recencyDays: 133,
recencyScore: 1,
frequencyScore: 1,
monetaryScore: 1,
valueScore: 1,
rfmScore: '111',
segmentKey: 'lost',
segmentLabel: 'Perdidos'
}
];
const demoSegments: RfmSegment[] = rfmSegmentDefinitions.map(segment => {
const segmentClients = demoClients.filter(client => client.segmentKey === segment.key);
const totalRevenue = segmentClients.reduce((sum, client) => sum + client.monetary, 0);
return {
...segment,
count: segmentClients.length,
totalRevenue,
averageRevenue: segmentClients.length ? totalRevenue / segmentClients.length : 0
};
});
const demoAnalytics: RfmAnalytics = {
range: {
start: '2026-01-01',
end: '2026-06-11'
},
clients: demoClients,
segments: demoSegments,
matrix: {
recencyScores: [3, 2, 1],
valueScores: [1, 2, 3]
}
};
const formatCurrency = (value: number) => {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
};
@@ -283,7 +111,8 @@ const Rfm = () => {
const [searchTerm, setSearchTerm] = useState('');
const [segmentFilter, setSegmentFilter] = useState('all');
const [selectedSegmentKey, setSelectedSegmentKey] = useState('');
const [isDemoMode, setIsDemoMode] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(20);
const loadRfm = useCallback(async (range: DateRange) => {
setIsLoading(true);
@@ -308,7 +137,7 @@ const Rfm = () => {
return () => clearInterval(intervalId);
}, [dateRange, loadRfm, refreshInterval]);
const visibleAnalytics = isDemoMode ? demoAnalytics : analytics;
const visibleAnalytics = analytics;
const clients = visibleAnalytics?.clients || emptyClients;
const segments = useMemo(() => {
const sourceSegments = visibleAnalytics?.segments || emptySegments;
@@ -323,13 +152,6 @@ const Rfm = () => {
});
}, [visibleAnalytics]);
const toggleDemoMode = () => {
setIsDemoMode(current => !current);
setSegmentFilter('all');
setSearchTerm('');
setSelectedSegmentKey('');
};
const filteredClients = useMemo(() => {
const normalizedSearch = searchTerm.trim().toLowerCase();
@@ -343,6 +165,10 @@ const Rfm = () => {
});
}, [clients, searchTerm, segmentFilter]);
const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
const startIndex = (currentPage - 1) * itemsPerPage;
const paginatedClients = filteredClients.slice(startIndex, startIndex + itemsPerPage);
const totals = useMemo(() => {
const totalRevenue = clients.reduce((sum, client) => sum + client.monetary, 0);
const activeSegments = segments.filter(segment => segment.count > 0).length;
@@ -407,18 +233,6 @@ const Rfm = () => {
</div>
<div className="flex flex-col sm:flex-row flex-wrap gap-3 items-start sm:items-center">
<button
onClick={toggleDemoMode}
className={`inline-flex items-center justify-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-bold transition-colors cursor-pointer ${
isDemoMode
? 'border-amber-500/40 bg-amber-500/10 text-amber-300 hover:bg-amber-500/15'
: 'border-dark-border bg-dark-card text-dark-text hover:border-brand-primary'
}`}
>
{isDemoMode ? <Database className="h-4 w-4" /> : <Sparkles className="h-4 w-4" />}
{isDemoMode ? 'Voltar para dados reais' : 'Ver dados demo'}
</button>
<DateRangePicker
dateRange={dateRange}
onChange={setDateRange}
@@ -429,13 +243,7 @@ const Rfm = () => {
</div>
</div>
{isDemoMode && (
<div className="rounded-2xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm font-semibold text-amber-200">
Visualização com dados fictícios. Nenhum cliente real ou dado do banco foi alterado.
</div>
)}
{!isDemoMode && isLoading && (
{isLoading && (
<div className="inline-flex items-center gap-2 rounded-xl border border-dark-border bg-dark-card px-3 py-2 text-sm font-semibold text-dark-muted">
<Loader2 className="h-4 w-4 animate-spin text-brand-primary" />
Atualizando RFM
@@ -513,6 +321,7 @@ const Rfm = () => {
onClick={() => {
setSegmentFilter(segment?.key || 'all');
setSelectedSegmentKey(segment?.key || '');
setCurrentPage(1);
}}
className={`group min-h-28 rounded-xl border p-3 text-left transition-all hover:-translate-y-0.5 hover:border-brand-primary cursor-pointer ${
isActive ? 'border-brand-primary ring-1 ring-brand-primary/50' : 'border-dark-border'
@@ -563,6 +372,7 @@ const Rfm = () => {
onClick={() => {
setSegmentFilter(segment.key);
setSelectedSegmentKey(segment.key);
setCurrentPage(1);
}}
className={`w-full rounded-xl border px-4 py-3 text-left transition-colors cursor-pointer ${
segmentFilter === segment.key ? 'border-brand-primary bg-dark-input' : 'border-dark-border bg-transparent hover:border-brand-primary'
@@ -626,7 +436,10 @@ const Rfm = () => {
<Filter className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-muted" />
<select
value={segmentFilter}
onChange={(event) => setSegmentFilter(event.target.value)}
onChange={(event) => {
setSegmentFilter(event.target.value);
setCurrentPage(1);
}}
className="appearance-none bg-dark-input border border-dark-border text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm cursor-pointer"
>
<option value="all">Todos os segmentos</option>
@@ -642,7 +455,10 @@ const Rfm = () => {
type="text"
placeholder="Buscar cliente..."
value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)}
onChange={(event) => {
setSearchTerm(event.target.value);
setCurrentPage(1);
}}
className="w-full sm:w-72 bg-dark-input border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary hover:border-brand-primary transition-colors shadow-sm"
/>
</div>
@@ -673,22 +489,11 @@ const Rfm = () => {
</tr>
</thead>
<tbody className="divide-y divide-dark-border">
{filteredClients.map((client: RfmClient) => {
{paginatedClients.map((client: RfmClient) => {
const style = segmentStyles[client.segmentKey] || segmentStyles.lost;
return (
<tr key={client.phone} className="hover:bg-dark-input/50 transition-colors">
<td className="px-6 py-3">
{isDemoMode ? (
<div className="flex items-center gap-3">
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-dark-input text-dark-muted">
<Users className="h-4 w-4" />
</span>
<span>
<span className="block font-bold text-dark-text">{client.name}</span>
<span className="block text-xs font-medium text-dark-muted">{client.phone || 'N/A'}</span>
</span>
</div>
) : (
<Link to={`/clients/${encodeURIComponent(client.name)}`} className="flex items-center gap-3 hover:text-brand-primary transition-colors">
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-dark-input text-dark-muted">
<Users className="h-4 w-4" />
@@ -698,7 +503,6 @@ const Rfm = () => {
<span className="block text-xs font-medium text-dark-muted">{client.phone || 'N/A'}</span>
</span>
</Link>
)}
</td>
<td className="px-6 py-3">
<span className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-bold ${style.bg} ${style.text}`}>
@@ -732,6 +536,48 @@ const Rfm = () => {
Nenhum cliente encontrado.
</div>
)}
<div className="px-6 py-4 border-t border-dark-border flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2 text-sm text-dark-muted">
<span>Mostrar</span>
<select
value={itemsPerPage}
onChange={(event) => {
setItemsPerPage(Number(event.target.value));
setCurrentPage(1);
}}
className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
<option value={100}>100</option>
</select>
<span>clientes por página</span>
</div>
<div className="flex items-center gap-4 text-sm">
<span className="text-dark-muted">
Mostrando {filteredClients.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + itemsPerPage, filteredClients.length)} de {filteredClients.length} clientes
</span>
<div className="flex gap-1">
<button
onClick={() => setCurrentPage(page => Math.max(1, page - 1))}
disabled={currentPage === 1}
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
onClick={() => setCurrentPage(page => Math.min(totalPages, page + 1))}
disabled={currentPage === totalPages || totalPages === 0}
className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
>
<ChevronRight className="w-5 h-5" />
</button>
</div>
</div>
</div>
</section>
</div>
);