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/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>
   );
-};
+};