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.

backend/index.js

@@ -570,11 +570,14 @@ apiRouter.get('/funnels', async (req, res) => {
     const effectiveTenantId = req.user.role === 'super_admin' ? tenantId : req.user.tenant_id;
     if (!effectiveTenantId || effectiveTenantId === 'all') return res.json([]);
 
-    const [rows] = await pool.query('SELECT * FROM tenant_funnels WHERE tenant_id = ? ORDER BY order_index ASC', [effectiveTenantId]);
+    const [funnels] = await pool.query('SELECT * FROM funnels WHERE tenant_id = ? ORDER BY created_at ASC', [effectiveTenantId]);
     
-    // If no funnels exist for this tenant, seed the default ones
+    // Seed default funnel if none exists
-    if (rows.length === 0) {
+    if (funnels.length === 0) {
-      const defaultFunnels = [
+      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 },
@@ -582,51 +585,61 @@ apiRouter.get('/funnels', async (req, res) => {
         { 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 f of defaultFunnels) {
+      for (const s of defaultStages) {
-        const fid = `funnel_${crypto.randomUUID().split('-')[0]}`;
+        const sid = `stage_${crypto.randomUUID().split('-')[0]}`;
         await pool.query(
-          'INSERT INTO tenant_funnels (id, tenant_id, name, color_class, order_index) VALUES (?, ?, ?, ?, ?)',
+          'INSERT INTO funnel_stages (id, funnel_id, name, color_class, order_index) VALUES (?, ?, ?, ?, ?)',
-          [fid, effectiveTenantId, f.name, f.color, f.order]
+          [sid, fid, s.name, s.color, s.order]
         );
       }
       
-      const [newRows] = await pool.query('SELECT * FROM tenant_funnels WHERE tenant_id = ? ORDER BY order_index ASC', [effectiveTenantId]);
+      // Update all teams of this tenant to use this funnel if they have none
-      return res.json(newRows);
+      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' });
     }
-    
+
-    res.json(rows);
+    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, color_class, order_index, tenantId } = req.body;
+  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(
+    await pool.query('INSERT INTO funnels (id, tenant_id, name) VALUES (?, ?, ?)', [fid, effectiveTenantId, name]);
-      'INSERT INTO tenant_funnels (id, tenant_id, name, color_class, order_index) VALUES (?, ?, ?, ?, ?)',
+    res.status(201).json({ id: fid });
-      [fid, effectiveTenantId, name, color_class, order_index || 0]
-    );
-    res.status(201).json({ id: fid, message: 'Etapa do funil criada com sucesso.' });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
 apiRouter.put('/funnels/:id', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
-  const { name, color_class, order_index } = req.body;
+  const { name, teamIds } = req.body;
   try {
-    const [existing] = await pool.query('SELECT * FROM tenant_funnels WHERE id = ?', [req.params.id]);
+    if (name) {
-    if (existing.length === 0) return res.status(404).json({ error: 'Etapa não encontrada' });
+      await pool.query('UPDATE funnels SET name = ? WHERE id = ?', [name, req.params.id]);
-    if (req.user.role !== 'super_admin' && existing[0].tenant_id !== req.user.tenant_id) return res.status(403).json({ error: 'Acesso negado' });
+    }
-
+    if (teamIds && Array.isArray(teamIds)) {
-    await pool.query(
+      await pool.query('UPDATE teams SET funnel_id = NULL WHERE funnel_id = ?', [req.params.id]);
-      'UPDATE tenant_funnels SET name = ?, color_class = ?, order_index = ? WHERE id = ?',
+      if (teamIds.length > 0) {
-      [name || existing[0].name, color_class || existing[0].color_class, order_index !== undefined ? order_index : existing[0].order_index, req.params.id]
+        await pool.query('UPDATE teams SET funnel_id = ? WHERE id IN (?)', [req.params.id, teamIds]);
-    );
+      }
-    res.json({ message: 'Etapa do funil atualizada.' });
+    }
+    res.json({ message: 'Funnel updated.' });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
@@ -634,12 +647,49 @@ apiRouter.put('/funnels/:id', requireRole(['admin', 'owner', 'manager', 'super_a
 
 apiRouter.delete('/funnels/:id', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
   try {
-    const [existing] = await pool.query('SELECT * FROM tenant_funnels WHERE id = ?', [req.params.id]);
+    await pool.query('DELETE FROM funnel_stages WHERE funnel_id = ?', [req.params.id]);
-    if (existing.length === 0) return res.status(404).json({ error: 'Etapa não encontrada' });
+    await pool.query('UPDATE teams SET funnel_id = NULL WHERE funnel_id = ?', [req.params.id]);
-    if (req.user.role !== 'super_admin' && existing[0].tenant_id !== req.user.tenant_id) return res.status(403).json({ error: 'Acesso negado' });
+    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 });
+  }
+});
 
-    await pool.query('DELETE FROM tenant_funnels WHERE id = ?', [req.params.id]);
+apiRouter.post('/funnels/:id/stages', requireRole(['admin', 'owner', 'manager', 'super_admin']), async (req, res) => {
-    res.json({ message: 'Etapa do funil excluída.' });
+  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 });
   }
@@ -1043,20 +1093,39 @@ const provisionSuperAdmin = async (retries = 10, delay = 10000) => {
         console.log('Schema update note (funnel_stage):', err.message);
       }
 
-      // Create tenant_funnels table
+      // Create funnels table
       await connection.query(`
-        CREATE TABLE IF NOT EXISTS tenant_funnels (
+        CREATE TABLE IF NOT EXISTS funnels (
           id varchar(36) NOT NULL,
           tenant_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 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']);

pages/AttendanceDetail.tsx

@@ -17,17 +17,25 @@ export const AttendanceDetail: React.FC = () => {
         setLoading(true);
         try {
           const tenantId = localStorage.getItem('ctms_tenant_id') || '';
-          const [att, fDefs] = await Promise.all([
+          const [att, fetchedFunnels] = await Promise.all([
             getAttendanceById(id),
             getFunnels(tenantId)
           ]);
           
           setData(att);
-          setFunnelDefs(fDefs);
           
           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);

pages/Dashboard.tsx

@@ -70,8 +70,18 @@ export const Dashboard: React.FC = () => {
         setData(fetchedData);
         setPrevData(prevFetchedData);
         setTeams(fetchedTeams);
-        setFunnelDefs(fetchedFunnels.sort((a, b) => a.order_index - b.order_index));
         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 {

pages/Funnels.tsx

@@ -1,16 +1,23 @@
 import React, { useState, useEffect } from 'react';
-import { Layers, Plus, Edit, Trash2, ChevronUp, ChevronDown, Loader2, X, CheckCircle2 } from 'lucide-react';
+import { Layers, Plus, Edit, Trash2, ChevronUp, ChevronDown, Loader2, X, Users } from 'lucide-react';
-import { getFunnels, createFunnel, updateFunnel, deleteFunnel } from '../services/dataService';
+import { getFunnels, createFunnel, updateFunnel, deleteFunnel, createFunnelStage, updateFunnelStage, deleteFunnelStage, getTeams } from '../services/dataService';
-import { FunnelStageDef } from '../types';
+import { FunnelDef, FunnelStageDef } from '../types';
 
 export const Funnels: React.FC = () => {
-  const [funnels, setFunnels] = useState<FunnelStageDef[]>([]);
+  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 [editingFunnel, setEditingFunnel] = useState<FunnelStageDef | null>(null);
+  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 = [
@@ -22,28 +29,84 @@ export const Funnels: React.FC = () => {
     { 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 loadFunnels = async () => {
+  const loadData = async () => {
     setLoading(true);
-    const data = await getFunnels(tenantId);
+    const [fetchedFunnels, fetchedTeams] = await Promise.all([
-    setFunnels(data.sort((a, b) => a.order_index - b.order_index));
+      getFunnels(tenantId),
+      getTeams(tenantId)
+    ]);
+    setFunnels(fetchedFunnels);
+    setTeams(fetchedTeams);
+    if (!selectedFunnelId && fetchedFunnels.length > 0) {
+      setSelectedFunnelId(fetchedFunnels[0].id);
+    }
     setLoading(false);
   };
 
   useEffect(() => {
-    loadFunnels();
+    loadData();
   }, [tenantId]);
 
-  const handleSave = async (e: React.FormEvent) => {
+  const selectedFunnel = funnels.find(f => f.id === selectedFunnelId);
+
+  // --- Funnel Handlers ---
+  const handleCreateFunnel = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSaving(true);
     try {
-      if (editingFunnel) {
+      const res = await createFunnel({ name: funnelName, tenantId });
-        await updateFunnel(editingFunnel.id, formData);
+      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 createFunnel({ ...formData, tenantId, order_index: funnels.length });
+        await createFunnelStage(selectedFunnel.id, { ...formData, order_index: selectedFunnel.stages.length });
       }
       setIsModalOpen(false);
-      loadFunnels();
+      loadData();
     } catch (err) {
       alert("Erro ao salvar etapa.");
     } finally {
@@ -51,110 +114,209 @@ export const Funnels: React.FC = () => {
     }
   };
 
-  const handleDelete = async (id: string) => {
+  const handleDeleteStage = async (id: string) => {
     if (confirm('Tem certeza que deseja excluir esta etapa?')) {
-      await deleteFunnel(id);
+      await deleteFunnelStage(id);
-      loadFunnels();
+      loadData();
     }
   };
 
-  const handleMove = async (index: number, direction: 'up' | 'down') => {
+  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 === funnels.length - 1) return;
+    if (direction === 'down' && index === stages.length - 1) return;
 
     const newIndex = direction === 'up' ? index - 1 : index + 1;
-    const newFunnels = [...funnels];
     
-    // Swap order_index
+    const tempOrder = stages[index].order_index;
-    const tempOrder = newFunnels[index].order_index;
+    stages[index].order_index = stages[newIndex].order_index;
-    newFunnels[index].order_index = newFunnels[newIndex].order_index;
+    stages[newIndex].order_index = tempOrder;
-    newFunnels[newIndex].order_index = tempOrder;
 
-    // Optimistic UI update
+    setFunnels([...funnels]); // trigger re-render
-    setFunnels(newFunnels.sort((a, b) => a.order_index - b.order_index));
 
-    // Persist to backend
     await Promise.all([
-      updateFunnel(newFunnels[index].id, { order_index: newFunnels[index].order_index }),
+      updateFunnelStage(stages[index].id, { order_index: stages[index].order_index }),
-      updateFunnel(newFunnels[newIndex].id, { order_index: newFunnels[newIndex].order_index })
+      updateFunnelStage(stages[newIndex].id, { order_index: stages[newIndex].order_index })
     ]);
   };
 
-  const openModal = (funnel?: FunnelStageDef) => {
+  const openStageModal = (stage?: FunnelStageDef) => {
-    if (funnel) {
+    if (stage) {
-      setEditingFunnel(funnel);
+      setEditingStage(stage);
-      setFormData({ name: funnel.name, color_class: funnel.color_class });
+      setFormData({ name: stage.name, color_class: stage.color_class });
     } else {
-      setEditingFunnel(null);
+      setEditingStage(null);
       setFormData({ name: '', color_class: PRESET_COLORS[0].value });
     }
     setIsModalOpen(true);
   };
 
-  if (loading) return <div className="p-12 flex justify-center"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>;
+  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-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
+    <div className="max-w-6xl mx-auto space-y-6 pb-12 transition-colors duration-300 flex flex-col md:flex-row gap-8">
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      
-        <div>
+      {/* Sidebar: Funnels List */}
-          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Personalizar Funil</h1>
+      <div className="w-full md:w-64 shrink-0 space-y-4">
-          <p className="text-zinc-500 dark:text-zinc-400 text-sm">Crie, edite e reordene as etapas do funil de vendas da sua organização.</p>
+        <div className="flex items-center justify-between">
-        </div>
+          <h2 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Meus Funis</h2>
-        <button onClick={() => openModal()} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-bold shadow-sm hover:opacity-90 transition-all shrink-0">
+          <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} /> Nova Etapa
+            <Plus size={16} />
-        </button>
+          </button>
-      </div>
-
-      <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">
-            <Layers className="text-brand-yellow" size={18} /> Etapas do Funil
-          </h3>
         </div>
         
-        <div className="divide-y divide-zinc-100 dark:divide-dark-border">
+        <div className="flex flex-col gap-2">
-          {funnels.map((f, index) => (
+          {funnels.map(f => (
-            <div key={f.id} className="p-4 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
+            <button 
-              <div className="flex items-center gap-4">
+              key={f.id}
-                <div className="flex flex-col gap-1">
+              onClick={() => setSelectedFunnelId(f.id)}
-                  <button onClick={() => handleMove(index, 'up')} disabled={index === 0} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
+              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'}`}
-                    <ChevronUp size={16} />
+            >
-                  </button>
+              <div className="flex justify-between items-center">
-                  <button onClick={() => handleMove(index, 'down')} disabled={index === funnels.length - 1} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
+                <span>{f.name}</span>
-                    <ChevronDown size={16} />
+                <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>
-                  </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>
-              
+            </button>
-              <div className="flex gap-2">
-                <button onClick={() => openModal(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={() => handleDelete(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>
           ))}
-          {funnels.length === 0 && (
-            <div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma etapa configurada.</div>
-          )}
         </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">{editingFunnel ? 'Editar Etapa' : 'Nova Etapa'}</h3>
+              <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={handleSave} className="p-6 space-y-4">
+            <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 

pages/UserDetail.tsx

@@ -32,7 +32,7 @@ export const UserDetail: React.FC = () => {
           setUser(u);
           
           if (u && tenantId) {
-            const [data, funnels] = await Promise.all([
+            const [data, fetchedFunnels] = await Promise.all([
               getAttendances(tenantId, { 
                 ...filters,
                 userId: id
@@ -40,7 +40,14 @@ export const UserDetail: React.FC = () => {
               getFunnels(tenantId)
             ]);
             setAttendances(data);
-            setFunnelDefs(funnels);
+
+            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);

services/dataService.ts

@@ -96,7 +96,7 @@ export const getFunnels = async (tenantId: string): Promise<any[]> => {
   }
 };
 
-export const createFunnel = async (data: any): Promise<any> => {
+export const createFunnel = async (data: { name: string, tenantId: string }): Promise<any> => {
   const response = await fetch(`${API_URL}/funnels`, {
     method: 'POST',
     headers: getHeaders(),
@@ -109,7 +109,7 @@ export const createFunnel = async (data: any): Promise<any> => {
   return await response.json();
 };
 
-export const updateFunnel = async (id: string, data: any): Promise<boolean> => {
+export const updateFunnel = async (id: string, data: { name?: string, teamIds?: string[] }): Promise<boolean> => {
   try {
     const response = await fetch(`${API_URL}/funnels/${id}`, {
       method: 'PUT',
@@ -136,6 +136,46 @@ export const deleteFunnel = async (id: string): Promise<boolean> => {
   }
 };
 
+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)}`, {

types.ts

@@ -9,12 +9,20 @@ export enum FunnelStage {
 
 export interface FunnelStageDef {
   id: string;
-  tenant_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;