feat: implement advanced funnel management with multiple funnels and team assignments

- Updated DB schema to support multiple funnels (funnels table) and their stages (funnel_stages table).

- Added funnel_id to teams table to link teams to specific funnels.

- Redesigned /admin/funnels page ('Meus Funis') to allow creating multiple funnels, managing their stages, and assigning them to teams.

- Updated Dashboard, UserDetail, and AttendanceDetail to dynamically load the correct funnel based on the selected team or user's assigned team.

App.tsx

@@ -7,6 +7,7 @@ import { AttendanceDetail } from './pages/AttendanceDetail';
 import { SuperAdmin } from './pages/SuperAdmin';
 import { TeamManagement } from './pages/TeamManagement';
 import { Teams } from './pages/Teams';
+import { Funnels } from './pages/Funnels';
 import { Login } from './pages/Login';
 import { ForgotPassword } from './pages/ForgotPassword';
 import { ResetPassword } from './pages/ResetPassword';
@@ -76,6 +77,7 @@ const App: React.FC = () => {
         <Route path="/" element={<AuthGuard><Dashboard /></AuthGuard>} />
         <Route path="/admin/users" element={<AuthGuard roles={['super_admin', 'admin', 'manager']}><TeamManagement /></AuthGuard>} />
         <Route path="/admin/teams" element={<AuthGuard roles={['super_admin', 'admin', 'manager']}><Teams /></AuthGuard>} />
+        <Route path="/admin/funnels" element={<AuthGuard roles={['super_admin', 'admin', 'manager']}><Funnels /></AuthGuard>} />
         <Route path="/users/:id" element={<AuthGuard><UserDetail /></AuthGuard>} />
         <Route path="/attendances/:id" element={<AuthGuard><AttendanceDetail /></AuthGuard>} />
         <Route path="/super-admin" element={<AuthGuard roles={['super_admin']}><SuperAdmin /></AuthGuard>} />

backend/index.js

@@ -350,12 +350,17 @@ apiRouter.get('/users', async (req, res) => {
 apiRouter.get('/users/:idOrSlug', async (req, res) => {
   try {
     const [rows] = await pool.query('SELECT * FROM users WHERE id = ? OR slug = ?', [req.params.idOrSlug, req.params.idOrSlug]);
-    if (rows.length === 0) return res.status(404).json({ error: 'Not found' });
+    if (!rows || rows.length === 0) return res.status(404).json({ error: 'Not found' });
+    if (!req.user) return res.status(401).json({ error: 'Não autenticado' });
+    
     if (req.user.role !== 'super_admin' && rows[0].tenant_id !== req.user.tenant_id) {
       return res.status(403).json({ error: 'Acesso negado.' });
     }
     res.json(rows[0]);
-  } catch (error) { res.status(500).json({ error: error.message }); }
+  } catch (error) { 
+    console.error('Error in GET /users/:idOrSlug:', error);
+    res.status(500).json({ error: error.message }); 
+  }
 });
 
 // Convidar Novo Membro (Admin criando usuário)
@@ -558,6 +563,138 @@ apiRouter.delete('/notifications', async (req, res) => {
   }
 });
 
+// --- Funnel Routes ---
+apiRouter.get('/funnels', async (req, res) => {
+  try {
+    const { tenantId } = req.query;
+    const effectiveTenantId = req.user.role === 'super_admin' ? tenantId : req.user.tenant_id;
+    if (!effectiveTenantId || effectiveTenantId === 'all') return res.json([]);
+
+    const [funnels] = await pool.query('SELECT * FROM funnels WHERE tenant_id = ? ORDER BY created_at ASC', [effectiveTenantId]);
+    
+    // Seed default funnel if none exists
+    if (funnels.length === 0) {
+      const fid = `funnel_${crypto.randomUUID().split('-')[0]}`;
+      await pool.query('INSERT INTO funnels (id, tenant_id, name) VALUES (?, ?, ?)', [fid, effectiveTenantId, 'Funil Padrão']);
+      
+      const defaultStages = [
+        { name: 'Sem atendimento', color: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border', order: 0 },
+        { name: 'Identificação', color: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800', order: 1 },
+        { name: 'Negociação', color: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800', order: 2 },
+        { name: 'Ganhos', color: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800', order: 3 },
+        { name: 'Perdidos', color: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800', order: 4 }
+      ];
+      
+      for (const s of defaultStages) {
+        const sid = `stage_${crypto.randomUUID().split('-')[0]}`;
+        await pool.query(
+          'INSERT INTO funnel_stages (id, funnel_id, name, color_class, order_index) VALUES (?, ?, ?, ?, ?)',
+          [sid, fid, s.name, s.color, s.order]
+        );
+      }
+      
+      // Update all teams of this tenant to use this funnel if they have none
+      await pool.query('UPDATE teams SET funnel_id = ? WHERE tenant_id = ? AND funnel_id IS NULL', [fid, effectiveTenantId]);
+      
+      funnels.push({ id: fid, tenant_id: effectiveTenantId, name: 'Funil Padrão' });
+    }
+
+    const [stages] = await pool.query('SELECT * FROM funnel_stages WHERE funnel_id IN (?) ORDER BY order_index ASC', [funnels.map(f => f.id)]);
+    const [teams] = await pool.query('SELECT id, funnel_id FROM teams WHERE tenant_id = ? AND funnel_id IS NOT NULL', [effectiveTenantId]);
+
+    const result = funnels.map(f => ({
+      ...f,
+      stages: stages.filter(s => s.funnel_id === f.id),
+      teamIds: teams.filter(t => t.funnel_id === f.id).map(t => t.id)
+    }));
+
+    res.json(result);
+  } catch (error) {
+    console.error("GET /funnels error:", error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+apiRouter.post('/funnels', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
+  const { name, tenantId } = req.body;
+  const effectiveTenantId = req.user.role === 'super_admin' ? tenantId : req.user.tenant_id;
+  try {
+    const fid = `funnel_${crypto.randomUUID().split('-')[0]}`;
+    await pool.query('INSERT INTO funnels (id, tenant_id, name) VALUES (?, ?, ?)', [fid, effectiveTenantId, name]);
+    res.status(201).json({ id: fid });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+apiRouter.put('/funnels/:id', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
+  const { name, teamIds } = req.body;
+  try {
+    if (name) {
+      await pool.query('UPDATE funnels SET name = ? WHERE id = ?', [name, req.params.id]);
+    }
+    if (teamIds && Array.isArray(teamIds)) {
+      await pool.query('UPDATE teams SET funnel_id = NULL WHERE funnel_id = ?', [req.params.id]);
+      if (teamIds.length > 0) {
+        await pool.query('UPDATE teams SET funnel_id = ? WHERE id IN (?)', [req.params.id, teamIds]);
+      }
+    }
+    res.json({ message: 'Funnel updated.' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+apiRouter.delete('/funnels/:id', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
+  try {
+    await pool.query('DELETE FROM funnel_stages WHERE funnel_id = ?', [req.params.id]);
+    await pool.query('UPDATE teams SET funnel_id = NULL WHERE funnel_id = ?', [req.params.id]);
+    await pool.query('DELETE FROM funnels WHERE id = ?', [req.params.id]);
+    res.json({ message: 'Funnel deleted.' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+apiRouter.post('/funnels/:id/stages', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
+  const { name, color_class, order_index } = req.body;
+  try {
+    const sid = `stage_${crypto.randomUUID().split('-')[0]}`;
+    await pool.query(
+      'INSERT INTO funnel_stages (id, funnel_id, name, color_class, order_index) VALUES (?, ?, ?, ?, ?)',
+      [sid, req.params.id, name, color_class, order_index || 0]
+    );
+    res.status(201).json({ id: sid });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+apiRouter.put('/funnel_stages/:id', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
+  const { name, color_class, order_index } = req.body;
+  try {
+    const [existing] = await pool.query('SELECT * FROM funnel_stages WHERE id = ?', [req.params.id]);
+    if (existing.length === 0) return res.status(404).json({ error: 'Stage not found' });
+    
+    await pool.query(
+      'UPDATE funnel_stages SET name = ?, color_class = ?, order_index = ? WHERE id = ?',
+      [name || existing[0].name, color_class || existing[0].color_class, order_index !== undefined ? order_index : existing[0].order_index, req.params.id]
+    );
+    res.json({ message: 'Stage updated.' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+apiRouter.delete('/funnel_stages/:id', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
+  try {
+    await pool.query('DELETE FROM funnel_stages WHERE id = ?', [req.params.id]);
+    res.json({ message: 'Stage deleted.' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // --- Global Search ---
 apiRouter.get('/search', async (req, res) => {
   const { q } = req.query;
@@ -949,8 +1086,47 @@ const provisionSuperAdmin = async (retries = 10, delay = 10000) => {
         console.log('Schema update note (origin):', err.message);
       }
 
-      connection.release();
+      // Convert funnel_stage to VARCHAR for custom funnels
+      try {
+        await connection.query("ALTER TABLE attendances MODIFY COLUMN funnel_stage VARCHAR(255) NOT NULL");
+      } catch (err) {
+        console.log('Schema update note (funnel_stage):', err.message);
+      }
 
+      // Create funnels table
+      await connection.query(`
+        CREATE TABLE IF NOT EXISTS funnels (
+          id varchar(36) NOT NULL,
+          tenant_id varchar(36) NOT NULL,
+          name varchar(255) NOT NULL,
+          created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+          PRIMARY KEY (id),
+          KEY tenant_id (tenant_id)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+      `);
+
+      // Create funnel_stages table
+      await connection.query(`
+        CREATE TABLE IF NOT EXISTS funnel_stages (
+          id varchar(36) NOT NULL,
+          funnel_id varchar(36) NOT NULL,
+          name varchar(255) NOT NULL,
+          color_class varchar(255) DEFAULT 'bg-zinc-100 text-zinc-800 border-zinc-200',
+          order_index int DEFAULT 0,
+          created_at timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+          PRIMARY KEY (id),
+          KEY funnel_id (funnel_id)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+      `);
+
+      // Add funnel_id to teams
+      try {
+        await connection.query("ALTER TABLE teams ADD COLUMN funnel_id VARCHAR(36) DEFAULT NULL");
+      } catch (err) {
+        if (err.code !== 'ER_DUP_FIELDNAME') console.log('Schema update note (teams.funnel_id):', err.message);
+      }
+
+      connection.release();
       // Ensure system tenant exists
       await pool.query('INSERT IGNORE INTO tenants (id, name, slug, admin_email, status) VALUES (?, ?, ?, ?, ?)', ['system', 'System Admin', 'system', email, 'active']);
       

components/Layout.tsx

@@ -2,7 +2,7 @@ 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, Sun, Moon, Loader2 
+  Hexagon, Settings, Building2, Sun, Moon, Loader2, Layers 
 } from 'lucide-react';
 import { 
   getAttendances, getUsers, getUserById, logout, searchGlobal, 
@@ -194,6 +194,7 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
                   <>
                     <SidebarItem to="/admin/users" icon={Users} label="Membros" collapsed={false} />
                     <SidebarItem to="/admin/teams" icon={Building2} label={currentUser.role === 'manager' ? 'Meu Time' : 'Times'} collapsed={false} />
+                    <SidebarItem to="/admin/funnels" icon={Layers} label="Meus Funis" collapsed={false} />
                   </>
                 )}
               </>

debug.txt

@@ -0,0 +1,12 @@
+Look at line 354: `if (req.user.role !== 'super_admin' && rows[0].tenant_id !== req.user.tenant_id) {`
+What if `req.user.tenant_id` is null (which it is for some system admins)?
+But `rows[0].tenant_id` could be something else. That just returns 403.
+What if `rows` is empty?
+Line 353: `if (rows.length === 0) return res.status(404).json({ error: 'Not found' });`
+What if `req.user` is undefined? (Should be caught by middleware).
+
+Wait, the user says the error is:
+`https://fasto.blyzer.com.br/api/users/u_71657ec7`
+And it returns `500`.
+
+Let's log the exact error inside the catch block in the backend.

debug2.txt

@@ -0,0 +1,36 @@
+Let's see what happens during returnToSuperAdmin:
+1. Decode superAdminToken
+2. localStorage.setItem('ctms_token', superAdminToken)
+3. localStorage.setItem('ctms_user_id', payload.id) <-- u_71657ec7
+4. localStorage.setItem('ctms_tenant_id', payload.tenant_id || 'system') <-- 'system'
+5. window.location.reload()
+
+Then the app reloads.
+1. AuthGuard mounts
+2. const storedUserId = localStorage.getItem('ctms_user_id') <-- u_71657ec7
+3. const fetchedUser = await getUserById(storedUserId)
+   -> GET /api/users/u_71657ec7
+
+Backend handles GET /api/users/u_71657ec7:
+req.user is derived from jwt.verify(superAdminToken)
+So req.user.role === 'super_admin'
+req.user.tenant_id === 'system' (or null)
+
+const [rows] = await pool.query('SELECT * FROM users WHERE id = ? OR slug = ?', [req.params.idOrSlug, req.params.idOrSlug]);
+if (rows.length === 0) return res.status(404).json({ error: 'Not found' });
+if (req.user.role !== 'super_admin' && rows[0].tenant_id !== req.user.tenant_id) { ... }
+res.json(rows[0]);
+
+Wait. If this is a 500 error, why does it crash?
+What if `req.user` is undefined? But `authenticateToken` middleware ensures `req.user` exists.
+Maybe `pool.query` fails? 
+No, wait. You said:
+"now its sending me to login page, congrats"
+Then I fixed the Base64 pad.
+Then you said:
+"i am still having this problem, when i go to impersionate the pages blink and i go to the tenant pages, good, but when i press to go back and stop impersionate it redirects me to the goddam login page"
+Then you said:
+"ok, its working but its giving some errors in dev tools and this errors is showing our users id and path ... XHRGET https://fasto.blyzer.com.br/api/users/u_71657ec7 [HTTP/2 500 14ms]"
+
+Why 500?
+Let's add a console.log in the catch block of `/users/:idOrSlug` to see the actual error.

debug3.txt

@@ -0,0 +1,20 @@
+Wait, let's look at `index.js` line 354 BEFORE my fix:
+```javascript
+    const [rows] = await pool.query('SELECT * FROM users WHERE id = ? OR slug = ?', [req.params.idOrSlug, req.params.idOrSlug]);
+    if (rows.length === 0) return res.status(404).json({ error: 'Not found' });
+    if (req.user.role !== 'super_admin' && rows[0].tenant_id !== req.user.tenant_id) {
+```
+The ONLY way this throws 500 is if:
+1. `pool.query` fails (e.g. database disconnected, which isn't the case).
+2. `req.user` is somehow null or undefined (but `authenticateToken` guarantees it exists).
+3. `rows[0]` is undefined (but `rows.length === 0` handles that).
+
+Wait, what if `req.user.tenant_id` is null? `null !== 'tenant_xyz'` is true, so it returns 403, not 500.
+
+What if the 500 is coming from `GET /api/users/u_71657ec7` but it's not actually hitting `/users/:idOrSlug`?
+Is there a middleware or something? No.
+
+Ah! What if the user you are impersonating was deleted from the database? `rows.length === 0` -> returns 404, not 500.
+
+Let's check the local logs AGAIN after my recent rebuild. I added `console.error('Error in GET /users/:idOrSlug:', error);`
+Let's deliberately trigger the error locally to see it. But I don't have the browser.

fix_db.js

@@ -0,0 +1,10 @@
+const mysql = require('mysql2/promise');
+async function run() {
+  const pool = mysql.createPool({ host: '127.0.0.1', user: 'root', password: 'secret_pass', database: 'fasto_db', port: 3306 });
+  try {
+     await pool.query("ALTER TABLE attendances MODIFY COLUMN funnel_stage VARCHAR(255) NOT NULL DEFAULT 'Novo'");
+     console.log("Success");
+  } catch(e) { console.error(e); }
+  pool.end();
+}
+run();

pages/AttendanceDetail.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { getAttendanceById, getUserById } from '../services/dataService';
-import { Attendance, User, FunnelStage } from '../types';
+import { getAttendanceById, getUserById, getFunnels } from '../services/dataService';
+import { Attendance, User, FunnelStage, FunnelStageDef } from '../types';
 import { ArrowLeft, CheckCircle2, AlertCircle, Clock, Calendar, MessageSquare, ShoppingBag, Award, TrendingUp } from 'lucide-react';
 
 export const AttendanceDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const [data, setData] = useState<Attendance | undefined>();
   const [agent, setAgent] = useState<User | undefined>();
+  const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -15,11 +16,26 @@ export const AttendanceDetail: React.FC = () => {
       if (id) {
         setLoading(true);
         try {
-          const att = await getAttendanceById(id);
+          const tenantId = localStorage.getItem('ctms_tenant_id') || '';
+          const [att, fetchedFunnels] = await Promise.all([
+            getAttendanceById(id),
+            getFunnels(tenantId)
+          ]);
+          
           setData(att);
+          
           if (att) {
             const u = await getUserById(att.user_id);
             setAgent(u);
+            
+            // Determine which funnel was used based on the agent's team
+            const targetTeamId = u?.team_id || null;
+            let activeFunnel = fetchedFunnels[0];
+            if (targetTeamId) {
+              const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
+              if (matchedFunnel) activeFunnel = matchedFunnel;
+            }
+            setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages : []);
           }
         } catch (error) {
           console.error("Error loading details", error);
@@ -34,7 +50,10 @@ export const AttendanceDetail: React.FC = () => {
   if (loading) return <div className="p-12 text-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando detalhes...</div>;
   if (!data) return <div className="p-12 text-center text-zinc-500 dark:text-dark-muted transition-colors">Registro de atendimento não encontrado</div>;
 
-  const getStageColor = (stage: FunnelStage) => {
+  const getStageColor = (stage: string) => {
+    const def = funnelDefs.find(f => f.name === stage);
+    if (def) return def.color_class;
+    
     switch (stage) {
       case FunnelStage.WON: return 'text-green-700 bg-green-50 border-green-200 dark:text-green-400 dark:bg-green-900/30 dark:border-green-800';
       case FunnelStage.LOST: return 'text-red-700 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-900/30 dark:border-red-800';

pages/Dashboard.tsx

@@ -5,9 +5,9 @@ import {
 import { 
   Users, Clock, Phone, TrendingUp, Filter
 } from 'lucide-react';
-import { getAttendances, getUsers, getTeams, getUserById } from '../services/dataService';
+import { getAttendances, getUsers, getTeams, getUserById, getFunnels } from '../services/dataService';
 import { COLORS } from '../constants';
-import { Attendance, DashboardFilter, FunnelStage, User } from '../types';
+import { Attendance, DashboardFilter, FunnelStage, User, FunnelStageDef } from '../types';
 import { KPICard } from '../components/KPICard';
 import { DateRangePicker } from '../components/DateRangePicker';
 import { SellersTable } from '../components/SellersTable';
@@ -28,6 +28,7 @@ export const Dashboard: React.FC = () => {
   const [prevData, setPrevData] = useState<Attendance[]>([]);
   const [users, setUsers] = useState<User[]>([]);
   const [teams, setTeams] = useState<any[]>([]);
+  const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   
   const [filters, setFilters] = useState<DashboardFilter>({
@@ -55,12 +56,13 @@ export const Dashboard: React.FC = () => {
         const prevEnd = new Date(filters.dateRange.start.getTime());
         const prevFilters = { ...filters, dateRange: { start: prevStart, end: prevEnd } };
 
-        // Fetch users, attendances, teams and current user in parallel
-        const [fetchedUsers, fetchedData, prevFetchedData, fetchedTeams, me] = await Promise.all([
+        // Fetch users, attendances, teams, funnels and current user in parallel
+        const [fetchedUsers, fetchedData, prevFetchedData, fetchedTeams, fetchedFunnels, me] = await Promise.all([
           getUsers(tenantId),
           getAttendances(tenantId, filters),
           getAttendances(tenantId, prevFilters),
           getTeams(tenantId),
+          getFunnels(tenantId),
           storedUserId ? getUserById(storedUserId) : null
         ]);
         
@@ -69,6 +71,17 @@ export const Dashboard: React.FC = () => {
         setPrevData(prevFetchedData);
         setTeams(fetchedTeams);
         if (me) setCurrentUser(me);
+
+        // Determine which funnel to display
+        const targetTeamId = filters.teamId !== 'all' ? filters.teamId : (me?.team_id || null);
+        let activeFunnel = fetchedFunnels[0]; // fallback to first/default
+        if (targetTeamId) {
+          const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
+          if (matchedFunnel) activeFunnel = matchedFunnel;
+        }
+        
+        setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages.sort((a: any, b: any) => a.order_index - b.order_index) : []);
+
       } catch (error) {
         console.error("Error loading dashboard data:", error);
       } finally {
@@ -128,6 +141,20 @@ export const Dashboard: React.FC = () => {
   
   // --- Chart Data: Funnel ---
   const funnelData = useMemo(() => {
+    const counts = data.reduce((acc, curr) => {
+      acc[curr.funnel_stage] = (acc[curr.funnel_stage] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+
+    if (funnelDefs.length > 0) {
+      return funnelDefs.map(stage => ({
+        name: stage.name,
+        value: counts[stage.name] || 0,
+        color: stage.color_class.split(' ')[0].replace('bg-', '') // Extract base color name for Recharts
+      }));
+    }
+
+    // Fallback if funnels aren't loaded yet
     const stagesOrder = [
       FunnelStage.NO_CONTACT, 
       FunnelStage.IDENTIFICATION, 
@@ -135,17 +162,11 @@ export const Dashboard: React.FC = () => {
       FunnelStage.WON, 
       FunnelStage.LOST
     ];
-    
-    const counts = data.reduce((acc, curr) => {
-      acc[curr.funnel_stage] = (acc[curr.funnel_stage] || 0) + 1;
-      return acc;
-    }, {} as Record<string, number>);
-
     return stagesOrder.map(stage => ({
       name: stage,
       value: counts[stage] || 0
     }));
-  }, [data]);
+  }, [data, funnelDefs]);
 
   // --- Chart Data: Origin ---
   const originData = useMemo(() => {
@@ -272,11 +293,12 @@ export const Dashboard: React.FC = () => {
               onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
             >
               <option value="all">Todas Etapas</option>
-              {Object.values(FunnelStage).map(stage => (
+              {funnelDefs.length > 0 ? funnelDefs.map(stage => (
+                <option key={stage.id} value={stage.name}>{stage.name}</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}

pages/Funnels.tsx

@@ -0,0 +1,364 @@
+import React, { useState, useEffect } from 'react';
+import { Layers, Plus, Edit, Trash2, ChevronUp, ChevronDown, Loader2, X, Users } from 'lucide-react';
+import { getFunnels, createFunnel, updateFunnel, deleteFunnel, createFunnelStage, updateFunnelStage, deleteFunnelStage, getTeams } from '../services/dataService';
+import { FunnelDef, FunnelStageDef } from '../types';
+
+export const Funnels: React.FC = () => {
+  const [funnels, setFunnels] = useState<FunnelDef[]>([]);
+  const [teams, setTeams] = useState<any[]>([]);
+  const [selectedFunnelId, setSelectedFunnelId] = useState<string | null>(null);
+  
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingStage, setEditingStage] = useState<FunnelStageDef | null>(null);
+  const [formData, setFormData] = useState({ name: '', color_class: '' });
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Funnel creation state
+  const [isFunnelModalOpen, setIsFunnelModalOpen] = useState(false);
+  const [funnelName, setFunnelName] = useState('');
+
+  const tenantId = localStorage.getItem('ctms_tenant_id') || '';
+
+  const PRESET_COLORS = [
+    { label: 'Cinza (Neutro)', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
+    { label: 'Azul (Início)', value: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800' },
+    { label: 'Roxo (Meio)', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
+    { label: 'Laranja (Atenção)', value: 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-400 dark:border-orange-800' },
+    { label: 'Verde (Sucesso)', value: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
+    { label: 'Vermelho (Perda)', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
+  ];
+
+  const loadData = async () => {
+    setLoading(true);
+    const [fetchedFunnels, fetchedTeams] = await Promise.all([
+      getFunnels(tenantId),
+      getTeams(tenantId)
+    ]);
+    setFunnels(fetchedFunnels);
+    setTeams(fetchedTeams);
+    if (!selectedFunnelId && fetchedFunnels.length > 0) {
+      setSelectedFunnelId(fetchedFunnels[0].id);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [tenantId]);
+
+  const selectedFunnel = funnels.find(f => f.id === selectedFunnelId);
+
+  // --- Funnel Handlers ---
+  const handleCreateFunnel = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      const res = await createFunnel({ name: funnelName, tenantId });
+      setSelectedFunnelId(res.id);
+      setIsFunnelModalOpen(false);
+      setFunnelName('');
+      loadData();
+    } catch (err) {
+      alert("Erro ao criar funil.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDeleteFunnel = async (id: string) => {
+    if (funnels.length <= 1) {
+      alert("Você precisa ter pelo menos um funil ativo.");
+      return;
+    }
+    if (confirm('Tem certeza que deseja excluir este funil e todas as suas etapas?')) {
+      await deleteFunnel(id);
+      setSelectedFunnelId(null);
+      loadData();
+    }
+  };
+
+  const handleToggleTeam = async (teamId: string) => {
+    if (!selectedFunnel) return;
+    const currentTeamIds = selectedFunnel.teamIds || [];
+    const newTeamIds = currentTeamIds.includes(teamId) 
+      ? currentTeamIds.filter(id => id !== teamId)
+      : [...currentTeamIds, teamId];
+    
+    // Optimistic
+    const newFunnels = [...funnels];
+    const idx = newFunnels.findIndex(f => f.id === selectedFunnel.id);
+    newFunnels[idx].teamIds = newTeamIds;
+    setFunnels(newFunnels);
+
+    await updateFunnel(selectedFunnel.id, { teamIds: newTeamIds });
+  };
+
+  // --- Stage Handlers ---
+  const handleSaveStage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedFunnel) return;
+    setIsSaving(true);
+    try {
+      if (editingStage) {
+        await updateFunnelStage(editingStage.id, formData);
+      } else {
+        await createFunnelStage(selectedFunnel.id, { ...formData, order_index: selectedFunnel.stages.length });
+      }
+      setIsModalOpen(false);
+      loadData();
+    } catch (err) {
+      alert("Erro ao salvar etapa.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDeleteStage = async (id: string) => {
+    if (confirm('Tem certeza que deseja excluir esta etapa?')) {
+      await deleteFunnelStage(id);
+      loadData();
+    }
+  };
+
+  const handleMoveStage = async (index: number, direction: 'up' | 'down') => {
+    if (!selectedFunnel) return;
+    const stages = selectedFunnel.stages;
+    if (direction === 'up' && index === 0) return;
+    if (direction === 'down' && index === stages.length - 1) return;
+
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+    
+    const tempOrder = stages[index].order_index;
+    stages[index].order_index = stages[newIndex].order_index;
+    stages[newIndex].order_index = tempOrder;
+
+    setFunnels([...funnels]); // trigger re-render
+
+    await Promise.all([
+      updateFunnelStage(stages[index].id, { order_index: stages[index].order_index }),
+      updateFunnelStage(stages[newIndex].id, { order_index: stages[newIndex].order_index })
+    ]);
+  };
+
+  const openStageModal = (stage?: FunnelStageDef) => {
+    if (stage) {
+      setEditingStage(stage);
+      setFormData({ name: stage.name, color_class: stage.color_class });
+    } else {
+      setEditingStage(null);
+      setFormData({ name: '', color_class: PRESET_COLORS[0].value });
+    }
+    setIsModalOpen(true);
+  };
+
+  if (loading && funnels.length === 0) return <div className="p-12 flex justify-center"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>;
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6 pb-12 transition-colors duration-300 flex flex-col md:flex-row gap-8">
+      
+      {/* Sidebar: Funnels List */}
+      <div className="w-full md:w-64 shrink-0 space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Meus Funis</h2>
+          <button onClick={() => setIsFunnelModalOpen(true)} className="p-1.5 bg-zinc-100 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-lg hover:bg-zinc-200 dark:hover:bg-dark-border transition-colors">
+            <Plus size={16} />
+          </button>
+        </div>
+        
+        <div className="flex flex-col gap-2">
+          {funnels.map(f => (
+            <button 
+              key={f.id}
+              onClick={() => setSelectedFunnelId(f.id)}
+              className={`text-left px-4 py-3 rounded-xl text-sm font-medium transition-all ${selectedFunnelId === f.id ? 'bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 shadow-md' : 'bg-white dark:bg-dark-card text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-dark-bg border border-zinc-200 dark:border-dark-border'}`}
+            >
+              <div className="flex justify-between items-center">
+                <span>{f.name}</span>
+                <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${selectedFunnelId === f.id ? 'bg-white/20 dark:bg-black/20' : 'bg-zinc-100 dark:bg-dark-bg'}`}>{f.stages?.length || 0}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Content: Selected Funnel Details */}
+      <div className="flex-1 space-y-6">
+        {selectedFunnel ? (
+          <>
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-zinc-200 dark:border-dark-border pb-6">
+              <div>
+                <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">{selectedFunnel.name}</h1>
+                <p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie as etapas deste funil e quais times o utilizam.</p>
+              </div>
+              <button onClick={() => handleDeleteFunnel(selectedFunnel.id)} className="text-red-500 hover:text-red-700 bg-red-50 dark:bg-red-900/20 px-3 py-2 rounded-lg text-sm font-semibold transition-colors flex items-center gap-2">
+                <Trash2 size={16} /> Excluir Funil
+              </button>
+            </div>
+
+            {/* Teams Assignment */}
+            <div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
+              <div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50">
+                <h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
+                  <Users className="text-brand-yellow" size={18} /> Times Atribuídos
+                </h3>
+              </div>
+              <div className="p-6">
+                {teams.length === 0 ? (
+                  <p className="text-sm text-zinc-500">Nenhum time cadastrado na organização.</p>
+                ) : (
+                  <div className="flex flex-wrap gap-3">
+                    {teams.map(t => {
+                      const isAssigned = selectedFunnel.teamIds?.includes(t.id);
+                      return (
+                        <button
+                          key={t.id}
+                          onClick={() => handleToggleTeam(t.id)}
+                          className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${isAssigned ? 'bg-brand-yellow/10 border-brand-yellow text-zinc-900 dark:text-zinc-100' : 'bg-white dark:bg-dark-input border-zinc-200 dark:border-dark-border text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-700'}`}
+                        >
+                          {t.name}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+                <p className="text-xs text-zinc-400 mt-4">Times não atribuídos a um funil específico usarão o Funil Padrão.</p>
+              </div>
+            </div>
+
+            {/* Stages */}
+            <div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
+              <div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50 flex justify-between items-center">
+                <h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
+                  <Layers className="text-brand-yellow" size={18} /> Etapas do Funil
+                </h3>
+                <button onClick={() => openStageModal()} className="text-sm font-bold text-brand-yellow hover:underline flex items-center gap-1">
+                  <Plus size={16} /> Nova Etapa
+                </button>
+              </div>
+              
+              <div className="divide-y divide-zinc-100 dark:divide-dark-border">
+                {selectedFunnel.stages?.sort((a,b) => a.order_index - b.order_index).map((f, index) => (
+                  <div key={f.id} className="p-4 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
+                    <div className="flex items-center gap-4">
+                      <div className="flex flex-col gap-1">
+                        <button onClick={() => handleMoveStage(index, 'up')} disabled={index === 0} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
+                          <ChevronUp size={16} />
+                        </button>
+                        <button onClick={() => handleMoveStage(index, 'down')} disabled={index === selectedFunnel.stages.length - 1} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
+                          <ChevronDown size={16} />
+                        </button>
+                      </div>
+                      <div>
+                        <span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${f.color_class}`}>
+                          {f.name}
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <div className="flex gap-2">
+                      <button onClick={() => openStageModal(f)} className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-dark-input rounded-lg transition-colors">
+                        <Edit size={16} />
+                      </button>
+                      <button onClick={() => handleDeleteStage(f.id)} className="p-2 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors">
+                        <Trash2 size={16} />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+                {(!selectedFunnel.stages || selectedFunnel.stages.length === 0) && (
+                  <div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma etapa configurada neste funil.</div>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="p-12 text-center text-zinc-500">Selecione ou crie um funil.</div>
+        )}
+      </div>
+
+      {/* Funnel Creation Modal */}
+      {isFunnelModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
+          <div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-sm overflow-hidden animate-in fade-in zoom-in duration-200">
+            <div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
+              <h3 className="font-bold text-zinc-900 dark:text-zinc-50">Novo Funil</h3>
+              <button onClick={() => setIsFunnelModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
+            </div>
+            <form onSubmit={handleCreateFunnel} className="p-6 space-y-4">
+              <div>
+                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome do Funil</label>
+                <input 
+                  type="text" 
+                  value={funnelName} 
+                  onChange={e => setFunnelName(e.target.value)} 
+                  placeholder="Ex: Vendas B2B"
+                  className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all" 
+                  required 
+                />
+              </div>
+              <div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
+                <button type="button" onClick={() => setIsFunnelModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
+                <button type="submit" disabled={isSaving || !funnelName.trim()} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
+                  {isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Criar Funil'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Stage Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
+          <div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
+            <div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
+              <h3 className="font-bold text-zinc-900 dark:text-zinc-50">{editingStage ? 'Editar Etapa' : 'Nova Etapa'}</h3>
+              <button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
+            </div>
+            <form onSubmit={handleSaveStage} className="p-6 space-y-4">
+              <div>
+                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome da Etapa</label>
+                <input 
+                  type="text" 
+                  value={formData.name} 
+                  onChange={e => setFormData({...formData, name: e.target.value})} 
+                  placeholder="Ex: Qualificação"
+                  className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all" 
+                  required 
+                />
+              </div>
+              
+              <div>
+                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-2 block">Cor Visual</label>
+                <div className="grid grid-cols-2 gap-2">
+                  {PRESET_COLORS.map((color, i) => (
+                    <label key={i} className={`flex items-center gap-2 p-2 border rounded-lg cursor-pointer transition-all ${formData.color_class === color.value ? 'border-brand-yellow bg-yellow-50/50 dark:bg-yellow-900/10' : 'border-zinc-200 dark:border-dark-border hover:bg-zinc-50 dark:hover:bg-dark-input'}`}>
+                      <input 
+                        type="radio" 
+                        name="color" 
+                        value={color.value} 
+                        checked={formData.color_class === color.value} 
+                        onChange={(e) => setFormData({...formData, color_class: e.target.value})}
+                        className="sr-only"
+                      />
+                      <span className={`w-3 h-3 rounded-full border ${color.value.split(' ')[0]} ${color.value.split(' ')[2]}`}></span>
+                      <span className="text-xs font-medium text-zinc-700 dark:text-zinc-300">{color.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              <div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
+                <button type="submit" disabled={isSaving} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
+                  {isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Etapa'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

pages/UserDetail.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { getAttendances, getUserById } from '../services/dataService';
-import { Attendance, User, FunnelStage, DashboardFilter } from '../types';
+import { getAttendances, getUserById, getFunnels } from '../services/dataService';
+import { Attendance, User, FunnelStage, DashboardFilter, FunnelStageDef } from '../types';
 import { ArrowLeft, Mail, Phone, Clock, MessageSquare, ChevronLeft, ChevronRight, Eye, Filter } from 'lucide-react';
 import { DateRangePicker } from '../components/DateRangePicker';
 
@@ -11,6 +11,7 @@ export const UserDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const [user, setUser] = useState<User | undefined>();
   const [attendances, setAttendances] = useState<Attendance[]>([]);
+  const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState<DashboardFilter>({
@@ -31,11 +32,22 @@ export const UserDetail: React.FC = () => {
           setUser(u);
           
           if (u && tenantId) {
-            const data = await getAttendances(tenantId, { 
+            const [data, fetchedFunnels] = await Promise.all([
+              getAttendances(tenantId, { 
                 ...filters,
                 userId: id
-            });
+              }),
+              getFunnels(tenantId)
+            ]);
             setAttendances(data);
+
+            const targetTeamId = u.team_id || null;
+            let activeFunnel = fetchedFunnels[0];
+            if (targetTeamId) {
+              const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
+              if (matchedFunnel) activeFunnel = matchedFunnel;
+            }
+            setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages.sort((a: any, b: any) => a.order_index - b.order_index) : []);
           }
         } catch (error) {
           console.error("Error loading user details", error);
@@ -66,7 +78,10 @@ export const UserDetail: React.FC = () => {
     }
   };
 
-  const getStageBadgeColor = (stage: FunnelStage) => {
+  const getStageBadgeColor = (stage: string) => {
+    const def = funnelDefs.find(f => f.name === stage);
+    if (def) return def.color_class;
+
     switch (stage) {
       case FunnelStage.WON: return 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800';
       case FunnelStage.LOST: return 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800';
@@ -133,11 +148,12 @@ export const UserDetail: React.FC = () => {
           onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
         >
           <option value="all">Todas Etapas</option>
-          {Object.values(FunnelStage).map(stage => (
+          {funnelDefs.length > 0 ? funnelDefs.map(stage => (
+            <option key={stage.id} value={stage.name}>{stage.name}</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-zinc-700 transition-all"
           value={filters.origin}

services/dataService.ts

@@ -82,6 +82,100 @@ export const clearAllNotifications = async (): Promise<boolean> => {
   }
 };
 
+// --- Funnels Functions ---
+export const getFunnels = async (tenantId: string): Promise<any[]> => {
+  try {
+    const response = await fetch(`${API_URL}/funnels?tenantId=${tenantId}`, {
+      headers: getHeaders()
+    });
+    if (!response.ok) throw new Error('Falha ao buscar funis');
+    return await response.json();
+  } catch (error) {
+    console.error("API Error (getFunnels):", error);
+    return [];
+  }
+};
+
+export const createFunnel = async (data: { name: string, tenantId: string }): Promise<any> => {
+  const response = await fetch(`${API_URL}/funnels`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Erro ao criar funil');
+  }
+  return await response.json();
+};
+
+export const updateFunnel = async (id: string, data: { name?: string, teamIds?: string[] }): Promise<boolean> => {
+  try {
+    const response = await fetch(`${API_URL}/funnels/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(data)
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (updateFunnel):", error);
+    return false;
+  }
+};
+
+export const deleteFunnel = async (id: string): Promise<boolean> => {
+  try {
+    const response = await fetch(`${API_URL}/funnels/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteFunnel):", error);
+    return false;
+  }
+};
+
+export const createFunnelStage = async (funnelId: string, data: any): Promise<any> => {
+  const response = await fetch(`${API_URL}/funnels/${funnelId}/stages`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Erro ao criar etapa');
+  }
+  return await response.json();
+};
+
+export const updateFunnelStage = async (id: string, data: any): Promise<boolean> => {
+  try {
+    const response = await fetch(`${API_URL}/funnel_stages/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(data)
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (updateFunnelStage):", error);
+    return false;
+  }
+};
+
+export const deleteFunnelStage = async (id: string): Promise<boolean> => {
+  try {
+    const response = await fetch(`${API_URL}/funnel_stages/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteFunnelStage):", error);
+    return false;
+  }
+};
+
 export const searchGlobal = async (query: string): Promise<{ members: User[], teams: any[], attendances: any[], organizations?: any[] }> => {
   try {
     const response = await fetch(`${API_URL}/search?q=${encodeURIComponent(query)}`, {

test-b64.js

@@ -0,0 +1,8 @@
+const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InVfMTIzNDUiLCJ0ZW5hbnRfaWQiOiJzeXN0ZW0ifQ.XYZ";
+const base64Url = token.split('.')[1];
+const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+console.log(base64);
+const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+}).join(''));
+console.log(JSON.parse(jsonPayload));

test-jwt.js

@@ -0,0 +1,11 @@
+const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InVfMTIzNDUiLCJ0ZW5hbnRfaWQiOiJzeXN0ZW0ifQ.XYZ";
+const base64Url = token.split('.')[1];
+let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+const pad = base64.length % 4;
+if (pad) {
+  base64 += '='.repeat(4 - pad);
+}
+const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+}).join(''));
+console.log(JSON.parse(jsonPayload));

test-mysql-error.cjs

@@ -0,0 +1,15 @@
+const mysql = require('mysql2/promise');
+const pool = mysql.createPool({ host: 'localhost', user: 'root', password: 'secret_pass', database: 'fasto_db', port: 3306 });
+
+async function run() {
+  try {
+    const id = 'u_71657ec7'; // or your ID
+    const [rows] = await pool.query('SELECT * FROM users WHERE id = ? OR slug = ?', [id, id]);
+    console.log(rows);
+  } catch (err) {
+    console.error(err);
+  } finally {
+    pool.end();
+  }
+}
+run();

test-mysql.cjs

@@ -0,0 +1,14 @@
+const mysql = require('mysql2/promise');
+
+async function test() {
+  const pool = mysql.createPool({ host: '127.0.0.1', user: 'root', password: 'secret_pass', database: 'fasto_db', port: 3306 });
+  try {
+    const [rows] = await pool.query('SELECT * FROM users WHERE id = ? OR slug = ?', ['u_71657ec7', 'u_71657ec7']);
+    console.log("ROWS:", rows);
+  } catch (err) {
+    console.error("ERROR:", err);
+  } finally {
+    await pool.end();
+  }
+}
+test();

test-mysql.js

@@ -0,0 +1,23 @@
+const mysql = require('mysql2/promise');
+
+async function test() {
+  const pool = mysql.createPool({ host: '127.0.0.1', user: 'root', password: 'secret_pass', database: 'fasto_db', port: 3306 });
+  try {
+    const [rows] = await pool.query('SELECT * FROM users WHERE id = ? OR slug = ?', ['u_71657ec7', 'u_71657ec7']);
+    console.log("ROWS:", rows);
+    // Simulate req.user
+    const req = { user: { role: 'super_admin', tenant_id: 'system' } };
+    
+    if (req.user.role !== 'super_admin' && rows[0].tenant_id !== req.user.tenant_id) {
+       console.log("Access Denied");
+    } else {
+       console.log("Access Granted");
+    }
+
+  } catch (err) {
+    console.error("ERROR:", err);
+  } finally {
+    await pool.end();
+  }
+}
+test();

types.ts

@@ -7,6 +7,22 @@ export enum FunnelStage {
   LOST = 'Perdidos',
 }
 
+export interface FunnelStageDef {
+  id: string;
+  funnel_id: string;
+  name: string;
+  color_class: string;
+  order_index: number;
+}
+
+export interface FunnelDef {
+  id: string;
+  tenant_id: string;
+  name: string;
+  stages: FunnelStageDef[];
+  teamIds: string[];
+}
+
 export interface User {
   id: string;
   tenant_id: string;