feat: implement secure multi-tenancy, RBAC, and premium dark mode

- 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

components/DateRangePicker.tsx

@@ -27,21 +27,21 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onC
   };
 
   return (
-    <div className="flex items-center gap-2 bg-white border border-slate-200 px-3 py-2 rounded-lg shadow-sm hover:border-slate-300 transition-colors">
-      <Calendar size={16} className="text-slate-500 shrink-0" />
+    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors">
+      <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
       <div className="flex items-center gap-2 text-sm">
         <input
           type="date"
           value={formatDateForInput(dateRange.start)}
           onChange={handleStartChange}
-          className="bg-transparent text-slate-700 font-medium outline-none cursor-pointer w-28 md:w-auto"
+          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
         />
-        <span className="text-slate-400">até</span>
+        <span className="text-zinc-400 dark:text-dark-muted">até</span>
         <input
           type="date"
           value={formatDateForInput(dateRange.end)}
           onChange={handleEndChange}
-          className="bg-transparent text-slate-700 font-medium outline-none cursor-pointer w-28 md:w-auto"
+          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
         />
       </div>
     </div>

components/KPICard.tsx

@@ -11,21 +11,19 @@ interface KPICardProps {
   colorClass?: string;
 }
 
-export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend, trendValue, icon: Icon, colorClass = "bg-blue-500" }) => {
+export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend, trendValue, icon: Icon, colorClass = "text-blue-600" }) => {
+  // Extract base color from colorClass (e.g., 'text-yellow-600' -> 'yellow')
+  const baseColor = colorClass.split('-')[1] || 'blue';
+  
   return (
-    <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-between hover:shadow-md transition-shadow duration-300">
+    <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col justify-between hover:shadow-md transition-all duration-300">
       <div className="flex justify-between items-start mb-4">
         <div>
-          <h3 className="text-slate-500 text-sm font-medium mb-1">{title}</h3>
-          <div className="text-3xl font-bold text-slate-800 tracking-tight">{value}</div>
+          <h3 className="text-zinc-500 dark:text-dark-muted text-sm font-medium mb-1">{title}</h3>
+          <div className="text-3xl font-bold text-zinc-800 dark:text-dark-text tracking-tight">{value}</div>
         </div>
-        <div className={`p-3 rounded-xl ${colorClass} bg-opacity-10 text-opacity-100`}>
-          {/* Note: In Tailwind bg-opacity works if colorClass is like 'bg-blue-500'. 
-              Here we assume the consumer passes specific utility classes or we construct them.
-              Simpler approach: Use a wrapper */}
-           <div className={`w-8 h-8 flex items-center justify-center rounded-lg ${colorClass.replace('text', 'bg').replace('500', '100')} ${colorClass}`}>
-             <Icon size={20} />
-           </div>
+        <div className={`p-3 rounded-xl bg-${baseColor}-100 dark:bg-${baseColor}-500/20 flex items-center justify-center transition-colors border border-transparent dark:border-${baseColor}-500/30`}>
+           <Icon size={20} className={`${colorClass} dark:text-${baseColor}-400`} />
         </div>
       </div>
       
@@ -33,7 +31,7 @@ export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend,
         <div className="flex items-center gap-2 text-sm mt-auto">
           {trend === 'up' && <span className="text-green-500 flex items-center font-medium">▲ {trendValue}</span>}
           {trend === 'down' && <span className="text-red-500 flex items-center font-medium">▼ {trendValue}</span>}
-          {subValue && <span className="text-slate-400">{subValue}</span>}
+          {subValue && <span className="text-zinc-400 dark:text-dark-muted">{subValue}</span>}
         </div>
       )}
     </div>

components/Layout.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import { LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut, Hexagon, Settings, Building2 } from 'lucide-react';
-import { getAttendances, getUsers, getUserById } from '../services/dataService';
+import { 
+  LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut, 
+  Hexagon, Settings, Building2, Sun, Moon 
+} from 'lucide-react';
+import { getAttendances, getUsers, getUserById, logout } from '../services/dataService';
 import { User } from '../types';
 
 const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: any, label: string, collapsed: boolean }) => (
@@ -10,8 +13,8 @@ const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: a
     className={({ isActive }) =>
       `flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
         isActive
-          ? 'bg-yellow-400 text-slate-900 font-semibold shadow-md shadow-yellow-400/20'
-          : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
+          ? 'bg-brand-yellow text-zinc-950 font-semibold shadow-md shadow-brand-yellow/20'
+          : 'text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border hover:text-zinc-900 dark:hover:text-dark-text'
       }`
     }
   >
@@ -22,6 +25,7 @@ const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: a
 
 export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isDark, setIsDark] = useState(document.documentElement.classList.contains('dark'));
   const location = useLocation();
   const navigate = useNavigate();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
