feat: complete UI/UX refinement, email flow updates, and deep black theme

- Updated all email templates to a clean light theme and changed button text to 'Finalizar Cadastro'.

- Enforced a strict 15-minute expiration on all auth/reset tokens.

- Created SetupAccount flow distinct from ResetPassword to capture user name during admin init.

- Refined dark mode to a premium True Black (Onyx) palette using Zinc.

- Fixed Dashboard KPI visibility and true period-over-period trend logic.

- Enhanced TeamManagement with global tenant filtering for Super Admins.

- Implemented secure User URL routing via slugs instead of raw UUIDs.

- Enforced strict Agent-level RBAC for viewing attendances.

pages/Dashboard.tsx

@@ -25,6 +25,7 @@ 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 [currentUser, setCurrentUser] = useState<User | null>(null);
@@ -48,16 +49,24 @@ export const Dashboard: React.FC = () => {
         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 and current user in parallel
-        const [fetchedUsers, fetchedData, fetchedTeams, me] = await Promise.all([
+        const [fetchedUsers, fetchedData, prevFetchedData, fetchedTeams, me] = await Promise.all([
           getUsers(tenantId),
           getAttendances(tenantId, filters),
+          getAttendances(tenantId, prevFilters),
           getTeams(tenantId),
           storedUserId ? getUserById(storedUserId) : null
         ]);
         
         setUsers(fetchedUsers);
         setData(fetchedData);
+        setPrevData(prevFetchedData);
         setTeams(fetchedTeams);
         if (me) setCurrentUser(me);
       } catch (error) {
@@ -74,6 +83,48 @@ export const Dashboard: React.FC = () => {
   const avgScore = data.length > 0 ? (data.reduce((acc, curr) => acc + curr.score, 0) / data.length).toFixed(1) : "0";
   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(() => {
@@ -245,25 +296,25 @@ export const Dashboard: React.FC = () => {
         <KPICard 
           title="Total de Leads" 
           value={totalLeads} 
-          trend="up" 
-          trendValue="12%" 
+          trend={trends.leads > 0 ? 'up' : trends.leads < 0 ? 'down' : 'neutral'}
+          trendValue={`${Math.abs(trends.leads).toFixed(1)}%`}
           icon={Users} 
-          colorClass="text-yellow-600"
+          colorClass="text-brand-yellow"
         />
         <KPICard 
           title="Nota Média Qualidade" 
           value={avgScore} 
           subValue="/ 100"
-          trend={Number(avgScore) > 75 ? 'up' : 'down'}
-          trendValue="2.1"
+          trend={trends.score > 0 ? 'up' : trends.score < 0 ? 'down' : 'neutral'}
+          trendValue={Math.abs(trends.score).toFixed(1)}
           icon={TrendingUp} 
-          colorClass="text-zinc-600"
+          colorClass="text-zinc-500"
         />
         <KPICard 
           title="Média 1ª Resposta" 
           value={`${avgResponseTime}m`} 
-          trend="down"
-          trendValue="bom" 
+          trend={trends.resp < 0 ? 'up' : trends.resp > 0 ? 'down' : 'neutral'} // Faster response is better (up)
+          trendValue={`${Math.abs(trends.resp).toFixed(1)}%`}
           icon={Clock} 
           colorClass="text-orange-500"
         />

pages/Login.tsx

@@ -58,12 +58,6 @@ export const Login: React.FC = () => {
         <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
           Acesse sua conta
         </h2>
-        <p className="mt-2 text-center text-sm text-zinc-600 dark:text-dark-muted">
-          Ou{' '}
-          <Link to="/register" className="font-medium text-brand-yellow hover:text-yellow-600">
-            registre sua nova organização
-          </Link>
-        </p>
       </div>
 
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

pages/ResetPassword.tsx

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

pages/SetupAccount.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { Hexagon, Lock, ArrowRight, Loader2, CheckCircle2, AlertCircle, User } from 'lucide-react';
+import { resetPassword } from '../services/dataService';
+
+export const ResetPassword: 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,9 +1,9 @@
 import React, { useState, useMemo } from 'react';
 import { 
   Building2, Users, MessageSquare, Plus, Search, 
-  Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X
+  Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X, CheckCircle2
 } from 'lucide-react';
-import { getTenants, createTenant, deleteTenant } from '../services/dataService';
+import { getTenants, createTenant, deleteTenant, updateTenant } from '../services/dataService';
 import { Tenant } from '../types';
 import { DateRangePicker } from '../components/DateRangePicker';
 import { KPICard } from '../components/KPICard';
@@ -91,21 +91,44 @@ export const SuperAdmin: React.FC = () => {
     }
   };
 
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
   const handleSaveTenant = async (e: React.FormEvent) => {
     e.preventDefault();
+    setErrorMessage('');
+    setSuccessMessage('');
     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 });
-    if (success) {
-      setIsModalOpen(false);
-      setEditingTenant(null);
-      loadTenants();
-      alert('Organização salva com sucesso!');
+
+    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);
+        }, 2000);
+      } else {
+         setErrorMessage('Erro ao atualizar organização.');
+      }
     } else {
-      alert('Erro ao salvar organização.');
+      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('');
+        }, 3000);
+      } else {
+        setErrorMessage(result.message || 'Erro ao salvar organização.');
+      }
     }
   };
 
