update docker compose again uhuu

revert update docker compose again

.env.example

@@ -3,9 +3,11 @@ DB_HOST=db
 DB_USER=root
 DB_PASSWORD=root_password
 DB_NAME=agenciac_comia
+JWT_SECRET=your_jwt_secret_here
 
-# Gitea Runner Configuration
-GITEA_INSTANCE_URL=https://gitea.blyzer.com.br
-GITEA_RUNNER_REGISTRATION_TOKEN=your_token_here
-GITEA_RUNNER_NAME=fasto-runner
-GITEA_RUNNER_LABELS=ubuntu-latest:docker://node:16-bullseye
+# Mailer Configuration
+SMTP_HOST=mail.blyzer.com.br
+SMTP_PORT=587
+SMTP_USER=nao-responda@blyzer.com.br
+SMTP_PASS=your_smtp_password_here
+MAIL_FROM=nao-responda@blyzer.com.br

App.tsx

@@ -1,20 +1,103 @@
-import React 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 { Login } from './pages/Login';
-import { UserProfile } from './pages/UserProfile';
+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 AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+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();
-  const isLoginPage = location.pathname === '/login';
 
-  if (isLoginPage) {
-    return <>{children}</>;
+  useEffect(() => {
+    const checkAuth = async () => {
+      const storedUserId = localStorage.getItem("ctms_user_id");
+      const storedToken = localStorage.getItem("ctms_token");
+
+      if (
+        !storedUserId ||
+        !storedToken ||
+        storedToken === "undefined" ||
+        storedToken === "null"
+      ) {
+        if (storedToken) logout(); // Limpar se for "undefined" string
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const fetchedUser = await getUserById(storedUserId);
+        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 (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);
+      }
+    };
+    checkAuth();
+  }, [location.pathname]);
+
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-400">
+        Carregando...
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (roles && !roles.includes(user.role)) {
+    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>;
@@ -23,19 +106,93 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 const App: React.FC = () => {
   return (
     <Router>
-      <AppLayout>
       <Routes>
         <Route path="/login" element={<Login />} />
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/users" element={<Navigate to="/admin/users" replace />} />
-          <Route path="/admin/users" element={<TeamManagement />} />
-          <Route path="/users/:id" element={<UserDetail />} />
-          <Route path="/attendances/:id" element={<AttendanceDetail />} />
-          <Route path="/super-admin" element={<SuperAdmin />} />
-          <Route path="/profile" element={<UserProfile />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
+        <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>
-      </AppLayout>
     </Router>
   );
 };

Dockerfile

@@ -4,9 +4,6 @@ FROM node:22-alpine AS builder
 WORKDIR /app
 
 COPY package.json ./
-# In a real scenario, copy package-lock.json too
-# COPY package-lock.json ./
-
 RUN npm install
 
 COPY . .
@@ -20,18 +17,19 @@ WORKDIR /app
 
 ENV NODE_ENV=production
 
-COPY package.json ./
-COPY backend/package.json ./backend/
+# Copy backend package.json as main package.json
+COPY backend/package.json ./package.json
 
-# Install dependencies (including production deps for backend)
+# Install dependencies
 RUN npm install --omit=dev
 
-# Copy backend source
-COPY backend/ ./backend/
+# Copy backend source directly into root
+COPY backend/index.js ./index.js
+COPY backend/db.js ./db.js
 
-# Copy built frontend from builder stage
+# Copy built frontend
 COPY --from=builder /app/dist ./dist
 
 EXPOSE 3001
 
-CMD ["node", "backend/index.js"]
+CMD ["node", "index.js"]

GEMINI.md

@@ -1,44 +1,81 @@
 # 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.
 
-## Architecture
-- **Frontend**: React, TypeScript, Vite.
-- **Backend**: Node.js, Express, MySQL2.
-- **Database**: MySQL 8.0.
+## 🚀 Recent Major Changes (March 2026)
+We have transitioned from a mock-based prototype to a **secure, multi-tenant production architecture**:
+
+- **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), 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.
 
-## Prerequisites
+## 📋 Prerequisites
 - Docker & Docker Compose
 - Node.js (for local development outside Docker)
 
-## Setup & Running
+## ⚙️ Setup & Running
 
 ### 1. Environment Variables
-Copy `.env.example` to `.env` and adjust the values:
+Copy `.env.example` to `.env` and adjust values:
 ```bash
 cp .env.example .env
 ```
-Ensure you set the database credentials and Gitea Runner token if you plan to run the runner locally.
+*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. A `docker-compose.yml` file is provided which spins up a MySQL container and 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
-- Database: Exposed on port 3306 (internal to network mostly, but mapped if needed)
+- **App**: http://localhost:3001
+- **Database**: Port 3306
 
 ### 4. Gitea Runner
 The `docker-compose.yml` includes a service for a Gitea Runner (`fasto-runner`).
-- Ensure `GITEA_RUNNER_REGISTRATION_TOKEN` is set in `.env`.
-- The runner data is persisted in `./fasto_runner/data`.
+- Persistent data is in `./fasto_runner/data`.
 
-## CI/CD Pipeline
+## 🔄 CI/CD Pipeline
 The project uses Gitea Actions defined in `.gitea/workflows/build-deploy.yaml`.
 - **Triggers**: Push to `main` or `master`.
 - **Steps**:
@@ -46,13 +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` (Optional build arg)
 
-## Development
-- **Frontend**: `npm run dev` (Runs on port 3000)
-- **Backend**: `node backend/index.js` (Runs on port 3001)
-*Note: For local dev, you might need to run a local DB or point to the dockerized one.*
+## 💻 Development
+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

@@ -36,7 +36,7 @@ CREATE TABLE `attendances` (
   `first_response_time_min` int DEFAULT '0',
   `handling_time_min` int DEFAULT '0',
   `funnel_stage` enum('Sem atendimento','Identificação','Negociação','Ganhos','Perdidos') NOT NULL,
-  `origin` enum('WhatsApp','Instagram','Website','LinkedIn','Referral') NOT NULL,
+  `origin` enum('WhatsApp','Instagram','Website','LinkedIn','Indicação') NOT NULL,
   `product_requested` varchar(255) DEFAULT NULL,
   `product_sold` varchar(255) DEFAULT NULL,
   `converted` tinyint(1) DEFAULT '0',
@@ -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,12 +88,37 @@ 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');
+-- --------------------------------------------------------
+
+--
+-- Estrutura da tabela `pending_registrations`
+--
+
+CREATE TABLE `pending_registrations` (
+  `email` varchar(255) NOT NULL,
+  `password_hash` varchar(255) NOT NULL,
+  `full_name` varchar(255) NOT NULL,
+  `organization_name` varchar(255) NOT NULL,
+  `verification_code` varchar(10) NOT NULL,
+  `expires_at` timestamp NOT NULL,
+  `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`email`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Estrutura da tabela `password_resets`
+--
+
+CREATE TABLE `password_resets` (
+  `email` varchar(255) NOT NULL,
+  `token` varchar(255) NOT NULL,
+  `expires_at` timestamp NOT NULL,
+  `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`token`),
+  KEY `email` (`email`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 -- --------------------------------------------------------
 
@@ -115,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,
@@ -126,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
 --

backend/package.json

@@ -1,3 +1,17 @@
 {
-  "type": "commonjs"
+  "name": "fasto-backend",
+  "version": "1.0.0",
+  "type": "commonjs",
+  "main": "index.js",
+  "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.3",
+    "multer": "^1.4.5-lts.1",
+    "mysql2": "^3.9.1",
+    "nodemailer": "^8.0.1",
+    "uuid": "^9.0.1"
+  }
 }

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 border border-slate-200 px-3 py-2 rounded-lg shadow-sm hover:border-slate-300 transition-colors">
-      <Calendar size={16} className="text-slate-500 shrink-0" />
-      <div className="flex items-center gap-2 text-sm">
+    <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 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-slate-700 font-medium outline-none cursor-pointer w-28 md:w-auto"
+            className="absolute opacity-0 w-0 h-0 overflow-hidden"
           />
-        <span className="text-slate-400">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-slate-700 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

@@ -11,21 +11,20 @@ interface KPICardProps {
   colorClass?: string;
 }
 
-export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend, trendValue, icon: Icon, colorClass = "bg-blue-500" }) => {
+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-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 p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-between hover:shadow-md transition-shadow duration-300">
+    <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">
       <div className="flex justify-between items-start mb-4">
         <div>
-          <h3 className="text-slate-500 text-sm font-medium mb-1">{title}</h3>
-          <div className="text-3xl font-bold text-slate-800 tracking-tight">{value}</div>
-        </div>
-        <div className={`p-3 rounded-xl ${colorClass} bg-opacity-10 text-opacity-100`}>
-          {/* Note: In Tailwind bg-opacity works if colorClass is like 'bg-blue-500'. 
-              Here we assume the consumer passes specific utility classes or we construct them.
-              Simpler approach: Use a wrapper */}
-           <div className={`w-8 h-8 flex items-center justify-center rounded-lg ${colorClass.replace('text', 'bg').replace('500', '100')} ${colorClass}`}>
-             <Icon size={20} />
+          <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.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>
       
@@ -33,7 +32,8 @@ 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>}
-          {subValue && <span className="text-slate-400">{subValue}</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>
       )}
     </div>

components/Layout.tsx

@@ -1,17 +1,27 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import { LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut, Hexagon, Settings, Building2 } from 'lucide-react';
-import { USERS } from '../constants';
+import { 
+  LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut, 
+  Hexagon, Settings, Building2, Sun, Moon, Loader2, Layers,
+  ChevronLeft, ChevronRight, Key, Target
+} from 'lucide-react';
+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
-          ? 'bg-yellow-400 text-slate-900 font-semibold shadow-md shadow-yellow-400/20'
-          : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
+          ? 'bg-brand-yellow text-zinc-950 font-semibold shadow-md shadow-brand-yellow/20'
+          : 'text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border hover:text-zinc-900 dark:hover:text-dark-text'
       }`
     }
   >
@@ -22,29 +32,145 @@ 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>(USERS[1]); // Default to standard user fallback
+  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');
-    if (storedUserId) {
-      const user = USERS.find(u => u.id === storedUserId);
+      if (!storedUserId) {
+        navigate('/login');
+        return;
+      }
+
+      try {
+        const user = await getUserById(storedUserId);
         if (user) {
           setCurrentUser(user);
+        } else {
+          navigate('/login');
         }
+      } catch (err) {
+        console.error("Layout fetch failed:", err);
       }
-  }, []);
+    };
+    fetchCurrentUser();
+    loadNotifications();
+    const interval = setInterval(loadNotifications, 10000);
+    return () => clearInterval(interval);
+  }, [navigate]);
 
   const handleLogout = () => {
-    localStorage.removeItem('ctms_user_id');
+    logout();
     navigate('/login');
   };
 
+  const toggleDarkMode = () => {
+    const newDark = !isDark;
+    setIsDark(newDark);
+    if (newDark) {
+      document.documentElement.classList.add('dark');
+      document.cookie = "dark_mode=1; path=/; max-age=31536000";
+    } else {
+      document.documentElement.classList.remove('dark');
+      document.cookie = "dark_mode=0; path=/; max-age=31536000";
+    }
+  };
+
   // Simple title mapping based on route
   const getPageTitle = () => {
     if (location.pathname === '/') return 'Dashboard';
-    if (location.pathname.includes('/admin/users')) return 'Gestão de Equipe';
+    if (location.pathname.includes('/admin/users')) return 'Membros';
+    if (location.pathname.includes('/admin/teams')) return 'Times';
     if (location.pathname.includes('/users/')) return 'Histórico do Usuário';
     if (location.pathname.includes('/attendances')) return 'Detalhes do Atendimento';
     if (location.pathname.includes('/super-admin')) return 'Gestão de Organizações';
@@ -52,71 +178,138 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
     return 'CTMS';
   };
 