@@ -49,11 +53,22 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   }, [navigate]);
 
   const handleLogout = () => {
-    localStorage.removeItem('ctms_user_id');
-    localStorage.removeItem('ctms_tenant_id');
+    logout();
     navigate('/login');
   };
 
+  const toggleDarkMode = () => {
+    const newDark = !isDark;
+    setIsDark(newDark);
+    if (newDark) {
+      document.documentElement.classList.add('dark');
+      document.cookie = "dark_mode=1; path=/; max-age=31536000";
+    } else {
+      document.documentElement.classList.remove('dark');
+      document.cookie = "dark_mode=0; path=/; max-age=31536000";
+    }
+  };
+
   // Simple title mapping based on route
   const getPageTitle = () => {
     if (location.pathname === '/') return 'Dashboard';
@@ -71,21 +86,21 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   const isSuperAdmin = currentUser.role === 'super_admin';
 
   return (
-    <div className="flex h-screen bg-slate-50 overflow-hidden">
+    <div className="flex h-screen bg-zinc-50 dark:bg-dark-bg overflow-hidden transition-colors duration-300">
       {/* Sidebar */}
       <aside
-        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-slate-200 transform transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0 ${
+        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-dark-sidebar border-r border-zinc-200 dark:border-dark-border transform transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0 ${
           isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
         }`}
       >
         <div className="flex flex-col h-full">
           {/* Logo */}
-          <div className="flex items-center gap-3 px-6 h-20 border-b border-slate-100">
-            <div className="bg-slate-900 text-white p-2 rounded-lg">
+          <div className="flex items-center gap-3 px-6 h-20 border-b border-zinc-100 dark:border-dark-border">
+            <div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
               <Hexagon size={24} fill="currentColor" />
             </div>
-            <span className="text-xl font-bold text-slate-900 tracking-tight">Fasto<span className="text-yellow-500">.</span></span>
-            <button onClick={() => setIsMobileMenuOpen(false)} className="ml-auto lg:hidden text-slate-400">
+            <span className="text-xl font-bold text-zinc-900 dark:text-white tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
+            <button onClick={() => setIsMobileMenuOpen(false)} className="ml-auto lg:hidden text-zinc-400">
               <X size={24} />
             </button>
           </div>
@@ -105,30 +120,40 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
             {/* Super Admin Links */}
             {isSuperAdmin && (
               <>
-                <div className="pt-2 pb-2 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                <div className="pt-2 pb-2 px-4 text-xs font-semibold text-zinc-400 dark:text-dark-muted uppercase tracking-wider">
                    Super Admin
                 </div>
                 <SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={false} />
               </>
             )}
-
-            <div className="pt-4 pb-2 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
-              Sistema
-            </div>
-            <SidebarItem to="/profile" icon={UserCircle} label="Perfil" collapsed={false} />
           </nav>
 
-          {/* User Profile Mini */}
-          <div className="p-4 border-t border-slate-100">
-            <div className="flex items-center gap-3 p-2 rounded-lg bg-slate-50 border border-slate-100">
-              <img src={currentUser.avatar_url} alt="User" className="w-10 h-10 rounded-full object-cover" />
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-semibold text-slate-900 truncate">{currentUser.name}</p>
-                <p className="text-xs text-slate-500 truncate capitalize">{currentUser.role === 'super_admin' ? 'Super Admin' : currentUser.role}</p>
+          {/* User Profile Mini - Now Clickable to Profile */}
+          <div className="p-4 border-t border-zinc-100 dark:border-dark-border">
+            <div className="flex items-center gap-3 p-2 rounded-lg bg-zinc-50 dark:bg-dark-bg/50 border border-zinc-100 dark:border-dark-border group">
+              <div 
+                onClick={() => navigate('/profile')}
+                className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
+              >
+                <img 
+                  src={currentUser.avatar_url 
+                    ? (currentUser.avatar_url.startsWith('http') ? currentUser.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${currentUser.avatar_url}`)
+                    : `https://ui-avatars.com/api/?name=${encodeURIComponent(currentUser.name)}&background=random`} 
+                  alt={currentUser.name} 
+                  className="w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-dark-border" 
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{currentUser.name}</p>
+                  <p className="text-xs text-zinc-500 dark:text-dark-muted truncate capitalize">
+                    {currentUser.role === 'super_admin' ? 'Super Admin' : 
+                     currentUser.role === 'admin' ? 'Administrador' :
+                     currentUser.role === 'manager' ? 'Gerente' : 'Agente'}
+                  </p>
+                </div>
               </div>
               <button 
                 onClick={handleLogout}
-                className="text-slate-400 hover:text-red-500 transition-colors"
+                className="text-zinc-400 hover:text-red-500 transition-colors shrink-0"
                 title="Sair"
               >
                 <LogOut size={18} />
@@ -141,30 +166,39 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Main Content */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <header className="h-20 bg-white border-b border-slate-200 px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0">
+        <header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0 transition-colors">
           <div className="flex items-center gap-4">
-            <button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-slate-500 hover:text-slate-900">
+            <button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-zinc-500 hover:text-zinc-900 dark:hover:text-white">
               <Menu size={24} />
             </button>
-            <h1 className="text-xl font-bold text-slate-800 hidden sm:block">{getPageTitle()}</h1>
+            <h1 className="text-xl font-bold text-zinc-800 dark:text-dark-text hidden sm:block">{getPageTitle()}</h1>
           </div>
 
           <div className="flex items-center gap-4 sm:gap-6">
+            {/* Dark Mode Toggle */}
+            <button 
+              onClick={toggleDarkMode}
+              className="p-2.5 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-xl transition-all"
+              title={isDark ? "Mudar para Modo Claro" : "Mudar para Modo Escuro"}
+            >
+              {isDark ? <Sun size={20} /> : <Moon size={20} />}
+            </button>
+
             {/* Search Bar */}
-            <div className="hidden md:flex items-center bg-slate-100 rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white focus-within:border-yellow-400 focus-within:ring-2 focus-within:ring-yellow-100 transition-all">
-              <Search size={18} className="text-slate-400" />
+            <div className="hidden md:flex items-center bg-zinc-100 dark:bg-dark-bg rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
+              <Search size={18} className="text-zinc-400 dark:text-dark-muted" />
               <input 
                 type="text" 
                 placeholder="Buscar..." 
-                className="bg-transparent border-none outline-none text-sm ml-2 w-full text-slate-700 placeholder-slate-400" 
+                className="bg-transparent border-none outline-none text-sm ml-2 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted" 
               />
             </div>
 
             {/* Notifications */}
             <div className="relative">
-              <button className="p-2 text-slate-500 hover:bg-slate-100 rounded-full relative transition-colors">
+              <button className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors">
                 <Bell size={20} />
-                <span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-yellow-400 rounded-full border-2 border-white"></span>
+                <span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-brand-yellow rounded-full border-2 border-white dark:border-dark-header"></span>
               </button>
             </div>
           </div>
@@ -179,10 +213,10 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Overlay for mobile */}
       {isMobileMenuOpen && (
         <div 
-          className="fixed inset-0 bg-slate-900/50 z-40 lg:hidden"
+          className="fixed inset-0 bg-zinc-950/50 z-40 lg:hidden"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
     </div>
   );
-};
+};

