update docker compose again uhuu

revert update docker compose again

App.tsx

@@ -1,30 +1,48 @@
-import React, { useState, useEffect } from 'react';
-import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
-import { Layout } from './components/Layout';
-import { Dashboard } from './pages/Dashboard';
-import { UserDetail } from './pages/UserDetail';
-import { AttendanceDetail } from './pages/AttendanceDetail';
-import { SuperAdmin } from './pages/SuperAdmin';
-import { TeamManagement } from './pages/TeamManagement';
-import { Teams } from './pages/Teams';
-import { Login } from './pages/Login';
-import { ForgotPassword } from './pages/ForgotPassword';
-import { ResetPassword } from './pages/ResetPassword';
-import { UserProfile } from './pages/UserProfile';
-import { getUserById, logout } from './services/dataService';
-import { User } from './types';
+import React, { useState, useEffect } from "react";
+import {
+  HashRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+  useLocation,
+} from "react-router-dom";
+import { Layout } from "./components/Layout";
+import { Dashboard } from "./pages/Dashboard";
+import { UserDetail } from "./pages/UserDetail";
+import { AttendanceDetail } from "./pages/AttendanceDetail";
+import { SuperAdmin } from "./pages/SuperAdmin";
+import { ApiKeys } from "./pages/ApiKeys";
+import { TeamManagement } from "./pages/TeamManagement";
+import { Teams } from "./pages/Teams";
+import { Funnels } from "./pages/Funnels";
+import { Origins } from "./pages/Origins";
+import { Login } from "./pages/Login";
+import { ForgotPassword } from "./pages/ForgotPassword";
+import { ResetPassword } from "./pages/ResetPassword";
+import { SetupAccount } from "./pages/SetupAccount";
+import { UserProfile } from "./pages/UserProfile";
+import { getUserById, logout } from "./services/dataService";
+import { User } from "./types";
 