+  if (!currentUser) return null;
+
   const isSuperAdmin = currentUser.role === 'super_admin';
 
   return (
-    <div className="flex h-screen bg-slate-50 overflow-hidden">
+    <div className="flex h-screen bg-zinc-50 dark:bg-dark-bg overflow-hidden transition-colors duration-300">
       {/* Sidebar */}
       <aside
-        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-slate-200 transform transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0 ${
+        className={`fixed inset-y-0 left-0 z-50 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-slate-100">
-            <div className="bg-slate-900 text-white p-2 rounded-lg">
+        {/* 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-slate-900 tracking-tight">Fasto<span className="text-yellow-500">.</span></span>
-            <button onClick={() => setIsMobileMenuOpen(false)} className="ml-auto lg:hidden text-slate-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="Equipe" 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-slate-400 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} />
-              </>
               )}
+              <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>
 
-            <div className="pt-4 pb-2 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
-              Sistema
-            </div>
-            <SidebarItem to="/profile" icon={UserCircle} label="Perfil" collapsed={false} />
-          </nav>
-
-          {/* User Profile Mini */}
-          <div className="p-4 border-t border-slate-100">
-            <div className="flex items-center gap-3 p-2 rounded-lg bg-slate-50 border border-slate-100">
-              <img src={currentUser.avatar_url} alt="User" className="w-10 h-10 rounded-full object-cover" />
+        {/* User Profile Mini - Now Clickable to Profile */}
+        <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 ${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 shrink-0" 
+              />
+              {!isSidebarCollapsed && (
                 <div className="flex-1 min-w-0">
-                <p className="text-sm font-semibold text-slate-900 truncate">{currentUser.name}</p>
-                <p className="text-xs text-slate-500 truncate capitalize">{currentUser.role === 'super_admin' ? 'Super Admin' : currentUser.role}</p>
+                  <p className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{currentUser.name}</p>
+                  <p className="text-xs text-zinc-500 dark:text-dark-muted truncate capitalize">
+                    {currentUser.role === 'super_admin' ? 'Super Admin' : 
+                      currentUser.role === 'admin' ? 'Administrador' :
+                      currentUser.role === 'manager' ? 'Gerente' : 'Agente'}
+                  </p>
                 </div>
+              )}
+            </div>
+            {!isSidebarCollapsed && (
               <button 
                 onClick={handleLogout}
-                className="text-slate-400 hover:text-red-500 transition-colors"
+                className="text-zinc-400 hover:text-red-500 transition-colors shrink-0 p-2"
                 title="Sair"
               >
                 <LogOut size={18} />
               </button>
-            </div>
+            )}
           </div>
         </div>
       </aside>
@@ -124,32 +317,268 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Main Content */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <header className="h-20 bg-white border-b border-slate-200 px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0">
-          <div className="flex items-center gap-4">
-            <button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-slate-500 hover:text-slate-900">
+        <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-slate-800 hidden sm:block">{getPageTitle()}</h1>
           </div>
 
-          <div className="flex items-center gap-4 sm:gap-6">
-            {/* Search Bar */}
-            <div className="hidden md:flex items-center bg-slate-100 rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white focus-within:border-yellow-400 focus-within:ring-2 focus-within:ring-yellow-100 transition-all">
-              <Search size={18} className="text-slate-400" />
+          {/* 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="Buscar..." 
-                className="bg-transparent border-none outline-none text-sm ml-2 w-full text-slate-700 placeholder-slate-400" 
+                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}
+              className="p-2.5 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-xl transition-all"
+              title={isDark ? "Mudar para Modo Claro" : "Mudar para Modo Escuro"}
+            >
+              {isDark ? <Sun size={20} /> : <Moon size={20} />}
+            </button>
+
             {/* Notifications */}
             <div className="relative">
-              <button className="p-2 text-slate-500 hover:bg-slate-100 rounded-full relative transition-colors">
-                <Bell size={20} />
-                <span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-yellow-400 rounded-full border-2 border-white"></span>
+              <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>
 
@@ -162,10 +591,17 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Overlay for mobile */}
       {isMobileMenuOpen && (
         <div
-          className="fixed inset-0 bg-slate-900/50 z-40 lg:hidden"
+          className="fixed inset-0 bg-zinc-950/50 z-40 lg:hidden"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
+
+      {/* Hidden Audio Player for Notifications */}
+      <audio 
+        ref={audioRef} 
+        src={notificationSound} 
+        preload="auto" 
+      />
     </div>
   );
 };

components/ProductLists.tsx

@@ -14,29 +14,29 @@ interface ProductListsProps {
 
 export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
   const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
-    <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex-1">
+    <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex-1 transition-colors">
       <div className="flex items-center gap-2 mb-4">
-        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
+        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400' : 'bg-green-100 dark:bg-green-950/50 text-green-600 dark:text-green-400'}`}>
           <Icon size={18} />
         </div>
-        <h3 className="font-bold text-slate-800">{title}</h3>
+        <h3 className="font-bold text-zinc-800 dark:text-dark-text">{title}</h3>
       </div>
       <ul className="space-y-4">
         {data.map((item, idx) => (
           <li key={idx} className="flex items-center justify-between group">
             <div className="flex items-center gap-3">
-              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-500'}`}>
+              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-zinc-800 dark:bg-brand-yellow text-white dark:text-zinc-950' : 'bg-zinc-100 dark:bg-dark-bg text-zinc-500 dark:text-dark-muted'}`}>
                 {idx + 1}
               </span>
-              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
+              <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-dark-text">{item.name}</span>
             </div>
             <div className="text-right">
-              <span className="text-sm font-bold text-slate-900 block">{item.count}</span>
-              <span className="text-[10px] text-slate-400">{item.percentage}%</span>
+              <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100 block">{item.count}</span>
+              <span className="text-[10px] text-zinc-400 dark:text-dark-muted">{item.percentage}%</span>
             </div>
           </li>
         ))}
-        {data.length === 0 && <li className="text-sm text-slate-400 italic">Nenhum dado disponível.</li>}
+        {data.length === 0 && <li className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível.</li>}
       </ul>
     </div>
   );

components/SellersTable.tsx

@@ -15,14 +15,12 @@ interface SellersTableProps {
   data: SellerStat[];
 }
 
-type SortKey = keyof SellerStat | 'name'; // 'name' is inside user object
-
 export const SellersTable: React.FC<SellersTableProps> = ({ data }) => {
   const navigate = useNavigate();
-  const [sortKey, setSortKey] = useState<SortKey>('conversionRate');
+  const [sortKey, setSortKey] = useState<keyof SellerStat>('total');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
 
-  const handleSort = (key: SortKey) => {
+  const handleSort = (key: keyof SellerStat) => {
     if (sortKey === key) {
       setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
     } else {
@@ -33,111 +31,123 @@ export const SellersTable: React.FC<SellersTableProps> = ({ data }) => {
 
   const sortedData = useMemo(() => {
     return [...data].sort((a, b) => {
-      let aValue: any = a[sortKey as keyof SellerStat];
-      let bValue: any = b[sortKey as keyof SellerStat];
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
       
-      if (sortKey === 'name') {
-        aValue = a.user.name;
-        bValue = b.user.name;
-      } else {
-        // Convert strings like "85.5" to numbers for sorting
-        aValue = parseFloat(aValue as string);
-        bValue = parseFloat(bValue as string);
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        return sortDirection === 'asc' 
+          ? aVal.localeCompare(bVal) 
+          : bVal.localeCompare(aVal);
+      }
+      
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+
+      // Handle user object (sort by name)
+      if (sortKey === 'user') {
+        return sortDirection === 'asc' 
+          ? a.user.name.localeCompare(b.user.name) 
+          : b.user.name.localeCompare(a.user.name);
       }
 
-      if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
-      if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
       return 0;
     });
   }, [data, sortKey, sortDirection]);
 
-  const SortIcon = ({ column }: { column: SortKey }) => {
-    if (sortKey !== column) return <ChevronsUpDown size={14} className="text-slate-300" />;
-    return sortDirection === 'asc' ? <ChevronUp size={14} className="text-blue-500" /> : <ChevronDown size={14} className="text-blue-500" />;
+  const SortIcon = ({ column }: { column: string }) => {
+    if (sortKey !== column) return <ChevronsUpDown size={14} className="text-zinc-300 dark:text-dark-muted" />;
+    return sortDirection === 'asc' ? <ChevronUp size={14} className="text-brand-yellow" /> : <ChevronDown size={14} className="text-brand-yellow" />;
   };
 
   return (
-    <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-      <div className="px-6 py-5 border-b border-slate-100 flex justify-between items-center">
-        <h3 className="font-bold text-slate-800">Ranking de Vendedores</h3>
+    <div className="bg-white dark:bg-dark-card rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border overflow-hidden transition-colors">
+      <div className="px-6 py-5 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center">
+        <h3 className="font-bold text-zinc-800 dark:text-dark-text">Ranking de Vendedores</h3>
       </div>
       <div className="overflow-x-auto">
         <table className="w-full text-left border-collapse">
           <thead>
-            <tr className="bg-slate-50/50 text-slate-500 text-xs uppercase tracking-wider">
+            <tr className="bg-zinc-50/50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-wider">
               <th 
-                className="px-6 py-4 font-semibold cursor-pointer hover:bg-slate-50 select-none"
-                onClick={() => handleSort('name')}
+                className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
+                onClick={() => handleSort('user')}
               >
-                <div className="flex items-center gap-2">Usuário <SortIcon column="name" /></div>
+                <div className="flex items-center gap-2">Usuário <SortIcon column="user" /></div>
               </th>
               <th 
-                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
+                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
                 onClick={() => handleSort('total')}
               >
                 <div className="flex items-center justify-center gap-2">Atendimentos <SortIcon column="total" /></div>
               </th>
               <th 
-                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
+                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
                 onClick={() => handleSort('avgScore')}
               >
                 <div className="flex items-center justify-center gap-2">Nota Média <SortIcon column="avgScore" /></div>
               </th>
                <th 
-                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
+                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
                 onClick={() => handleSort('responseTime')}
               >
                 <div className="flex items-center justify-center gap-2">Tempo Resp. <SortIcon column="responseTime" /></div>
               </th>
               <th 
-                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none"
+                className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
                 onClick={() => handleSort('conversionRate')}
               >
                 <div className="flex items-center justify-center gap-2">Conversão <SortIcon column="conversionRate" /></div>
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-slate-100">
+          <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
             {sortedData.map((item, idx) => (
               <tr 
                 key={item.user.id} 
-                className="hover:bg-blue-50/30 transition-colors cursor-pointer group"
-                onClick={() => navigate(`/users/${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.slug || item.user.id}`)}
               >
                 <td className="px-6 py-4">
                   <div className="flex items-center gap-3">
-                    <span className="text-xs text-slate-400 font-mono w-4">#{idx + 1}</span>
-                    <img src={item.user.avatar_url} alt="" className="w-9 h-9 rounded-full object-cover border border-slate-200" />
+                    <span className="text-xs text-zinc-400 dark:text-dark-muted font-mono w-4">#{idx + 1}</span>
+                    <img 
+                      src={item.user.avatar_url 
+                        ? (item.user.avatar_url.startsWith('http') ? item.user.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${item.user.avatar_url}`)
+                        : `https://ui-avatars.com/api/?name=${encodeURIComponent(item.user.name)}&background=random`} 
+                      alt="" 
+                      className="w-9 h-9 rounded-full object-cover border border-zinc-200 dark:border-dark-border" 
+                    />
                     <div>
-                      <div className="font-semibold text-slate-900 group-hover:text-blue-600 transition-colors">{item.user.name}</div>
-                      <div className="text-xs text-slate-500">{item.user.email}</div>
+                      <div className="font-semibold text-zinc-900 dark:text-dark-text group-hover:text-yellow-600 dark:group-hover:text-brand-yellow transition-colors">{item.user.name}</div>
+                      <div className="text-xs text-zinc-500 dark:text-dark-muted">{item.user.email}</div>
                     </div>
                   </div>
                 </td>
-                <td className="px-6 py-4 text-center text-slate-600 font-medium">
+                <td className="px-6 py-4 text-center text-zinc-600 dark:text-dark-text font-medium">
                   {item.total}
                 </td>
                 <td className="px-6 py-4 text-center">
-                  <span className={`inline-flex px-2 py-1 rounded-full text-xs font-bold ${parseFloat(item.avgScore) >= 80 ? 'bg-green-100 text-green-700' : parseFloat(item.avgScore) >= 60 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>
+                  <span className={`inline-flex px-2 py-1 rounded-full text-xs font-bold ${parseFloat(item.avgScore) >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : parseFloat(item.avgScore) >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'}`}>
                     {item.avgScore}
                   </span>
                 </td>
-                 <td className="px-6 py-4 text-center text-slate-600 text-sm">
+                 <td className="px-6 py-4 text-center text-zinc-600 dark:text-dark-text text-sm">
                   {item.responseTime} min
                 </td>
                 <td className="px-6 py-4 text-center">
                   <div className="flex items-center justify-center gap-2">
-                    <div className="w-16 bg-slate-100 rounded-full h-1.5 overflow-hidden">
-                      <div className="bg-blue-500 h-1.5 rounded-full" style={{ width: `${item.conversionRate}%` }}></div>
+                    <div className="w-16 bg-zinc-100 dark:bg-dark-bg rounded-full h-1.5 overflow-hidden border dark:border-dark-border">
+                      <div className="bg-brand-yellow h-1.5 rounded-full" style={{ width: `${item.conversionRate}%` }}></div>
                     </div>
-                    <span className="text-xs font-semibold text-slate-700">{item.conversionRate}%</span>
+                    <span className="text-xs font-semibold text-zinc-700 dark:text-dark-text">{item.conversionRate}%</span>
                   </div>
                 </td>
               </tr>
             ))}
             {sortedData.length === 0 && (
               <tr>
-                <td colSpan={5} className="px-6 py-8 text-center text-slate-400 italic">Nenhum dado disponível para o período selecionado.</td>
+                <td colSpan={5} className="px-6 py-8 text-center text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível para o período selecionado.</td>
               </tr>
             )}
           </tbody>

constants.ts

@@ -1,173 +1,39 @@
 
-import { Attendance, FunnelStage, Tenant, User } from './types';
-
-export const CURRENT_TENANT_ID = 'tenant_123';
-
-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', 'Referral'] 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 = {
   primary: '#facc15', // Yellow-400
-  secondary: '#1e293b', // Slate-800
-  success: '#22c55e',
-  warning: '#f59e0b',
-  danger: '#ef4444',
-  charts: ['#3b82f6', '#10b981', '#6366f1', '#f59e0b', '#ec4899', '#8b5cf6'],
+  secondary: '#18181b', // Zinc-900
+  success: '#10b981', // Emerald-500
+  warning: '#f59e0b', // Amber-500
+  danger: '#ef4444', // Red-500
+  
+  // Prettier, modern SaaS palette for general charts
+  charts: [
+    '#818cf8', // Soft Indigo
+    '#4ade80', // Soft Emerald
+    '#fb923c', // Soft Orange
+    '#22d3ee', // Soft Cyan
+    '#f472b6', // Soft Pink
+    '#a78bfa'  // Soft Violet
+  ],
+
+  // Brand-specific colors for Lead Origins
+    origins: {
+    'WhatsApp': '#25D366',
+    'Instagram': '#E4405F',
+    'LinkedIn': '#0077B5',
+    'Website': '#f87171', // Coral Red (Distinct from LinkedIn blue)
+    'Indicação': '#f59e0b'
+  },
+
+  // Semantic palette for Funnel Stages
+  funnel: {
+    'Sem atendimento': '#64748b', // Slate-500
+    'Identificação': '#818cf8',   // Indigo-400
+    'Negociação': '#fb923c',     // Orange-400
+    'Ganhos': '#10b981',         // Emerald-500
+    'Perdidos': '#f87171'        // Red-400
+  }
 };

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

@@ -0,0 +1,40 @@
+services:
+  app:
+    build: .
+    container_name: fasto-app-local
+    restart: unless-stopped
+    ports:
+      - "3001:3001"
+    environment:
+      - NODE_ENV=production
+      - PORT=3001
+      - DB_HOST=db
+      - 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}
+    volumes:
+      - ./dist:/app/dist # Map local build to container
+      - ./backend/index.js:/app/index.js
+      - ./backend/db.js:/app/db.js
+    command: ["node", "index.js"]
+    depends_on:
+      - db
+
+  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}
+    volumes:
+      - ./agenciac_comia.sql:/docker-entrypoint-initdb.d/init.sql
+      - db_data_local:/var/lib/mysql
+
+volumes:
+  db_data_local:

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();

index.html

@@ -3,40 +3,46 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CTMS | Commercial Team Management</title>
+    <title>Fasto | Management</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-      body {
-        font-family: 'Inter', sans-serif;
-        background-color: #f8fafc;
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              brand: {
+                yellow: '#facc15'
+              },
+              dark: {
+                bg: '#0a0a0a', // Deep Charcoal (Not pure black)
+                card: '#141414', // Elevated surface
+                header: '#141414',
+                sidebar: '#141414',
+                border: '#222222', // Subtle border
+                input: '#1a1a1a',
+                text: '#ededed', // High contrast off-white
+                muted: '#888888' // Muted gray
               }
-      /* Custom scrollbar for webkit */
-      ::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
             }
-      ::-webkit-scrollbar-track {
-        background: transparent;
           }
-      ::-webkit-scrollbar-thumb {
-        background: #cbd5e1;
-        border-radius: 3px;
         }
-    </style>
-  <script type="importmap">
-{
-  "imports": {
-    "react": "https://esm.sh/react@^19.2.4",
-    "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
-    "react/": "https://esm.sh/react@^19.2.4/",
-    "react-router-dom": "https://esm.sh/react-router-dom@^7.13.0",
-    "lucide-react": "https://esm.sh/lucide-react@^0.574.0",
-    "recharts": "https://esm.sh/recharts@^3.7.0"
       }
+      
+      // Check for theme in cookie or system preference
+      const isDark = document.cookie.split('; ').find(row => row.startsWith('dark_mode='))?.split('=')[1] === '1';
+      if (isDark) {
+        document.documentElement.classList.add('dark');
       }
     </script>
-<link rel="stylesheet" href="/index.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+      body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease; }
+      .dark body { background-color: #0a0a0a; color: #ededed; }
+      ::-webkit-scrollbar { width: 6px; height: 6px; }
+      ::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
+      .dark ::-webkit-scrollbar-thumb { background: #333333; }
+    </style>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -9,18 +9,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.3",
+    "lucide-react": "^0.574.0",
+    "multer": "^2.1.0",
+    "mysql2": "^3.9.1",
+    "nodemailer": "^8.0.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.13.0",
-    "lucide-react": "^0.574.0",
     "recharts": "^3.7.0",
-    "express": "^4.18.2",
-    "cors": "^2.8.5",
-    "mysql2": "^3.9.1"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "dotenv": "^17.3.1",
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   }

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);
@@ -31,14 +47,17 @@ export const AttendanceDetail: React.FC = () => {
     loadData();
   }, [id]);
 
-  if (loading) return <div className="p-12 text-center text-slate-400">Carregando detalhes...</div>;
-  if (!data) return <div className="p-12 text-center text-slate-500">Registro de atendimento não encontrado</div>;
+  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: string) => {
+    const def = funnelDefs.find(f => f.name === stage);
+    if (def) return def.color_class;
     
-  const getStageColor = (stage: FunnelStage) => {
     switch (stage) {
-      case FunnelStage.WON: return 'text-green-700 bg-green-50 border-green-200';
-      case FunnelStage.LOST: return 'text-red-700 bg-red-50 border-red-200';
-      default: return 'text-blue-700 bg-blue-50 border-blue-200';
+      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';
+      default: return 'text-blue-700 bg-blue-50 border-blue-200 dark:text-blue-400 dark:bg-blue-900/30 dark:border-blue-800';
     }
   };
 
@@ -48,51 +67,59 @@ export const AttendanceDetail: React.FC = () => {
     return 'text-red-500';
   };
 
+  const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
+
   return (
-    <div className="max-w-5xl mx-auto space-y-6">
+    <div className="max-w-5xl mx-auto space-y-6 transition-colors duration-300">
       {/* Top Nav & Context */}
       <div className="flex items-center justify-between">
         <Link 
           to={`/users/${data.user_id}`} 
-          className="flex items-center gap-2 text-slate-500 hover:text-slate-900 transition-colors text-sm font-medium"
+          className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors text-sm font-medium"
         >
           <ArrowLeft size={16} /> Voltar para Histórico
         </Link>
-        <div className="text-sm text-slate-400 font-mono">ID: {data.id}</div>
+        <div className="text-sm text-zinc-400 dark:text-dark-muted font-mono">ID: {data.id}</div>
       </div>
 
       {/* Hero Header */}
-      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 md:p-8">
+      <div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm p-6 md:p-8 transition-colors">
         <div className="flex flex-col md:flex-row justify-between gap-6">
           <div className="space-y-4">
              <div className="flex flex-wrap items-center gap-3">
               <span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${getStageColor(data.funnel_stage)}`}>
                 {data.funnel_stage}
               </span>
-              <span className="flex items-center gap-1.5 text-slate-500 text-sm">
+              <span className="flex items-center gap-1.5 text-zinc-500 dark:text-dark-muted text-sm">
                 <Calendar size={14} /> {new Date(data.created_at).toLocaleString('pt-BR')}
               </span>
-              <span className="flex items-center gap-1.5 text-slate-500 text-sm">
+              <span className="flex items-center gap-1.5 text-zinc-500 dark:text-dark-muted text-sm">
                  <MessageSquare size={14} /> {data.origin}
               </span>
             </div>
-            <h1 className="text-2xl md:text-3xl font-bold text-slate-900 leading-tight">
-              {data.summary}
+            <h1 className="text-2xl md:text-3xl font-bold text-zinc-900 dark:text-dark-text leading-tight">
+              {data.title}
             </h1>
             {agent && (
               <div className="flex items-center gap-3 pt-2">
-                <img src={agent.avatar_url} alt="" className="w-8 h-8 rounded-full border border-slate-200" />
-                <span className="text-sm font-medium text-slate-700">Agente: <span className="text-slate-900">{agent.name}</span></span>
+                <img 
+                  src={agent.avatar_url 
+                    ? (agent.avatar_url.startsWith('http') ? agent.avatar_url : `${backendUrl}${agent.avatar_url}`)
+                    : `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=random`} 
+                  alt="" 
+                  className="w-8 h-8 rounded-full border border-zinc-200 dark:border-dark-border object-cover" 
+                />
+                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Agente: <span className="text-zinc-900 dark:text-zinc-100">{agent.name}</span></span>
               </div>
             )}
           </div>
 
-          <div className="flex flex-col items-center justify-center min-w-[140px] p-6 bg-slate-50 rounded-xl border border-slate-100">
-            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Nota de Qualidade</span>
+          <div className="flex flex-col items-center justify-center min-w-[140px] p-6 bg-zinc-50 dark:bg-dark-bg/50 rounded-xl border border-zinc-100 dark:border-dark-border">
+            <span className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-wider mb-1">Nota de Qualidade</span>
             <div className={`text-5xl font-black ${getScoreColor(data.score)}`}>
               {data.score}
             </div>
-            <span className="text-xs font-medium text-slate-400 mt-1">de 100</span>
+            <span className="text-xs font-medium text-zinc-400 dark:text-dark-muted mt-1">de 100</span>
           </div>
         </div>
       </div>
@@ -104,60 +131,66 @@ export const AttendanceDetail: React.FC = () => {
         <div className="lg:col-span-2 space-y-6">
           
           {/* Summary / Transcript Stub */}
-          <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
-            <h3 className="text-base font-bold text-slate-900 mb-4 flex items-center gap-2">
-              <MessageSquare size={18} className="text-slate-400" />
+          <div className="bg-white dark:bg-dark-card rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm p-6">
+            <h3 className="text-base font-bold text-zinc-900 dark:text-dark-text mb-4 flex items-center gap-2">
+              <MessageSquare size={18} className="text-zinc-400 dark:text-dark-muted" />
               Resumo da Interação
             </h3>
-            <p className="text-slate-600 leading-relaxed text-sm">
-              {data.summary} O cliente perguntou sobre detalhes específicos relacionados ao <span className="font-medium text-slate-800">{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 */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {/* Points of Attention */}
-            <div className="bg-white rounded-xl border border-red-100 shadow-sm overflow-hidden">
-              <div className="px-5 py-3 bg-red-50/50 border-b border-red-100 flex items-center gap-2">
-                <AlertCircle size={18} className="text-red-500" />
-                <h3 className="font-bold text-red-900 text-sm">Pontos de Atenção</h3>
+            <div className="bg-white dark:bg-dark-card rounded-xl border border-red-100 dark:border-red-900/20 shadow-sm overflow-hidden">
+              <div className="px-5 py-3 bg-red-50/50 dark:bg-red-900/20 border-b border-red-100 dark:border-red-900/30 flex items-center gap-2">
+                <AlertCircle size={18} className="text-red-500 dark:text-red-400" />
+                <h3 className="font-bold text-red-900 dark:text-red-300 text-sm">Pontos de Atenção</h3>
               </div>
               <div className="p-5">
                 {data.attention_points && data.attention_points.length > 0 ? (
                   <ul className="space-y-3">
                     {data.attention_points.map((pt, idx) => (
-                      <li key={idx} className="flex gap-3 text-sm text-slate-700">
+                      <li key={idx} className="flex gap-3 text-sm text-zinc-700 dark:text-zinc-300">
                         <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-400 shrink-0" />
                         {pt}
                       </li>
                     ))}
                   </ul>
                 ) : (
-                  <p className="text-sm text-slate-400 italic">Nenhum problema detectado.</p>
+                  <p className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum problema detectado.</p>
                 )}
               </div>
             </div>
 
             {/* Points of Improvement */}
-            <div className="bg-white rounded-xl border border-blue-100 shadow-sm overflow-hidden">
-              <div className="px-5 py-3 bg-blue-50/50 border-b border-blue-100 flex items-center gap-2">
-                <CheckCircle2 size={18} className="text-blue-500" />
-                <h3 className="font-bold text-blue-900 text-sm">Dicas de Melhoria</h3>
+            <div className="bg-white dark:bg-dark-card rounded-xl border border-blue-100 dark:border-blue-900/20 shadow-sm overflow-hidden">
+              <div className="px-5 py-3 bg-blue-50/50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-900/30 flex items-center gap-2">
+                <CheckCircle2 size={18} className="text-blue-500 dark:text-blue-400" />
+                <h3 className="font-bold text-blue-900 dark:text-blue-300 text-sm">Dicas de Melhoria</h3>
               </div>
               <div className="p-5">
                  {data.improvement_points && data.improvement_points.length > 0 ? (
                   <ul className="space-y-3">
                     {data.improvement_points.map((pt, idx) => (
-                      <li key={idx} className="flex gap-3 text-sm text-slate-700">
-                        <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" />
+                      <li key={idx} className="flex gap-3 text-sm text-zinc-700 dark:text-zinc-300">
+                        <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-400 shrink-0" />
                         {pt}
                       </li>
                     ))}
                   </ul>
                 ) : (
-                  <p className="text-sm text-slate-400 italic">Continue o bom trabalho!</p>
+                  <p className="text-sm text-zinc-400 dark:text-dark-muted italic">Continue o bom trabalho!</p>
                 )}
               </div>
             </div>
@@ -166,49 +199,49 @@ export const AttendanceDetail: React.FC = () => {
 
         {/* Right Column: Metadata & Metrics */}
         <div className="space-y-6">
-          <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
-            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4">Métricas de Performance</h3>
+          <div className="bg-white dark:bg-dark-card rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm p-5 transition-colors">
+            <h3 className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-wider mb-4">Métricas de Performance</h3>
             <div className="space-y-4">
-              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
+              <div className="flex justify-between items-center p-3 bg-zinc-50 dark:bg-dark-bg/50 rounded-lg">
                 <div className="flex items-center gap-3">
-                  <div className="p-2 bg-white rounded-md border border-slate-100 text-blue-500"><Clock size={16} /></div>
-                  <span className="text-sm font-medium text-slate-600">Primeira Resposta</span>
+                  <div className="p-2 bg-white dark:bg-dark-card rounded-md border border-zinc-100 dark:border-dark-border text-blue-500 dark:text-blue-400"><Clock size={16} /></div>
+                  <span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">Primeira Resposta</span>
                 </div>
-                <span className="text-sm font-bold text-slate-900">{data.first_response_time_min} min</span>
+                <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">{data.first_response_time_min} min</span>
               </div>
               
-              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
+              <div className="flex justify-between items-center p-3 bg-zinc-50 dark:bg-dark-bg/50 rounded-lg">
                 <div className="flex items-center gap-3">
-                  <div className="p-2 bg-white rounded-md border border-slate-100 text-purple-500"><TrendingUp size={16} /></div>
-                  <span className="text-sm font-medium text-slate-600">Tempo Atendimento</span>
+                  <div className="p-2 bg-white dark:bg-dark-card rounded-md border border-zinc-100 dark:border-dark-border text-purple-500 dark:text-purple-400"><TrendingUp size={16} /></div>
+                  <span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">Tempo Atendimento</span>
                 </div>
-                <span className="text-sm font-bold text-slate-900">{data.handling_time_min} min</span>
+                <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">{data.handling_time_min} min</span>
               </div>
             </div>
           </div>
 
-          <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
-            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4">Contexto de Vendas</h3>
+          <div className="bg-white dark:bg-dark-card rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm p-5 transition-colors">
+            <h3 className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-wider mb-4">Contexto de Vendas</h3>
             <div className="space-y-4">
               <div className="space-y-1">
-                <span className="text-xs text-slate-500 font-medium">Produto Solicitado</span>
-                <div className="flex items-center gap-2 font-semibold text-slate-800">
-                  <ShoppingBag size={16} className="text-slate-400" /> {data.product_requested}
+                <span className="text-xs text-zinc-500 dark:text-dark-muted font-medium">Produto Solicitado</span>
+                <div className="flex items-center gap-2 font-semibold text-zinc-800 dark:text-zinc-100">
+                  <ShoppingBag size={16} className="text-zinc-400 dark:text-dark-muted" /> {data.product_requested}
                 </div>
               </div>
 
-              <div className="h-px bg-slate-100 my-2" />
+              <div className="h-px bg-zinc-100 dark:bg-dark-border my-2" />
 
               <div className="space-y-1">
-                <span className="text-xs text-slate-500 font-medium">Desfecho</span>
+                <span className="text-xs text-zinc-500 dark:text-dark-muted font-medium">Desfecho</span>
                 {data.converted ? (
-                   <div className="flex items-center gap-2 text-green-600 font-bold bg-green-50 px-3 py-2 rounded-lg border border-green-100">
+                   <div className="flex items-center gap-2 text-green-600 dark:text-green-400 font-bold bg-green-50 dark:bg-green-900/20 px-3 py-2 rounded-lg border border-green-100 dark:border-green-900/30">
                      <Award size={18} /> Venda Fechada
-                     {data.product_sold && <span className="text-green-800 text-xs font-normal ml-auto">{data.product_sold}</span>}
+                     {data.product_sold && <span className="text-green-800 dark:text-green-200 text-xs font-normal ml-auto">{data.product_sold}</span>}
                    </div>
                 ) : (
-                   <div className="flex items-center gap-2 text-slate-500 font-medium bg-slate-50 px-3 py-2 rounded-lg border border-slate-100">
-                     <div className="w-2 h-2 rounded-full bg-slate-400" /> Não Convertido
+                   <div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium bg-zinc-50 dark:bg-dark-bg/50 px-3 py-2 rounded-lg border border-zinc-100 dark:border-dark-border">
+                     <div className="w-2 h-2 rounded-full bg-zinc-400 dark:bg-zinc-600" /> Não Convertido
                    </div>
                 )}
               </div>

pages/Dashboard.tsx

@@ -5,9 +5,9 @@ import {
 import { 
   Users, Clock, Phone, TrendingUp, Filter
 } from 'lucide-react';
-import { getAttendances, getUsers } from '../services/dataService';
-import { CURRENT_TENANT_ID, COLORS } from '../constants';
-import { Attendance, DashboardFilter, FunnelStage, User } from '../types';
+import { getAttendances, getUsers, getTeams, getUserById, getFunnels, getOrigins } from '../services/dataService';
+import { COLORS } from '../constants';
+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,7 +25,12 @@ 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>({
     dateRange: {
@@ -34,20 +39,60 @@ export const Dashboard: React.FC = () => {
     },
     userId: 'all',
     teamId: 'all',
+    funnelStage: 'all',
+    origin: 'all',
   });
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
-        // Fetch users and attendances in parallel
-        const [fetchedUsers, fetchedData] = await Promise.all([
-          getUsers(CURRENT_TENANT_ID),
-          getAttendances(CURRENT_TENANT_ID, filters)
+        const tenantId = localStorage.getItem('ctms_tenant_id');
+        const storedUserId = localStorage.getItem('ctms_user_id');
+        if (!tenantId) return;
+
+        // 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 {
@@ -63,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, 
@@ -72,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(() => {
@@ -158,16 +294,19 @@ export const Dashboard: React.FC = () => {
   };
 
   if (loading && data.length === 0) {
-    return <div className="flex h-full items-center justify-center text-slate-400">Carregando Dashboard...</div>;
+    return <div className="flex h-full items-center justify-center text-zinc-400 dark:text-dark-muted p-12">Carregando Dashboard...</div>;
   }
 
+  const isAdmin = currentUser?.role === 'admin' || currentUser?.role === 'super_admin' || currentUser?.role === 'manager';
+
   return (
-    <div className="space-y-6 pb-8">
+    <div className="space-y-6 pb-8 transition-colors duration-300">
       {/* Filters Bar */}
-      <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-100 flex flex-col md:flex-row gap-4 items-center justify-between">
-        <div className="flex items-center gap-2 text-slate-500 font-medium">
+      <div className="bg-white dark:bg-dark-card p-4 rounded-xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col gap-4">
+        <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
+          <div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium">
             <Filter size={18} />
-          <span className="hidden md:inline">Filtros:</span>
+            <span>Filtros:</span>
           </div>
           
           <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
@@ -176,8 +315,10 @@ export const Dashboard: React.FC = () => {
               onChange={(range) => handleFilterChange('dateRange', range)} 
             />
 
+            {isAdmin && (
+              <>
                 <select 
-            className="bg-slate-50 border border-slate-200 px-3 py-2 rounded-lg text-sm text-slate-700 outline-none focus:ring-2 focus:ring-blue-100 cursor-pointer hover:border-slate-300"
+                  className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
                   value={filters.userId}
                   onChange={(e) => handleFilterChange('userId', e.target.value)}
                 >
@@ -185,15 +326,43 @@ 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-slate-50 border border-slate-200 px-3 py-2 rounded-lg text-sm text-slate-700 outline-none focus:ring-2 focus:ring-blue-100 cursor-pointer hover:border-slate-300"
+                    className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
                     value={filters.teamId}
                     onChange={(e) => handleFilterChange('teamId', e.target.value)}
                   >
                     <option value="all">Todas Equipes</option>
-            <option value="sales_1">Vendas Alpha</option>
-            <option value="sales_2">Vendas Beta</option>
+                    {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                   </select>
+                )}
+              </>
+            )}
+
+            <select
+              className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
+              value={filters.funnelStage}
+              onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
+            >
+              <option value="all">Todas Etapas</option>
+              {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>
+              {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>
 
@@ -202,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-blue-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-purple-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"
         />
@@ -236,8 +405,8 @@ export const Dashboard: React.FC = () => {
       {/* Charts Section */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Funnel Chart */}
-        <div className="lg:col-span-2 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 min-h-[400px]">
-          <h3 className="text-lg font-bold text-slate-800 mb-6">Funil de Vendas</h3>
+        <div className="lg:col-span-2 bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border min-h-[400px]">
+          <h3 className="text-lg font-bold text-zinc-800 dark:text-dark-text mb-6">Funil de Vendas</h3>
           <div className="h-[300px] w-full">
             <ResponsiveContainer width="100%" height="100%">
               <BarChart
@@ -246,23 +415,35 @@ export const Dashboard: React.FC = () => {
                 margin={{ top: 5, right: 30, left: 40, bottom: 5 }}
                 barSize={32}
               >
-                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" />
+                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" className="dark:opacity-5" />
                 <XAxis type="number" hide />
                 <YAxis 
                   dataKey="name" 
                   type="category" 
                   width={120} 
-                  tick={{fill: '#475569', fontSize: 13, fontWeight: 500}} 
+                  tick={{fill: '#71717a', fontSize: 13, fontWeight: 500}} 
+                  className="dark:fill-dark-muted"
                   tickLine={false}
                   axisLine={false}
                 />
                 <Tooltip 
-                  cursor={{fill: '#f8fafc'}}
-                  contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
+                  cursor={{fill: '#f8fafc', opacity: 0.05}}
+                  formatter={(value: any) => [value, 'Quantidade']}
+                  contentStyle={{ 
+                    borderRadius: '12px', 
+                    border: 'none', 
+                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+                    backgroundColor: '#1a1a1a',
+                    color: '#ededed'
+                  }}
+                  itemStyle={{ color: '#ededed' }}
                 />
                 <Bar dataKey="value" radius={[0, 6, 6, 0]}>
                   {funnelData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS.charts[index % COLORS.charts.length]} />
+                    <Cell 
+                      key={`cell-${index}`} 
+                      fill={COLORS.funnel[entry.name as keyof typeof COLORS.funnel] || '#cbd5e1'} 
+                    />
                   ))}
                 </Bar>
               </BarChart>
@@ -271,8 +452,8 @@ export const Dashboard: React.FC = () => {
         </div>
 
         {/* Origin Pie Chart */}
-        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 min-h-[400px] flex flex-col">
-          <h3 className="text-lg font-bold text-slate-800 mb-2">Origem dos Leads</h3>
+        <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border min-h-[400px] flex flex-col">
+          <h3 className="text-lg font-bold text-zinc-800 dark:text-dark-text mb-2">Origem dos Leads</h3>
           <div className="flex-1 min-h-0">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
@@ -287,10 +468,21 @@ export const Dashboard: React.FC = () => {
                   stroke="none"
                 >
                   {originData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={COLORS.charts[index % COLORS.charts.length]} />
-                  ))}
-                </Pie>
-                <Tooltip contentStyle={{ borderRadius: '12px' }} />
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={entry.hexColor || COLORS.charts[index % COLORS.charts.length]}
+                    />
+                  ))}                </Pie>
+                <Tooltip 
+                  formatter={(value: any) => [value, 'Leads']}
+                  contentStyle={{ 
+                    borderRadius: '12px', 
+                    backgroundColor: '#1a1a1a', 
+                    border: 'none',
+                    color: '#ededed'
+                  }} 
+                  itemStyle={{ color: '#ededed' }}
+                />
                 <Legend 
                   verticalAlign="bottom" 
                   height={80} 

pages/ForgotPassword.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Hexagon, Mail, ArrowRight, Loader2, ArrowLeft, CheckCircle2 } from 'lucide-react';
+import { forgotPassword } from '../services/dataService';
+
+export const ForgotPassword: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+    
+    try {
+      await forgotPassword(email);
+      setIsSuccess(true);
+    } catch (err: any) {
+      setError(err.message || 'Erro ao enviar e-mail de recuperação.');
+    } 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">
+          Recupere sua senha
+        </h2>
+        <p className="mt-2 text-center text-sm text-zinc-600 dark:text-dark-muted">
+          Enviaremos um link de redefinição para o seu e-mail.
+        </p>
+      </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">E-mail enviado!</h3>
+              <p className="text-sm text-zinc-600 dark:text-dark-muted">
+                Verifique sua caixa de entrada (e a pasta de spam) para as instruções.
+              </p>
+              <div className="pt-4">
+                <Link to="/login" className="text-brand-yellow font-bold hover:text-yellow-600 flex items-center justify-center gap-2 transition-colors">
+                  <ArrowLeft size={18} /> Voltar para o login
+                </Link>
+              </div>
+            </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 text-red-600 dark:text-red-400 text-sm">
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                  Seu E-mail
+                </label>
+                <div className="mt-1 relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Mail className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
+                  </div>
+                  <input
+                    id="email"
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(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="seu@email.com"
+                  />
+                </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-70"
+                >
+                  {isLoading ? (
+                    <Loader2 className="animate-spin h-5 w-5" />
+                  ) : (
+                    <>
+                      Enviar Link <ArrowRight size={18} />
+                    </>
+                  )}
+                </button>
+              </div>
+
+              <div className="text-center">
+                <Link to="/login" className="text-sm text-zinc-500 dark:text-dark-muted hover:text-zinc-800 dark:hover:text-zinc-200 flex items-center justify-center gap-1 transition-colors">
+                  <ArrowLeft size={14} /> Voltar para o login
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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,95 +1,92 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Hexagon, Lock, Mail, ArrowRight, Loader2, Info } from 'lucide-react';
-import { USERS } from '../constants';
+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';
 
 export const Login: React.FC = () => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
-  const [email, setEmail] = useState('lidya@fasto.com');
-  const [password, setPassword] = useState('password');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
+  const [emailError, setEmailError] = useState('');
 
-  const handleLogin = (e: React.FormEvent) => {
+  // 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) {
+      setEmailError('E-mail é obrigatório');
+    } else if (!/\S+@\S+\.\S+/.test(val)) {
+      setEmailError('E-mail inválido');
+    } else {
+      setEmailError('');
+    }
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (emailError) return;
+
     setIsLoading(true);
     setError('');
     
-    // Simulate API call and validation
-    setTimeout(() => {
-      const user = USERS.find(u => u.email.toLowerCase() === email.toLowerCase());
-
-      if (user) {
-        // Mock Login: Save to local storage
-        localStorage.setItem('ctms_user_id', user.id);
+    logout();
     
+    try {
+      const data = await login({ email, password });
       setIsLoading(false);
-        
-        // Redirect based on role
-        if (user.role === 'super_admin') {
+      if (data.user.role === 'super_admin') {
         navigate('/super-admin');
       } else {
         navigate('/');
       }
-      } else {
+    } catch (err: any) {
       setIsLoading(false);
-        setError('Usuário não encontrado. Tente lidya@fasto.com ou root@system.com');
+      setError(err.message || 'Erro ao fazer login. Verifique suas credenciais.');
     }
-    }, 1000);
-  };
-
-  const fillCredentials = (type: 'admin' | 'super') => {
-    if (type === 'admin') {
-      setEmail('lidya@fasto.com');
-    } else {
-      setEmail('root@system.com');
-    }
-    setPassword('password');
   };
 
   return (
-    <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <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-slate-900">
-          <div className="bg-slate-900 text-white p-2 rounded-lg">
-             <Hexagon size={28} fill="currentColor" />
+        <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-yellow-500">.</span></span>
+          <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-slate-900">
+        <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-slate-600">
-          Ou <a href="#" className="font-medium text-blue-600 hover:text-blue-500">inicie seu teste grátis de 14 dias</a>
-        </p>
       </div>
 
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow-xl shadow-slate-200/50 rounded-2xl sm:px-10 border border-slate-100">
-          
-          {/* Demo Helper - Remove in production */}
-          <div className="mb-6 p-3 bg-blue-50 border border-blue-100 rounded-lg text-xs text-blue-700">
-             <div className="flex items-center gap-2 font-bold mb-2">
-               <Info size={14} /> Dicas de Acesso (Demo):
-             </div>
-             <div className="flex gap-2">
-               <button onClick={() => fillCredentials('admin')} className="px-2 py-1 bg-white border border-blue-200 rounded shadow-sm hover:bg-blue-100 transition">
-                 Admin da Empresa
-               </button>
-               <button onClick={() => fillCredentials('super')} className="px-2 py-1 bg-white border border-blue-200 rounded shadow-sm hover:bg-blue-100 transition">
-                 Super Admin
-               </button>
-             </div>
-          </div>
-
+        <div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl shadow-zinc-200/50 dark:shadow-none rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
           <form className="space-y-6" onSubmit={handleLogin}>
+            {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 animate-in fade-in slide-in-from-top-1">
+                <AlertCircle size={18} />
+                {error}
+              </div>
+            )}
+
             <div>
-              <label htmlFor="email" className="block text-sm font-medium text-slate-700">
-                Endereço de e-mail
+              <label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                Endereço de E-mail
               </label>
-              <div className="mt-1 relative rounded-md shadow-sm">
+              <div className="mt-1 relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <Mail className="h-5 w-5 text-slate-400" />
+                  <Mail className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
                 </div>
                 <input
                   id="email"
@@ -98,58 +95,47 @@ export const Login: React.FC = () => {
                   autoComplete="email"
                   required
                   value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 sm:text-sm transition-all"
-                  placeholder="voce@empresa.com"
+                  onChange={(e) => validateEmail(e.target.value)}
+                  className={`block w-full pl-10 pr-3 py-2 border ${emailError ? 'border-red-300 focus:ring-red-100 focus:border-red-500' : 'border-zinc-300 dark:border-dark-border focus:ring-brand-yellow/20 focus:border-brand-yellow'} rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 sm:text-sm transition-all`}
+                  placeholder="seu@email.com"
                 />
               </div>
+              {emailError && <p className="mt-1 text-xs text-red-500">{emailError}</p>}
             </div>
 
             <div>
-              <label htmlFor="password" className="block text-sm font-medium text-slate-700">
+              <div className="flex items-center justify-between">
+                <label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
                   Senha
                 </label>
-              <div className="mt-1 relative rounded-md shadow-sm">
+                <div className="text-sm">
+                  <Link to="/forgot-password" size="14" className="font-medium text-brand-yellow hover:text-yellow-600 transition-colors">
+                    Esqueceu a senha?
+                  </Link>
+                </div>
+              </div>
+              <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-slate-400" />
+                  <Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
                 </div>
                 <input
                   id="password"
                   name="password"
-                  type="password"
+                  type={showPassword ? 'text' : 'password'}
                   autoComplete="current-password"
                   required
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 sm:text-sm transition-all"
+                  className="block w-full pl-10 pr-10 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 sm:text-sm focus:ring-brand-yellow/20 focus:border-brand-yellow transition-all"
                   placeholder="••••••••"
                 />
-              </div>
-            </div>
-
-            {error && (
-              <div className="text-red-500 text-sm font-medium text-center">
-                {error}
-              </div>
-            )}
-
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <input
-                  id="remember-me"
-                  name="remember-me"
-                  type="checkbox"
-                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
-                />
-                <label htmlFor="remember-me" className="ml-2 block text-sm text-slate-900">
-                  Lembrar de mim
-                </label>
-              </div>
-
-              <div className="text-sm">
-                <a href="#" className="font-medium text-blue-600 hover:text-blue-500">
-                  Esqueceu sua senha?
-                </a>
+                <button
+                  type="button"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                </button>
               </div>
             </div>
 
@@ -157,29 +143,30 @@ export const Login: React.FC = () => {
               <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-semibold text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 disabled:opacity-70 disabled:cursor-not-allowed transition-all"
+                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-70"
               >
                 {isLoading ? (
                   <>
-                    <Loader2 className="animate-spin h-4 w-4" />
-                    Entrando...
+                    <Loader2 className="animate-spin h-5 w-5" /> Entrando...
                   </>
                 ) : (
                   <>
-                    Entrar <ArrowRight className="h-4 w-4" />
+                    Entrar <ArrowRight size={18} />
                   </>
                 )}
               </button>
             </div>
           </form>
 
-          <div className="mt-6">
+          <div className="mt-8">
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-slate-200" />
+                <div className="w-full border-t border-zinc-200 dark:border-dark-border" />
               </div>
               <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-white text-slate-500">Protegido por SSO Corporativo</span>
+                <span className="px-2 bg-white dark:bg-dark-card text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-widest font-bold transition-colors">
+                  Powered by <a href="https://blyzer.com.br" target="_blank" rel="noopener noreferrer" className="text-brand-yellow hover:underline">Blyzer</a>
+                </span>
               </div>
             </div>
           </div>

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

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Hexagon, Lock, Mail, ArrowRight, Loader2, User, Building } from 'lucide-react';
+import { register } from '../services/dataService';
+
+export const Register: React.FC = () => {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    organizationName: ''
+  });
+  const [error, setError] = useState('');
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+    
+    try {
+      const success = await register(formData);
+      if (success) {
+        navigate('/login', { state: { message: 'Conta criada! Verifique seu e-mail para o código de ativação.' } });
+      }
+    } catch (err: any) {
+      setError(err.message || 'Erro ao criar conta.');
+    } 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">
+          Crie sua organização
+        </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 shadow-zinc-200/50 dark:shadow-none rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
+          <form className="space-y-5" onSubmit={handleRegister}>
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg text-red-600 dark:text-red-400 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Seu Nome</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 type="text" required value={formData.name} onChange={e => setFormData({...formData, name: 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="Nome Completo" />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="organization" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Nome da Organização</label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Building className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
+                </div>
+                <input type="text" required value={formData.organizationName} onChange={e => setFormData({...formData, organizationName: 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="Ex: Minha Empresa" />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mail Corporativo</label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Mail className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
+                </div>
+                <input type="email" required value={formData.email} onChange={e => setFormData({...formData, email: 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="seu@email.com" />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">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 type="password" required value={formData.password} onChange={e => setFormData({...formData, password: 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-70">
+                {isLoading ? <Loader2 className="animate-spin h-5 w-5" /> : <>Criar Conta <ArrowRight size={18} /></>}
+              </button>
+            </div>
+          </form>
+
+          <div className="mt-6 text-center">
+            <Link to="/login" className="text-sm font-medium text-brand-yellow hover:text-yellow-600">Já possui uma conta? Entre aqui</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

pages/ResetPassword.tsx

@@ -0,0 +1,135 @@
+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';
+
+export const ResetPassword: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const token = query.get('token') || '';
+
+  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); // No name sent here
+      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">
+          Crie uma nova senha
+        </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">Senha alterada!</h3>
+              <p className="text-sm text-zinc-600 dark:text-dark-muted">
+                Sua senha foi redefinida 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="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" />
+                  ) : (
+                    <>
+                      Redefinir Senha <ArrowRight size={18} />
+                    </>
+                  )}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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()
@@ -20,11 +22,9 @@ export const SuperAdmin: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
 
-  // Sorting State
   const [sortKey, setSortKey] = useState<keyof Tenant>('created_at');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
 
-  // Load Tenants from API
   const loadTenants = async () => {
     setLoading(true);
     const data = await getTenants();
@@ -36,16 +36,12 @@ export const SuperAdmin: React.FC = () => {
     loadTenants();
   }, []);
 
-  // --- Metrics ---
   const totalTenants = tenants.length;
   const totalUsersGlobal = tenants.reduce((acc, t) => acc + (t.user_count || 0), 0);
   const totalAttendancesGlobal = tenants.reduce((acc, t) => acc + (t.attendance_count || 0), 0);
 
-  // --- Data Filtering & Sorting ---
   const filteredTenants = useMemo(() => {
     let data = tenants;
-    
-    // Search
     if (searchQuery) {
       const q = searchQuery.toLowerCase();
       data = data.filter(t => 
@@ -54,27 +50,20 @@ export const SuperAdmin: React.FC = () => {
         t.slug?.toLowerCase().includes(q)
       );
     }
-
-    // Tenant Filter (Select)
     if (selectedTenantId !== 'all') {
       data = data.filter(t => t.id === selectedTenantId);
     }
-
-    // Sort
     return [...data].sort((a, b) => {
       const aVal = a[sortKey];
       const bVal = b[sortKey];
-
       if (aVal === undefined) return 1;
       if (bVal === undefined) return -1;
-
       if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
       if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
       return 0;
     });
   }, [tenants, searchQuery, selectedTenantId, sortKey, sortDirection]);
 
-  // --- Handlers ---
   const handleSort = (key: keyof Tenant) => {
     if (sortKey === key) {
       setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
@@ -89,294 +78,242 @@ 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) {
+          setSuccessMessage('Organização atualizada com sucesso!');
+          loadTenants();
+          setTimeout(() => {
             setIsModalOpen(false);
+            setSuccessMessage('');
             setEditingTenant(null);
-      loadTenants(); // Reload list
-      alert('Organização salva com sucesso!');
+            setIsSaving(false);
+          }, 2000);
         } else {
-      alert('Erro ao salvar organização. Verifique o console.');
+           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);
     }
   };
 
-  // --- Helper Components ---
   const SortIcon = ({ column }: { column: keyof Tenant }) => {
-    if (sortKey !== column) return <ChevronsUpDown size={14} className="text-slate-300" />;
-    return sortDirection === 'asc' ? <ChevronUp size={14} className="text-blue-500" /> : <ChevronDown size={14} className="text-blue-500" />;
+    if (sortKey !== column) return <ChevronsUpDown size={14} className="text-zinc-300 dark:text-dark-muted" />;
+    return sortDirection === 'asc' ? <ChevronUp size={14} className="text-brand-yellow" /> : <ChevronDown size={14} className="text-brand-yellow" />;
   };
 
   const StatusBadge = ({ status }: { status?: string }) => {
     const styles = {
-      active: 'bg-green-100 text-green-700 border-green-200',
-      inactive: 'bg-slate-100 text-slate-700 border-slate-200',
-      trial: 'bg-purple-100 text-purple-700 border-purple-200',
+      active: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800',
+      inactive: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border',
+      trial: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800',
     };
     const style = styles[status as keyof typeof styles] || styles.inactive;
-    
-    let label = status || 'Desconhecido';
-    if (status === 'active') label = 'Ativo';
-    if (status === 'inactive') label = 'Inativo';
-    if (status === 'trial') label = 'Teste';
-
-    return (
-      <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold border capitalize ${style}`}>
-        {label}
-      </span>
-    );
+    let label = status === 'active' ? 'Ativo' : status === 'inactive' ? 'Inativo' : status === 'trial' ? 'Teste' : 'Desconhecido';
+    return <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold border capitalize ${style}`}>{label}</span>;
   };
 
   return (
-    <div className="space-y-8 max-w-7xl mx-auto pb-8">
-      {/* Header */}
+    <div className="space-y-8 max-w-7xl mx-auto pb-8 transition-colors duration-300">
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Painel Super Admin</h1>
-          <p className="text-slate-500 text-sm">Gerencie organizações, visualize estatísticas globais e saúde do sistema.</p>
+          <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>
-        <div className="flex items-center gap-3">
-          <button 
-            onClick={() => { setEditingTenant(null); setIsModalOpen(true); }}
-            className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors 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>
-      </div>
-
 {/* KPI Cards */}
 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <KPICard 
-          title="Total de Organizações" 
-          value={totalTenants} 
-          icon={Building2} 
-          colorClass="text-blue-600"
-          trend="up"
-          trendValue="+1 este mês"
-        />
-        <KPICard 
-          title="Total de Usuários" 
-          value={totalUsersGlobal} 
-          icon={Users} 
-          colorClass="text-purple-600"
-          subValue="Em todas as organizações"
-        />
-        <KPICard 
-          title="Total de Atendimentos" 
-          value={totalAttendancesGlobal.toLocaleString()} 
-          icon={MessageSquare} 
-          colorClass="text-green-600"
-          trend="up"
-          trendValue="+12%"
-        />
+  <KPICard title="Total de Organizações" value={totalTenants} icon={Building2} colorClass="text-blue-600" trend="up" trendValue="+1 este mês" />
+  <KPICard title="Total de Usuários" value={totalUsersGlobal} icon={Users} colorClass="text-purple-600" subValue="Em todas as organizações" />
+  <KPICard title="Total de Atendimentos" value={totalAttendancesGlobal.toLocaleString()} icon={MessageSquare} colorClass="text-green-600" trend="up" trendValue="+12%" />
 </div>
 
-      {/* Filters & Search */}
-      <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col md:flex-row gap-4 justify-between items-center">
+      <div className="bg-white dark:bg-dark-card p-4 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm flex flex-col md:flex-row gap-4 justify-between items-center transition-colors">
         <div className="flex items-center gap-3 w-full md:w-auto">
           <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
-          
-          <div className="h-8 w-px bg-slate-200 hidden md:block" />
-
-          <select 
-            className="bg-slate-50 border border-slate-200 px-3 py-2 rounded-lg text-sm text-slate-700 outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer hover:border-slate-300 w-full md:w-48"
-            value={selectedTenantId}
-            onChange={(e) => setSelectedTenantId(e.target.value)}
-          >
+          <div className="h-8 w-px bg-zinc-200 dark:bg-dark-border hidden md:block" />
+          <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 w-full md:w-48 transition-all" value={selectedTenantId} onChange={(e) => setSelectedTenantId(e.target.value)}>
             <option value="all">Todas Organizações</option>
             {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
           </select>
         </div>
-
         <div className="relative w-full md:w-64">
-          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-          <input 
-            type="text" 
-            placeholder="Buscar organizações..." 
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 transition-all"
-          />
+          <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 organizações..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-4 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 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
         </div>
       </div>
 
-      {/* Tenants Table */}
-      <div className="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
+      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden transition-colors">
         <div className="overflow-x-auto">
           <table className="w-full text-left border-collapse">
             <thead>
-              <tr className="bg-slate-50/50 text-slate-500 text-xs uppercase tracking-wider border-b border-slate-100">
-                <th className="px-6 py-4 font-semibold cursor-pointer hover:bg-slate-50 select-none" onClick={() => handleSort('name')}>
+              <tr className="bg-zinc-50/50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-wider border-b border-zinc-100 dark:border-dark-border">
+                <th className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('name')}>
                   <div className="flex items-center gap-2">Organização <SortIcon column="name" /></div>
                 </th>
                 <th className="px-6 py-4 font-semibold">Slug</th>
-                <th className="px-6 py-4 font-semibold cursor-pointer hover:bg-slate-50 select-none" onClick={() => handleSort('status')}>
+                <th className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('status')}>
                   <div className="flex items-center gap-2">Status <SortIcon column="status" /></div>
                 </th>
-                <th className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none" onClick={() => handleSort('user_count')}>
+                <th className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('user_count')}>
                   <div className="flex items-center justify-center gap-2">Usuários <SortIcon column="user_count" /></div>
                 </th>
-                <th className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 select-none" onClick={() => handleSort('attendance_count')}>
+                <th className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('attendance_count')}>
                   <div className="flex items-center justify-center gap-2">Atendimentos <SortIcon column="attendance_count" /></div>
                 </th>
                 <th className="px-6 py-4 font-semibold text-right">Ações</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-slate-100 text-sm">
+            <tbody className="divide-y divide-zinc-100 dark:divide-dark-border text-sm">
               {filteredTenants.map((tenant) => (
-                <tr key={tenant.id} className="hover:bg-slate-50/50 transition-colors group">
+                <tr key={tenant.id} className="hover:bg-zinc-50/50 dark:hover:bg-zinc-800/50 transition-colors group">
                   <td className="px-6 py-4">
                     <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center text-slate-400 font-bold border border-slate-200">
+                      <div className="w-10 h-10 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-400 dark:text-dark-muted font-bold border border-zinc-200 dark:border-dark-border">
                         {tenant.logo_url ? <img src={tenant.logo_url} className="w-full h-full object-cover rounded-lg" alt="" /> : <Building2 size={20} />}
                       </div>
                       <div>
-                        <div className="font-semibold text-slate-900">{tenant.name}</div>
-                        <div className="text-xs text-slate-500">{tenant.admin_email}</div>
+                        <div className="font-semibold text-zinc-900 dark:text-zinc-100">{tenant.name}</div>
+                        <div className="text-xs text-zinc-500 dark:text-dark-muted">{tenant.admin_email}</div>
                       </div>
                     </div>
                   </td>
-                  <td className="px-6 py-4 text-slate-600 font-mono text-xs">
-                    {tenant.slug}
-                  </td>
-                  <td className="px-6 py-4">
-                    <StatusBadge status={tenant.status} />
-                  </td>
-                  <td className="px-6 py-4 text-center font-medium text-slate-700">
-                    {tenant.user_count}
-                  </td>
-                  <td className="px-6 py-4 text-center font-medium text-slate-700">
-                    {tenant.attendance_count?.toLocaleString()}
-                  </td>
+                  <td className="px-6 py-4 text-zinc-600 dark:text-dark-muted font-mono text-xs">{tenant.slug}</td>
+                  <td className="px-6 py-4"><StatusBadge status={tenant.status} /></td>
+                  <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-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                        title="Editar Organização"
-                      >
-                        <Edit size={16} />
-                      </button>
-                      <button 
-                        onClick={() => handleDelete(tenant.id)}
-                        className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-                        title="Excluir Organização"
-                      >
-                        <Trash2 size={16} />
+                    <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>
               ))}
-              {filteredTenants.length === 0 && (
-                <tr>
-                  <td colSpan={6} className="px-6 py-12 text-center text-slate-400 italic">Nenhuma organização encontrada com os filtros atuais.</td>
-                </tr>
-              )}
             </tbody>
           </table>
         </div>
-        
-        {/* Simple Pagination Footer */}
-        <div className="px-6 py-4 border-t border-slate-100 bg-slate-50/30 text-xs text-slate-500 flex justify-between items-center">
+        <div className="px-6 py-4 border-t border-zinc-100 dark:border-dark-border bg-zinc-50/30 dark:bg-dark-bg/30 text-xs text-zinc-500 dark:text-dark-muted flex justify-between items-center transition-colors">
           <span>Mostrando {filteredTenants.length} de {tenants.length} organizações</span>
           <div className="flex gap-2">
-            <button disabled className="px-3 py-1 border rounded bg-white disabled:opacity-50">Ant</button>
-            <button disabled className="px-3 py-1 border rounded bg-white disabled:opacity-50">Próx</button>
+            <button disabled className="px-3 py-1 border dark:border-dark-border rounded bg-white dark:bg-dark-card disabled:opacity-50">Ant</button>
+            <button disabled className="px-3 py-1 border dark:border-dark-border rounded bg-white dark:bg-dark-card disabled:opacity-50">Próx</button>
           </div>
         </div>
       </div>
 
-      {/* Add/Edit Modal */}
       {isModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
-          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
-            <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
-              <h3 className="font-bold text-slate-900">{editingTenant ? 'Editar Organização' : 'Adicionar Nova Organização'}</h3>
-              <button onClick={() => setIsModalOpen(false)} className="text-slate-400 hover:text-slate-600">
-                <X size={20} />
-              </button>
+        <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-lg overflow-hidden animate-in fade-in zoom-in duration-200 border border-transparent dark:border-dark-border transition-colors">
+            <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">{editingTenant ? 'Editar Organização' : 'Adicionar Nova Organização'}</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={handleSaveTenant} className="p-6 space-y-4">
-              <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-700">Nome da Organização</label>
-                <input 
-                  type="text" 
-                  name="name"
-                  defaultValue={editingTenant?.name}
-                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-100 outline-none"
-                  placeholder="ex. Acme Corp" 
-                  required
-                />
+              {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 />
               </div>
-              
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-700">Slug</label>
-                  <input 
-                    type="text" 
-                    name="slug"
-                    defaultValue={editingTenant?.slug}
-                    className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-100 outline-none"
-                    placeholder="ex. acme-corp"
-                  />
+                  <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Slug</label>
+                  <input type="text" name="slug" defaultValue={editingTenant?.slug} 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" />
                 </div>
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-700">Status</label>
-                  <select 
-                    name="status"
-                    defaultValue={editingTenant?.status || 'active'}
-                    className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-100 outline-none"
-                  >
+                  <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Status</label>
+                  <select name="status" defaultValue={editingTenant?.status || 'active'} 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 outline-none transition-all">
                     <option value="active">Ativo</option>
                     <option value="inactive">Inativo</option>
                     <option value="trial">Teste</option>
                   </select>
                 </div>
               </div>
-
               <div className="space-y-2">
-                <label className="text-sm font-medium text-slate-700">E-mail do Admin</label>
-                <input 
-                  type="email" 
-                  name="admin_email"
-                  defaultValue={editingTenant?.admin_email}
-                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-100 outline-none"
-                  placeholder="admin@empresa.com"
-                  required
-                />
+                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mail do Admin</label>
+                <input type="email" name="admin_email" defaultValue={editingTenant?.admin_email} 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 />
               </div>
-
-              <div className="pt-4 flex justify-end gap-3">
-                <button 
-                  type="button"
-                  onClick={() => setIsModalOpen(false)}
-                  className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg text-sm font-medium transition-colors"
-                >
-                  Cancelar
-                </button>
-                <button 
-                  type="submit"
-                  className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors shadow-sm"
-                >
-                  {editingTenant ? 'Salvar Alterações' : 'Criar Organização'}
+              <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" 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>

pages/TeamManagement.tsx

@@ -1,285 +1,303 @@
-import React, { useState } from 'react';
-import { Users, Plus, MoreHorizontal, Mail, Shield, Search, X, Edit, Trash2, Save } from 'lucide-react';
-import { USERS } from '../constants';
-import { User } from '../types';
+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, getTenants } from '../services/dataService';
+import { User, Tenant } from '../types';
 
 export const TeamManagement: React.FC = () => {
-  const [users, setUsers] = useState<User[]>(USERS.filter(u => u.role !== 'super_admin')); // Default hide super admin from list
+  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('');
-  
-  // State for handling Add/Edit
+  const [tenantFilter, setTenantFilter] = useState('all');
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [userToDelete, setUserToDelete] = useState<User | null>(null);
+  const [deleteConfirmName, setDeleteConfirmName] = useState('');
   const [editingUser, setEditingUser] = useState<User | null>(null);
   const [formData, setFormData] = useState({ 
     name: '', 
     email: '', 
-    role: 'agent' as 'super_admin' | 'admin' | 'manager' | 'agent',
-    team_id: 'sales_1',
-    status: 'active' as 'active' | 'inactive'
+    role: 'agent' as any, 
+    team_id: '', 
+    status: 'active' as any,
+    tenant_id: ''
   });
 
-  const filteredUsers = users.filter(u => 
-    u.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
-    u.email.toLowerCase().includes(searchTerm.toLowerCase())
+  const loadData = async () => {
+    const tid = localStorage.getItem('ctms_tenant_id');
+    const uid = localStorage.getItem('ctms_user_id');
+    if (!tid) return;
+    setLoading(true);
+    try {
+      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); }
+  };
+
+  useEffect(() => { loadData(); }, []);
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      const tid = localStorage.getItem('ctms_tenant_id') || '';
+      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(); }
+      } 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 () => {
+    if (!userToDelete || deleteConfirmName !== userToDelete.name) return;
+    setIsSaving(true);
+    try {
+      if (await deleteUser(userToDelete.id)) { setIsDeleteModalOpen(false); loadData(); }
+    } catch (err) { alert('Erro ao excluir'); } finally { setIsSaving(false); }
+  };
+
+  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' || 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';
+  };
+
   const getRoleBadge = (role: string) => {
     switch (role) {
-      case 'super_admin': return 'bg-slate-900 text-white border-slate-700';
-      case 'admin': return 'bg-purple-100 text-purple-700 border-purple-200';
-      case 'manager': return 'bg-blue-100 text-blue-700 border-blue-200';
-      default: return 'bg-slate-100 text-slate-700 border-slate-200';
+      case 'admin': return 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800';
+      case 'manager': return 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800';
+      default: return 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border';
     }
   };
 
-  const getStatusBadge = (status: string) => {
-    if (status === 'active') {
-      return 'bg-green-100 text-green-700 border-green-200';
-    }
-    return 'bg-slate-100 text-slate-500 border-slate-200';
-  };
-
-  // Actions
-  const handleDelete = (userId: string) => {
-    if (window.confirm('Tem certeza que deseja excluir este usuário? Esta ação não pode ser desfeita.')) {
-      setUsers(prev => prev.filter(u => u.id !== userId));
-    }
-  };
-
-  const openAddModal = () => {
-    setEditingUser(null);
-    setFormData({ name: '', email: '', role: 'agent', team_id: 'sales_1', status: 'active' });
-    setIsModalOpen(true);
-  };
-
-  const openEditModal = (user: User) => {
-    setEditingUser(user);
-    setFormData({
-      name: user.name,
-      email: user.email,
-      role: user.role,
-      team_id: user.team_id,
-      status: user.status
-    });
-    setIsModalOpen(true);
-  };
-
-  const handleSave = (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (editingUser) {
-      // Update existing user
-      setUsers(prev => prev.map(u => u.id === editingUser.id ? { ...u, ...formData } : u));
-    } else {
-      // Create new user
-      const newUser: User = {
-        id: Date.now().toString(),
-        tenant_id: 'tenant_123', // Mock default
-        avatar_url: `https://ui-avatars.com/api/?name=${encodeURIComponent(formData.name)}&background=random`,
-        ...formData
-      };
-      setUsers(prev => [...prev, newUser]);
-    }
-    setIsModalOpen(false);
-  };
-
   return (
-    <div className="space-y-8 max-w-7xl mx-auto">
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+    <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-slate-900 tracking-tight">Gerenciamento de Equipe</h1>
-          <p className="text-slate-500 text-sm">Gerencie acesso, funções e times de vendas da sua organização.</p>
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text tracking-tight">Membros</h1>
+          <p className="text-zinc-500 dark:text-dark-muted text-sm">Visualize e gerencie as funções dos membros da sua organização.</p>
         </div>
-        <button 
-          onClick={openAddModal}
-          className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors shadow-sm"
-        >
+        {canManage && (
+          <button onClick={() => { setEditingUser(null); setFormData({name:'', email:'', role:'agent', team_id:'', status:'active'}); 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} /> Adicionar Membro
           </button>
+        )}
       </div>
 
-      <div className="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
-        {/* Toolbar */}
-        <div className="p-4 border-b border-slate-100 flex items-center justify-between gap-4">
-          <div className="relative w-full max-w-sm">
-             <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-             <input 
-                type="text" 
-                placeholder="Buscar por nome ou e-mail..." 
-                className="w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 transition-all"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-             />
+      <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 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>
-          <div className="text-sm text-slate-500 hidden sm:block">
-            {filteredUsers.length} membros encontrados
+          {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>
-
-        {/* Table */}
         <div className="overflow-x-auto">
-          <table className="w-full text-left border-collapse">
+          <table className="w-full text-left">
             <thead>
-              <tr className="bg-slate-50/50 text-slate-500 text-xs uppercase tracking-wider border-b border-slate-100">
-                <th className="px-6 py-4 font-semibold">Usuário</th>
-                <th className="px-6 py-4 font-semibold">Função</th>
-                <th className="px-6 py-4 font-semibold">Time</th>
-                <th className="px-6 py-4 font-semibold">Status</th>
-                <th className="px-6 py-4 font-semibold text-right">Ações</th>
+              <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>
+                {canManage && <th className="px-6 py-4 text-right">Ações</th>}
               </tr>
             </thead>
-            <tbody className="divide-y divide-slate-100 text-sm">
-              {filteredUsers.map((user) => (
-                <tr key={user.id} className="hover:bg-slate-50/50 transition-colors group">
+            <tbody className="divide-y dark:divide-dark-border text-sm">
+              {filtered.map(user => (
+                <tr key={user.id} className="hover:bg-zinc-50 dark:hover:bg-dark-border/50 transition-colors group">
                   <td className="px-6 py-4">
                     <div className="flex items-center gap-3">
                       <div className="relative">
-                        <img src={user.avatar_url} alt="" className="w-10 h-10 rounded-full border border-slate-200 object-cover" />
-                        <span className={`absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white ${user.status === 'active' ? 'bg-green-500' : 'bg-slate-300'}`}></span>
+                        <img 
+                          src={user.avatar_url 
+                            ? (user.avatar_url.startsWith('http') ? user.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${user.avatar_url}`)
+                            : `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`} 
+                          alt="" 
+                          className="w-10 h-10 rounded-full border border-zinc-200 dark:border-dark-border object-cover" 
+                        />
+                        <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-semibold text-slate-900">{user.name}</div>
-                        <div className="flex items-center gap-1.5 text-xs text-slate-500">
-                           <Mail size={12} /> {user.email}
-                        </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={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border capitalize ${getRoleBadge(user.role)}`}>
-                       {user.role === 'manager' ? 'Gerente' : user.role === 'agent' ? 'Agente' : user.role === 'admin' ? 'Admin' : 'Super Admin'}
+                      <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 text-slate-600 font-medium">
-                    {user.team_id === 'sales_1' ? 'Vendas Alpha' : user.team_id === 'sales_2' ? 'Vendas Beta' : '-'}
-                  </td>
+                  )}
                   <td className="px-6 py-4">
-                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border capitalize ${getStatusBadge(user.status)}`}>
-                       {user.status === 'active' ? 'Ativo' : 'Inativo'}
-                    </span>
+                    <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold border capitalize ${getRoleBadge(user.role)}`}>{getRoleLabel(user.role)}</span>
                   </td>
+                  <td className="px-6 py-4 text-zinc-600 dark:text-zinc-300 font-medium">{teams.find(t => t.id === user.team_id)?.name || '-'}</td>
+                  <td className="px-6 py-4">
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-bold border ${user.status === 'active' ? 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' : 'bg-zinc-100 text-zinc-500 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border'}`}>{user.status === 'active' ? 'Ativo' : 'Inativo'}</span>
+                  </td>
+                  {canManage && (
                     <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={() => openEditModal(user)}
-                        className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                        title="Editar Usuário"
-                      >
-                        <Edit size={16} />
-                      </button>
-                      <button 
-                        onClick={() => handleDelete(user.id)}
-                        className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-                        title="Excluir Usuário"
-                      >
-                        <Trash2 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>
+                  )}
                 </tr>
               ))}
-              {filteredUsers.length === 0 && (
-                <tr>
-                  <td colSpan={5} className="px-6 py-8 text-center text-slate-400 italic">Nenhum usuário encontrado.</td>
-                </tr>
-              )}
             </tbody>
           </table>
         </div>
       </div>
 
-       {/* Add/Edit Modal */}
       {isModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
-          <div className="bg-white 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-slate-100 flex justify-between items-center bg-slate-50/50">
-              <h3 className="text-lg font-bold text-slate-900">{editingUser ? 'Editar Usuário' : 'Convidar Novo Membro'}</h3>
-              <button onClick={() => setIsModalOpen(false)} className="text-slate-400 hover:text-slate-600 transition-colors"><X size={20} /></button>
+        <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-2xl p-8 w-full max-w-lg shadow-2xl animate-in zoom-in duration-200 transition-colors border border-transparent dark:border-dark-border">
+            <h3 className="text-xl font-bold text-zinc-900 dark:text-dark-text mb-6">{editingUser ? 'Editar Usuário' : 'Novo Membro'}</h3>
+            <form onSubmit={handleSave} className="space-y-5">
+              <div>
+                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome Completo</label>
+                <input type="text" 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-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20" required />
               </div>
-            
-            <form onSubmit={handleSave} className="p-6 space-y-4">
-               <div className="space-y-2">
-                 <label className="text-sm font-medium text-slate-700">Nome Completo</label>
-                 <input 
-                    type="text" 
-                    required
-                    className="w-full px-3 py-2 border border-slate-200 bg-slate-50 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all" 
-                    placeholder="João Silva" 
-                    value={formData.name}
-                    onChange={(e) => setFormData({...formData, name: e.target.value})}
-                 />
-               </div>
-               
-               <div className="space-y-2">
-                 <label className="text-sm font-medium text-slate-700">Endereço de E-mail</label>
+              <div>
+                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">E-mail</label>
                 <input 
                   type="email" 
-                    required
-                    className="w-full px-3 py-2 border border-slate-200 bg-slate-50 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all" 
-                    placeholder="joao@empresa.com" 
                   value={formData.email} 
-                    onChange={(e) => setFormData({...formData, email: e.target.value})}
+                  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 className="space-y-2">
-                   <label className="text-sm font-medium text-slate-700">Função</label>
+                <div>
+                  <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Função</label>
                   <select 
-                      className="w-full px-3 py-2 border border-slate-200 bg-slate-50 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 transition-all cursor-pointer"
                     value={formData.role} 
-                      onChange={(e) => setFormData({...formData, role: e.target.value as any})}
+                    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 className="space-y-2">
-                   <label className="text-sm font-medium text-slate-700">Time</label>
-                   <select 
-                      className="w-full px-3 py-2 border border-slate-200 bg-slate-50 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 transition-all cursor-pointer"
-                      value={formData.team_id}
-                      onChange={(e) => setFormData({...formData, team_id: e.target.value})}
-                   >
-                     <option value="sales_1">Vendas Alpha</option>
-                     <option value="sales_2">Vendas Beta</option>
+                <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.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>
-
-                <div className="space-y-2">
-                  <label className="text-sm font-medium text-slate-700">Status da Conta</label>
-                  <select 
-                     className="w-full px-3 py-2 border border-slate-200 bg-slate-50 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-100 transition-all cursor-pointer"
-                     value={formData.status}
-                     onChange={(e) => setFormData({...formData, status: e.target.value as any})}
-                  >
+              <div>
+                <label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Status</label>
+                <select value={formData.status} onChange={e => setFormData({...formData, status: 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">
                   <option value="active">Ativo</option>
                   <option value="inactive">Inativo</option>
                 </select>
               </div>
-
-               <div className="pt-4 flex justify-end gap-3">
-                 <button 
-                    type="button"
-                    onClick={() => setIsModalOpen(false)}
-                    className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg text-sm font-medium transition-colors"
-                 >
-                   Cancelar
-                 </button>
-                 <button 
-                    type="submit"
-                    className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg font-medium text-sm hover:bg-slate-800 transition-colors shadow-sm"
-                 >
-                   <Save size={16} /> {editingUser ? 'Salvar Alterações' : 'Adicionar Membro'}
-                 </button>
+              <div className="flex justify-end gap-3 pt-6 border-t dark:border-dark-border mt-6">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="px-6 py-2.5 text-sm font-medium text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors">Cancelar</button>
+                <button type="submit" disabled={isSaving} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-8 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all">{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Alterações'}</button>
               </div>
             </form>
           </div>
         </div>
       )}
+
+      {isDeleteModalOpen && userToDelete && (
+        <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-2xl p-8 w-full max-w-md shadow-xl animate-in zoom-in duration-200 text-center transition-colors border border-transparent dark:border-dark-border">
+            <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-4"><AlertTriangle size={32} /></div>
+            <h3 className="text-xl font-bold text-zinc-900 dark:text-dark-text mb-2">Excluir {userToDelete.name}?</h3>
+            <p className="text-sm text-zinc-500 dark:text-dark-muted mb-8 leading-relaxed">Esta ação é <strong>permanente</strong>. Para confirmar, digite o nome completo dele abaixo:</p>
+            <input type="text" value={deleteConfirmName} onChange={e => setDeleteConfirmName(e.target.value)} className="w-full bg-white dark:bg-dark-input border-2 border-red-50 dark:border-red-900/20 p-3 rounded-xl mb-8 text-center font-bold text-base text-zinc-900 dark:text-dark-text outline-none focus:ring-2 focus:ring-red-100 dark:focus:ring-red-900/40 transition-all" placeholder="Nome completo" />
+            <div className="flex gap-3">
+              <button onClick={() => setIsDeleteModalOpen(false)} className="flex-1 py-3 text-sm font-bold text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg border border-zinc-100 dark:border-dark-border transition-colors">Cancelar</button>
+              <button onClick={handleConfirmDelete} disabled={isSaving || deleteConfirmName !== userToDelete.name} className="flex-1 py-3 text-sm font-bold bg-red-600 text-white rounded-lg disabled:opacity-50 shadow-lg shadow-red-200 dark:shadow-none transition-all hover:bg-red-700">Excluir para sempre</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

pages/Teams.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect, useMemo } from 'react';
+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);
+  const [editingTeam, setEditingTeam] = useState<any | null>(null);
+  const [formData, setFormData] = useState({ name: '', description: '' });
+
+  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, me] = await Promise.all([
+        getTeams(tid),
+        getUsers(tid),
+        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); }
+  };
+
+  useEffect(() => { loadData(); }, []);
+
+  const stats = useMemo(() => teams.map(t => {
+    const tu = users.filter(u => u.team_id === t.id);
+    const ta = attendances.filter(a => tu.some(u => u.id === a.user_id));
+    const wins = ta.filter(a => a.converted).length;
+    const rate = ta.length > 0 ? (wins / ta.length) * 100 : 0;
+    return { ...t, memberCount: tu.length, rate: rate.toFixed(1) };
+  }), [teams, users, attendances]);
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      const tid = localStorage.getItem('ctms_tenant_id') || '';
+      const success = editingTeam
+        ? await updateTeam(editingTeam.id, formData)
+        : await createTeam({ ...formData, tenantId: tid });
+      if (success) { setIsModalOpen(false); loadData(); }
+    } 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">
+            {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">
+        {stats.map(t => (
+          <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>
+              {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>
+            <div className="grid grid-cols-2 gap-4 pt-6 border-t border-zinc-50 dark:border-dark-border text-sm">
+              <div className="space-y-1">
+                <span className="text-zinc-400 dark:text-dark-muted block text-[10px] font-bold uppercase tracking-wider">Membros</span>
+                <strong className="text-lg text-zinc-800 dark:text-zinc-200">{t.memberCount}</strong>
+              </div>
+              <div className="space-y-1 text-right">
+                <span className="text-zinc-400 dark:text-dark-muted block text-[10px] font-bold uppercase tracking-wider">Conversão</span>
+                <strong className="text-lg text-brand-yellow">{t.rate}%</strong>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {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-2xl p-8 w-full max-w-md shadow-2xl animate-in zoom-in duration-200 transition-colors border border-transparent dark:border-dark-border">
+            <div className="flex justify-between items-center mb-6 pb-4 border-b border-zinc-100 dark:border-dark-border">
+              <h3 className="text-xl font-bold text-zinc-900 dark:text-zinc-50">{editingTeam ? 'Editar Time' : 'Novo Time'}</h3>
+              <button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors"><X size={20} /></button>
+            </div>
+            <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" 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>
+                <textarea placeholder="Breve descrição..." value={formData.description} onChange={e => setFormData({...formData, description: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 resize-none h-28 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
+              </div>
+              <div className="flex justify-end gap-3 pt-6 border-t dark:border-dark-border mt-6">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="px-6 py-2.5 text-sm font-medium text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-bg rounded-lg transition-colors">Cancelar</button>
+                <button type="submit" disabled={isSaving} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-8 py-2.5 rounded-lg text-sm font-bold shadow-lg transition-all hover:opacity-90">
+                  {isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Time'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

pages/UserDetail.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { getAttendances, getUserById } from '../services/dataService';
-import { CURRENT_TENANT_ID } from '../constants';
-import { Attendance, User, FunnelStage } from '../types';
-import { ArrowLeft, Mail, Phone, Clock, MessageSquare, ChevronLeft, ChevronRight, Eye } from 'lucide-react';
+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;
 
@@ -11,8 +11,16 @@ 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(Date.now() - 30 * 24 * 60 * 60 * 1000), end: new Date() },
+    userId: id,
+    funnelStage: 'all',
+    origin: 'all'
+  });
 
   useEffect(() => {
     if (id) {
@@ -20,15 +28,35 @@ export const UserDetail: React.FC = () => {
       
       const loadData = async () => {
         try {
+          const tenantId = localStorage.getItem('ctms_tenant_id');
           const u = await getUserById(id);
           setUser(u);
           
-          if (u) {
-            const data = await getAttendances(CURRENT_TENANT_ID, { 
-              userId: id, 
-              dateRange: { start: new Date(0), end: new Date() } // All time
-            });
+          if (u && 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);
@@ -39,7 +67,12 @@ export const UserDetail: React.FC = () => {
 
       loadData();
     }
-  }, [id]);
+  }, [id, filters]);
+
+  const handleFilterChange = (key: keyof DashboardFilter, value: any) => {
+    setFilters(prev => ({ ...prev, [key]: value }));
+    setCurrentPage(1); // Reset pagination on filter change
+  };
 
   const totalPages = Math.ceil(attendances.length / ITEMS_PER_PAGE);
   
@@ -54,40 +87,51 @@ 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';
-      case FunnelStage.LOST: return 'bg-red-100 text-red-700 border-red-200';
-      case FunnelStage.NEGOTIATION: return 'bg-blue-100 text-blue-700 border-blue-200';
-      case FunnelStage.IDENTIFICATION: return 'bg-yellow-100 text-yellow-700 border-yellow-200';
-      default: return 'bg-slate-100 text-slate-700 border-slate-200';
+      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';
+      case FunnelStage.NEGOTIATION: return 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800';
+      case FunnelStage.IDENTIFICATION: return 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400 dark:border-yellow-800';
+      default: return 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-700';
     }
   };
 
   const getScoreColor = (score: number) => {
-    if (score >= 80) return 'text-green-600 bg-green-50';
-    if (score >= 60) return 'text-yellow-600 bg-yellow-50';
-    return 'text-red-600 bg-red-50';
+    if (score >= 80) return 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400';
+    if (score >= 60) return 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400';
+    return 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400';
   };
 
-  if (!loading && !user) return <div className="p-8 text-slate-500">Usuário não encontrado</div>;
+  if (!loading && !user) return <div className="p-8 text-zinc-500 dark:text-dark-muted transition-colors">Usuário não encontrado</div>;
+
+  const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
 
   return (
-    <div className="space-y-8 max-w-7xl mx-auto">
+    <div className="space-y-8 max-w-7xl mx-auto transition-colors duration-300">
       {/* Header Section */}
       <div className="flex flex-col md:flex-row gap-6 items-start md:items-center justify-between">
         <div className="flex items-center gap-4">
-          <Link to="/" className="p-2.5 bg-white border border-slate-200 rounded-lg text-slate-500 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-sm">
+          <Link to="/" className="p-2.5 bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-lg text-zinc-500 dark:text-dark-muted hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-dark-text transition-all shadow-sm">
             <ArrowLeft size={18} />
           </Link>
           {user && (
             <div className="flex items-center gap-4">
-              <img src={user.avatar_url} alt={user.name} className="w-16 h-16 rounded-full border-2 border-white shadow-md object-cover" />
+              <img 
+                src={user.avatar_url 
+                  ? (user.avatar_url.startsWith('http') ? user.avatar_url : `${backendUrl}${user.avatar_url}`)
+                  : `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`} 
+                alt={user.name} 
+                className="w-16 h-16 rounded-full border-2 border-white dark:border-dark-border shadow-md object-cover" 
+              />
               <div>
-                <h1 className="text-2xl font-bold text-slate-900 tracking-tight">{user.name}</h1>
-                <div className="flex items-center gap-3 text-sm text-slate-500 mt-1">
+                <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text tracking-tight">{user.name}</h1>
+                <div className="flex items-center gap-3 text-sm text-zinc-500 dark:text-dark-muted mt-1">
                   <span className="flex items-center gap-1.5"><Mail size={14} /> {user.email}</span>
-                  <span className="bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-xs font-semibold uppercase">{user.role}</span>
+                  <span className="bg-zinc-100 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted px-2 py-0.5 rounded text-xs font-semibold uppercase">{user.role}</span>
                 </div>
               </div>
             </div>
@@ -95,40 +139,77 @@ export const UserDetail: React.FC = () => {
         </div>
       </div>
 
+      {/* Filters Section */}
+      <div className="bg-white dark:bg-dark-card p-4 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium mr-2">
+          <Filter size={18} />
+          <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>
+          {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>
+          {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">
-        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-          <div className="text-sm font-medium text-slate-500 mb-2">Total de Interações</div>
-          <div className="text-3xl font-bold text-slate-900">{attendances.length}</div>
+        <div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
+          <div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Total de Interações</div>
+          <div className="text-3xl font-bold text-zinc-900 dark:text-dark-text">{attendances.length}</div>
         </div>
-        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-           <div className="text-sm font-medium text-slate-500 mb-2">Taxa de Conversão</div>
-           <div className="text-3xl font-bold text-blue-600">
+        <div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
+           <div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Taxa de Conversão</div>
+           <div className="text-3xl font-bold text-brand-yellow">
              {attendances.length ? ((attendances.filter(a => a.converted).length / attendances.length) * 100).toFixed(1) : 0}%
            </div>
         </div>
-         <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-           <div className="text-sm font-medium text-slate-500 mb-2">Nota Média</div>
-           <div className="text-3xl font-bold text-yellow-500">
+         <div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
+           <div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Nota Média</div>
+           <div className="text-3xl font-bold text-zinc-800 dark:text-zinc-100">
              {attendances.length ? (attendances.reduce((acc, c) => acc + c.score, 0) / attendances.length).toFixed(1) : 0}
            </div>
         </div>
       </div>
 
       {/* Attendance Table */}
-      <div className="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden flex flex-col">
-        <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
-          <h2 className="font-semibold text-slate-900">Histórico de Atendimentos</h2>
-          <span className="text-xs text-slate-500 font-medium bg-slate-200/50 px-2 py-1 rounded">Página {currentPage} de {totalPages || 1}</span>
+      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden flex flex-col transition-colors">
+        <div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
+          <h2 className="font-semibold text-zinc-900 dark:text-zinc-100">Histórico de Atendimentos</h2>
+          <span className="text-xs text-zinc-500 dark:text-dark-muted font-medium bg-zinc-200/50 dark:bg-zinc-800 px-2 py-1 rounded transition-colors">Página {currentPage} de {totalPages || 1}</span>
         </div>
 
         {loading ? (
-          <div className="p-12 text-center text-slate-400">Carregando registros...</div>
+          <div className="p-12 text-center text-zinc-400 dark:text-dark-muted">Carregando registros...</div>
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full text-left border-collapse">
               <thead>
-                <tr className="border-b border-slate-100 text-xs uppercase text-slate-500 bg-slate-50/30">
+                <tr className="border-b border-zinc-100 dark:border-zinc-800 text-xs uppercase text-zinc-500 dark:text-dark-muted bg-zinc-50/30 dark:bg-dark-bg/30">
                   <th className="px-6 py-4 font-medium">Data / Hora</th>
                   <th className="px-6 py-4 font-medium w-1/3">Resumo</th>
                   <th className="px-6 py-4 font-medium text-center">Etapa</th>
@@ -137,20 +218,18 @@ export const UserDetail: React.FC = () => {
                   <th className="px-6 py-4 font-medium text-right">Ação</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100 text-sm">
+              <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800 text-sm">
                 {currentData.map(att => (
-                  <tr key={att.id} className="hover:bg-slate-50/80 transition-colors group">
-                    <td className="px-6 py-4 text-slate-600 whitespace-nowrap">
-                      <div className="font-medium text-slate-900">{new Date(att.created_at).toLocaleDateString()}</div>
-                      <div className="text-xs text-slate-400">{new Date(att.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
+                  <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('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-slate-800 line-clamp-1 font-medium mb-1">{att.summary}</span>
-                        <div className="flex items-center gap-2 text-xs text-slate-500">
+                      <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)}`}>
@@ -162,16 +241,16 @@ export const UserDetail: React.FC = () => {
                         {att.score}
                       </span>
                     </td>
-                    <td className="px-6 py-4 text-center text-slate-600">
+                    <td className="px-6 py-4 text-center text-zinc-600 dark:text-zinc-300">
                       <div className="flex items-center justify-center gap-1">
-                        <Clock size={14} className="text-slate-400" />
+                        <Clock size={14} className="text-zinc-400 dark:text-dark-muted" />
                         {att.first_response_time_min}m
                       </div>
                     </td>
                     <td className="px-6 py-4 text-right">
                       <Link 
                         to={`/attendances/${att.id}`}
-                        className="inline-flex items-center justify-center p-2 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 transition-all"
+                        className="inline-flex items-center justify-center p-2 rounded-lg text-zinc-400 dark:text-dark-muted hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
                         title="Ver Detalhes"
                       >
                         <Eye size={18} />
@@ -186,21 +265,21 @@ export const UserDetail: React.FC = () => {
 
         {/* Pagination Footer */}
         {totalPages > 1 && (
-          <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-between bg-slate-50/30">
+          <div className="px-6 py-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/30 dark:bg-dark-bg/30">
             <button
               onClick={() => handlePageChange(currentPage - 1)}
               disabled={currentPage === 1}
-              className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
+              className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-dark-text bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
             >
               <ChevronLeft size={16} /> Anterior
             </button>
-            <div className="text-sm text-slate-500">
-              Mostrando <span className="font-medium text-slate-900">{((currentPage - 1) * ITEMS_PER_PAGE) + 1}</span> a <span className="font-medium text-slate-900">{Math.min(currentPage * ITEMS_PER_PAGE, attendances.length)}</span> de {attendances.length}
+            <div className="text-sm text-zinc-500 dark:text-dark-muted">
+              Mostrando <span className="font-medium text-zinc-900 dark:text-zinc-100">{((currentPage - 1) * ITEMS_PER_PAGE) + 1}</span> a <span className="font-medium text-zinc-900 dark:text-zinc-100">{Math.min(currentPage * ITEMS_PER_PAGE, attendances.length)}</span> de {attendances.length}
             </div>
             <button
               onClick={() => handlePageChange(currentPage + 1)}
               disabled={currentPage === totalPages}
-              className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
+              className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-dark-text bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
             >
               Próximo <ChevronRight size={16} />
             </button>

pages/UserProfile.tsx

@@ -1,98 +1,187 @@
-import React, { useState, useEffect } from 'react';
-import { Camera, Save, Mail, User as UserIcon, Building, Shield, Loader2, CheckCircle2 } from 'lucide-react';
-import { USERS } from '../constants';
-import { User } from '../types';
+import React, { useState, useEffect, useRef } from 'react';
+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 = () => {
-  // Simulating logged-in user state
   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);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   
-  // Form State
   const [name, setName] = useState('');
   const [bio, setBio] = useState('');
+  const [email, setEmail] = useState('');
 
   useEffect(() => {
-    // Simulate fetching user data
-    const currentUser = USERS[0];
-    setUser(currentUser);
-    setName(currentUser.name);
-    setBio(currentUser.bio || '');
+    const fetchUserAndTenant = async () => {
+      const storedUserId = localStorage.getItem('ctms_user_id');
+      
+      if (storedUserId) {
+        try {
+          const fetchedUser = await getUserById(storedUserId);
+          if (fetchedUser) {
+            setUser(fetchedUser);
+            setName(fetchedUser.name);
+            setBio(fetchedUser.bio || '');
+            setEmail(fetchedUser.email);
+
+            // Fetch tenant info
+            const tenants = await getTenants();
+            const userTenant = tenants.find(t => t.id === fetchedUser.tenant_id);
+            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);
+        }
+      }
+    };
+    fetchUserAndTenant();
   }, []);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !user) return;
+
+    if (file.size > 2 * 1024 * 1024) {
+      alert('Arquivo muito grande. Máximo de 2MB.');
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      const newUrl = await uploadAvatar(user.id, file);
+      if (newUrl) {
+        setUser({ ...user, avatar_url: newUrl });
+        window.location.reload();
+      } else {
+        alert('Erro ao fazer upload da imagem.');
+      }
+    } catch (err) {
+      console.error(err);
+      alert('Erro ao conectar ao servidor.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!user) return;
+
     setIsLoading(true);
     setIsSuccess(false);
 
-    // Simulate API call
-    setTimeout(() => {
-      setIsLoading(false);
+    try {
+      const success = await updateUser(user.id, { name, bio, email });
+      if (success) {
         setIsSuccess(true);
-      // In a real app, we would update the user context/store here
+        setUser({ ...user, name, bio, email });
         setTimeout(() => setIsSuccess(false), 3000);
-    }, 1500);
+      } else {
+        alert('Erro ao salvar alterações no servidor.');
+      }
+    } catch (err) {
+      console.error("Submit failed:", err);
+      alert('Erro ao conectar ao servidor.');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  if (!user) return <div className="p-8 text-center text-slate-500">Carregando perfil...</div>;
+  if (!user) return <div className="p-8 text-center text-zinc-500 dark:text-zinc-400 transition-colors">Carregando perfil...</div>;
+
+  const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
+  const displayAvatar = user.avatar_url 
+    ? (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">
+    <div className="max-w-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
       <div>
-        <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Meu Perfil</h1>
-        <p className="text-slate-500 text-sm">Gerencie suas informações pessoais e preferências.</p>
+        <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Meu Perfil</h1>
+        <p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie suas informações pessoais e preferências.</p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         {/* Left Column: Avatar & Basic Info */}
         <div className="md:col-span-1 space-y-6">
-          <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col items-center text-center">
-            <div className="relative group cursor-pointer">
-              <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-slate-50 shadow-sm">
-                <img src={user.avatar_url} alt={user.name} className="w-full h-full object-cover" />
+          <div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-zinc-200 dark:border-zinc-800 flex flex-col items-center text-center">
+            <input 
+              type="file" 
+              ref={fileInputRef} 
+              onChange={handleFileChange} 
+              accept="image/jpeg,image/png,image/webp"
+              className="hidden" 
+            />
+            <div className="relative group cursor-pointer" onClick={handleAvatarClick}>
+              <div className="w-32 h-32 rounded-full overflow-hidden border-4 border-zinc-50 dark:border-zinc-800 shadow-sm bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
+                {isUploading ? (
+                  <Loader2 className="animate-spin text-zinc-400 dark:text-zinc-500" size={32} />
+                ) : (
+                  <img src={displayAvatar} alt={user.name} className="w-full h-full object-cover" />
+                )}
               </div>
               <div className="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                 <Camera className="text-white" size={28} />
               </div>
-              <button className="absolute bottom-0 right-2 bg-white text-slate-600 p-2 rounded-full shadow-md border border-slate-100 hover:text-blue-600 transition-colors">
+              <button className="absolute bottom-0 right-2 bg-white dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 p-2 rounded-full shadow-md border border-zinc-100 dark:border-zinc-700 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors">
                  <Camera size={16} />
               </button>
             </div>
             
-            <h2 className="mt-4 text-lg font-bold text-slate-900">{user.name}</h2>
-            <p className="text-slate-500 text-sm">{user.email}</p>
+            <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">
-                {user.role}
+            <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>
-              <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200">
-                {user.team_id === 'sales_1' ? 'Vendas Alpha' : 'Vendas Beta'}
+              {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>
           </div>
 
-          <div className="bg-slate-100 rounded-xl p-4 border border-slate-200">
-            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Status da Conta</h3>
-            <div className="flex items-center gap-3 text-sm text-slate-600 mb-2">
-              <div className="w-2 h-2 rounded-full bg-green-500"></div>
-              Ativo
+          <div className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 border border-zinc-200 dark:border-zinc-800">
+            <h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3">Status da Conta</h3>
+            <div className="flex items-center gap-3 text-sm text-zinc-600 dark:text-zinc-300 mb-2">
+              <div className={`w-2 h-2 rounded-full ${user.status === 'active' ? 'bg-green-500' : 'bg-zinc-400'}`}></div>
+              {user.status === 'active' ? 'Ativo' : 'Inativo'}
             </div>
-            <div className="flex items-center gap-3 text-sm text-slate-600">
+            <div className="flex items-center gap-3 text-sm text-zinc-600 dark:text-zinc-300">
               <Building size={14} />
-              Fasto Corp (Organização)
+              {tenant?.name || 'Organização'}
             </div>
           </div>
         </div>
 
         {/* Right Column: Edit Form */}
         <div className="md:col-span-2">
-          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
-            <div className="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
-              <h3 className="font-bold text-slate-800">Informações Pessoais</h3>
+          <div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+            <div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 flex justify-between items-center">
+              <h3 className="font-bold text-zinc-800 dark:text-zinc-100">Informações Pessoais</h3>
               {isSuccess && (
-                <span className="flex items-center gap-1.5 text-green-600 text-sm font-medium animate-in fade-in slide-in-from-right-4">
+                <span className="flex items-center gap-1.5 text-green-600 dark:text-green-400 text-sm font-medium animate-in fade-in slide-in-from-right-4">
                   <CheckCircle2 size={16} /> Salvo com sucesso
                 </span>
               )}
@@ -101,63 +190,76 @@ export const UserProfile: React.FC = () => {
             <form onSubmit={handleSubmit} className="p-6 space-y-6">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div className="space-y-2">
-                  <label htmlFor="fullName" className="block text-sm font-medium text-slate-700">
+                  <label htmlFor="fullName" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
                     Nome Completo
                   </label>
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <UserIcon className="h-5 w-5 text-slate-400" />
+                      <UserIcon className="h-5 w-5 text-zinc-400 dark:text-zinc-500" />
                     </div>
                     <input
                       type="text"
                       id="fullName"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
-                      className="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 sm:text-sm transition-all"
+                      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">
-                  <label htmlFor="email" className="block text-sm font-medium text-slate-700">
+                  <label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
                     Endereço de E-mail
                   </label>
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <Mail className="h-5 w-5 text-slate-400" />
+                      <Mail className="h-5 w-5 text-zinc-400 dark:text-zinc-500" />
                     </div>
                     <input
                       type="email"
                       id="email"
-                      value={user.email}
-                      disabled
-                      className="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-slate-50 text-slate-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-slate-400 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>
 
               <div className="space-y-2">
-                <label htmlFor="role" className="block text-sm font-medium text-slate-700">
+                <label htmlFor="role" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
                   Função e Permissões
                 </label>
                 <div className="relative">
                   <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <Shield className="h-5 w-5 text-slate-400" />
+                    <Shield className="h-5 w-5 text-zinc-400 dark:text-zinc-500" />
                   </div>
                   <input
                     type="text"
                     id="role"
-                    value={user.role.charAt(0).toUpperCase() + user.role.slice(1)}
+                    value={user.role === 'admin' ? 'Administrador' : user.role === 'manager' ? 'Gerente' : user.role === 'super_admin' ? 'Super Admin' : 'Agente'}
                     disabled
-                    className="block w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg bg-slate-50 text-slate-500 cursor-not-allowed sm:text-sm"
+                    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"
                   />
                 </div>
               </div>
 
               <div className="space-y-2">
-                <label htmlFor="bio" className="block text-sm font-medium text-slate-700">
+                <label htmlFor="bio" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
                   Bio / Descrição
                 </label>
                 <textarea
@@ -165,27 +267,53 @@ export const UserProfile: React.FC = () => {
                   rows={4}
                   value={bio}
                   onChange={(e) => setBio(e.target.value)}
-                  className="block w-full p-3 border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-500 sm:text-sm transition-all resize-none"
+                  className="block w-full p-3 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 resize-none"
                   placeholder="Escreva uma breve descrição sobre você..."
                 />
-                <p className="text-xs text-slate-400 text-right">{bio.length}/500 caracteres</p>
+                <p className="text-xs text-zinc-400 dark:text-zinc-500 text-right">{bio.length}/500 caracteres</p>
               </div>
 
-              <div className="pt-4 flex items-center justify-end border-t border-slate-100 mt-6">
+              <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"
                   onClick={() => {
                     setName(user.name);
                     setBio(user.bio || '');
                   }}
-                  className="mr-3 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-50 rounded-lg transition-colors"
+                  className="mr-3 px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
                 >
                   Desfazer Alterações
                 </button>
                 <button
                   type="submit"
                   disabled={isLoading}
-                  className="flex items-center gap-2 bg-slate-900 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition-all disabled:opacity-70 disabled:cursor-not-allowed"
+                  className="flex items-center gap-2 bg-zinc-900 dark:bg-yellow-400 text-white dark:text-zinc-950 px-6 py-2 rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-zinc-900 dark:focus:ring-yellow-400 transition-all disabled:opacity-70 disabled:cursor-not-allowed"
                 >
                   {isLoading ? (
                     <>

pages/VerifyCode.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useNavigate, Link, useLocation } from 'react-router-dom';
+import { Hexagon, ArrowRight, Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { verifyCode } from '../services/dataService';
+
+export const VerifyCode: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const email = location.state?.email || '';
+  const [code, setCode] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) { setError('E-mail não encontrado. Tente registrar novamente.'); return; }
+    
+    setIsLoading(true);
+    setError('');
+    
+    try {
+      const success = await verifyCode({ email, code });
+      if (success) {
+        navigate('/login', { state: { message: 'E-mail verificado com sucesso! Agora você pode entrar.' } });
+      }
+    } catch (err: any) {
+      setError(err.message || 'Código inválido ou 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">
+          Verifique seu e-mail
+        </h2>
+        <p className="mt-2 text-center text-sm text-zinc-600 dark:text-dark-muted px-4">
+          Insira o código de 6 dígitos enviado para <span className="font-semibold text-zinc-900 dark:text-zinc-200">{email}</span>
+        </p>
+      </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">
+          <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 text-red-600 dark:text-red-400 text-sm">
+                <AlertCircle size={18} />
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="code" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 text-center mb-4">
+                Código de Verificação
+              </label>
+              <input
+                id="code"
+                type="text"
+                maxLength={6}
+                required
+                value={code}
+                onChange={(e) => setCode(e.target.value.replace(/[^0-9]/g, ''))}
+                className="block w-full text-center text-3xl tracking-[0.5em] font-bold py-3 border border-zinc-300 dark:border-dark-border rounded-lg bg-zinc-50 dark:bg-dark-input text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-brand-yellow/20 focus:border-brand-yellow transition-all"
+                placeholder="000000"
+              />
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                disabled={isLoading || code.length < 6}
+                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 disabled:opacity-70 disabled:cursor-not-allowed transition-all"
+              >
+                {isLoading ? (
+                  <Loader2 className="animate-spin h-5 w-5" />
+                ) : (
+                  <>
+                    Verificar Código <ArrowRight size={18} />
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+
+          <div className="mt-6 text-center">
+            <button 
+              type="button"
+              className="text-sm font-medium text-brand-yellow hover:text-yellow-600 transition-colors"
+              onClick={() => navigate('/register')}
+            >
+              Voltar e corrigir e-mail
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

services/dataService.ts

@@ -6,6 +6,390 @@ 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 = (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' };
+  
+  return {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${token}`
+  };
+};
+
+// 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();
@@ -16,8 +400,12 @@ export const getAttendances = async (tenantId: string, filter: DashboardFilter):
     
     if (filter.userId && filter.userId !== 'all') params.append('userId', filter.userId);
     if (filter.teamId && filter.teamId !== 'all') params.append('teamId', filter.teamId);
+    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()
+    });
     
     if (!response.ok) {
       throw new Error('Falha ao buscar atendimentos do servidor');
@@ -36,7 +424,9 @@ 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');
     
     return await response.json();
@@ -48,20 +438,114 @@ 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}`);
-    if (!response.ok) return undefined;
+    const response = await apiFetch(`${API_URL}/users/${id}`, {
+      headers: getHeaders()
+    });
+    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();
+    }
   } 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 apiFetch(`${API_URL}/users/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(userData)
+    });
+    
+    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);
+    throw error;
+  }
+};
+
+export const uploadAvatar = async (id: string, file: File): Promise<string | null> => {
+  try {
+    const formData = new FormData();
+    formData.append('avatar', file);
+
+    const token = localStorage.getItem('ctms_token');
+    const response = await apiFetch(`${API_URL}/users/${id}/avatar`, {
+      method: 'POST',
+      headers: {
+        ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+      },
+      body: formData
+    });
+
+    if (!response.ok) throw new Error('Falha no upload');
+    const data = await response.json();
+    return data.avatarUrl;
+  } catch (error) {
+    console.error("API Error (uploadAvatar):", error);
+    return null;
+  }
+};
+
+export const createMember = async (userData: any): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/users`, {
+      method: 'POST',
+      headers: getHeaders(),
+      body: JSON.stringify(userData)
+    });
+    
+    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);
+    throw error;
+  }
+};
+
+export const deleteUser = async (id: string): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/users/${id}`, {
+      method: 'DELETE',
+      headers: getHeaders()
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (deleteUser):", error);
+    return false;
   }
 };
 
 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;
+    
+    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 (getAttendanceById):", error);
     return undefined;
@@ -70,25 +554,298 @@ 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');
+    
+    const contentType = response.headers.get("content-type");
+    if (contentType && contentType.indexOf("application/json") !== -1) {
       return await response.json();
+    }
+    return [];
   } catch (error) {
     console.error("API Error (getTenants):", error);
     return [];
   }
 };
 
-export const createTenant = async (tenantData: any): Promise<boolean> => {
+export const getTeams = async (tenantId: string): Promise<any[]> => {
   try {
-    const response = await fetch(`${API_URL}/tenants`, {
+    const response = await apiFetch(`${API_URL}/teams?tenantId=${tenantId}`, {
+      headers: getHeaders()
+    });
+    if (!response.ok) throw new Error('Falha ao buscar equipes');
+    return await response.json();
+  } catch (error) {
+    console.error("API Error (getTeams):", error);
+    return [];
+  }
+};
+
+export const createTeam = async (teamData: any): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/teams`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: getHeaders(),
+      body: JSON.stringify(teamData)
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (createTeam):", error);
+    return false;
+  }
+};
+
+export const updateTeam = async (id: string, teamData: any): Promise<boolean> => {
+  try {
+    const response = await apiFetch(`${API_URL}/teams/${id}`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(teamData)
+    });
+    return response.ok;
+  } catch (error) {
+    console.error("API Error (updateTeam):", error);
+    return false;
+  }
+};
+
+export const deleteTeam = async (id: string): Promise<boolean> => {
+  try {
+    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> => {
+  const response = await fetch(`${API_URL}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(credentials)
+  });
+  
+  const contentType = response.headers.get("content-type");
+  const isJson = contentType && contentType.indexOf("application/json") !== -1;
+  
+  if (!response.ok) {
+    const error = isJson ? await response.json() : { error: 'Erro no servidor' };
+    throw new Error(error.error || 'Erro no login');
+  }
+  
+  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 apiFetch(`${API_URL}/auth/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(userData)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Erro no registro');
+  }
+  return true;
+};
+
+export const verifyCode = async (data: any): Promise<boolean> => {
+  const response = await apiFetch(`${API_URL}/auth/verify`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Código inválido ou expirado');
+  }
+  return true;
+};
+
+export const forgotPassword = async (email: string): Promise<string> => {
+  const response = await apiFetch(`${API_URL}/auth/forgot-password`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email })
+  });
+  
+  const contentType = response.headers.get("content-type");
+  const isJson = contentType && contentType.indexOf("application/json") !== -1;
+  
+  if (!response.ok) {
+    const error = isJson ? await response.json() : { error: 'Erro no servidor' };
+    throw new Error(error.error || 'Erro ao processar solicitação');
+  }
+  
+  const data = isJson ? await response.json() : { message: 'Solicitação processada' };
+  return data.message;
+};
+
+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, name })
+  });
+  
+  const contentType = response.headers.get("content-type");
+  const isJson = contentType && contentType.indexOf("application/json") !== -1;
+  
+  if (!response.ok) {
+    const error = isJson ? await response.json() : { error: 'Erro no servidor' };
+    throw new Error(error.error || 'Erro ao resetar senha');
+  }
+  
+  const data = isJson ? await response.json() : { message: 'Senha redefinida' };
+  return data.message;
+};

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();

tsconfig.json

@@ -11,7 +11,8 @@
     ],
     "skipLibCheck": true,
     "types": [
-      "node"
+      "node",
+      "vite/client"
     ],
     "moduleResolution": "bundler",
     "isolatedModules": true,

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' | 'Referral';
+  funnel_stage: string;
+  origin: string;
   product_requested: string;
   product_sold?: string;
   converted: boolean;
@@ -59,4 +93,6 @@ export interface DashboardFilter {
   dateRange: DateRange;
   userId?: string;
   teamId?: string;
+  funnelStage?: string;
+  origin?: string;
 }