feat: implement secure multi-tenancy, RBAC, and premium dark mode
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m54s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m54s
- Enforced tenant isolation and Role-Based Access Control across all API routes - Implemented secure profile avatar upload using multer and UUIDs - Redesigned UI with a premium "Onyx & Gold" Charcoal dark mode - Added Funnel Stage and Origin filters to Dashboard and User Detail pages - Replaced "Referral" with "Indicação" across the platform and database - Optimized Dockerfile and local environment setup for reliable deployments - Fixed frontend syntax errors and improved KPI/Chart visualizations
This commit is contained in:
Cauê Faleiros
@@ -15,14 +15,12 @@ interface SellersTableProps {
|
||||
data: SellerStat[];
|
||||
}
|
||||
|
||||
type SortKey = keyof SellerStat | 'name'; // 'name' is inside user object
|
||||
|
||||
export const SellersTable: React.FC<SellersTableProps> = ({ data }) => {
|
||||
const navigate = useNavigate();
|
||||
const [sortKey, setSortKey] = useState<SortKey>('conversionRate');
|
||||
const [sortKey, setSortKey] = useState<keyof SellerStat>('total');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
|
||||
const handleSort = (key: SortKey) => {
|
||||
const handleSort = (key: keyof SellerStat) => {
|
||||
if (sortKey === key) {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
@@ -33,111 +31,123 @@ export const SellersTable: React.FC<SellersTableProps> = ({ data }) => {
|
||||
|
||||
const sortedData = useMemo(() => {
|
||||
return [...data].sort((a, b) => {
|
||||
let aValue: any = a[sortKey as keyof SellerStat];
|
||||
let bValue: any = b[sortKey as keyof SellerStat];
|
||||
|
||||
if (sortKey === 'name') {
|
||||
aValue = a.user.name;
|
||||
bValue = b.user.name;
|
||||
} else {
|
||||
// Convert strings like "85.5" to numbers for sorting
|
||||
aValue = parseFloat(aValue as string);
|
||||
bValue = parseFloat(bValue as string);
|
||||
const aVal = a[sortKey];
|
||||
const bVal = b[sortKey];
|
||||
|
||||
if (typeof aVal === 'string' && typeof bVal === 'string') {
|
||||
return sortDirection === 'asc'
|
||||
? aVal.localeCompare(bVal)
|
||||
: bVal.localeCompare(aVal);
|
||||
}
|
||||
|
||||
if (typeof aVal === 'number' && typeof bVal === 'number') {
|
||||
return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
|
||||
}
|
||||
|
||||
// Handle user object (sort by name)
|
||||
if (sortKey === 'user') {
|
||||
return sortDirection === 'asc'
|
||||
? a.user.name.localeCompare(b.user.name)
|
||||
: b.user.name.localeCompare(a.user.name);
|
||||
}
|
||||
|
||||
if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}, [data, sortKey, sortDirection]);
|
||||
|
||||
const SortIcon = ({ column }: { column: SortKey }) => {
|
||||
if (sortKey !== column) return <ChevronsUpDown size={14} className="text-slate-300" />;
|
||||
return sortDirection === 'asc' ? <ChevronUp size={14} className="text-blue-500" /> : <ChevronDown size={14} className="text-blue-500" />;
|
||||
const SortIcon = ({ column }: { column: string }) => {
|
||||
if (sortKey !== column) return <ChevronsUpDown size={14} className="text-zinc-300 dark:text-dark-muted" />;
|
||||
return sortDirection === 'asc' ? <ChevronUp size={14} className="text-brand-yellow" /> : <ChevronDown size={14} className="text-brand-yellow" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
||||
<div className="px-6 py-5 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 className="font-bold text-slate-800">Ranking de Vendedores</h3>
|
||||
<div className="bg-white dark:bg-dark-card rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border overflow-hidden transition-colors">
|
||||
<div className="px-6 py-5 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center">
|
||||
<h3 className="font-bold text-zinc-800 dark:text-dark-text">Ranking de Vendedores</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-50/50 text-slate-500 text-xs uppercase tracking-wider">
|
||||
<tr className="bg-zinc-50/50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-wider">
|
||||
<th
|
||||
className="px-6 py-4 font-semibold cursor-pointer hover:bg-slate-50 select-none"
|
||||
onClick={() => handleSort('name')}
|
||||
className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('user')}
|
||||
>
|
||||
<div className="flex items-center gap-2">Usuário <SortIcon column="name" /></div>
|
||||
<div className="flex items-center gap-2">Usuário <SortIcon column="user" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('total')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Atendimentos <SortIcon column="total" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('avgScore')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Nota Média <SortIcon column="avgScore" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('responseTime')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Tempo Resp. <SortIcon column="responseTime" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('conversionRate')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Conversão <SortIcon column="conversionRate" /></div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{sortedData.map((item, idx) => (
|
||||
<tr
|
||||
key={item.user.id}
|
||||
className="hover:bg-blue-50/30 transition-colors cursor-pointer group"
|
||||
className="hover:bg-yellow-50/10 dark:hover:bg-yellow-400/5 transition-colors cursor-pointer group"
|
||||
onClick={() => navigate(`/users/${item.user.id}`)}
|
||||
>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-slate-400 font-mono w-4">#{idx + 1}</span>
|
||||
<img src={item.user.avatar_url} alt="" className="w-9 h-9 rounded-full object-cover border border-slate-200" />
|
||||
<span className="text-xs text-zinc-400 dark:text-dark-muted font-mono w-4">#{idx + 1}</span>
|
||||
<img
|
||||
src={item.user.avatar_url
|
||||
? (item.user.avatar_url.startsWith('http') ? item.user.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${item.user.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(item.user.name)}&background=random`}
|
||||
alt=""
|
||||
className="w-9 h-9 rounded-full object-cover border border-zinc-200 dark:border-dark-border"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-600 transition-colors">{item.user.name}</div>
|
||||
<div className="text-xs text-slate-500">{item.user.email}</div>
|
||||
<div className="font-semibold text-zinc-900 dark:text-dark-text group-hover:text-yellow-600 dark:group-hover:text-brand-yellow transition-colors">{item.user.name}</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted">{item.user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-slate-600 font-medium">
|
||||
<td className="px-6 py-4 text-center text-zinc-600 dark:text-dark-text font-medium">
|
||||
{item.total}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className={`inline-flex px-2 py-1 rounded-full text-xs font-bold ${parseFloat(item.avgScore) >= 80 ? 'bg-green-100 text-green-700' : parseFloat(item.avgScore) >= 60 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>
|
||||
<span className={`inline-flex px-2 py-1 rounded-full text-xs font-bold ${parseFloat(item.avgScore) >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : parseFloat(item.avgScore) >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'}`}>
|
||||
{item.avgScore}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-slate-600 text-sm">
|
||||
<td className="px-6 py-4 text-center text-zinc-600 dark:text-dark-text text-sm">
|
||||
{item.responseTime} min
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-16 bg-slate-100 rounded-full h-1.5 overflow-hidden">
|
||||
<div className="bg-blue-500 h-1.5 rounded-full" style={{ width: `${item.conversionRate}%` }}></div>
|
||||
<div className="w-16 bg-zinc-100 dark:bg-dark-bg rounded-full h-1.5 overflow-hidden border dark:border-dark-border">
|
||||
<div className="bg-brand-yellow h-1.5 rounded-full" style={{ width: `${item.conversionRate}%` }}></div>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-slate-700">{item.conversionRate}%</span>
|
||||
<span className="text-xs font-semibold text-zinc-700 dark:text-dark-text">{item.conversionRate}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{sortedData.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-8 text-center text-slate-400 italic">Nenhum dado disponível para o período selecionado.</td>
|
||||
<td colSpan={5} className="px-6 py-8 text-center text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível para o período selecionado.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user