-const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({ children, roles }) => {
+const AuthGuard: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({
+  children,
+  roles,
+}) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const location = useLocation();
 
   useEffect(() => {
     const checkAuth = async () => {
-      const storedUserId = localStorage.getItem('ctms_user_id');
-      const storedToken = localStorage.getItem('ctms_token');
+      const storedUserId = localStorage.getItem("ctms_user_id");
+      const storedToken = localStorage.getItem("ctms_token");
 
-      if (!storedUserId || !storedToken || storedToken === 'undefined' || storedToken === 'null') {
+      if (
+        !storedUserId ||
+        !storedToken ||
+        storedToken === "undefined" ||
+        storedToken === "null"
+      ) {
         if (storedToken) logout(); // Limpar se for "undefined" string
         setLoading(false);
         return;
@@ -32,15 +50,27 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
 
       try {
         const fetchedUser = await getUserById(storedUserId);
-        if (fetchedUser && fetchedUser.status === 'active') {
+        if (fetchedUser) {
+          if (fetchedUser.status === "active") {
             setUser(fetchedUser);
           } else {
+            // User explicitly marked inactive or deleted
+            logout();
+            setUser(null);
+          }
+        } else {
+          // If fetchedUser is undefined but didn't throw, it usually means a 401/403/404 (invalid token or user missing).
+          // However, to be safe against random failures, we should only clear if we are sure it's invalid.
+          // For now, if the token is completely rejected, we log out.
           logout();
           setUser(null);
         }
       } catch (err) {
-        console.error("Auth check failed", err);
-        logout();
+        console.error("Auth check failed (network/server error):", err);
+        // DO NOT logout() here. If the server is offline or restarting,
+        // we shouldn't wipe the user's local storage tokens.
+        // We just leave the user as null, which will redirect them to login,
+        // but their tokens remain so they can auto-login when the server is back.
         setUser(null);
       } finally {
         setLoading(false);
@@ -50,7 +80,11 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
   }, [location.pathname]);
 
   if (loading) {
-    return <div className="flex h-screen items-center justify-center bg-slate-50 text-slate-400">Carregando...</div>;
+    return (
+      <div className="flex h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-400">
+        Carregando...
+      </div>
+    );
   }
 
   if (!user) {
@@ -61,6 +95,11 @@ const AuthGuard: React.FC<{ children: React.ReactNode, roles?: string[] }> = ({
     return <Navigate to="/" replace />;
   }
 
+  // Auto-redirect Super Admins away from the standard dashboard to their specific panel
+  if (location.pathname === "/" && user.role === "super_admin") {
+    return <Navigate to="/super-admin" replace />;
+  }
+
   return <Layout>{children}</Layout>;
 };
 
@@ -71,13 +110,87 @@ const App: React.FC = () => {
         <Route path="/login" element={<Login />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
         <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/" element={<AuthGuard><Dashboard /></AuthGuard>} />
-        <Route path="/admin/users" element={<AuthGuard><TeamManagement /></AuthGuard>} />
-        <Route path="/admin/teams" element={<AuthGuard><Teams /></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>} />
-        <Route path="/profile" element={<AuthGuard><UserProfile /></AuthGuard>} />
+        <Route path="/setup-account" element={<SetupAccount />} />
+        <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"]}>
+              <Funnels />
+            </AuthGuard>
+          }
+        />
+        <Route
+          path="/admin/origins"
+          element={
+            <AuthGuard roles={["super_admin", "admin"]}>
+              <Origins />
+            </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>
+          }
+        />
+        <Route
+          path="/super-admin/api-keys"
+          element={
+            <AuthGuard roles={["super_admin"]}>
+              <ApiKeys />
+            </AuthGuard>
+          }
+        />
+        <Route
+          path="/profile"
+          element={
+            <AuthGuard>
+              <UserProfile />
+            </AuthGuard>
+          }
+        />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </Router>

GEMINI.md

@@ -1,33 +1,52 @@
 # Fasto Project Documentation
 
 ## Overview
-Fasto is a commercial team management system built with React (Vite) on the frontend and Node.js (Express) on the backend. It uses a MySQL database.
+Fasto is a commercial team management system built with React (Vite) on the frontend and Node.js (Express) on the backend. It uses a MySQL database. It features a complete multi-tenant architecture designed to securely host multiple client organizations within a single deployment.
 
 ## 🚀 Recent Major Changes (March 2026)
-We have transitioned from a mock-based frontend to a fully functional, production-ready system:
+We have transitioned from a mock-based prototype to a **secure, multi-tenant production architecture**:
 
-- **Authentication:** Implemented real JWT-based authentication with password hashing (bcryptjs).
-- **Backend Integration:** Replaced all hardcoded constants with real API calls to a Node.js/Express backend connected to a MySQL 8.0 database.
-- **RBAC (Role-Based Access Control):** Implemented permissions for `super_admin`, `admin`, `manager`, and `agent`.
-- **Membros (Members):** Enhanced to manage roles, teams, and status. Includes a safety modal for deletion.
-- **Times (Teams):** Created a new dashboard to manage sales groups with real-time performance metrics.
-- **UI/UX:** Standardized PT-BR translations and refined modal layouts.
+- **Multi-Tenancy & Data Isolation:** All backend routes (Users, Teams, Attendances) now strictly enforce `tenant_id` checks. It is technically impossible for one organization to query data from another.
+- **Advanced 2-Token Authentication (Rolling Sessions):**
+  - Replaced the vulnerable 1-year static JWT with a highly secure dual-token system.
+  - Generates a short-lived `AccessToken` (15 min) and a stateful `RefreshToken` (30 days) stored in the DB (`refresh_tokens` table).
+  - Built an Axios-like `apiFetch` interceptor on the frontend that automatically catches 401 Unauthorized errors, fetches a new Access Token in the background, extends the Refresh Token by another 30 days (Sliding Expiration), and retries the original request without logging the user out.
+  - Full remote revocation capability (Logout drops the token from the DB immediately).
+- **God Mode (Tenant Impersonation):** Super Admins can securely impersonate Tenant Admins via a specialized, temporary JWT (`/api/impersonate/:tenantId`). This allows seamless cross-domain support without storing passwords.
+- **Role-Based Access Control (RBAC) Simplification:**
+  - Removed the redundant 'owner' role. The system now strictly relies on 4 tiers:
+  - **Super Admin:** Global management of all tenants and API keys (via the hidden `system` tenant).
+  - **Admin:** Full control over members, teams, funnels, and origins within their specific organization.
+  - **Manager:** Mid-level control. Can edit basic info of users in their specific team, but cannot change user roles or re-assign users to different teams (only Admins can).
+  - **Agent:** Restricted access. Can only view their own performance metrics and historical attendances.
+- **Dynamic Funnel & Origin Managers:** 
+  - Funnel stages and Lead Origins are no longer hardcoded ENUMs. Each tenant can create multiple dynamic funnel/origin groups via relational tables (`funnels`, `funnel_stages`, `origin_groups`, `origin_items`).
+  - Admins can customize the exact Tailwind color class (e.g., "bg-green-100") for each stage and origin via visual UI pickers.
+  - Admins assign specific Teams to specific Funnels/Origin Groups.
+  - The Dashboard pie charts and data tables strictly filter and color-code data based on the active team's configuration. Deleted data falls back to an "Outros" category to prevent chart breakage.
+- **n8n / External API Webhooks (Completed):** 
+  - Super Admins can generate persistent `api_keys` for specific tenants.
+  - `GET /api/integration/users`, `/funnels`, and `/origins` allow the n8n AI to dynamically map the tenant's actual agents and workflow stages before processing a chat.
+  - `POST /api/integration/attendances` accepts the AI's final JSON payload (including the `full_summary` text) and injects it directly into the dashboard.
+- **Real-Time Notification System:** 
+  - Built a persistent notification tray (`/api/notifications`) with real-time polling (10s intervals) and a hidden HTML5 `<audio>` player for cross-browser sound playback (custom `.mp3` loaded via Vite).
+  - Automated Triggers: Super Admins are notified of new organizations; Admins/Super Admins are notified of new user setups; Agents are notified of team assignment changes; Managers get "Venda Fechada" alerts when n8n posts a converted lead.
+- **Enhanced UI/UX:** 
+  - Premium "Onyx & Gold" True Black dark mode (Zinc scale).
+  - Fully collapsible interactive sidebar with memory (`localStorage`).
+  - All Date/Time displays localized to strict Brazilian formatting (`pt-BR`, 24h, `DD/MM/YY`).
+
+## 📌 Roadmap / To-Do
+- [ ] **Advanced AI Notification Triggers:** Implement backend logic to automatically notify Managers when an attendance payload from n8n receives a critically low quality score (`score < 50`), or breaches a specific Response Time SLA (e.g., `first_response_time_min > 60`).
+- [ ] **Data Export/Reporting:** Allow Admins to export attendance and KPI data to CSV/Excel.
+- [ ] **Billing/Subscription Management:** Integrate a payment gateway (e.g., Stripe/Asaas) to manage tenant trial periods and active statuses dynamically.
 
 ## 🛠 Architecture
-- **Frontend**: React 19, TypeScript, Vite, TailwindCSS (CDN).
-- **Backend**: Node.js, Express, MySQL2 (Pool-based).
-- **Database**: MySQL 8.0 (Schema: `agenciac_comia`).
+- **Frontend**: React 19, TypeScript, Vite, TailwindCSS (CDN), Recharts, Lucide React.
+- **Backend**: Node.js, Express, MySQL2 (Pool-based), Nodemailer.
+- **Database**: MySQL 8.0 (Schema: `fasto_db` or `agenciac_comia` depending on `.env`).
 - **Deployment**: Docker Compose for local development; Gitea Actions for CI/CD pushing to a Gitea Registry and deploying via Portainer webhook.
 
-## ⚠️ Current Error: Build Instability
-We are currently resolving a recurring build error: `Unexpected end of file` or `Expected ">" but found "\"`.
-
-### Technical Root Cause:
-This is a **tool-level synchronization issue**:
-1.  **Truncation:** The file-writing tool (`write_file`) occasionally truncates code before the final braces (`}`) or tags (`</div>`) are written.
-2.  **Escaping Glitches:** In long JSX strings (like Tailwind class lists), the system sometimes inserts accidental characters that break the JavaScript syntax.
-3.  **Result:** The Vite/Esbuild compiler fails because it reaches the end of an incomplete or syntactically broken file.
-
 ## 📋 Prerequisites
 - Docker & Docker Compose
 - Node.js (for local development outside Docker)
@@ -39,17 +58,17 @@ Copy `.env.example` to `.env` and adjust values:
 ```bash
 cp .env.example .env
 ```
-Ensure you set the database credentials and `GITEA_RUNNER_REGISTRATION_TOKEN`.
+*Note:* The backend automatically strips literal quotes from Docker `.env` string values (like `SMTP_PASS`) to prevent authentication crashes.
 
 ### 2. Database
-The project expects a MySQL database. The `docker-compose.yml` initializes it with `agenciac_comia.sql`.
+The project expects a MySQL database. The Node.js backend automatically runs non-destructive schema migrations on startup (adding tables like `refresh_tokens`, `api_keys`, `origin_groups`, etc.).
 
-### 3. Running with Docker Compose
-To start the application, database, and runner:
+### 3. Running Locally (Docker Compose)
+To start the application and database locally:
 ```bash
-docker-compose up -d --build
+docker-compose -f docker-compose.local.yml up -d --build
 ```
-- **Frontend/Backend**: http://localhost:3001
+- **App**: http://localhost:3001
 - **Database**: Port 3306
 
 ### 4. Gitea Runner
@@ -64,9 +83,6 @@ The project uses Gitea Actions defined in `.gitea/workflows/build-deploy.yaml`.
     2. Build Docker image.
     3. Push to `gitea.blyzer.com.br`.
     4. Trigger Portainer webhook.
-- **Secrets Required in Gitea**:
-    `REGISTRY_USERNAME`, `REGISTRY_TOKEN`, `PORTAINER_WEBHOOK`, `API_KEY`.
 
 ## 💻 Development
-- **Frontend**: `npm run dev` (Port 3000)
-- **Backend**: `node backend/index.js` (Port 3001)
+The Dockerfile uses a unified root structure. Both the frontend build and the backend Node.js server are hosted from the same container image.

agenciac_comia.sql

@@ -49,9 +49,6 @@ CREATE TABLE `attendances` (
 -- Extraindo dados da tabela `attendances`
 --
 
-INSERT INTO `attendances` (`id`, `tenant_id`, `user_id`, `summary`, `score`, `first_response_time_min`, `handling_time_min`, `funnel_stage`, `origin`, `product_requested`, `product_sold`, `converted`, `attention_points`, `improvement_points`, `created_at`) VALUES
-('att_demo_1', 'tenant_123', 'u2', 'Cliente interessado no plano Enterprise.', 95, 5, 30, 'Ganhos', 'LinkedIn', 'Suíte Enterprise', 'Suíte Enterprise', 1, '[]', '[\"Oferecer desconto anual na próxima\"]', '2026-02-20 12:42:10');
-
 -- --------------------------------------------------------
 
 --
@@ -70,10 +67,6 @@ CREATE TABLE `teams` (
 -- Extraindo dados da tabela `teams`
 --
 
-INSERT INTO `teams` (`id`, `tenant_id`, `name`, `description`, `created_at`) VALUES
-('sales_1', 'tenant_123', 'Vendas Alpha', NULL, '2026-02-20 12:42:10'),
-('sales_2', 'tenant_123', 'Vendas Beta', NULL, '2026-02-20 12:42:10');
-
 -- --------------------------------------------------------
 
 --
@@ -95,13 +88,6 @@ CREATE TABLE `tenants` (
 -- Extraindo dados da tabela `tenants`
 --
 
-INSERT INTO `tenants` (`id`, `name`, `slug`, `admin_email`, `logo_url`, `status`, `created_at`, `updated_at`) VALUES
-('system', 'System Admin', 'system', 'root@system.com', NULL, 'active', '2026-02-20 12:42:10', '2026-02-20 12:42:10'),
-('tenant_101', 'Soylent Green', 'soylent', 'admin@soylent.com', NULL, 'active', '2023-02-10 14:20:00', '2026-02-20 12:42:10'),
-('tenant_123', 'Fasto Corp', 'fasto', 'admin@fasto.com', NULL, 'active', '2023-01-15 13:00:00', '2026-02-20 12:42:10'),
-('tenant_456', 'Acme Inc', 'acme-inc', 'contact@acme.com', NULL, 'trial', '2023-06-20 17:30:00', '2026-02-20 12:42:10'),
-('tenant_789', 'Globex Utils', 'globex', 'sysadmin@globex.com', NULL, 'inactive', '2022-11-05 12:15:00', '2026-02-20 12:42:10');
-
 -- --------------------------------------------------------
 
 --
@@ -147,6 +133,7 @@ CREATE TABLE `users` (
   `name` varchar(255) NOT NULL,
   `email` varchar(255) NOT NULL,
   `password_hash` varchar(255) NOT NULL DEFAULT 'hash_placeholder',
+  `slug` varchar(255) UNIQUE DEFAULT NULL,
   `avatar_url` text,
   `role` enum('super_admin','admin','manager','agent') NOT NULL DEFAULT 'agent',
   `bio` text,
@@ -158,14 +145,6 @@ CREATE TABLE `users` (
 -- Extraindo dados da tabela `users`
 --
 
-INSERT INTO `users` (`id`, `tenant_id`, `team_id`, `name`, `email`, `password_hash`, `avatar_url`, `role`, `bio`, `status`, `created_at`) VALUES
-('sa1', 'system', NULL, 'Super Administrator', 'root@system.com', 'hash_placeholder', 'https://ui-avatars.com/api/?name=Super+Admin&background=0f172a&color=fff', 'super_admin', 'Administrador Global', 'active', '2026-02-20 12:42:10'),
-('u1', 'tenant_123', 'sales_1', 'Lidya Chan', 'lidya@fasto.com', 'hash_placeholder', 'https://picsum.photos/id/1011/200/200', 'manager', 'Gerente de Vendas Experiente', 'active', '2026-02-20 12:42:10'),
-('u2', 'tenant_123', 'sales_1', 'Alex Noer', 'alex@fasto.com', 'hash_placeholder', 'https://picsum.photos/id/1012/200/200', 'agent', 'Top performer Q3', 'active', '2026-02-20 12:42:10'),
-('u3', 'tenant_123', 'sales_1', 'Angela Moss', 'angela@fasto.com', 'hash_placeholder', 'https://picsum.photos/id/1013/200/200', 'agent', '', 'inactive', '2026-02-20 12:42:10'),
-('u4', 'tenant_123', 'sales_2', 'Brian Samuel', 'brian@fasto.com', 'hash_placeholder', 'https://picsum.photos/id/1014/200/200', 'agent', '', 'active', '2026-02-20 12:42:10'),
-('u5', 'tenant_123', 'sales_2', 'Benny Chagur', 'benny@fasto.com', 'hash_placeholder', 'https://picsum.photos/id/1025/200/200', 'agent', '', 'active', '2026-02-20 12:42:10');
-
 --
 -- Índices para tabelas despejadas
 --

components/DateRangePicker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Calendar } from 'lucide-react';
 import { DateRange } from '../types';
 
@@ -8,42 +8,96 @@ interface DateRangePickerProps {
 }
 
 export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange }) => {
+  const startRef = useRef<HTMLInputElement>(null);
+  const endRef = useRef<HTMLInputElement>(null);
+
   const formatDateForInput = (date: Date) => {
-    return date.toISOString().split('T')[0];
+    // Format to local YYYY-MM-DD to avoid timezone shifts
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const formatShortDate = (date: Date) => {
+    return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit', timeZone: 'America/Sao_Paulo' });
+  };
+
+  const parseLocalDate = (value: string) => {
+    // Split "YYYY-MM-DD" and create date in local timezone to avoid UTC midnight shift
+    if (!value) return null;
+    const [year, month, day] = value.split('-');
+    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
   };
 
   const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newStart = new Date(e.target.value);
-    if (!isNaN(newStart.getTime())) {
+    const newStart = parseLocalDate(e.target.value);
+    if (newStart && !isNaN(newStart.getTime())) {
       onChange({ ...dateRange, start: newStart });
     }
   };
 
   const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newEnd = new Date(e.target.value);
-    if (!isNaN(newEnd.getTime())) {
+    const newEnd = parseLocalDate(e.target.value);
+    if (newEnd && !isNaN(newEnd.getTime())) {
+      // Set to end of day to ensure the query includes the whole day
+      newEnd.setHours(23, 59, 59, 999);
       onChange({ ...dateRange, end: newEnd });
     }
   };
 
+  const openPicker = (ref: React.RefObject<HTMLInputElement>) => {
+    if (ref.current) {
+      try {
+        if ('showPicker' in HTMLInputElement.prototype) {
+          ref.current.showPicker();
+        } else {
+          ref.current.focus();
+        }
+      } catch (e) {
+        ref.current.focus();
+      }
+    }
+  };
+
   return (
-    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors">
+    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-dark-border transition-colors">
       <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
-      <div className="flex items-center gap-2 text-sm">
+      <div className="flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
+        
+        {/* Start Date */}
+        <div 
+          className="relative cursor-pointer hover:text-brand-yellow transition-colors"
+          onClick={() => openPicker(startRef)}
+        >
+          {formatShortDate(dateRange.start)}
           <input
+            ref={startRef}
             type="date"
             value={formatDateForInput(dateRange.start)}
             onChange={handleStartChange}
-          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
+            className="absolute opacity-0 w-0 h-0 overflow-hidden"
           />
-        <span className="text-zinc-400 dark:text-dark-muted">até</span>
+        </div>
+
+        <span className="text-zinc-400 dark:text-dark-muted font-normal text-xs">até</span>
+
+        {/* End Date */}
+        <div 
+          className="relative cursor-pointer hover:text-brand-yellow transition-colors"
+          onClick={() => openPicker(endRef)}
+        >
+          {formatShortDate(dateRange.end)}
           <input
+            ref={endRef}
             type="date"
             value={formatDateForInput(dateRange.end)}
             onChange={handleEndChange}
-          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
+            className="absolute opacity-0 w-0 h-0 overflow-hidden"
           />
         </div>
+
+      </div>
     </div>
   );
 };

components/KPICard.tsx

@@ -12,8 +12,9 @@ interface KPICardProps {
 }
 
 export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend, trendValue, icon: Icon, colorClass = "text-blue-600" }) => {
-  // Extract base color from colorClass (e.g., 'text-yellow-600' -> 'yellow')
-  const baseColor = colorClass.split('-')[1] || 'blue';
+  // Extract base color from colorClass (e.g., 'text-brand-yellow' -> 'brand-yellow' or 'text-blue-600' -> 'blue-600')
+  // Safer extraction:
+  const baseColor = colorClass.replace('text-', '').split(' ')[0]; // gets 'brand-yellow' or 'zinc-500'
 
   return (
     <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col justify-between hover:shadow-md transition-all duration-300">
@@ -22,8 +23,8 @@ export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend,
           <h3 className="text-zinc-500 dark:text-dark-muted text-sm font-medium mb-1">{title}</h3>
           <div className="text-3xl font-bold text-zinc-800 dark:text-dark-text tracking-tight">{value}</div>
         </div>
-        <div className={`p-3 rounded-xl bg-${baseColor}-100 dark:bg-${baseColor}-500/20 flex items-center justify-center transition-colors border border-transparent dark:border-${baseColor}-500/30`}>
-           <Icon size={20} className={`${colorClass} dark:text-${baseColor}-400`} />
+        <div className={`p-3 rounded-xl bg-${baseColor.split('-')[0]}-100 dark:bg-zinc-800 flex items-center justify-center transition-colors border border-transparent dark:border-dark-border`}>
+           <Icon size={20} className={`${colorClass} dark:text-${baseColor.split('-')[0]}-400`} />
         </div>
       </div>
       
@@ -31,6 +32,7 @@ export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend,
         <div className="flex items-center gap-2 text-sm mt-auto">
           {trend === 'up' && <span className="text-green-500 flex items-center font-medium">▲ {trendValue}</span>}
           {trend === 'down' && <span className="text-red-500 flex items-center font-medium">▼ {trendValue}</span>}
+          {trend === 'neutral' && <span className="text-zinc-500 dark:text-dark-muted flex items-center font-medium">- {trendValue}</span>}
           {subValue && <span className="text-zinc-400 dark:text-dark-muted">{subValue}</span>}
         </div>
       )}

components/Layout.tsx

@@ -2,14 +2,21 @@ 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 
+  Hexagon, Settings, Building2, Sun, Moon, Loader2, Layers,
+  ChevronLeft, ChevronRight, Key, Target
 } from 'lucide-react';
-import { getAttendances, getUsers, getUserById, logout } from '../services/dataService';
+import { 
+  getAttendances, getUsers, getUserById, logout, searchGlobal, 
+  getNotifications, markNotificationAsRead, markAllNotificationsAsRead,
+  deleteNotification, clearAllNotifications, returnToSuperAdmin
+} from '../services/dataService';
 import { User } from '../types';
+import notificationSound from '../src/assets/audio/notification.mp3';
 
 const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: any, label: string, collapsed: boolean }) => (
   <NavLink
     to={to}
+    end
     className={({ isActive }) =>
       `flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
         isActive
@@ -25,11 +32,98 @@ const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: a
 
 export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
+    return localStorage.getItem('ctms_sidebar_collapsed') === 'true';
+  });
   const [isDark, setIsDark] = useState(document.documentElement.classList.contains('dark'));
   const location = useLocation();
   const navigate = useNavigate();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
 
+  const toggleSidebar = () => {
+    const newState = !isSidebarCollapsed;
+    setIsSidebarCollapsed(newState);
+    localStorage.setItem('ctms_sidebar_collapsed', String(newState));
+  };
+
+  // Search State
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<{ members: User[], teams: any[], attendances: any[], organizations?: any[] }>({ members: [], teams: [], attendances: [], organizations: [] });
+  const [isSearching, setIsSearching] = useState(false);
+  const [showSearchResults, setShowSearchResults] = useState(false);
+
+  // Notifications State
+  const [notifications, setNotifications] = useState<any[]>([]);
+  const [showNotifications, setShowNotifications] = useState(false);
+  const unreadCount = notifications.filter(n => !n.is_read).length;
+  const previousUnreadCountRef = React.useRef(0);
+  const isInitialLoadRef = React.useRef(true);
+  
+  // Pre-initialize audio to ensure it's loaded and ready
+  const audioRef = React.useRef<HTMLAudioElement | null>(null);
+
+  const playNotificationSound = () => {
+    if (currentUser?.sound_enabled !== false && audioRef.current) {
+      // Reset time to 0 to allow rapid replays
+      audioRef.current.currentTime = 0;
+      const playPromise = audioRef.current.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(e => console.log('Audio play blocked by browser policy:', e));
+      }
+    }
+  };
+
+  const loadNotifications = async () => {
+    const data = await getNotifications();
+    
+    const newUnreadCount = data.filter((n: any) => !n.is_read).length;
+    
+    // Only play sound if it's NOT the first load AND the count actually increased
+    if (!isInitialLoadRef.current && newUnreadCount > previousUnreadCountRef.current) {
+      playNotificationSound();
+    }
+    
+    setNotifications(data);
+    previousUnreadCountRef.current = newUnreadCount;
+    isInitialLoadRef.current = false;
+  };
+
+  const handleBellClick = async () => {
+    const willOpen = !showNotifications;
+    setShowNotifications(willOpen);
+    
+    if (willOpen && unreadCount > 0) {
+      // Optimistic update
+      setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
+      previousUnreadCountRef.current = 0;
+      await markAllNotificationsAsRead();
+      loadNotifications();
+    }
+  };
+
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(async () => {
+      if (searchQuery.length >= 2) {
+        setIsSearching(true);
+        const results = await searchGlobal(searchQuery);
+        setSearchResults(results);
+        setIsSearching(false);
+        setShowSearchResults(true);
+      } else {
+        setSearchResults({ members: [], teams: [], attendances: [], organizations: [] });
+        setShowSearchResults(false);
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchQuery]);
+
+  const getSearchPlaceholder = () => {
+    if (currentUser?.role === 'super_admin') return 'Buscar membros, equipes, atendimentos ou organizações...';
+    if (currentUser?.role === 'agent') return 'Buscar atendimentos...';
+    return 'Buscar membros, equipes ou atendimentos...';
+  };
+
   useEffect(() => {
     const fetchCurrentUser = async () => {
       const storedUserId = localStorage.getItem('ctms_user_id');
@@ -50,6 +144,9 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       }
     };
     fetchCurrentUser();
+    loadNotifications();
+    const interval = setInterval(loadNotifications, 10000);
+    return () => clearInterval(interval);
   }, [navigate]);
 
   const handleLogout = () => {
@@ -89,59 +186,111 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
     <div className="flex h-screen bg-zinc-50 dark:bg-dark-bg overflow-hidden transition-colors duration-300">
       {/* Sidebar */}
       <aside
-        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-dark-sidebar border-r border-zinc-200 dark:border-dark-border transform transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0 ${
+        className={`fixed inset-y-0 left-0 z-50 bg-white dark:bg-dark-sidebar border-r border-zinc-200 dark:border-dark-border transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 ${
           isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
-        }`}
+        } flex flex-col ${isSidebarCollapsed ? 'w-20' : 'w-64'}`}
       >
-        <div className="flex flex-col h-full">
-          {/* Logo */}
-          <div className="flex items-center gap-3 px-6 h-20 border-b border-zinc-100 dark:border-dark-border">
-            <div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
+        {/* Logo & Toggle */}
+        <div className="flex items-center justify-between px-4 h-20 border-b border-zinc-100 dark:border-dark-border shrink-0">
+          <div className={`flex items-center gap-3 overflow-hidden ${isSidebarCollapsed ? 'mx-auto' : ''}`}>
+            <div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors shrink-0">
               <Hexagon size={24} fill="currentColor" />
             </div>
-            <span className="text-xl font-bold text-zinc-900 dark:text-white tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
-            <button onClick={() => setIsMobileMenuOpen(false)} className="ml-auto lg:hidden text-zinc-400">
+            {!isSidebarCollapsed && (
+              <span className="text-xl font-bold text-zinc-900 dark:text-white tracking-tight whitespace-nowrap">Fasto<span className="text-brand-yellow">.</span></span>
+            )}
+          </div>
+          
+          {!isSidebarCollapsed && (
+            <button 
+              onClick={toggleSidebar} 
+              className="hidden lg:flex p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors shrink-0"
+              title="Recolher Menu"
+            >
+              <ChevronLeft size={18} />
+            </button>
+          )}
+          <button onClick={() => setIsMobileMenuOpen(false)} className="lg:hidden text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
             <X size={24} />
           </button>
         </div>
 
+        {/* Expand Button when collapsed */}
+        {isSidebarCollapsed && (
+            <div className="hidden lg:flex justify-center p-2 border-b border-zinc-100 dark:border-dark-border shrink-0">
+              <button 
+                onClick={toggleSidebar} 
+                className="p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors"
+                title="Expandir Menu"
+              >
+                <ChevronRight size={18} />
+              </button>
+            </div>
+        )}
+
         {/* Navigation */}
-          <nav className="flex-1 px-4 py-6 space-y-2">
+        <nav className={`flex-1 py-6 space-y-2 overflow-y-auto overflow-x-hidden ${isSidebarCollapsed ? 'px-2' : 'px-4'}`}>
           
           {/* Standard User Links */}
           {!isSuperAdmin && (
             <>
-                <SidebarItem to="/" icon={LayoutDashboard} label="Dashboard" collapsed={false} />
-                <SidebarItem to="/admin/users" icon={Users} label="Membros" collapsed={false} />
-                <SidebarItem to="/admin/teams" icon={Building2} label="Times" collapsed={false} />
+              <SidebarItem to="/" icon={LayoutDashboard} label="Dashboard" collapsed={isSidebarCollapsed} />
+              {currentUser.role !== 'agent' && (
+                <>
+                  <SidebarItem to="/admin/users" icon={Users} label="Membros" collapsed={isSidebarCollapsed} />
+                  <SidebarItem to="/admin/teams" icon={Building2} label={currentUser.role === 'manager' ? 'Meu Time' : 'Times'} collapsed={isSidebarCollapsed} />
+                  {currentUser.role !== 'manager' && (
+                    <>
+                      <SidebarItem to="/admin/funnels" icon={Layers} label="Gerenciar Funis" collapsed={isSidebarCollapsed} />
+                      <SidebarItem to="/admin/origins" icon={Target} label="Origens de Lead" collapsed={isSidebarCollapsed} />
+                    </>
+                  )}
+                </>
+              )}
             </>
           )}
 
           {/* Super Admin Links */}
           {isSuperAdmin && (
             <>
-                <div className="pt-2 pb-2 px-4 text-xs font-semibold text-zinc-400 dark:text-dark-muted uppercase tracking-wider">
+              {!isSidebarCollapsed && (
+                <div className="pt-2 pb-2 px-4 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest whitespace-nowrap">
                   Super Admin
                 </div>
-                <SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={false} />
-              </>
               )}
-          </nav>
+              <SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={isSidebarCollapsed} />
+              <SidebarItem to="/admin/users" icon={Users} label="Usuários Globais" collapsed={isSidebarCollapsed} />
+              <SidebarItem to="/super-admin/api-keys" icon={Key} label="Integrações" collapsed={isSidebarCollapsed} />
+            </>
+          )}        </nav>
 
         {/* User Profile Mini - Now Clickable to Profile */}
-          <div className="p-4 border-t border-zinc-100 dark:border-dark-border">
-            <div className="flex items-center gap-3 p-2 rounded-lg bg-zinc-50 dark:bg-dark-bg/50 border border-zinc-100 dark:border-dark-border group">
+        <div className="p-3 border-t border-zinc-100 dark:border-dark-border space-y-3 shrink-0">
+          {localStorage.getItem('ctms_super_admin_token') && (
+            <button
+              onClick={() => {
+                returnToSuperAdmin();
+              }}
+              className={`w-full flex items-center justify-center gap-2 py-2 px-3 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-xs font-bold hover:opacity-90 transition-colors ${isSidebarCollapsed ? 'px-0' : ''}`}
+              title="Retornar ao Painel Central"
+            >
+              {isSidebarCollapsed ? <LogOut size={16} /> : 'Retornar ao Painel Central'}
+            </button>
+          )}
+          <div className={`flex items-center gap-3 rounded-xl bg-zinc-50 dark:bg-dark-bg/50 border border-zinc-100 dark:border-dark-border group transition-all ${isSidebarCollapsed ? 'justify-center p-2' : 'p-2'}`}>
             <div 
               onClick={() => navigate('/profile')}
-                className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
+              className={`flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity ${isSidebarCollapsed ? 'justify-center' : ''}`}
+              title={isSidebarCollapsed ? currentUser.name : undefined}
             >
               <img 
                 src={currentUser.avatar_url 
                   ? (currentUser.avatar_url.startsWith('http') ? currentUser.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${currentUser.avatar_url}`)
                   : `https://ui-avatars.com/api/?name=${encodeURIComponent(currentUser.name)}&background=random`} 
                 alt={currentUser.name} 
-                  className="w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-dark-border" 
+                className="w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-dark-border shrink-0" 
               />
+              {!isSidebarCollapsed && (
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{currentUser.name}</p>
                   <p className="text-xs text-zinc-500 dark:text-dark-muted truncate capitalize">
@@ -150,15 +299,17 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
                       currentUser.role === 'manager' ? 'Gerente' : 'Agente'}
                   </p>
                 </div>
+              )}
             </div>
+            {!isSidebarCollapsed && (
               <button 
                 onClick={handleLogout}
-                className="text-zinc-400 hover:text-red-500 transition-colors shrink-0"
+                className="text-zinc-400 hover:text-red-500 transition-colors shrink-0 p-2"
                 title="Sair"
               >
                 <LogOut size={18} />
               </button>
-            </div>
+            )}
           </div>
         </div>
       </aside>
@@ -166,15 +317,159 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Main Content */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0 transition-colors">
-          <div className="flex items-center gap-4">
+        <header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center gap-4 sm:gap-8 z-10 sticky top-0 transition-colors">
+          <div className="flex items-center gap-4 shrink-0">
             <button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-zinc-500 hover:text-zinc-900 dark:hover:text-white">
               <Menu size={24} />
             </button>
-            <h1 className="text-xl font-bold text-zinc-800 dark:text-dark-text hidden sm:block">{getPageTitle()}</h1>
           </div>
 
-          <div className="flex items-center gap-4 sm:gap-6">
+          {/* Search Bar - Moved to left/center and made wider */}
+          <div className="hidden md:block relative flex-1 max-w-2xl">
+            <div className="flex items-center bg-zinc-100 dark:bg-dark-bg rounded-xl px-4 py-2.5 w-full border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
+              {isSearching ? <Loader2 size={18} className="text-brand-yellow animate-spin" /> : <Search size={18} className="text-zinc-400 dark:text-dark-muted" />}
+              <input 
+                type="text" 
+                placeholder={getSearchPlaceholder()} 
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onFocus={() => searchQuery.length >= 2 && setShowSearchResults(true)}
+                className="bg-transparent border-none outline-none text-sm ml-3 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted" 
+              />
+            </div>
+
+            {/* Search Results Dropdown */}
+            {showSearchResults && (
+              <div className="absolute top-full mt-2 left-0 w-full bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+                <div className="max-h-[480px] overflow-y-auto p-2">
+                  {/* Organizations Section (Super Admin only) */}
+                  {searchResults.organizations && searchResults.organizations.length > 0 && (
+                    <div className="mb-4">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Organizações</div>
+                      {searchResults.organizations.map(o => (
+                        <button
+                          key={o.id}
+                          onClick={() => {
+                            navigate(`/super-admin`);
+                            setShowSearchResults(false);
+                            setSearchQuery('');
+                          }}
+                          className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                        >
+                          <div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-brand-yellow border border-zinc-200 dark:border-dark-border">
+                            <Hexagon size={18} fill="currentColor" />
+                          </div>
+                          <div>
+                            <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{o.name}</div>
+                            <div className="text-xs text-zinc-500 dark:text-dark-muted">{o.slug} • {o.status}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Members Section */}
+                  {searchResults.members.length > 0 && (
+                    <div className="mb-4">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Membros</div>
+                      {searchResults.members.map(m => {
+                        const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
+                        const avatarSrc = m.avatar_url 
+                          ? (m.avatar_url.startsWith('http') ? m.avatar_url : `${backendUrl}${m.avatar_url}`)
+                          : `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=random`;
+
+                        return (
+                          <button
+                            key={m.id}
+                            onClick={() => {
+                              navigate(`/users/${m.slug || m.id}`);
+                              setShowSearchResults(false);
+                              setSearchQuery('');
+                            }}
+                            className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                          >
+                            <img 
+                              src={avatarSrc} 
+                              alt={m.name} 
+                              className="w-9 h-9 rounded-full border border-zinc-100 dark:border-dark-border object-cover"
+                              onError={(e) => { (e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=random`; }}
+                            />
+                            <div>
+                              <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{m.name}</div>
+                              <div className="text-xs text-zinc-500 dark:text-dark-muted">{m.email}</div>
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Teams Section */}
+                  {searchResults.teams.length > 0 && (
+                    <div className="mb-4">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Equipes</div>
+                      {searchResults.teams.map(t => (
+                        <button
+                          key={t.id}
+                          onClick={() => {
+                            navigate(`/admin/teams`);
+                            setShowSearchResults(false);
+                            setSearchQuery('');
+                          }}
+                          className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                        >
+                          <div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted border border-zinc-200 dark:border-dark-border">
+                            <Building2 size={18} />
+                          </div>
+                          <div>
+                            <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{t.name}</div>
+                            <div className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-1">{t.description || 'Sem descrição'}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Attendances Section */}
+                  {searchResults.attendances.length > 0 && (
+                    <div className="mb-2">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Atendimentos</div>
+                      {searchResults.attendances.map(a => (
+                        <button
+                          key={a.id}
+                          onClick={() => {
+                            navigate(`/attendances/${a.id}`);
+                            setShowSearchResults(false);
+                            setSearchQuery('');
+                          }}
+                          className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                        >
+                          <div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted text-[10px] font-bold border border-zinc-200 dark:border-dark-border">
+                            KPI
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{a.title}</div>
+                            <div className="text-[10px] text-zinc-500 dark:text-dark-muted flex justify-between mt-0.5">
+                              <span className="font-medium">{a.user_name}</span>
+                              <span>{new Date(a.created_at).toLocaleDateString('pt-BR')}</span>
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {searchResults.members.length === 0 && searchResults.teams.length === 0 && searchResults.attendances.length === 0 && (!searchResults.organizations || searchResults.organizations.length === 0) && (
+                    <div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
+                      Nenhum resultado encontrado para "{searchQuery}"
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-4 sm:gap-6 ml-auto shrink-0">
             {/* Dark Mode Toggle */}
             <button 
               onClick={toggleDarkMode}
@@ -184,23 +479,106 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
               {isDark ? <Sun size={20} /> : <Moon size={20} />}
             </button>
 
-            {/* Search Bar */}
-            <div className="hidden md:flex items-center bg-zinc-100 dark:bg-dark-bg rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
-              <Search size={18} className="text-zinc-400 dark:text-dark-muted" />
-              <input 
-                type="text" 
-                placeholder="Buscar..." 
-                className="bg-transparent border-none outline-none text-sm ml-2 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted" 
-              />
-            </div>
-
             {/* Notifications */}
             <div className="relative">
-              <button className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors">
-                <Bell size={20} />
+              <button
+                onClick={handleBellClick}
+                className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors"
+              >                <Bell size={20} />
+                {unreadCount > 0 && (
                   <span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-brand-yellow rounded-full border-2 border-white dark:border-dark-header"></span>
+                )}
+              </button>
+
+              {showNotifications && (
+                <div className="absolute top-full mt-2 right-0 w-80 bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+                  <div className="p-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-dark-text">Notificações</h3>
+                    <div className="flex gap-3">
+                      {unreadCount > 0 && (
+                        <button 
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            await markAllNotificationsAsRead();
+                            loadNotifications();
+                          }}
+                          className="text-xs text-brand-yellow hover:underline"
+                        >
+                          Marcar lidas
+                        </button>
+                      )}
+                      {notifications.length > 0 && (
+                        <button 
+                          onClick={async (e) => {
+                            e.stopPropagation();
+                            await clearAllNotifications();
+                            loadNotifications();
+                          }}
+                          className="text-xs text-zinc-400 hover:text-red-500 hover:underline transition-colors"
+                        >
+                          Limpar tudo
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                  <div className="max-h-96 overflow-y-auto">
+                    {notifications.length > 0 ? (
+                      notifications.map(n => (
+                        <div
+                          key={n.id}
+                          className={`w-full relative group p-4 text-left hover:bg-zinc-50 dark:hover:bg-dark-border transition-colors border-b border-zinc-50 dark:border-dark-border/50 last:border-0 ${!n.is_read ? 'bg-brand-yellow/5 dark:bg-brand-yellow/5' : ''}`}
+                        >
+                          <div 
+                            className="cursor-pointer pr-6" 
+                            onClick={async () => {
+                              if (!n.is_read) await markNotificationAsRead(n.id);
+                              if (n.link) navigate(n.link);
+                              setShowNotifications(false);
+                              loadNotifications();
+                            }}
+                          >
+                            <div className="flex justify-between items-start mb-1">
+                              <span className={`text-xs font-bold uppercase tracking-wider ${
+                                n.type === 'success' ? 'text-green-500' : 
+                                n.type === 'warning' ? 'text-orange-500' : 
+                                n.type === 'error' ? 'text-red-500' : 'text-blue-500'
+                              }`}>
+                                {n.type === 'success' ? 'SUCESSO' : n.type === 'warning' ? 'AVISO' : n.type === 'error' ? 'ERRO' : 'INFO'}
+                              </span>
+                              <span className="text-[10px] text-zinc-400 dark:text-dark-muted">
+                                {new Date(n.created_at).toLocaleDateString('pt-BR')}
+                              </span>
+                            </div>
+                            <div className="text-sm font-bold text-zinc-900 dark:text-dark-text mb-0.5">{n.title}</div>
+                            <p className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-2">{n.message}</p>
+                          </div>
+                          
+                          {/* Delete Button */}
+                          <button
+                            onClick={async (e) => {
+                              e.stopPropagation();
+                              await deleteNotification(n.id);
+                              loadNotifications();
+                            }}
+                            className="absolute top-4 right-4 p-1 text-zinc-300 hover:text-red-500 transition-all rounded-md hover:bg-red-50 dark:hover:bg-red-900/30"
+                            title="Remover notificação"
+                          >
+                            <X size={14} />
                           </button>
                         </div>
+                      ))
+                    ) : (
+                      <div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
+                        Nenhuma notificação por enquanto.
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Close notifications when clicking outside */}
+            {showNotifications && <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />}
           </div>
         </header>
 
@@ -217,6 +595,13 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
+
+      {/* Hidden Audio Player for Notifications */}
+      <audio 
+        ref={audioRef} 
+        src={notificationSound} 
+        preload="auto" 
+      />
     </div>
   );
 };

components/SellersTable.tsx

@@ -106,7 +106,7 @@ export const SellersTable: React.FC<SellersTableProps> = ({ data }) => {
               <tr 
                 key={item.user.id} 
                 className="hover:bg-yellow-50/10 dark:hover:bg-yellow-400/5 transition-colors cursor-pointer group"
-                onClick={() => navigate(`/users/${item.user.id}`)}
+                onClick={() => navigate(`/users/${item.user.slug || item.user.id}`)}
               >
                 <td className="px-6 py-4">
                   <div className="flex items-center gap-3">

constants.ts

@@ -1,164 +1,5 @@
 
-import { Attendance, FunnelStage, Tenant, User } from './types';
-
-export const TENANTS: Tenant[] = [
-  { 
-    id: 'tenant_123', 
-    name: 'Fasto Corp', 
-    slug: 'fasto', 
-    admin_email: 'admin@fasto.com', 
-    status: 'active', 
-    user_count: 12, 
-    attendance_count: 1450, 
-    created_at: '2023-01-15T10:00:00Z' 
-  },
-  { 
-    id: 'tenant_456', 
-    name: 'Acme Inc', 
-    slug: 'acme-inc', 
-    admin_email: 'contact@acme.com', 
-    status: 'trial', 
-    user_count: 5, 
-    attendance_count: 320, 
-    created_at: '2023-06-20T14:30:00Z' 
-  },
-  { 
-    id: 'tenant_789', 
-    name: 'Globex Utils', 
-    slug: 'globex', 
-    admin_email: 'sysadmin@globex.com', 
-    status: 'inactive', 
-    user_count: 2, 
-    attendance_count: 45, 
-    created_at: '2022-11-05T09:15:00Z' 
-  },
-  { 
-    id: 'tenant_101', 
-    name: 'Soylent Green', 
-    slug: 'soylent', 
-    admin_email: 'admin@soylent.com', 
-    status: 'active', 
-    user_count: 25, 
-    attendance_count: 5600, 
-    created_at: '2023-02-10T11:20:00Z' 
-  },
-];
-
-export const USERS: User[] = [
-  { 
-    id: 'sa1', 
-    tenant_id: 'system', 
-    name: 'Super Administrator', 
-    email: 'root@system.com', 
-    role: 'super_admin', 
-    team_id: '', 
-    avatar_url: 'https://ui-avatars.com/api/?name=Super+Admin&background=0f172a&color=fff',
-    bio: 'Administrador do Sistema Global',
-    status: 'active'
-  },
-  { 
-    id: 'u1', 
-    tenant_id: 'tenant_123', 
-    name: 'Lidya Chan', 
-    email: 'lidya@fasto.com', 
-    role: 'manager', 
-    team_id: 'sales_1', 
-    avatar_url: 'https://picsum.photos/id/1011/200/200',
-    bio: 'Gerente de Vendas com mais de 10 anos de experiência em SaaS. Apaixonada por construção de equipes e crescimento de receita.',
-    status: 'active'
-  },
-  { 
-    id: 'u2', 
-    tenant_id: 'tenant_123', 
-    name: 'Alex Noer', 
-    email: 'alex@fasto.com', 
-    role: 'agent', 
-    team_id: 'sales_1', 
-    avatar_url: 'https://picsum.photos/id/1012/200/200',
-    bio: 'Melhor desempenho no Q3. Focado em clientes corporativos e relacionamentos de longo prazo.',
-    status: 'active'
-  },
-  { 
-    id: 'u3', 
-    tenant_id: 'tenant_123', 
-    name: 'Angela Moss', 
-    email: 'angela@fasto.com', 
-    role: 'agent', 
-    team_id: 'sales_1', 
-    avatar_url: 'https://picsum.photos/id/1013/200/200',
-    status: 'inactive'
-  },
-  { 
-    id: 'u4', 
-    tenant_id: 'tenant_123', 
-    name: 'Brian Samuel', 
-    email: 'brian@fasto.com', 
-    role: 'agent', 
-    team_id: 'sales_2', 
-    avatar_url: 'https://picsum.photos/id/1014/200/200',
-    status: 'active'
-  },
-  { 
-    id: 'u5', 
-    tenant_id: 'tenant_123', 
-    name: 'Benny Chagur', 
-    email: 'benny@fasto.com', 
-    role: 'agent', 
-    team_id: 'sales_2', 
-    avatar_url: 'https://picsum.photos/id/1025/200/200',
-    status: 'active'
-  },
-];
-
-const generateMockAttendances = (count: number): Attendance[] => {
-  const origins = ['WhatsApp', 'Instagram', 'Website', 'LinkedIn', 'Indicação'] as const;
-  const stages = Object.values(FunnelStage);
-  const products = ['Plano Premium', 'Plano Básico', 'Suíte Enterprise', 'Consultoria'];
-  
-  return Array.from({ length: count }).map((_, i) => {
-    const user = USERS.slice(1)[Math.floor(Math.random() * (USERS.length - 1))]; // Skip super admin
-    const rand = Math.random();
-    // Weighted stages for realism
-    let stage = FunnelStage.IDENTIFICATION;
-    let isConverted = false;
-
-    if (rand > 0.85) {
-      stage = FunnelStage.WON;
-      isConverted = true;
-    } else if (rand > 0.7) {
-      stage = FunnelStage.LOST;
-    } else if (rand > 0.5) {
-      stage = FunnelStage.NEGOTIATION;
-    } else if (rand > 0.2) {
-      stage = FunnelStage.IDENTIFICATION;
-    } else {
-      stage = FunnelStage.NO_CONTACT;
-    }
-
-    // Force won/lost logic consistency
-    if (stage === FunnelStage.WON) isConverted = true;
-    
-    return {
-      id: `att_${i}`,
-      tenant_id: 'tenant_123',
-      user_id: user.id,
-      created_at: new Date(Date.now() - Math.floor(Math.random() * 60 * 24 * 60 * 60 * 1000)).toISOString(),
-      summary: "Cliente perguntou sobre detalhes do produto e níveis de preços.",
-      attention_points: Math.random() > 0.8 ? ["Resposta demorada", "Verificar tom de voz"] : [],
-      improvement_points: ["Sugerir plano anual", "Fazer follow-up mais cedo"],
-      score: Math.floor(Math.random() * (100 - 50) + 50),
-      first_response_time_min: Math.floor(Math.random() * 120),
-      handling_time_min: Math.floor(Math.random() * 45),
-      funnel_stage: stage,
-      origin: origins[Math.floor(Math.random() * origins.length)],
-      product_requested: products[Math.floor(Math.random() * products.length)],
-      product_sold: isConverted ? products[Math.floor(Math.random() * products.length)] : undefined,
-      converted: isConverted,
-    };
-  });
-};
-
-export const MOCK_ATTENDANCES = generateMockAttendances(300);
+import { FunnelStage } from './types';
 
 // Visual Constants
 export const COLORS = {

debug.txt

@@ -0,0 +1,27 @@
+Look at `playNotificationSound`:
+```javascript
+  const playNotificationSound = () => {
+    if (currentUser?.sound_enabled !== false && audioRef.current) {
+      // Reset time to 0 to allow rapid replays
+      audioRef.current.currentTime = 0;
+      const playPromise = audioRef.current.play();
+```
+Is `currentUser` loaded when `loadNotifications` fires for the first time after `isInitialLoadRef` is false?
+Yes, `useEffect` calls `fetchCurrentUser()`, which sets `currentUser`.
+
+Wait. `setInterval` uses a closure over the state!
+```javascript
+  useEffect(() => {
+    fetchCurrentUser();
+    loadNotifications();
+    const interval = setInterval(loadNotifications, 10000);
+    return () => clearInterval(interval);
+  }, [navigate]);
+```
+Oh my god. The `setInterval` callback `loadNotifications` captures the *initial* state variables, including `currentUser`, which is `null` on the first render!
+If `currentUser` is `null` inside the closure, `currentUser?.sound_enabled !== false` evaluates to `true !== false` which is `true`. So that's not blocking it.
+BUT `audioRef.current` might not have been rendered yet? No, `audioRef` is a ref, so it mutates in place. The closure always sees the latest `audioRef.current`.
+
+So why does it fail or not play? 
+Is the browser policy blocking it silently without logging?
+Let's add a robust, standalone Audio approach that doesn't rely on the DOM tag if it fails, or maybe just force a click handler to "unlock" the audio context.

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.

docker-compose.local.yml

@@ -2,6 +2,7 @@ services:
   app:
     build: .
     container_name: fasto-app-local
+    restart: unless-stopped
     ports:
       - "3001:3001"
     environment:
@@ -27,6 +28,7 @@ services:
   db:
     image: mysql:8.0
     container_name: fasto-db-local
+    restart: unless-stopped
     environment:
       MYSQL_ROOT_PASSWORD: ${DB_PASSWORD:-root_password}
       MYSQL_DATABASE: ${DB_NAME:-agenciac_comia}

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.8'
+version: "3.8"
 
 services:
   app:
@@ -10,6 +10,13 @@ services:
       - DB_USER=${DB_USER:-root}
       - DB_PASSWORD=${DB_PASSWORD:-root_password}
       - DB_NAME=${DB_NAME:-agenciac_comia}
+      - SMTP_HOST=${SMTP_HOST}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_USER=${SMTP_USER}
+      - SMTP_PASS=${SMTP_PASS}
+      - MAIL_FROM=${MAIL_FROM}
+      - APP_URL=${APP_URL}
+      - JWT_SECRET=${JWT_SECRET}
     ports:
       - "3001:3001"
     deploy:
@@ -36,12 +43,31 @@ services:
     networks:
       - fasto-net
 
+  backup-mysql:
+    image: fradelg/mysql-cron-backup
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
+    environment:
+      MYSQL_HOST: db
+      MYSQL_USER: root
+      MYSQL_PASS: ${DB_PASSWORD:-root_password}
+      CRON_TIME: "55 2 * * *" # Roda todo dia exatamente às 02:55 da manhã
+      MAX_BACKUPS: 3 # Mantém apenas os 3 últimos dias
+      INIT_BACKUP: "1" # Faz um backup imediatamente ao ligar o container
+    volumes:
+      - /opt/backups_db/fasto:/backup
+    networks:
+      - fasto-net
+
 volumes:
   db_data:
 
 configs:
   init_sql:
     file: ./agenciac_comia.sql
+    name: init_sql_v2
 
 networks:
   fasto-net:

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/ApiKeys.tsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import { Key, Loader2, Plus, Trash2, Copy, CheckCircle2, Building2 } from 'lucide-react';
+import { getApiKeys, createApiKey, deleteApiKey, getTenants } from '../services/dataService';
+import { Tenant } from '../types';
+
+export const ApiKeys: React.FC = () => {
+  const [tenants, setTenants] = useState<Tenant[]>([]);
+  const [selectedTenantId, setSelectedTenantId] = useState<string>('');
+  const [apiKeys, setApiKeys] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  
+  const [newKeyName, setNewKeyName] = useState('');
+  const [isGeneratingKey, setIsGeneratingKey] = useState(false);
+  const [generatedKey, setGeneratedKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      try {
+        const fetchedTenants = await getTenants();
+        setTenants(fetchedTenants);
+        if (fetchedTenants.length > 0) {
+          const defaultTenant = fetchedTenants.find(t => t.id !== 'system') || fetchedTenants[0];
+          setSelectedTenantId(defaultTenant.id);
+        }
+      } catch (err) {
+        console.error("Failed to load tenants", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchInitialData();
+  }, []);
+
+  useEffect(() => {
+    if (selectedTenantId) {
+      loadApiKeys(selectedTenantId);
+      setGeneratedKey(null);
+    }
+  }, [selectedTenantId]);
+
+  const loadApiKeys = async (tenantId: string) => {
+    setLoading(true);
+    try {
+      const keys = await getApiKeys(tenantId);
+      setApiKeys(keys);
+    } catch (e) {
+      console.error("Failed to load API keys", e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGenerateApiKey = async () => {
+    if (!newKeyName.trim() || !selectedTenantId) return;
+    setIsGeneratingKey(true);
+    try {
+      const res = await createApiKey({ name: newKeyName, tenantId: selectedTenantId });
+      setGeneratedKey(res.secret_key);
+      setNewKeyName('');
+      loadApiKeys(selectedTenantId);
+    } catch (err: any) {
+      alert(err.message || 'Erro ao gerar chave.');
+    } finally {
+      setIsGeneratingKey(false);
+    }
+  };
+
+  const handleRevokeApiKey = async (id: string) => {
+    if (!selectedTenantId) return;
+    if (confirm('Tem certeza? Todas as integrações usando esta chave pararão de funcionar imediatamente.')) {
+      const success = await deleteApiKey(id);
+      if (success) {
+        loadApiKeys(selectedTenantId);
+      }
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    alert('Chave copiada para a área de transferência!');
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Integrações via API</h1>
+          <p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie chaves de API para permitir que sistemas externos como o n8n se conectem a organizações específicas.</p>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden p-6 md:p-8">
+        <div className="flex flex-col md:flex-row gap-6 mb-8">
+          <div className="flex-1">
+            <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase tracking-wider mb-2 block">Selecione a Organização</label>
+            <div className="relative">
+              <select
+                value={selectedTenantId}
+                onChange={(e) => setSelectedTenantId(e.target.value)}
+                className="w-full appearance-none bg-zinc-50 dark:bg-dark-input border border-zinc-200 dark:border-dark-border px-4 py-3 pr-10 rounded-xl text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all cursor-pointer font-medium"
+              >
+                {tenants.filter(t => t.id !== 'system').map(t => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-zinc-500">
+                <Building2 size={16} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {generatedKey && (
+          <div className="mb-8 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl animate-in fade-in zoom-in duration-200">
+            <h4 className="font-bold text-green-800 dark:text-green-300 flex items-center gap-2 mb-2">
+              <CheckCircle2 size={18} /> Chave Gerada com Sucesso!
+            </h4>
+            <p className="text-sm text-green-700 dark:text-green-400 mb-3">
+              Copie esta chave agora. Por motivos de segurança, ela <strong>não</strong> será exibida novamente.
+            </p>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 bg-white dark:bg-zinc-950 p-3 rounded-lg text-sm font-mono text-zinc-800 dark:text-zinc-200 border border-green-200 dark:border-green-800 break-all shadow-inner">
+                {generatedKey}
+              </code>
+              <button onClick={() => copyToClipboard(generatedKey)} className="p-3 bg-white dark:bg-zinc-950 border border-green-200 dark:border-green-800 rounded-lg hover:bg-green-100 dark:hover:bg-zinc-800 text-green-700 dark:text-green-400 transition-colors shadow-sm" title="Copiar">
+                <Copy size={18} />
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-3 mb-8">
+          <input
+            type="text"
+            placeholder="Nome da integração (ex: Webhook n8n - WhatsApp)"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            className="flex-1 p-3 border border-zinc-200 dark:border-dark-border rounded-xl bg-zinc-50 dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
+          />
+          <button
+            onClick={handleGenerateApiKey}
+            disabled={isGeneratingKey || !newKeyName.trim() || !selectedTenantId}
+            className="px-6 py-3 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-xl font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity disabled:opacity-50 shrink-0 shadow-sm"
+          >
+            {isGeneratingKey ? <Loader2 className="animate-spin" size={18} /> : <Plus size={18} />}
+            Gerar Nova Chave
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="flex justify-center p-8"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>
+        ) : apiKeys.length > 0 ? (
+          <div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-dark-border">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-zinc-50/80 dark:bg-dark-bg/80 border-b border-zinc-200 dark:border-dark-border">
+                  <th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Nome da Integração</th>
+                  <th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Chave (Mascarada)</th>
+                  <th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Último Uso</th>
+                  <th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider text-right">Ações</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-100 dark:divide-dark-border/50 bg-white dark:bg-dark-card">
+                {apiKeys.map(key => (
+                  <tr key={key.id} className="hover:bg-zinc-50 dark:hover:bg-dark-input/50 transition-colors">
+                    <td className="py-3 px-4 text-sm font-medium text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
+                      <Key size={14} className="text-brand-yellow" />
+                      {key.name}
+                    </td>
+                    <td className="py-3 px-4 text-sm font-mono text-zinc-500 dark:text-zinc-400">{key.masked_key}</td>
+                    <td className="py-3 px-4 text-xs text-zinc-500 dark:text-zinc-400">
+                      {key.last_used_at ? new Date(key.last_used_at).toLocaleString('pt-BR') : 'Nunca'}
+                    </td>
+                    <td className="py-3 px-4 text-right">
+                      <button 
+                        onClick={() => handleRevokeApiKey(key.id)}
+                        className="p-2 text-zinc-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors inline-flex"
+                        title="Revogar Chave"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="text-center p-12 border-2 border-dashed border-zinc-200 dark:border-dark-border rounded-xl text-zinc-500 dark:text-zinc-400 bg-zinc-50/30 dark:bg-dark-bg/30">
+            <Key size={32} className="mx-auto mb-3 opacity-20" />
+            <p className="font-medium text-zinc-600 dark:text-zinc-300">Nenhuma chave de API gerada</p>
+            <p className="text-xs mt-1">Crie uma nova chave para conectar sistemas externos a esta organização.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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';
@@ -79,7 +98,7 @@ export const AttendanceDetail: React.FC = () => {
               </span>
             </div>
             <h1 className="text-2xl md:text-3xl font-bold text-zinc-900 dark:text-dark-text leading-tight">
-              {data.summary}
+              {data.title}
             </h1>
             {agent && (
               <div className="flex items-center gap-3 pt-2">
@@ -117,11 +136,17 @@ export const AttendanceDetail: React.FC = () => {
               <MessageSquare size={18} className="text-zinc-400 dark:text-dark-muted" />
               Resumo da Interação
             </h3>
-            <p className="text-zinc-600 dark:text-zinc-300 leading-relaxed text-sm">
-              {data.summary} O cliente perguntou sobre detalhes específicos relacionados ao <span className="font-medium text-zinc-800 dark:text-zinc-100">{data.product_requested}</span>. 
+            <div className="text-zinc-600 dark:text-zinc-300 leading-relaxed text-sm whitespace-pre-wrap">
+              {data.full_summary ? (
+                data.full_summary
+              ) : (
+                <>
+                  {data.title} O cliente perguntou sobre detalhes específicos relacionados ao <span className="font-medium text-zinc-800 dark:text-zinc-100">{data.product_requested}</span>. 
                   As discussões envolveram níveis de preços, prazos de implementação e potenciais descontos por volume. 
                   A interação foi concluída com {data.converted ? 'uma venda realizada' : 'o cliente pedindo mais tempo para decidir'}.
-            </p>
+                </>
+              )}
+            </div>
           </div>
 
           {/* Feedback Section */}

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, getOrigins } from '../services/dataService';
 import { COLORS } from '../constants';
-import { Attendance, DashboardFilter, FunnelStage, User } from '../types';
+import { Attendance, DashboardFilter, FunnelStage, User, FunnelStageDef, OriginItemDef } from '../types';
 import { KPICard } from '../components/KPICard';
 import { DateRangePicker } from '../components/DateRangePicker';
 import { SellersTable } from '../components/SellersTable';
@@ -25,8 +25,11 @@ interface SellerStats {
 export const Dashboard: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState<Attendance[]>([]);
+  const [prevData, setPrevData] = useState<Attendance[]>([]);
   const [users, setUsers] = useState<User[]>([]);
   const [teams, setTeams] = useState<any[]>([]);
+  const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
+  const [originDefs, setOriginDefs] = useState<OriginItemDef[]>([]);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   
   const [filters, setFilters] = useState<DashboardFilter>({
@@ -48,18 +51,48 @@ export const Dashboard: React.FC = () => {
         const storedUserId = localStorage.getItem('ctms_user_id');
         if (!tenantId) return;
 
-        // Fetch users, attendances, teams and current user in parallel
-        const [fetchedUsers, fetchedData, fetchedTeams, me] = await Promise.all([
+        // Calculate previous date range for accurate period-over-period trend
+        const duration = filters.dateRange.end.getTime() - filters.dateRange.start.getTime();
+        const prevStart = new Date(filters.dateRange.start.getTime() - duration);
+        const prevEnd = new Date(filters.dateRange.start.getTime());
+        const prevFilters = { ...filters, dateRange: { start: prevStart, end: prevEnd } };
+
+        // Fetch users, attendances, teams, funnels and current user in parallel
+        const [fetchedUsers, fetchedData, prevFetchedData, fetchedTeams, fetchedFunnels, fetchedOrigins, me] = await Promise.all([
           getUsers(tenantId),
           getAttendances(tenantId, filters),
+          getAttendances(tenantId, prevFilters),
           getTeams(tenantId),
+          getFunnels(tenantId),
+          getOrigins(tenantId),
           storedUserId ? getUserById(storedUserId) : null
         ]);
         
         setUsers(fetchedUsers);
         setData(fetchedData);
+        setPrevData(prevFetchedData);
         setTeams(fetchedTeams);
+        setOriginDefs(fetchedOrigins);
         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) : []);
+
+        // Determine which origins to display
+        let activeOriginGroup = fetchedOrigins[0];
+        if (targetTeamId) {
+          const matchedOrigin = fetchedOrigins.find(o => o.teamIds?.includes(targetTeamId));
+          if (matchedOrigin) activeOriginGroup = matchedOrigin;
+        }
+        setOriginDefs(activeOriginGroup && activeOriginGroup.items ? activeOriginGroup.items : []);
+
       } catch (error) {
         console.error("Error loading dashboard data:", error);
       } finally {
@@ -75,8 +108,64 @@ export const Dashboard: React.FC = () => {
   const avgResponseTime = data.length > 0 ? (data.reduce((acc, curr) => acc + curr.first_response_time_min, 0) / data.length).toFixed(0) : "0";
   const avgHandleTime = data.length > 0 ? (data.reduce((acc, curr) => acc + curr.handling_time_min, 0) / data.length).toFixed(0) : "0";
 
+  // --- Dynamic Trends Calculation ---
+  const trends = useMemo(() => {
+    if (data.length === 0 && prevData.length === 0) {
+      return { leads: null, score: null, resp: null };
+    }
+    
+    const calcAvg = (arr: Attendance[], key: keyof Attendance) => 
+      arr.length ? arr.reduce((acc, curr) => acc + (curr[key] as number), 0) / arr.length : 0;
+
+    // Leads Trend (%)
+    const recentLeads = data.length;
+    const prevLeads = prevData.length;
+    let leadsTrend = 0;
+    if (prevLeads > 0) {
+      leadsTrend = ((recentLeads - prevLeads) / prevLeads) * 100;
+    } else if (recentLeads > 0) {
+      leadsTrend = 100;
+    }
+
+    // Score Trend (Absolute point difference)
+    const recentScore = calcAvg(data, 'score');
+    const prevScore = calcAvg(prevData, 'score');
+    let scoreTrend = 0;
+    if (prevData.length > 0) {
+      scoreTrend = recentScore - prevScore;
+    } else {
+      scoreTrend = recentScore;
+    }
+
+    // Response Time Trend (%)
+    const recentResp = calcAvg(data, 'first_response_time_min');
+    const prevResp = calcAvg(prevData, 'first_response_time_min');
+    let respTrend = 0;
+    if (prevResp > 0) {
+      respTrend = ((recentResp - prevResp) / prevResp) * 100;
+    } else if (recentResp > 0) {
+      respTrend = 100; // Time increased from 0, which is worse
+    }
+
+    return { leads: leadsTrend, score: scoreTrend, resp: respTrend };
+  }, [data, prevData]);
+  
   // --- 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, 
@@ -84,30 +173,65 @@ 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]);
+
+  const tailwindToHex: Record<string, string> = {
+    'zinc': '#71717a',
+    'blue': '#3b82f6',
+    'purple': '#a855f7',
+    'green': '#22c55e',
+    'red': '#ef4444',
+    'pink': '#ec4899',
+    'orange': '#f97316',
+    'yellow': '#eab308'
+  };
 
   // --- Chart Data: Origin ---
   const originData = useMemo(() => {
-    const origins = data.reduce((acc, curr) => {
+    const counts = data.reduce((acc, curr) => {
       acc[curr.origin] = (acc[curr.origin] || 0) + 1;
       return acc;
     }, {} as Record<string, number>);
 
-    // Ensure type safety for value in sort
-    return (Object.entries(origins) as [string, number][])
-      .map(([name, value]) => ({ name, value }))
-      .sort((a, b) => b.value - a.value);
-  }, [data]);
+    if (originDefs.length > 0) {
+      const activeOrigins = originDefs.map(def => {
+        let hexColor = '#71717a'; // Default zinc
+        if (def.color_class) {
+           const match = def.color_class.match(/bg-([a-z]+)-\d+/);
+           if (match && tailwindToHex[match[1]]) {
+             hexColor = tailwindToHex[match[1]];
+           }
+        }
+        return {
+          name: def.name,
+          value: counts[def.name] || 0,
+          hexColor
+        };
+      });
+
+      // Calculate "Outros" for data that doesn't match current active origins
+      const activeNames = new Set(originDefs.map(d => d.name));
+      const othersValue = (Object.entries(counts) as [string, number][])
+        .filter(([name]) => !activeNames.has(name))
+        .reduce((sum, [_, val]) => sum + val, 0);
+
+      if (othersValue > 0) {
+        activeOrigins.push({
+          name: 'Outros',
+          value: othersValue,
+          hexColor: '#94a3b8' // Gray-400
+        });
+      }
+
+      return activeOrigins.sort((a, b) => b.value - a.value);
+    }
+
+    return []; // No definitions = No chart (matches funnel behavior)
+  }, [data, originDefs]);
 
   // --- Table Data: Sellers Ranking ---
   const sellersRanking = useMemo(() => {
@@ -202,6 +326,7 @@ export const Dashboard: React.FC = () => {
                   {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                 </select>
 
+                {currentUser?.role !== 'manager' && (
                   <select 
                     className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
                     value={filters.teamId}
@@ -210,6 +335,7 @@ export const Dashboard: React.FC = () => {
                     <option value="all">Todas Equipes</option>
                     {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                   </select>
+                )}
               </>
             )}
 
@@ -219,24 +345,24 @@ 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}
               onChange={(e) => handleFilterChange('origin', e.target.value)}
             >
               <option value="all">Todas Origens</option>
-              <option value="WhatsApp">WhatsApp</option>
-              <option value="Instagram">Instagram</option>
-              <option value="Website">Website</option>
-              <option value="LinkedIn">LinkedIn</option>
-              <option value="Indicação">Indicação</option>
-            </select>
-          </div>
+              {originDefs.length > 0 ? originDefs.map(o => (
+                <option key={o.id} value={o.name}>{o.name}</option>
+              )) : ['WhatsApp', 'Instagram', 'Website', 'LinkedIn', 'Indicação'].map(o => (
+                <option key={o} value={o}>{o}</option>
+              ))}
+            </select>          </div>
         </div>
       </div>
 
@@ -245,25 +371,25 @@ export const Dashboard: React.FC = () => {
         <KPICard 
           title="Total de Leads" 
           value={totalLeads} 
-          trend="up" 
-          trendValue="12%" 
+          trend={trends.leads > 0 ? 'up' : trends.leads < 0 ? 'down' : 'neutral'}
+          trendValue={`${Math.abs(trends.leads).toFixed(1)}%`}
           icon={Users} 
-          colorClass="text-yellow-600"
+          colorClass="text-brand-yellow"
         />
         <KPICard 
           title="Nota Média Qualidade" 
           value={avgScore} 
           subValue="/ 100"
-          trend={Number(avgScore) > 75 ? 'up' : 'down'}
-          trendValue="2.1"
+          trend={trends.score > 0 ? 'up' : trends.score < 0 ? 'down' : 'neutral'}
+          trendValue={Math.abs(trends.score).toFixed(1)}
           icon={TrendingUp} 
-          colorClass="text-zinc-600"
+          colorClass="text-zinc-500"
         />
         <KPICard 
           title="Média 1ª Resposta" 
           value={`${avgResponseTime}m`} 
-          trend="down"
-          trendValue="bom" 
+          trend={trends.resp < 0 ? 'up' : trends.resp > 0 ? 'down' : 'neutral'} // Faster response is better (up)
+          trendValue={`${Math.abs(trends.resp).toFixed(1)}%`}
           icon={Clock} 
           colorClass="text-orange-500"
         />
@@ -344,10 +470,9 @@ export const Dashboard: React.FC = () => {
                   {originData.map((entry, index) => (
                     <Cell
                       key={`cell-${index}`}
-                      fill={COLORS.origins[entry.name as keyof typeof COLORS.origins] || COLORS.charts[index % COLORS.charts.length]} 
+                      fill={entry.hexColor || COLORS.charts[index % COLORS.charts.length]}
                     />
-                  ))}
-                </Pie>
+                  ))}                </Pie>
                 <Tooltip 
                   formatter={(value: any) => [value, 'Leads']}
                   contentStyle={{ 

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">Gerenciar 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/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { Hexagon, Lock, Mail, ArrowRight, Loader2, Eye, EyeOff, AlertCircle } from 'lucide-react';
 import { login, logout } from '../services/dataService';
@@ -12,6 +12,16 @@ export const Login: React.FC = () => {
   const [error, setError] = useState('');
   const [emailError, setEmailError] = useState('');
 
+  // Auto-redirect if already logged in
+  useEffect(() => {
+    const token = localStorage.getItem('ctms_token');
+    const userId = localStorage.getItem('ctms_user_id');
+    if (token && userId && token !== 'undefined' && token !== 'null') {
+      // Opt to send them to root, AuthGuard will handle role-based routing
+      navigate('/');
+    }
+  }, [navigate]);
+
   const validateEmail = (val: string) => {
     setEmail(val);
     if (!val) {
@@ -58,12 +68,6 @@ export const Login: React.FC = () => {
         <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
           Acesse sua conta
         </h2>
-        <p className="mt-2 text-center text-sm text-zinc-600 dark:text-dark-muted">
-          Ou{' '}
-          <Link to="/register" className="font-medium text-brand-yellow hover:text-yellow-600">
-            registre sua nova organização
-          </Link>
-        </p>
       </div>
 
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

pages/Origins.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from 'react';
+import { Target, Plus, Edit, Trash2, Loader2, X, Users } from 'lucide-react';
+import { getOrigins, createOriginGroup, updateOriginGroup, deleteOriginGroup, createOriginItem, updateOriginItem, deleteOriginItem, getTeams } from '../services/dataService';
+import { OriginGroupDef, OriginItemDef } from '../types';
+
+export const Origins: React.FC = () => {
+  const [originGroups, setOriginGroups] = useState<OriginGroupDef[]>([]);
+  const [teams, setTeams] = useState<any[]>([]);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<OriginItemDef | null>(null);
+  const [formData, setFormData] = useState({ name: '', color_class: '' });
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Group creation state
+  const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
+  const [groupName, setGroupName] = useState('');
+
+  const tenantId = localStorage.getItem('ctms_tenant_id') || '';
+
+  const PRESET_COLORS = [
+    { label: 'Cinza', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
+    { label: 'Azul', 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', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
+    { label: 'Verde', 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', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
+    { label: 'Rosa', value: 'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-400 dark:border-pink-800' },
+  ];
+
+  const loadData = async () => {
+    setLoading(true);
+    const [fetchedGroups, fetchedTeams] = await Promise.all([
+      getOrigins(tenantId),
+      getTeams(tenantId)
+    ]);
+    setOriginGroups(fetchedGroups);
+    setTeams(fetchedTeams);
+    if (!selectedGroupId && fetchedGroups.length > 0) {
+      setSelectedGroupId(fetchedGroups[0].id);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [tenantId]);
+
+  const selectedGroup = originGroups.find(g => g.id === selectedGroupId);
+
+  // --- Group Handlers ---
+  const handleCreateGroup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      const res = await createOriginGroup({ name: groupName, tenantId });
+      setSelectedGroupId(res.id);
+      setIsGroupModalOpen(false);
+      setGroupName('');
+      loadData();
+    } catch (err) {
+      alert("Erro ao criar grupo de origens.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDeleteGroup = async (id: string) => {
+    if (originGroups.length <= 1) {
+      alert("Você precisa ter pelo menos um grupo de origens ativo.");
+      return;
+    }
+    if (confirm('Tem certeza que deseja excluir este grupo e todas as suas origens?')) {
+      await deleteOriginGroup(id);
+      setSelectedGroupId(null);
+      loadData();
+    }
+  };
+
+  const handleToggleTeam = async (teamId: string) => {
+    if (!selectedGroup) return;
+    const currentTeamIds = selectedGroup.teamIds || [];
+    const newTeamIds = currentTeamIds.includes(teamId) 
+      ? currentTeamIds.filter(id => id !== teamId)
+      : [...currentTeamIds, teamId];
+    
+    // Optimistic
+    const newGroups = [...originGroups];
+    const idx = newGroups.findIndex(g => g.id === selectedGroup.id);
+    newGroups[idx].teamIds = newTeamIds;
+    setOriginGroups(newGroups);
+
+    await updateOriginGroup(selectedGroup.id, { teamIds: newTeamIds });
+  };
+
+  // --- Item Handlers ---
+  const handleSaveItem = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedGroup) return;
+    setIsSaving(true);
+    try {
+      if (editingItem) {
+        await updateOriginItem(editingItem.id, formData);
+      } else {
+        await createOriginItem(selectedGroup.id, formData);
+      }
+      setIsModalOpen(false);
+      loadData();
+    } catch (err: any) {
+      alert(err.message || "Erro ao salvar origem.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDeleteItem = async (id: string) => {
+    if (confirm('Tem certeza que deseja excluir esta origem?')) {
+      await deleteOriginItem(id);
+      loadData();
+    }
+  };
+
+  const openItemModal = (item?: OriginItemDef) => {
+    if (item) {
+      setEditingItem(item);
+      setFormData({ name: item.name, color_class: item.color_class || PRESET_COLORS[0].value });
+    } else {
+      setEditingItem(null);
+      setFormData({ name: '', color_class: PRESET_COLORS[0].value });
+    }
+    setIsModalOpen(true);
+  };
+
+  if (loading && originGroups.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: Groups 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">Configurações</h2>
+          <button onClick={() => setIsGroupModalOpen(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">
+          {originGroups.map(g => (
+            <button 
+              key={g.id}
+              onClick={() => setSelectedGroupId(g.id)}
+              className={`text-left px-4 py-3 rounded-xl text-sm font-medium transition-all ${selectedGroupId === g.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 className="truncate pr-2">{g.name}</span>
+                <span className={`text-[10px] px-1.5 py-0.5 rounded-full shrink-0 ${selectedGroupId === g.id ? 'bg-white/20 dark:bg-black/20' : 'bg-zinc-100 dark:bg-dark-bg'}`}>{g.items?.length || 0}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Content: Selected Group Details */}
+      <div className="flex-1 space-y-6">
+        {selectedGroup ? (
+          <>
+            <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">{selectedGroup.name}</h1>
+                <p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie as origens deste grupo e quais times as utilizam.</p>
+              </div>
+              <button onClick={() => handleDeleteGroup(selectedGroup.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 Grupo
+              </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 = selectedGroup.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 grupo específico usarão o grupo padrão.</p>
+              </div>
+            </div>
+
+            {/* Origin Items */}
+            <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">
+                  <Target className="text-brand-yellow" size={18} /> Fontes de Tráfego
+                </h3>
+                <button onClick={() => openItemModal()} className="text-sm font-bold text-brand-yellow hover:underline flex items-center gap-1">
+                  <Plus size={16} /> Nova Origem
+                </button>
+              </div>
+              
+              <div className="divide-y divide-zinc-100 dark:divide-dark-border">
+                {selectedGroup.items?.map((o) => (
+                  <div key={o.id} className="p-4 px-6 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
+                    <span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${o.color_class || 'bg-zinc-100 text-zinc-700 border-zinc-200'}`}>
+                      {o.name}
+                    </span>
+                    
+                    <div className="flex gap-2">
+                      <button onClick={() => openItemModal(o)} 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={() => handleDeleteItem(o.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>
+                ))}
+                {(!selectedGroup.items || selectedGroup.items.length === 0) && (
+                  <div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma origem configurada neste grupo.</div>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="p-12 text-center text-zinc-500">Selecione ou crie um grupo de origens.</div>
+        )}
+      </div>
+
+      {/* Group Creation Modal */}
+      {isGroupModalOpen && (
+        <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 Grupo</h3>
+              <button onClick={() => setIsGroupModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
+            </div>
+            <form onSubmit={handleCreateGroup} 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 Grupo</label>
+                <input 
+                  type="text" 
+                  value={groupName} 
+                  onChange={e => setGroupName(e.target.value)} 
+                  placeholder="Ex: Origens 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={() => setIsGroupModalOpen(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 || !groupName.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 Grupo'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Item 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">{editingItem ? 'Editar Origem' : 'Nova Origem'}</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={handleSaveItem} 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 Origem</label>
+                <input 
+                  type="text" 
+                  value={formData.name} 
+                  onChange={e => setFormData({...formData, name: e.target.value})} 
+                  placeholder="Ex: Facebook Ads"
+                  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 Origem'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

pages/ResetPassword.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { Hexagon, Lock, ArrowRight, Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
 import { resetPassword } from '../services/dataService';
@@ -26,7 +26,7 @@ export const ResetPassword: React.FC = () => {
     setError('');
 
     try {
-      await resetPassword(token, password);
+      await resetPassword(password, token); // No name sent here
       setIsSuccess(true);
       setTimeout(() => navigate('/login'), 3000);
     } catch (err: any) {

pages/SetupAccount.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { Hexagon, Lock, ArrowRight, Loader2, CheckCircle2, AlertCircle, User } from 'lucide-react';
+import { resetPassword } from '../services/dataService';
+
+export const SetupAccount: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const token = query.get('token') || '';
+
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setError('As senhas não coincidem.');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await resetPassword(password, token, name);
+      setIsSuccess(true);
+      setTimeout(() => navigate('/login'), 3000);
+    } catch (err: any) {
+      setError(err.message || 'Erro ao redefinir senha. O link pode estar expirado.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
+          <div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
+            <Hexagon size={32} fill="currentColor" />
+          </div>
+          <span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
+        </div>
+        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+          Finalize seu cadastro
+        </h2>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
+          {isSuccess ? (
+            <div className="text-center py-4 space-y-4 animate-in fade-in zoom-in duration-300">
+              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
+                <CheckCircle2 size={24} />
+              </div>
+              <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Tudo pronto!</h3>
+              <p className="text-sm text-zinc-600 dark:text-dark-muted">
+                Seu perfil foi atualizado com sucesso. Redirecionando para o login...
+              </p>
+            </div>
+          ) : (
+            <form className="space-y-6" onSubmit={handleSubmit}>
+              {error && (
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-600 dark:text-red-400 text-sm">
+                  <AlertCircle size={18} />
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                  Seu Nome Completo
+                </label>
+                <div className="mt-1 relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <User className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
+                  </div>
+                  <input
+                    id="name"
+                    type="text"
+                    required
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
+                    placeholder="João da Silva"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                  Nova Senha
+                </label>
+                <div className="mt-1 relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
+                  </div>
+                  <input
+                    id="password"
+                    type="password"
+                    required
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
+                    placeholder="••••••••"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                  Confirmar Nova Senha
+                </label>
+                <div className="mt-1 relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
+                  </div>
+                  <input
+                    id="confirmPassword"
+                    type="password"
+                    required
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
+                    placeholder="••••••••"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow transition-all disabled:opacity-50"
+                >
+                  {isLoading ? (
+                    <Loader2 className="animate-spin h-5 w-5" />
+                  ) : (
+                    <>
+                      Salvar e Entrar <ArrowRight size={18} />
+                    </>
+                  )}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

pages/SuperAdmin.tsx

@@ -1,14 +1,16 @@
 import React, { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Building2, Users, MessageSquare, Plus, Search,
-  Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X
+  Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X, CheckCircle2, Loader2, LogIn
 } from 'lucide-react';
-import { getTenants, createTenant } from '../services/dataService';
+import { getTenants, createTenant, deleteTenant, updateTenant, impersonateTenant } from '../services/dataService';
 import { Tenant } from '../types';
 import { DateRangePicker } from '../components/DateRangePicker';
 import { KPICard } from '../components/KPICard';
 
 export const SuperAdmin: React.FC = () => {
+  const navigate = useNavigate();
   const [dateRange, setDateRange] = useState({
     start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
     end: new Date()
@@ -76,27 +78,82 @@ export const SuperAdmin: React.FC = () => {
     setIsModalOpen(true);
   };
 
-  const handleDelete = (id: string) => {
+  const handleDelete = async (id: string) => {
+    if (id === 'system') {
+      alert('A organização do sistema não pode ser excluída.');
+      return;
+    }
     if (confirm('Tem certeza que deseja excluir esta organização? Esta ação não pode ser desfeita.')) {
+      const success = await deleteTenant(id);
+      if (success) {
         setTenants(prev => prev.filter(t => t.id !== id));
+      } else {
+        alert('Erro ao excluir a organização do servidor.');
+      }
     }
   };
 
+  const handleImpersonate = async (tenantId: string) => {
+    try {
+      if (tenantId === 'system') {
+        alert('Você já está na organização do sistema.');
+        return;
+      }
+      await impersonateTenant(tenantId);
+    } catch (err: any) {
+      alert(err.message || 'Erro ao tentar entrar na organização.');
+    }
+  };
+
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
   const handleSaveTenant = async (e: React.FormEvent) => {
     e.preventDefault();
+    setErrorMessage('');
+    setSuccessMessage('');
+    setIsSaving(true);
     const form = e.target as HTMLFormElement;
     const name = (form.elements.namedItem('name') as HTMLInputElement).value;
     const slug = (form.elements.namedItem('slug') as HTMLInputElement).value;
     const admin_email = (form.elements.namedItem('admin_email') as HTMLInputElement).value;
     const status = (form.elements.namedItem('status') as HTMLSelectElement).value;
-    const success = await createTenant({ name, slug, admin_email, status });
+
+    try {
+      if (editingTenant) {
+        const success = await updateTenant(editingTenant.id, { name, slug, admin_email, status });
         if (success) {
-      setIsModalOpen(false);
-      setEditingTenant(null);
+          setSuccessMessage('Organização atualizada com sucesso!');
           loadTenants();
-      alert('Organização salva com sucesso!');
+          setTimeout(() => {
+            setIsModalOpen(false);
+            setSuccessMessage('');
+            setEditingTenant(null);
+            setIsSaving(false);
+          }, 2000);
         } else {
-      alert('Erro ao salvar organização.');
+           setErrorMessage('Erro ao atualizar organização.');
+           setIsSaving(false);
+        }
+      } else {
+        const result = await createTenant({ name, slug, admin_email, status });
+        if (result.success) {
+          setSuccessMessage(result.message || 'Organização criada com sucesso!');
+          loadTenants();
+          setTimeout(() => {
+            setIsModalOpen(false);
+            setSuccessMessage('');
+            setIsSaving(false);
+          }, 3000);
+        } else {
+          setErrorMessage(result.message || 'Erro ao salvar organização.');
+          setIsSaving(false);
+        }
+      }
+    } catch (err) {
+      setErrorMessage('Ocorreu um erro inesperado.');
+      setIsSaving(false);
     }
   };
 
@@ -123,7 +180,7 @@ export const SuperAdmin: React.FC = () => {
           <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Painel Super Admin</h1>
           <p className="text-zinc-500 dark:text-dark-muted text-sm">Gerencie organizações e visualize estatísticas globais.</p>
         </div>
-        <button onClick={() => { setEditingTenant(null); setIsModalOpen(true); }} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg text-sm font-bold hover:opacity-90 transition-all shadow-sm">
+        <button onClick={() => { setEditingTenant(null); setIsModalOpen(true); }} 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 whitespace-nowrap text-sm font-bold hover:opacity-90 transition-all shadow-sm">
           <Plus size={16} /> Adicionar Organização
         </button>
       </div>
@@ -189,9 +246,14 @@ export const SuperAdmin: React.FC = () => {
                   <td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.user_count}</td>
                   <td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.attendance_count?.toLocaleString()}</td>
                   <td className="px-6 py-4 text-right">
-                    <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button onClick={() => handleEdit(tenant)} className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-50 dark:hover:bg-dark-bg rounded-lg transition-colors"><Edit size={16} /></button>
-                      <button onClick={() => handleDelete(tenant.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 className="flex items-center justify-end gap-2 transition-opacity">
+                      {tenant.id !== 'system' && (
+                        <button onClick={() => handleImpersonate(tenant.id)} title="Entrar na Organização" className="p-2 text-zinc-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded-lg transition-colors">
+                          <LogIn size={16} />
+                        </button>
+                      )}
+                      <button onClick={() => handleEdit(tenant)} title="Editar" className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-50 dark:hover:bg-dark-bg rounded-lg transition-colors"><Edit size={16} /></button>
+                      <button onClick={() => handleDelete(tenant.id)} title="Excluir" 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>
                   </td>
                 </tr>
@@ -216,6 +278,16 @@ export const SuperAdmin: React.FC = () => {
               <button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
             </div>
             <form onSubmit={handleSaveTenant} className="p-6 space-y-4">
+              {successMessage && (
+                <div className="bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30 p-3 rounded-lg flex items-center gap-2 text-green-700 dark:text-green-400 text-sm animate-in fade-in slide-in-from-top-1">
+                  <CheckCircle2 size={16} /> {successMessage}
+                </div>
+              )}
+              {errorMessage && (
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-700 dark:text-red-400 text-sm animate-in fade-in slide-in-from-top-1">
+                  <X size={16} /> {errorMessage}
+                </div>
+              )}
               <div className="space-y-2">
                 <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Nome da Organização</label>
                 <input type="text" name="name" defaultValue={editingTenant?.name} className="w-full px-3 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all" required />
@@ -240,7 +312,9 @@ export const SuperAdmin: React.FC = () => {
               </div>
               <div className="pt-4 flex justify-end gap-3 border-t dark:border-dark-border mt-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" className="px-4 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold hover:opacity-90 transition-all shadow-sm">{editingTenant ? 'Salvar Alterações' : 'Criar Organização'}</button>
+                <button type="submit" disabled={isSaving} className="px-4 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} /> : (editingTenant ? 'Salvar Alterações' : 'Criar Organização')}
+                </button>
               </div>
             </form>
           </div>

pages/TeamManagement.tsx

@@ -1,16 +1,19 @@
 import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { Users, Plus, Mail, Search, X, Edit, Trash2, Loader2, AlertTriangle } from 'lucide-react';
-import { getUsers, getTeams, createMember, deleteUser, updateUser, getUserById } from '../services/dataService';
-import { User } from '../types';
+import { getUsers, getTeams, createMember, deleteUser, updateUser, getUserById, getTenants } from '../services/dataService';
+import { User, Tenant } from '../types';
 
 export const TeamManagement: React.FC = () => {
   const [users, setUsers] = useState<User[]>([]);
   const [teams, setTeams] = useState<any[]>([]);
+  const [tenants, setTenants] = useState<Tenant[]>([]);
   const [loading, setLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [tenantFilter, setTenantFilter] = useState('all');
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [userToDelete, setUserToDelete] = useState<User | null>(null);
   const [deleteConfirmName, setDeleteConfirmName] = useState('');
@@ -20,7 +23,8 @@ export const TeamManagement: React.FC = () => {
     email: '', 
     role: 'agent' as any, 
     team_id: '', 
-    status: 'active' as any 
+    status: 'active' as any,
+    tenant_id: ''
   });
 
   const loadData = async () => {
@@ -29,9 +33,28 @@ export const TeamManagement: React.FC = () => {
     if (!tid) return;
     setLoading(true);
     try {
-      const [fu, ft, me] = await Promise.all([getUsers(tid), getTeams(tid), uid ? getUserById(uid) : null]);
-      setUsers(fu.filter(u => u.role !== 'super_admin'));
-      setTeams(ft);
+      const me = uid ? await getUserById(uid) : null;
+      
+      const isSuperAdmin = me?.role === 'super_admin';
+      const effectiveTid = isSuperAdmin ? 'all' : tid;
+
+      const promises: Promise<any>[] = [
+        getUsers(effectiveTid), 
+        getTeams(effectiveTid)
+      ];
+
+      if (isSuperAdmin) {
+        promises.push(getTenants());
+      }
+
+      const results = await Promise.all(promises);
+      
+      setUsers(isSuperAdmin ? results[0] : results[0].filter((u: User) => u.role !== 'super_admin'));
+      setTeams(results[1]);
+      if (isSuperAdmin && results[2]) {
+        setTenants(results[2]);
+      }
+      
       if (me) setCurrentUser(me);
     } catch (err) { console.error(err); } finally { setLoading(false); }
   };
@@ -43,11 +66,21 @@ export const TeamManagement: React.FC = () => {
     setIsSaving(true);
     try {
       const tid = localStorage.getItem('ctms_tenant_id') || '';
-      const success = editingUser 
-        ? await updateUser(editingUser.id, formData) 
-        : await createMember({ ...formData, tenant_id: tid });
+      const finalTenantId = currentUser?.role === 'super_admin' ? formData.tenant_id : tid;
+      
+      if (editingUser) {
+        const success = await updateUser(editingUser.id, { ...formData, tenant_id: finalTenantId });
         if (success) { setIsModalOpen(false); loadData(); }
-    } catch (err) { alert('Erro ao salvar'); } finally { setIsSaving(false); }
+      } else {
+        await createMember({ ...formData, tenant_id: finalTenantId });
+        setIsModalOpen(false); 
+        loadData();
+      }
+    } catch (err: any) { 
+      alert(err.message || 'Erro ao salvar membro. Verifique se o e-mail já não está cadastrado.'); 
+    } finally { 
+      setIsSaving(false); 
+    }
   };
 
   const handleConfirmDelete = async () => {
@@ -60,10 +93,14 @@ export const TeamManagement: React.FC = () => {
 
   if (loading && users.length === 0) return <div className="flex h-screen items-center justify-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando...</div>;
 
-  const canManage = currentUser?.role === 'admin' || currentUser?.role === 'super_admin';
-  const filtered = users.filter(u => u.name.toLowerCase().includes(searchTerm.toLowerCase()) || u.email.toLowerCase().includes(searchTerm.toLowerCase()));
+  const canManage = currentUser?.role === 'admin' || currentUser?.role === 'super_admin' || currentUser?.role === 'manager';
+  const filtered = users.filter(u => 
+    (u.name.toLowerCase().includes(searchTerm.toLowerCase()) || u.email.toLowerCase().includes(searchTerm.toLowerCase())) &&
+    (tenantFilter === 'all' || u.tenant_id === tenantFilter)
+  );
 
   const getRoleLabel = (role: string) => {
+    if (role === 'super_admin') return 'Super Admin';
     if (role === 'admin') return 'Admin';
     if (role === 'manager') return 'Gerente';
     return 'Agente';
@@ -92,17 +129,28 @@ export const TeamManagement: React.FC = () => {
       </div>
 
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden">
-        <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50 dark:bg-dark-bg/50">
-          <div className="relative max-w-md">
+        <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50 dark:bg-dark-bg/50 flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1 max-w-md">
             <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
             <input type="text" placeholder="Buscar membros..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full pl-9 pr-4 py-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
           </div>
+          {currentUser?.role === 'super_admin' && (
+            <select 
+              value={tenantFilter} 
+              onChange={e => setTenantFilter(e.target.value)} 
+              className="bg-white 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-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer w-full sm:w-auto transition-all"
+            >
+              <option value="all">Todas Organizações</option>
+              {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+          )}
         </div>
         <div className="overflow-x-auto">
           <table className="w-full text-left">
             <thead>
               <tr className="bg-zinc-50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase font-bold border-b dark:border-dark-border">
                 <th className="px-6 py-4">Usuário</th>
+                {currentUser?.role === 'super_admin' && <th className="px-6 py-4">Organização</th>}
                 <th className="px-6 py-4">Função</th>
                 <th className="px-6 py-4">Time</th>
                 <th className="px-6 py-4">Status</th>
@@ -125,11 +173,18 @@ export const TeamManagement: React.FC = () => {
                         <span className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-dark-card ${user.status === 'active' ? 'bg-green-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}></span>
                       </div>
                       <div>
-                        <div className="font-bold text-zinc-900 dark:text-dark-text">{user.name}</div>
+                        <Link to={`/users/${user.slug || user.id}`} className="font-bold text-zinc-900 dark:text-dark-text hover:underline">{user.name}</Link>
                         <div className="text-xs text-zinc-500 dark:text-dark-muted">{user.email}</div>
                       </div>
                     </div>
                   </td>
+                  {currentUser?.role === 'super_admin' && (
+                    <td className="px-6 py-4">
+                      <span className="text-zinc-600 dark:text-zinc-300 font-medium">
+                        {tenants.find(t => t.id === user.tenant_id)?.name || user.tenant_id}
+                      </span>
+                    </td>
+                  )}
                   <td className="px-6 py-4">
                     <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold border capitalize ${getRoleBadge(user.role)}`}>{getRoleLabel(user.role)}</span>
                   </td>
@@ -139,8 +194,8 @@ export const TeamManagement: React.FC = () => {
                   </td>
                   {canManage && (
                     <td className="px-6 py-4 text-right">
-                      <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <button onClick={() => { setEditingUser(user); setFormData({name:user.name, email:user.email, role:user.role as any, team_id:user.team_id||'', status:user.status as any}); setIsModalOpen(true); }} className="p-2 hover:bg-zinc-100 dark:hover:bg-dark-border text-zinc-400 hover:text-zinc-900 dark:hover:text-dark-text rounded-lg transition-colors"><Edit size={16} /></button>
+                      <div className="flex justify-end gap-2 transition-opacity">
+                        <button onClick={() => { setEditingUser(user); setFormData({name:user.name, email:user.email, role:user.role as any, team_id:user.team_id||'', status:user.status as any, tenant_id: user.tenant_id||''}); setIsModalOpen(true); }} className="p-2 hover:bg-zinc-100 dark:hover:bg-dark-border text-zinc-400 hover:text-zinc-900 dark:hover:text-dark-text rounded-lg transition-colors"><Edit size={16} /></button>
                         <button onClick={() => { setUserToDelete(user); setDeleteConfirmName(''); setIsDeleteModalOpen(true); }} className="p-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-colors"><Trash2 size={16} /></button>
                       </div>
                     </td>
@@ -163,22 +218,53 @@ export const TeamManagement: React.FC = () => {
               </div>
               <div>
                 <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">E-mail</label>
-                <input type="email" value={formData.email} onChange={e => setFormData({...formData, email:e.target.value})} 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-dark-text disabled:bg-zinc-50 dark:disabled:bg-dark-bg/50 dark:disabled:text-dark-muted" disabled={!!editingUser} required />
+                <input 
+                  type="email" 
+                  value={formData.email} 
+                  onChange={e => setFormData({...formData, email:e.target.value})} 
+                  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-dark-text disabled:bg-zinc-50 dark:disabled:bg-dark-bg/50 dark:disabled:text-dark-muted" 
+                  disabled={
+                    !!editingUser && (
+                      currentUser?.role === 'manager' || 
+                      (editingUser.role === 'admin' && currentUser?.role !== 'super_admin') ||
+                      (editingUser.role === 'super_admin' && currentUser?.role !== 'super_admin')
+                    )
+                  } 
+                  required 
+                />
               </div>
+              {currentUser?.role === 'super_admin' && (
+                <div>
+                  <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Organização</label>
+                  <select value={formData.tenant_id} onChange={e => setFormData({...formData, tenant_id: e.target.value})} 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-dark-text" required>
+                    <option value="">Selecione uma organização</option>
+                    {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+                  </select>
+                </div>
+              )}
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Função</label>
-                  <select value={formData.role} onChange={e => setFormData({...formData, role: e.target.value as any})} 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-dark-text">
+                  <select 
+                    value={formData.role} 
+                    onChange={e => setFormData({...formData, role: e.target.value as any})} 
+                    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-dark-text disabled:bg-zinc-50 dark:disabled:bg-dark-bg/50 dark:disabled:text-dark-muted"
+                    disabled={
+                      (currentUser?.role === 'manager') || 
+                      (editingUser?.role === 'admin' && currentUser?.role !== 'super_admin') ||
+                      (editingUser?.role === 'super_admin' && currentUser?.role !== 'super_admin')
+                    }
+                  >
                     <option value="agent">Agente</option>
                     <option value="manager">Gerente</option>
-                    <option value="admin">Admin</option>
+                    {currentUser?.role !== 'manager' && <option value="admin">Admin</option>}
                   </select>
                 </div>
                 <div>
                   <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Time</label>
                   <select value={formData.team_id} onChange={e => setFormData({...formData, team_id: e.target.value})} 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-dark-text">
                     <option value="">Nenhum</option>
-                    {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+                    {teams.filter(t => !formData.tenant_id || t.tenant_id === formData.tenant_id).map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                   </select>
                 </div>
               </div>

pages/Teams.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Building2, Users, Plus, Search, Target, ArrowUpRight, Loader2, Edit2, X } from 'lucide-react';
-import { getTeams, getUsers, getAttendances, createTeam, updateTeam } from '../services/dataService';
+import { Building2, Users, Plus, Search, Target, ArrowUpRight, Loader2, Edit2, X, Trash2 } from 'lucide-react';
+import { getTeams, getUsers, getAttendances, createTeam, updateTeam, deleteTeam, getUserById } from '../services/dataService';
 import { User, Attendance } from '../types';
 
 export const Teams: React.FC = () => {
   const [teams, setTeams] = useState<any[]>([]);
   const [users, setUsers] = useState<User[]>([]);
   const [attendances, setAttendances] = useState<Attendance[]>([]);
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -15,15 +16,18 @@ export const Teams: React.FC = () => {
 
   const loadData = async () => {
     const tid = localStorage.getItem('ctms_tenant_id');
+    const uid = localStorage.getItem('ctms_user_id');
     if (!tid) return;
     setLoading(true);
     try {
-      const [ft, fu, fa] = await Promise.all([
+      const [ft, fu, fa, me] = await Promise.all([
         getTeams(tid),
         getUsers(tid),
-        getAttendances(tid, { dateRange: { start: new Date(0), end: new Date() }, userId: 'all', teamId: 'all' })
+        getAttendances(tid, { dateRange: { start: new Date(0), end: new Date() }, userId: 'all', teamId: 'all' }),
+        uid ? getUserById(uid) : null
       ]);
       setTeams(ft); setUsers(fu); setAttendances(fa);
+      if (me) setCurrentUser(me);
     } catch (e) { console.error(e); } finally { setLoading(false); }
   };
 
@@ -49,18 +53,32 @@ export const Teams: React.FC = () => {
     } catch (err) { alert('Erro ao salvar'); } finally { setIsSaving(false); }
   };
 
+  const handleDeleteTeam = async (id: string) => {
+    if (confirm('Tem certeza que deseja excluir este time? Todos os usuários deste time ficarão sem time atribuído.')) {
+      await deleteTeam(id);
+      loadData();
+    }
+  };
   if (loading && teams.length === 0) return <div className="p-12 text-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando...</div>;
 
+  const canManage = currentUser?.role === 'admin' || currentUser?.role === 'super_admin';
+
   return (
     <div className="space-y-8 max-w-7xl mx-auto pb-12 transition-colors duration-300">
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Times</h1>
-          <p className="text-zinc-500 dark:text-dark-muted text-sm">Visualize o desempenho e gerencie seus grupos de vendas.</p>
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">
+            {currentUser?.role === 'manager' ? 'Meu Time' : 'Times'}
+          </h1>
+          <p className="text-zinc-500 dark:text-dark-muted text-sm">
+            {currentUser?.role === 'manager' ? 'Visualize o desempenho do seu grupo de vendas.' : 'Visualize o desempenho e gerencie seus grupos de vendas.'}
+          </p>
         </div>
+        {canManage && (
           <button onClick={() => { setEditingTeam(null); setFormData({name:'', description:''}); setIsModalOpen(true); }} 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">
             <Plus size={16} /> Novo Time
           </button>
+        )}
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -68,7 +86,12 @@ export const Teams: React.FC = () => {
           <div key={t.id} className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border p-6 shadow-sm group hover:shadow-md transition-all">
             <div className="flex justify-between mb-6">
               <div className="p-3 bg-zinc-50 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-xl border border-zinc-100 dark:border-dark-border"><Building2 size={24} /></div>
-              <button onClick={() => { setEditingTeam(t); setFormData({name:t.name, description:t.description||''}); setIsModalOpen(true); }} className="text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text opacity-0 group-hover:opacity-100 p-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-dark-bg transition-all"><Edit2 size={18} /></button>
+              {canManage && (
+                <div className="flex items-center gap-2">
+                  <button onClick={() => { setEditingTeam(t); setFormData({name:t.name, description:t.description||''}); setIsModalOpen(true); }} className="text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text p-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-dark-bg transition-all"><Edit2 size={18} /></button>
+                  <button onClick={() => handleDeleteTeam(t.id)} className="text-zinc-400 dark:text-dark-muted hover:text-red-600 dark:hover:text-red-500 p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"><Trash2 size={18} /></button>
+                </div>
+              )}
             </div>
             <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50 mb-1">{t.name}</h3>
             <p className="text-sm text-zinc-500 dark:text-dark-muted mb-6 h-10 line-clamp-2">{t.description || 'Sem descrição definida.'}</p>
@@ -96,7 +119,7 @@ export const Teams: React.FC = () => {
             <form onSubmit={handleSave} className="space-y-5">
               <div>
                 <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1.5 block tracking-wider">Nome do Time</label>
-                <input type="text" placeholder="Ex: Vendas Sul" value={formData.name} onChange={e => setFormData({...formData, name:e.target.value})} 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 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" required />
+                <input type="text" placeholder="Ex: Vendas Sul" maxLength={25} value={formData.name} onChange={e => setFormData({...formData, name:e.target.value})} 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 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" required />
               </div>
               <div>
                 <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1.5 block tracking-wider">Descrição</label>

pages/UserDetail.tsx

@@ -1,8 +1,9 @@
 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, getOrigins } from '../services/dataService';
+import { Attendance, User, FunnelStage, DashboardFilter, FunnelStageDef, OriginItemDef } from '../types';
 import { ArrowLeft, Mail, Phone, Clock, MessageSquare, ChevronLeft, ChevronRight, Eye, Filter } from 'lucide-react';
+import { DateRangePicker } from '../components/DateRangePicker';
 
 const ITEMS_PER_PAGE = 10;
 
@@ -10,10 +11,12 @@ 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 [originDefs, setOriginDefs] = useState<OriginItemDef[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState<DashboardFilter>({
-    dateRange: { start: new Date(0), end: new Date() },
+    dateRange: { start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), end: new Date() },
     userId: id,
     funnelStage: 'all',
     origin: 'all'
@@ -30,11 +33,30 @@ export const UserDetail: React.FC = () => {
           setUser(u);
           
           if (u && tenantId) {
-            const data = await getAttendances(tenantId, { 
+            const [data, fetchedFunnels, fetchedOrigins] = await Promise.all([
+              getAttendances(tenantId, { 
                 ...filters,
                 userId: id
-            });
+              }),
+              getFunnels(tenantId),
+              getOrigins(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) : []);
+
+            let activeOriginGroup = fetchedOrigins[0];
+            if (targetTeamId) {
+              const matchedOrigin = fetchedOrigins.find(o => o.teamIds?.includes(targetTeamId));
+              if (matchedOrigin) activeOriginGroup = matchedOrigin;
+            }
+            setOriginDefs(activeOriginGroup && activeOriginGroup.items ? activeOriginGroup.items : []);
           }
         } catch (error) {
           console.error("Error loading user details", error);
@@ -65,7 +87,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';
@@ -121,30 +146,35 @@ export const UserDetail: React.FC = () => {
           <span>Filtros:</span>
         </div>
 
+        <DateRangePicker 
+          dateRange={filters.dateRange} 
+          onChange={(range) => handleFilterChange('dateRange', range)} 
+        />
+
         <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.funnelStage}
           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}
           onChange={(e) => handleFilterChange('origin', e.target.value)}
         >
           <option value="all">Todas Origens</option>
-          <option value="WhatsApp">WhatsApp</option>
-          <option value="Instagram">Instagram</option>
-          <option value="Website">Website</option>
-          <option value="LinkedIn">LinkedIn</option>
-          <option value="Indicação">Indicação</option>
-        </select>
-      </div>
+          {originDefs.length > 0 ? originDefs.map(o => (
+            <option key={o.id} value={o.name}>{o.name}</option>
+          )) : ['WhatsApp', 'Instagram', 'Website', 'LinkedIn', 'Indicação'].map(o => (
+            <option key={o} value={o}>{o}</option>
+          ))}
+        </select>      </div>
 
       {/* KPI Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -192,16 +222,14 @@ export const UserDetail: React.FC = () => {
                 {currentData.map(att => (
                   <tr key={att.id} className="hover:bg-zinc-50/80 dark:hover:bg-zinc-800/50 transition-colors group">
                     <td className="px-6 py-4 text-zinc-600 dark:text-zinc-300 whitespace-nowrap">
-                      <div className="font-medium text-zinc-900 dark:text-zinc-100">{new Date(att.created_at).toLocaleDateString()}</div>
-                      <div className="text-xs text-zinc-400 dark:text-dark-muted">{new Date(att.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
+                      <div className="font-medium text-zinc-900 dark:text-zinc-100">{new Date(att.created_at).toLocaleDateString('pt-BR')}</div>
+                      <div className="text-xs text-zinc-400 dark:text-dark-muted">{new Date(att.created_at).toLocaleTimeString('pt-BR', {hour: '2-digit', minute:'2-digit', hour12: false})}</div>
                     </td>
                     <td className="px-6 py-4">
-                      <div className="flex flex-col">
-                        <span className="text-zinc-800 dark:text-zinc-200 line-clamp-1 font-medium mb-1">{att.summary}</span>
+                      <span className="text-zinc-800 dark:text-zinc-200 line-clamp-1 font-medium mb-1">{att.title}</span>
                       <div className="flex items-center gap-2 text-xs text-zinc-500 dark:text-dark-muted">
                         <span className="flex items-center gap-1"><MessageSquare size={10} /> {att.origin}</span>
                       </div>
-                      </div>
                     </td>
                     <td className="px-6 py-4 text-center">
                       <span className={`inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold border ${getStageBadgeColor(att.funnel_stage)}`}>

pages/UserProfile.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Camera, Save, Mail, User as UserIcon, Building, Shield, Loader2, CheckCircle2 } from 'lucide-react';
-import { getUserById, getTenants, updateUser, uploadAvatar } from '../services/dataService';
+import { Camera, Save, Mail, User as UserIcon, Building, Shield, Loader2, CheckCircle2, Bell } from 'lucide-react';
+import { getUserById, getTenants, getTeams, updateUser, uploadAvatar } from '../services/dataService';
 import { User, Tenant } from '../types';
 
 export const UserProfile: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
   const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [teamName, setTeamName] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
@@ -13,10 +14,12 @@ export const UserProfile: React.FC = () => {
   
   const [name, setName] = useState('');
   const [bio, setBio] = useState('');
+  const [email, setEmail] = useState('');
 
   useEffect(() => {
     const fetchUserAndTenant = async () => {
       const storedUserId = localStorage.getItem('ctms_user_id');
+      
       if (storedUserId) {
         try {
           const fetchedUser = await getUserById(storedUserId);
@@ -24,6 +27,7 @@ export const UserProfile: React.FC = () => {
             setUser(fetchedUser);
             setName(fetchedUser.name);
             setBio(fetchedUser.bio || '');
+            setEmail(fetchedUser.email);
 
             // Fetch tenant info
             const tenants = await getTenants();
@@ -31,6 +35,12 @@ export const UserProfile: React.FC = () => {
             if (userTenant) {
               setTenant(userTenant);
             }
+
+            if (fetchedUser.team_id) {
+              const teams = await getTeams(fetchedUser.tenant_id);
+              const userTeam = teams.find(t => t.id === fetchedUser.team_id);
+              if (userTeam) setTeamName(userTeam.name);
+            }
           }
         } catch (err) {
           console.error("Error fetching profile data:", err);
@@ -78,10 +88,10 @@ export const UserProfile: React.FC = () => {
     setIsSuccess(false);
 
     try {
-      const success = await updateUser(user.id, { name, bio });
+      const success = await updateUser(user.id, { name, bio, email });
       if (success) {
         setIsSuccess(true);
-        setUser({ ...user, name, bio });
+        setUser({ ...user, name, bio, email });
         setTimeout(() => setIsSuccess(false), 3000);
       } else {
         alert('Erro ao salvar alterações no servidor.');
@@ -101,6 +111,8 @@ export const UserProfile: React.FC = () => {
     ? (user.avatar_url.startsWith('http') ? user.avatar_url : `${backendUrl}${user.avatar_url}`)
     : `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`;
     
+  const canEditEmail = user.role === 'admin' || user.role === 'super_admin';
+
   return (
     <div className="max-w-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
       <div>
@@ -138,13 +150,13 @@ export const UserProfile: React.FC = () => {
             <h2 className="mt-4 text-lg font-bold text-zinc-900 dark:text-zinc-100">{user.name}</h2>
             <p className="text-zinc-500 dark:text-zinc-400 text-sm">{user.email}</p>
             
-            <div className="mt-4 flex flex-wrap justify-center gap-2">
-              <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-semibold capitalize border border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800">
+            <div className="mt-4 flex justify-center gap-2 max-w-full overflow-hidden px-2">
+              <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-semibold capitalize border border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800 whitespace-nowrap shrink-0">
                 {user.role === 'admin' ? 'Admin' : user.role === 'manager' ? 'Gerente' : user.role === 'super_admin' ? 'Super Admin' : 'Agente'}
               </span>
               {user.team_id && (
-                <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800">
-                  {tenant?.name ? `Time ${tenant.name}` : user.team_id}
+                <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 truncate max-w-[160px]" title={teamName || user.team_id}>
+                  {teamName || user.team_id}
                 </span>
               )}
             </div>
@@ -190,9 +202,17 @@ export const UserProfile: React.FC = () => {
                       id="fullName"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
-                      className="block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-yellow-400/20 focus:border-yellow-400 transition-all sm:text-sm"
+                      disabled={user.role === 'agent'}
+                      className={`block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg sm:text-sm transition-all ${
+                        user.role === 'agent' 
+                          ? 'bg-zinc-50 dark:bg-zinc-900/50 text-zinc-500 dark:text-zinc-500 cursor-not-allowed'
+                          : 'bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-yellow-400/20 focus:border-yellow-400'
+                      }`}
                     />
                   </div>
+                  {user.role === 'agent' && (
+                    <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">Contate um administrador para alterar seu nome.</p>
+                  )}
                 </div>
 
                 <div className="space-y-2">
@@ -206,12 +226,17 @@ export const UserProfile: React.FC = () => {
                     <input
                       type="email"
                       id="email"
-                      value={user.email}
-                      disabled
-                      className="block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg bg-zinc-50 dark:bg-zinc-900/50 text-zinc-500 dark:text-zinc-500 cursor-not-allowed sm:text-sm"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      disabled={!canEditEmail}
+                      className={`block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg sm:text-sm transition-all ${
+                        !canEditEmail 
+                          ? 'bg-zinc-50 dark:bg-zinc-900/50 text-zinc-500 dark:text-zinc-500 cursor-not-allowed'
+                          : 'bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-brand-yellow/20 focus:border-brand-yellow'
+                      }`}
                     />
                   </div>
-                  <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">Contate o admin para alterar o e-mail.</p>
+                  {!canEditEmail && <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">Contate o admin para alterar o e-mail.</p>}
                 </div>
               </div>
 
@@ -248,6 +273,32 @@ export const UserProfile: React.FC = () => {
                 <p className="text-xs text-zinc-400 dark:text-zinc-500 text-right">{bio.length}/500 caracteres</p>
               </div>
 
+              <div className="space-y-2 pt-2">
+                <div className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900/50 rounded-xl border border-zinc-200 dark:border-zinc-800">
+                  <div>
+                    <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
+                      <Bell size={16} className="text-brand-yellow" /> Notificações Sonoras
+                    </h4>
+                    <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
+                      Reproduzir um som quando você receber uma nova notificação.
+                    </p>
+                  </div>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input 
+                      type="checkbox" 
+                      className="sr-only peer" 
+                      checked={user.sound_enabled ?? true}
+                      onChange={async (e) => {
+                        const newStatus = e.target.checked;
+                        setUser({...user, sound_enabled: newStatus});
+                        await updateUser(user.id, { sound_enabled: newStatus });
+                      }}
+                    />
+                    <div className="w-11 h-6 bg-zinc-200 peer-focus:outline-none rounded-full peer dark:bg-zinc-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-zinc-600 peer-checked:bg-brand-yellow"></div>
+                  </label>
+                </div>
+              </div>
+
               <div className="pt-4 flex items-center justify-end border-t border-zinc-100 dark:border-zinc-800 mt-6 transition-colors">
                 <button
                   type="button"

services/dataService.ts

@@ -6,8 +6,8 @@ import { Attendance, DashboardFilter, User } from '../types';
 // Em desenvolvimento, aponta para o localhost:3001
 const API_URL = import.meta.env.PROD ? '/api' : 'http://localhost:3001/api'; 
 
-const getHeaders = () => {
-  const token = localStorage.getItem('ctms_token');
+const getHeaders = (customToken?: string) => {
+  const token = customToken || localStorage.getItem('ctms_token');
   // Evitar enviar "undefined" ou "null" como strings se o localStorage estiver corrompido
   if (!token || token === 'undefined' || token === 'null') return { 'Content-Type': 'application/json' };
   
@@ -17,6 +17,379 @@ const getHeaders = () => {
   };
 };
 
+// Global flag to prevent multiple simultaneous refresh attempts
+let isRefreshing = false;
+let refreshSubscribers: ((token: string) => void)[] = [];
+
+const onRefreshed = (token: string) => {
+  refreshSubscribers.forEach(cb => cb(token));
+  refreshSubscribers = [];
+};
+
+const addRefreshSubscriber = (cb: (token: string) => void) => {
+  refreshSubscribers.push(cb);
+};
+
+export const apiFetch = async (url: string, options: RequestInit = {}): Promise<Response> => {
+  let response = await fetch(url, options);
+
+  // If unauthorized, attempt to refresh the token
+  if (response.status === 401 && !url.includes('/auth/login') && !url.includes('/auth/refresh')) {
+    const refreshToken = localStorage.getItem('ctms_refresh_token');
+    
+    if (!refreshToken) {
+      logout();
+      return response;
+    }
+
+    if (isRefreshing) {
+      // If a refresh is already in progress, wait for it to finish and retry
+      return new Promise(resolve => {
+        addRefreshSubscriber((newToken) => {
+          options.headers = getHeaders(newToken);
+          resolve(fetch(url, options));
+        });
+      });
+    }
+
+    isRefreshing = true;
+
+    try {
+      const refreshResponse = await fetch(`${API_URL}/auth/refresh`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ refreshToken })
+      });
+
+      if (!refreshResponse.ok) {
+        throw new Error('Refresh token invalid');
+      }
+
+      const data = await refreshResponse.json();
+      localStorage.setItem('ctms_token', data.token);
+      
+      // Retry the original request
+      options.headers = getHeaders(data.token);
+      response = await fetch(url, options);
+      
+      onRefreshed(data.token);
+    } catch (err) {
+      console.error("Session expired or refresh failed:", err);
+      logout();
+    } finally {
+      isRefreshing = false;
+    }
+  }
+
+  return response;
+};
+
+export const getNotifications = async (): Promise<any[]> => {
+  try {
+    const response = await apiFetch(`${API_URL}/notifications`, {
+      headers: getHeaders()
+    });
+    if (!response.ok) throw new Error('Failed to fetch notifications');
+    return await response.json();
+  } catch (error) {
+    console.error("API Error (getNotifications):", error);
+    return [];
+  }
+};
+
+export const markNotificationAsRead = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/notifications/${id}`, {
+      method: 'PUT',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (markNotificationAsRead):", error);
+    return false;
+  }
+};
+
+export const markAllNotificationsAsRead = async (): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/notifications/read-all`, {
+      method: 'PUT',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (markAllNotificationsAsRead):", error);
+    return false;
+  }
+};
+
+export const deleteNotification = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/notifications/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteNotification):", error);
+    return false;
+  }
+};
+
+export const clearAllNotifications = async (): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/notifications/clear-all`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (clearAllNotifications):", error);
+    return false;
+  }
+};
+
+// --- Funnels Functions ---
+export const getFunnels = async (tenantId: string): Promise<any[]> => {
+  try {
+    const response = await apiFetch(`${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 apiFetch(`${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 apiFetch(`${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 apiFetch(`${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 apiFetch(`${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 apiFetch(`${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 apiFetch(`${API_URL}/funnel_stages/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteFunnelStage):", error);
+    return false;
+  }
+};
+
+// --- Origins Functions ---
+export const getOrigins = async (tenantId: string): Promise<any[]> => {
+  try {
+    const response = await apiFetch(`${API_URL}/origins?tenantId=${tenantId}`, {
+      headers: getHeaders()
+    });
+    if (!response.ok) throw new Error('Falha ao buscar origens');
+    return await response.json();
+  } catch (error) {
+    console.error("API Error (getOrigins):", error);
+    return [];
+  }
+};
+
+export const createOriginGroup = async (data: { name: string, tenantId: string }): Promise<any> => {
+  const response = await apiFetch(`${API_URL}/origins`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Erro ao criar grupo de origens');
+  }
+  return await response.json();
+};
+
+export const updateOriginGroup = async (id: string, data: { name?: string, teamIds?: string[] }): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/origins/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(data)
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (updateOriginGroup):", error);
+    return false;
+  }
+};
+
+export const deleteOriginGroup = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/origins/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteOriginGroup):", error);
+    return false;
+  }
+};
+
+export const createOriginItem = async (groupId: string, data: { name: string, color_class?: string }): Promise<any> => {
+  const response = await apiFetch(`${API_URL}/origins/${groupId}/items`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Erro ao criar item de origem');
+  }
+  return await response.json();
+};
+
+export const updateOriginItem = async (id: string, data: { name: string, color_class?: string }): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/origin_items/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(data)
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (updateOriginItem):", error);
+    return false;
+  }
+};
+
+export const deleteOriginItem = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/origin_items/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteOriginItem):", error);
+    return false;
+  }
+};
+
+// --- API Keys Functions ---
+export const getApiKeys = async (tenantId: string): Promise<any[]> => {
+  try {
+    const response = await apiFetch(`${API_URL}/api-keys?tenantId=${tenantId}`, {
+      headers: getHeaders()
+    });
+    if (!response.ok) throw new Error('Falha ao buscar chaves');
+    return await response.json();
+  } catch (error) {
+    console.error("API Error (getApiKeys):", error);
+    return [];
+  }
+};
+
+export const createApiKey = async (data: { name: string, tenantId: string }): Promise<any> => {
+  const response = await apiFetch(`${API_URL}/api-keys`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Erro ao criar chave de API');
+  }
+  return await response.json();
+};
+
+export const deleteApiKey = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/api-keys/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteApiKey):", error);
+    return false;
+  }
+};
+
+export const searchGlobal = async (query: string): Promise<{ members: User[], teams: any[], attendances: any[], organizations?: any[] }> => {
+  try {
+    const response = await apiFetch(`${API_URL}/search?q=${encodeURIComponent(query)}`, {
+      headers: getHeaders()
+    });
+    if (!response.ok) throw new Error('Search failed');
+    return await response.json();
+  } catch (error) {
+    console.error("API Error (searchGlobal):", error);
+    return { members: [], teams: [], attendances: [], organizations: [] };
+  }
+};
+
 export const getAttendances = async (tenantId: string, filter: DashboardFilter): Promise<Attendance[]> => {
   try {
     const params = new URLSearchParams();
@@ -30,7 +403,7 @@ export const getAttendances = async (tenantId: string, filter: DashboardFilter):
     if (filter.funnelStage && filter.funnelStage !== 'all') params.append('funnelStage', filter.funnelStage);
     if (filter.origin && filter.origin !== 'all') params.append('origin', filter.origin);
 
-    const response = await fetch(`${API_URL}/attendances?${params.toString()}`, {
+    const response = await apiFetch(`${API_URL}/attendances?${params.toString()}`, {
       headers: getHeaders()
     });
     
@@ -51,7 +424,7 @@ export const getUsers = async (tenantId: string): Promise<User[]> => {
     const params = new URLSearchParams();
     if (tenantId !== 'all') params.append('tenantId', tenantId);
 
-    const response = await fetch(`${API_URL}/users?${params.toString()}`, {
+    const response = await apiFetch(`${API_URL}/users?${params.toString()}`, {
       headers: getHeaders()
     });
     if (!response.ok) throw new Error('Falha ao buscar usuários');
@@ -65,33 +438,43 @@ export const getUsers = async (tenantId: string): Promise<User[]> => {
 
 export const getUserById = async (id: string): Promise<User | undefined> => {
   try {
-    const response = await fetch(`${API_URL}/users/${id}`, {
+    const response = await apiFetch(`${API_URL}/users/${id}`, {
       headers: getHeaders()
     });
-    if (!response.ok) return undefined;
+    if (!response.ok) {
+       if (response.status === 401 || response.status === 403 || response.status === 404) {
+         return undefined; // Invalid user or token
+       }
+       throw new Error(`Server error: ${response.status}`);
+    }
 
     const contentType = response.headers.get("content-type");
     if (contentType && contentType.indexOf("application/json") !== -1) {
       return await response.json();
     }
-    return undefined;
   } catch (error) {
     console.error("API Error (getUserById):", error);
-    return undefined;
+    throw error; // Rethrow so AuthGuard catches it and doesn't wipe tokens
   }
 };
 
 export const updateUser = async (id: string, userData: any): Promise<boolean> => {
   try {
-    const response = await fetch(`${API_URL}/users/${id}`, {
+    const response = await apiFetch(`${API_URL}/users/${id}`, {
       method: 'PUT',
       headers: getHeaders(),
       body: JSON.stringify(userData)
     });
-    return response.ok;
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || 'Erro ao atualizar usuário no servidor');
+    }
+    
+    return true;
   } catch (error) {
     console.error("API Error (updateUser):", error);
-    return false;
+    throw error;
   }
 };
 
@@ -101,7 +484,7 @@ export const uploadAvatar = async (id: string, file: File): Promise<string | nul
     formData.append('avatar', file);
 
     const token = localStorage.getItem('ctms_token');
-    const response = await fetch(`${API_URL}/users/${id}/avatar`, {
+    const response = await apiFetch(`${API_URL}/users/${id}/avatar`, {
       method: 'POST',
       headers: {
         ...(token ? { 'Authorization': `Bearer ${token}` } : {})
@@ -120,21 +503,27 @@ export const uploadAvatar = async (id: string, file: File): Promise<string | nul
 
 export const createMember = async (userData: any): Promise<boolean> => {
   try {
-    const response = await fetch(`${API_URL}/users`, {
+    const response = await apiFetch(`${API_URL}/users`, {
       method: 'POST',
       headers: getHeaders(),
       body: JSON.stringify(userData)
     });
-    return response.ok;
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || 'Erro ao criar membro no servidor');
+    }
+    
+    return true;
   } catch (error) {
     console.error("API Error (createMember):", error);
-    return false;
+    throw error;
   }
 };
 
 export const deleteUser = async (id: string): Promise<boolean> => {
   try {
-    const response = await fetch(`${API_URL}/users/${id}`, {
+    const response = await apiFetch(`${API_URL}/users/${id}`, {
       method: 'DELETE',
       headers: getHeaders()
     });
@@ -147,7 +536,7 @@ export const deleteUser = async (id: string): Promise<boolean> => {
 
 export const getAttendanceById = async (id: string): Promise<Attendance | undefined> => {
   try {
-    const response = await fetch(`${API_URL}/attendances/${id}`, {
+    const response = await apiFetch(`${API_URL}/attendances/${id}`, {
       headers: getHeaders()
     });
     if (!response.ok) return undefined;
@@ -165,7 +554,7 @@ export const getAttendanceById = async (id: string): Promise<Attendance | undefi
 
 export const getTenants = async (): Promise<any[]> => {
   try {
-    const response = await fetch(`${API_URL}/tenants`, {
+    const response = await apiFetch(`${API_URL}/tenants`, {
       headers: getHeaders()
     });
     if (!response.ok) throw new Error('Falha ao buscar tenants');
@@ -183,7 +572,7 @@ export const getTenants = async (): Promise<any[]> => {
 
 export const getTeams = async (tenantId: string): Promise<any[]> => {
   try {
-    const response = await fetch(`${API_URL}/teams?tenantId=${tenantId}`, {
+    const response = await apiFetch(`${API_URL}/teams?tenantId=${tenantId}`, {
       headers: getHeaders()
     });
     if (!response.ok) throw new Error('Falha ao buscar equipes');
@@ -196,7 +585,7 @@ export const getTeams = async (tenantId: string): Promise<any[]> => {
 
 export const createTeam = async (teamData: any): Promise<boolean> => {
   try {
-    const response = await fetch(`${API_URL}/teams`, {
+    const response = await apiFetch(`${API_URL}/teams`, {
       method: 'POST',
       headers: getHeaders(),
       body: JSON.stringify(teamData)
@@ -210,7 +599,7 @@ export const createTeam = async (teamData: any): Promise<boolean> => {
 
 export const updateTeam = async (id: string, teamData: any): Promise<boolean> => {
   try {
-    const response = await fetch(`${API_URL}/teams/${id}`, {
+    const response = await apiFetch(`${API_URL}/teams/${id}`, {
       method: 'PUT',
       headers: getHeaders(),
       body: JSON.stringify(teamData)
@@ -222,26 +611,86 @@ export const updateTeam = async (id: string, teamData: any): Promise<boolean> =>
   }
 };
 
-export const createTenant = async (tenantData: any): Promise<boolean> => {
+export const deleteTeam = async (id: string): Promise<boolean> => {
   try {
-    const response = await fetch(`${API_URL}/tenants`, {
+    const response = await apiFetch(`${API_URL}/teams/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteTeam):", error);
+    return false;
+  }
+};
+
+export const createTenant = async (tenantData: any): Promise<{ success: boolean; message?: string }> => {
+  try {
+    const response = await apiFetch(`${API_URL}/tenants`, {
       method: 'POST',
       headers: getHeaders(),
       body: JSON.stringify(tenantData)
     });
+    const data = await response.json().catch(() => null);
+    if (!response.ok) throw new Error(data?.error || 'Erro ao criar organização');
+    return { success: true, message: data?.message || 'Organização criada!' };
+  } catch (error: any) {
+    console.error("API Error (createTenant):", error);
+    return { success: false, message: error.message };
+  }
+};
+
+export const updateTenant = async (id: string, tenantData: any): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/tenants/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(tenantData)
+    });
     return response.ok;
   } catch (error) {
-    console.error("API Error (createTenant):", error);
+    console.error("API Error (updateTenant):", error);
+    return false;
+  }
+};
+
+export const deleteTenant = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/tenants/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteTenant):", error);
     return false;
   }
 };
 
 // --- Auth Functions ---
 
+// Flag to prevent background fetches from throwing 401 and logging out during impersonation handoffs
+export let isReloadingForImpersonation = false;
+
 export const logout = () => {
+  if (isReloadingForImpersonation) return; // Prevent logout if we are just switching tokens
+  
+  const refreshToken = localStorage.getItem('ctms_refresh_token');
+  
+  // Clear local storage synchronously for instant UI update
   localStorage.removeItem('ctms_token');
+  localStorage.removeItem('ctms_refresh_token');
   localStorage.removeItem('ctms_user_id');
   localStorage.removeItem('ctms_tenant_id');
+
+  // Attempt to revoke in background
+  if (refreshToken) {
+    fetch(`${API_URL}/auth/logout`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken })
+    }).catch(e => console.error("Failed to revoke refresh token", e));
+  }
 };
 
 export const login = async (credentials: any): Promise<any> => {
@@ -262,14 +711,83 @@ export const login = async (credentials: any): Promise<any> => {
   const data = isJson ? await response.json() : null;
   if (data && data.token) {
     localStorage.setItem('ctms_token', data.token);
+    if (data.refreshToken) localStorage.setItem('ctms_refresh_token', data.refreshToken);
     localStorage.setItem('ctms_user_id', data.user.id);
     localStorage.setItem('ctms_tenant_id', data.user.tenant_id || '');
   }
   return data;
 };
 
+export const impersonateTenant = async (tenantId: string): Promise<any> => {
+  const response = await apiFetch(`${API_URL}/impersonate/${tenantId}`, {
+    method: 'POST',
+    headers: getHeaders()
+  });
+
+  const contentType = response.headers.get("content-type");
+  const isJson = contentType && contentType.indexOf("application/json") !== -1;
+
+  if (!response.ok) {
+    const errorData = isJson ? await response.json() : { error: 'Erro no servidor' };
+    throw new Error(errorData.error || 'Erro ao assumir identidade');
+  }
+
+  isReloadingForImpersonation = true; // Block logouts
+
+  const data = await response.json();
+  const oldToken = localStorage.getItem('ctms_token');
+  if (oldToken) {
+    localStorage.setItem('ctms_super_admin_token', oldToken);
+  }
+  
+  localStorage.setItem('ctms_token', data.token);
+  localStorage.setItem('ctms_user_id', data.user.id);
+  localStorage.setItem('ctms_tenant_id', data.user.tenant_id || '');
+  
+  window.location.hash = '#/';
+  window.location.reload();
+  
+  return data;
+};
+
+export const returnToSuperAdmin = (): boolean => {
+  const superAdminToken = localStorage.getItem('ctms_super_admin_token');
+  if (superAdminToken) {
+    try {
+      isReloadingForImpersonation = true; // Block logouts
+
+      // Correctly decode Base64Url JWT payload with proper padding
+      const base64Url = superAdminToken.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(''));
+      const payload = JSON.parse(jsonPayload);
+
+      localStorage.setItem('ctms_token', superAdminToken);
+      localStorage.setItem('ctms_user_id', payload.id);
+      localStorage.setItem('ctms_tenant_id', payload.tenant_id || 'system');
+      localStorage.removeItem('ctms_super_admin_token');
+      
+      window.location.hash = '#/super-admin';
+      window.location.reload();
+      return true;
+    } catch (e) {
+      isReloadingForImpersonation = false;
+      console.error("Failed to restore super admin token", e);
+      return false;
+    }
+  }
+  return false;
+};
+
 export const register = async (userData: any): Promise<boolean> => {
-  const response = await fetch(`${API_URL}/auth/register`, {
+  const response = await apiFetch(`${API_URL}/auth/register`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(userData)
@@ -282,7 +800,7 @@ export const register = async (userData: any): Promise<boolean> => {
 };
 
 export const verifyCode = async (data: any): Promise<boolean> => {
-  const response = await fetch(`${API_URL}/auth/verify`, {
+  const response = await apiFetch(`${API_URL}/auth/verify`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(data)
@@ -295,7 +813,7 @@ export const verifyCode = async (data: any): Promise<boolean> => {
 };
 
 export const forgotPassword = async (email: string): Promise<string> => {
-  const response = await fetch(`${API_URL}/auth/forgot-password`, {
+  const response = await apiFetch(`${API_URL}/auth/forgot-password`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ email })
@@ -313,11 +831,11 @@ export const forgotPassword = async (email: string): Promise<string> => {
   return data.message;
 };
 
-export const resetPassword = async (password: string, token: string): Promise<string> => {
-  const response = await fetch(`${API_URL}/auth/reset-password`, {
+export const resetPassword = async (password: string, token: string, name?: string): Promise<string> => {
+  const response = await apiFetch(`${API_URL}/auth/reset-password`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ password, token })
+    body: JSON.stringify({ password, token, name })
   });
   
   const contentType = response.headers.get("content-type");

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,16 +7,49 @@ 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 OriginItemDef {
+  id: string;
+  origin_group_id: string;
+  name: string;
+  color_class: string;
+}
+
+export interface OriginGroupDef {
+  id: string;
+  tenant_id: string;
+  name: string;
+  items: OriginItemDef[];
+  teamIds: string[];
+}
+
 export interface User {
   id: string;
   tenant_id: string;
   name: string;
   email: string;
+  slug?: string;
   avatar_url: string;
   role: 'super_admin' | 'admin' | 'manager' | 'agent';
   team_id: string;
   bio?: string;
   status: 'active' | 'inactive';
+  sound_enabled?: boolean;
 }
 
 export interface Attendance {
@@ -24,14 +57,15 @@ export interface Attendance {
   tenant_id: string;
   user_id: string;
   created_at: string; // ISO Date
-  summary: string;
+  title: string;
+  full_summary?: string;
   attention_points: string[];
   improvement_points: string[];
   score: number; // 0-100
   first_response_time_min: number;
   handling_time_min: number;
-  funnel_stage: FunnelStage;
-  origin: 'WhatsApp' | 'Instagram' | 'Website' | 'LinkedIn' | 'Indicação';
+  funnel_stage: string;
+  origin: string;
   product_requested: string;
   product_sold?: string;
   converted: boolean;