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

pages/Dashboard.tsx

@@ -5,7 +5,7 @@ import {
 import { 
   Users, Clock, Phone, TrendingUp, Filter
 } from 'lucide-react';
-import { getAttendances, getUsers, getTeams } from '../services/dataService';
+import { getAttendances, getUsers, getTeams, getUserById } from '../services/dataService';
 import { COLORS } from '../constants';
 import { Attendance, DashboardFilter, FunnelStage, User } from '../types';
 import { KPICard } from '../components/KPICard';
@@ -27,6 +27,7 @@ export const Dashboard: React.FC = () => {
   const [data, setData] = useState<Attendance[]>([]);
   const [users, setUsers] = useState<User[]>([]);
   const [teams, setTeams] = useState<any[]>([]);
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
   
   const [filters, setFilters] = useState<DashboardFilter>({
     dateRange: {
@@ -35,6 +36,8 @@ export const Dashboard: React.FC = () => {
     },
     userId: 'all',
     teamId: 'all',
+    funnelStage: 'all',
+    origin: 'all',
   });
 
   useEffect(() => {
@@ -42,18 +45,21 @@ export const Dashboard: React.FC = () => {
       setLoading(true);
       try {
         const tenantId = localStorage.getItem('ctms_tenant_id');
+        const storedUserId = localStorage.getItem('ctms_user_id');
         if (!tenantId) return;
 
-        // Fetch users, attendances and teams in parallel
-        const [fetchedUsers, fetchedData, fetchedTeams] = await Promise.all([
+        // Fetch users, attendances, teams and current user in parallel
+        const [fetchedUsers, fetchedData, fetchedTeams, me] = await Promise.all([
           getUsers(tenantId),
           getAttendances(tenantId, filters),
-          getTeams(tenantId)
+          getTeams(tenantId),
+          storedUserId ? getUserById(storedUserId) : null
         ]);
         
         setUsers(fetchedUsers);
         setData(fetchedData);
         setTeams(fetchedTeams);
+        if (me) setCurrentUser(me);
       } catch (error) {
         console.error("Error loading dashboard data:", error);
       } finally {
@@ -164,41 +170,73 @@ export const Dashboard: React.FC = () => {
   };
 
   if (loading && data.length === 0) {
-    return <div className="flex h-full items-center justify-center text-slate-400 p-12">Carregando Dashboard...</div>;
+    return <div className="flex h-full items-center justify-center text-zinc-400 dark:text-dark-muted p-12">Carregando Dashboard...</div>;
   }
 
+  const isAdmin = currentUser?.role === 'admin' || currentUser?.role === 'super_admin' || currentUser?.role === 'manager';
+
   return (
-    <div className="space-y-6 pb-8">
+    <div className="space-y-6 pb-8 transition-colors duration-300">
       {/* Filters Bar */}
-      <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-100 flex flex-col md:flex-row gap-4 items-center justify-between">
-        <div className="flex items-center gap-2 text-slate-500 font-medium">
-          <Filter size={18} />
-          <span className="hidden md:inline">Filtros:</span>
-        </div>
-        
-        <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
-          <DateRangePicker 
-            dateRange={filters.dateRange} 
-            onChange={(range) => handleFilterChange('dateRange', range)} 
-          />
+      <div className="bg-white dark:bg-dark-card p-4 rounded-xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col gap-4">
+        <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
+          <div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium">
+            <Filter size={18} />
+            <span>Filtros:</span>
+          </div>
+          
+          <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
+            <DateRangePicker 
+              dateRange={filters.dateRange} 
+              onChange={(range) => handleFilterChange('dateRange', range)} 
+            />
 
-          <select 
-            className="bg-slate-50 border border-slate-200 px-3 py-2 rounded-lg text-sm text-slate-700 outline-none focus:ring-2 focus:ring-blue-100 cursor-pointer hover:border-slate-300"
-            value={filters.userId}
-            onChange={(e) => handleFilterChange('userId', e.target.value)}
-          >
-            <option value="all">Todos Usuários</option>
-            {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
-          </select>
+            {isAdmin && (
+              <>
+                <select 
+                  className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
+                  value={filters.userId}
+                  onChange={(e) => handleFilterChange('userId', e.target.value)}
+                >
+                  <option value="all">Todos Usuários</option>
+                  {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
+                </select>
 
-           <select 
-            className="bg-slate-50 border border-slate-200 px-3 py-2 rounded-lg text-sm text-slate-700 outline-none focus:ring-2 focus:ring-blue-100 cursor-pointer hover:border-slate-300"
-            value={filters.teamId}
-            onChange={(e) => handleFilterChange('teamId', e.target.value)}
-          >
-            <option value="all">Todas Equipes</option>
-            {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
-          </select>
+                <select 
+                  className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
+                  value={filters.teamId}
+                  onChange={(e) => handleFilterChange('teamId', e.target.value)}
+                >
+                  <option value="all">Todas Equipes</option>
+                  {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+                </select>
+              </>
+            )}
+
+            <select 
+              className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
+              value={filters.funnelStage}
+              onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
+            >
+              <option value="all">Todas Etapas</option>
+              {Object.values(FunnelStage).map(stage => (
+                <option key={stage} value={stage}>{stage}</option>
+              ))}
+            </select>
+
+            <select 
+              className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
+              value={filters.origin}
+              onChange={(e) => handleFilterChange('origin', e.target.value)}
+            >
+              <option value="all">Todas Origens</option>
+              <option value="WhatsApp">WhatsApp</option>
+              <option value="Instagram">Instagram</option>
+              <option value="Website">Website</option>
+              <option value="LinkedIn">LinkedIn</option>
+              <option value="Indicação">Indicação</option>
+            </select>
+          </div>
         </div>
       </div>
 
@@ -210,7 +248,7 @@ export const Dashboard: React.FC = () => {
           trend="up" 
           trendValue="12%" 
           icon={Users} 
-          colorClass="text-blue-600"
+          colorClass="text-yellow-600"
         />
         <KPICard 
           title="Nota Média Qualidade" 
@@ -219,7 +257,7 @@ export const Dashboard: React.FC = () => {
           trend={Number(avgScore) > 75 ? 'up' : 'down'}
           trendValue="2.1"
           icon={TrendingUp} 
-          colorClass="text-purple-600"
+          colorClass="text-zinc-600"
         />
         <KPICard 
           title="Média 1ª Resposta" 
@@ -241,8 +279,8 @@ export const Dashboard: React.FC = () => {
       {/* Charts Section */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Funnel Chart */}
-        <div className="lg:col-span-2 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 min-h-[400px]">
-          <h3 className="text-lg font-bold text-slate-800 mb-6">Funil de Vendas</h3>
+        <div className="lg:col-span-2 bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border min-h-[400px]">
+          <h3 className="text-lg font-bold text-zinc-800 dark:text-dark-text mb-6">Funil de Vendas</h3>
           <div className="h-[300px] w-full">
             <ResponsiveContainer width="100%" height="100%">
               <BarChart
@@ -251,23 +289,35 @@ export const Dashboard: React.FC = () => {
                 margin={{ top: 5, right: 30, left: 40, bottom: 5 }}
                 barSize={32}
               >
-                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" />
+                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" className="dark:opacity-5" />
                 <XAxis type="number" hide />
                 <YAxis 
                   dataKey="name" 
                   type="category" 
                   width={120} 
-                  tick={{fill: '#475569', fontSize: 13, fontWeight: 500}} 
+                  tick={{fill: '#71717a', fontSize: 13, fontWeight: 500}} 
+                  className="dark:fill-dark-muted"
                   tickLine={false}
                   axisLine={false}
                 />
                 <Tooltip 
-                  cursor={{fill: '#f8fafc'}}
-                  contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
+                  cursor={{fill: '#f8fafc', opacity: 0.05}}
+                  formatter={(value: any) => [value, 'Quantidade']}
+                  contentStyle={{ 
+                    borderRadius: '12px', 
+                    border: 'none', 
+                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+                    backgroundColor: '#1a1a1a',
+                    color: '#ededed'
+                  }}
+                  itemStyle={{ color: '#ededed' }}
                 />
                 <Bar dataKey="value" radius={[0, 6, 6, 0]}>
                   {funnelData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS.charts[index % COLORS.charts.length]} />
+                    <Cell 
+                      key={`cell-${index}`} 
+                      fill={COLORS.funnel[entry.name as keyof typeof COLORS.funnel] || '#cbd5e1'} 
+                    />
                   ))}
                 </Bar>
               </BarChart>
@@ -276,8 +326,8 @@ export const Dashboard: React.FC = () => {
         </div>
 
         {/* Origin Pie Chart */}
-        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 min-h-[400px] flex flex-col">
-          <h3 className="text-lg font-bold text-slate-800 mb-2">Origem dos Leads</h3>
+        <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border min-h-[400px] flex flex-col">
+          <h3 className="text-lg font-bold text-zinc-800 dark:text-dark-text mb-2">Origem dos Leads</h3>
           <div className="flex-1 min-h-0">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
@@ -292,10 +342,22 @@ export const Dashboard: React.FC = () => {
                   stroke="none"
                 >
                   {originData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS.charts[index % COLORS.charts.length]} />
+                    <Cell 
+                      key={`cell-${index}`} 
+                      fill={COLORS.origins[entry.name as keyof typeof COLORS.origins] || COLORS.charts[index % COLORS.charts.length]} 
+                    />
                   ))}
                 </Pie>
-                <Tooltip contentStyle={{ borderRadius: '12px' }} />
+                <Tooltip 
+                  formatter={(value: any) => [value, 'Leads']}
+                  contentStyle={{ 
+                    borderRadius: '12px', 
+                    backgroundColor: '#1a1a1a', 
+                    border: 'none',
+                    color: '#ededed'
+                  }} 
+                  itemStyle={{ color: '#ededed' }}
+                />
                 <Legend 
                   verticalAlign="bottom" 
                   height={80}