@@ -132,7 +155,7 @@ export const SuperAdmin: React.FC = () => {
           <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Painel Super Admin</h1>
           <p className="text-zinc-500 dark:text-dark-muted text-sm">Gerencie organizações e visualize estatísticas globais.</p>
         </div>
-        <button onClick={() => { setEditingTenant(null); setIsModalOpen(true); }} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg text-sm font-bold hover:opacity-90 transition-all shadow-sm">
+        <button onClick={() => { setEditingTenant(null); setIsModalOpen(true); }} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg flex items-center gap-2 whitespace-nowrap text-sm font-bold hover:opacity-90 transition-all shadow-sm">
           <Plus size={16} /> Adicionar Organização
         </button>
       </div>
@@ -225,6 +248,16 @@ export const SuperAdmin: React.FC = () => {
               <button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
             </div>
             <form onSubmit={handleSaveTenant} className="p-6 space-y-4">
+              {successMessage && (
+                <div className="bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30 p-3 rounded-lg flex items-center gap-2 text-green-700 dark:text-green-400 text-sm animate-in fade-in slide-in-from-top-1">
+                  <CheckCircle2 size={16} /> {successMessage}
+                </div>
+              )}
+              {errorMessage && (
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-700 dark:text-red-400 text-sm animate-in fade-in slide-in-from-top-1">
+                  <X size={16} /> {errorMessage}
+                </div>
+              )}
               <div className="space-y-2">
                 <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Nome da Organização</label>
                 <input type="text" name="name" defaultValue={editingTenant?.name} className="w-full px-3 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all" required />

pages/TeamManagement.tsx

@@ -1,4 +1,5 @@
 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';
@@ -12,6 +13,7 @@ export const TeamManagement: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [tenantFilter, setTenantFilter] = useState('all');
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [userToDelete, setUserToDelete] = useState<User | null>(null);
   const [deleteConfirmName, setDeleteConfirmName] = useState('');
@@ -92,7 +94,10 @@ export const TeamManagement: React.FC = () => {
   if (loading && users.length === 0) return <div className="flex h-screen items-center justify-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando...</div>;
 
   const canManage = currentUser?.role === 'admin' || currentUser?.role === 'super_admin';
-  const filtered = users.filter(u => u.name.toLowerCase().includes(searchTerm.toLowerCase()) || u.email.toLowerCase().includes(searchTerm.toLowerCase()));
+  const 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';
@@ -124,11 +129,21 @@ export const TeamManagement: React.FC = () => {
       </div>
 
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden">
-        <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50 dark:bg-dark-bg/50">
-          <div className="relative max-w-md">
+        <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50 dark:bg-dark-bg/50 flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1 max-w-md">
             <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
             <input type="text" placeholder="Buscar membros..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full pl-9 pr-4 py-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
           </div>
+          {currentUser?.role === 'super_admin' && (
+            <select 
+              value={tenantFilter} 
+              onChange={e => setTenantFilter(e.target.value)} 
+              className="bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer w-full sm:w-auto transition-all"
+            >
+              <option value="all">Todas Organizações</option>
+              {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+          )}
         </div>
         <div className="overflow-x-auto">
           <table className="w-full text-left">
@@ -158,7 +173,7 @@ export const TeamManagement: React.FC = () => {
                         <span className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-dark-card ${user.status === 'active' ? 'bg-green-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}></span>
                       </div>
                       <div>
-                        <div className="font-bold text-zinc-900 dark:text-dark-text">{user.name}</div>
+                        <Link to={`/users/${user.slug || user.id}`} className="font-bold text-zinc-900 dark:text-dark-text hover:underline">{user.name}</Link>
                         <div className="text-xs text-zinc-500 dark:text-dark-muted">{user.email}</div>
                       </div>
                     </div>

pages/UserDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router-dom';
 import { getAttendances, getUserById } from '../services/dataService';
 import { Attendance, User, FunnelStage, DashboardFilter } 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;
 
@@ -13,7 +14,7 @@ export const UserDetail: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState<DashboardFilter>({
-    dateRange: { start: new Date(0), end: new Date() },
+    dateRange: { start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), end: new Date() },
     userId: id,
     funnelStage: 'all',
     origin: 'all'
@@ -121,6 +122,11 @@ export const UserDetail: React.FC = () => {
           <span>Filtros:</span>
         </div>
 
+        <DateRangePicker 
+          dateRange={filters.dateRange} 
+          onChange={(range) => handleFilterChange('dateRange', range)} 
+        />
+
         <select 
           className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700 transition-all"
           value={filters.funnelStage}