components/ProductLists.tsx

@@ -14,29 +14,29 @@ interface ProductListsProps {
 
 export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
   const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
-    <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex-1">
+    <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex-1 transition-colors">
       <div className="flex items-center gap-2 mb-4">
-        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
+        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400' : 'bg-green-100 dark:bg-green-950/50 text-green-600 dark:text-green-400'}`}>
           <Icon size={18} />
         </div>
-        <h3 className="font-bold text-slate-800">{title}</h3>
+        <h3 className="font-bold text-zinc-800 dark:text-dark-text">{title}</h3>
       </div>
       <ul className="space-y-4">
         {data.map((item, idx) => (
           <li key={idx} className="flex items-center justify-between group">
             <div className="flex items-center gap-3">
-              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-500'}`}>
+              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-zinc-800 dark:bg-brand-yellow text-white dark:text-zinc-950' : 'bg-zinc-100 dark:bg-dark-bg text-zinc-500 dark:text-dark-muted'}`}>
                 {idx + 1}
               </span>
-              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
+              <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-dark-text">{item.name}</span>
             </div>
             <div className="text-right">
-              <span className="text-sm font-bold text-slate-900 block">{item.count}</span>
-              <span className="text-[10px] text-slate-400">{item.percentage}%</span>
+              <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100 block">{item.count}</span>
+              <span className="text-[10px] text-zinc-400 dark:text-dark-muted">{item.percentage}%</span>
             </div>
           </li>
         ))}
-        {data.length === 0 && <li className="text-sm text-slate-400 italic">Nenhum dado disponível.</li>}
+        {data.length === 0 && <li className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível.</li>}
       </ul>
     </div>
   );

components/SellersTable.tsx

@@ -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>