feat: enhance global search UI and positioning

- Moved search bar to the left/center for better accessibility.

- Increased search bar width to max-w-2xl.

- Refined search results dropdown layout and styling.

backend/index.js

@@ -457,6 +457,78 @@ apiRouter.post('/users/:id/avatar', upload.single('avatar'), async (req, res) =>
 });
 
 
+// --- Global Search ---
+apiRouter.get('/search', async (req, res) => {
+  const { q } = req.query;
+  if (!q || q.length < 2) return res.json({ members: [], teams: [], attendances: [] });
+
+  const queryStr = `%${q}%`;
+  const results = { members: [], teams: [], attendances: [] };
+
+  try {
+    // 1. Search Members
+    let membersQ = 'SELECT id, name, email, slug, role, team_id, avatar_url FROM users WHERE (name LIKE ? OR email LIKE ?)';
+    const membersParams = [queryStr, queryStr];
+
+    if (req.user.role === 'super_admin') {
+      // No extra filters
+    } else if (req.user.role === 'admin' || req.user.role === 'owner') {
+      membersQ += ' AND tenant_id = ?';
+      membersParams.push(req.user.tenant_id);
+    } else if (req.user.role === 'manager') {
+      membersQ += ' AND tenant_id = ? AND (team_id = ? OR id = ?)';
+      membersParams.push(req.user.tenant_id, req.user.team_id, req.user.id);
+    } else {
+      membersQ += ' AND id = ?';
+      membersParams.push(req.user.id);
+    }
+    const [members] = await pool.query(membersQ, membersParams);
+    results.members = members;
+
+    // 2. Search Teams (only for roles above agent)
+    if (req.user.role !== 'agent') {
+      let teamsQ = 'SELECT id, name, description FROM teams WHERE name LIKE ?';
+      const teamsParams = [queryStr];
+
+      if (req.user.role === 'super_admin') {
+        // No extra filters
+      } else if (req.user.role === 'admin' || req.user.role === 'owner') {
+        teamsQ += ' AND tenant_id = ?';
+        teamsParams.push(req.user.tenant_id);
+      } else if (req.user.role === 'manager') {
+        teamsQ += ' AND tenant_id = ? AND id = ?';
+        teamsParams.push(req.user.tenant_id, req.user.team_id);
+      }
+      const [teams] = await pool.query(teamsQ, teamsParams);
+      results.teams = teams;
+    }
+
+    // 3. Search Attendances
+    let attendancesQ = 'SELECT a.id, a.summary, a.created_at, u.name as user_name FROM attendances a JOIN users u ON a.user_id = u.id WHERE a.summary LIKE ?';
+    const attendancesParams = [queryStr];
+
+    if (req.user.role === 'super_admin') {
+      // No extra filters
+    } else if (req.user.role === 'admin' || req.user.role === 'owner') {
+      attendancesQ += ' AND a.tenant_id = ?';
+      attendancesParams.push(req.user.tenant_id);
+    } else if (req.user.role === 'manager') {
+      attendancesQ += ' AND a.tenant_id = ? AND u.team_id = ?';
+      attendancesParams.push(req.user.tenant_id, req.user.team_id);
+    } else {
+      attendancesQ += ' AND a.user_id = ?';
+      attendancesParams.push(req.user.id);
+    }
+    const [attendances] = await pool.query(attendancesQ, attendancesParams);
+    results.attendances = attendances;
+
+    res.json(results);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+
 // --- Attendance Routes ---
 apiRouter.get('/attendances', async (req, res) => {
   try {

components/Layout.tsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { 
   LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut, 
-  Hexagon, Settings, Building2, Sun, Moon 
+  Hexagon, Settings, Building2, Sun, Moon, Loader2 
 } from 'lucide-react';
-import { getAttendances, getUsers, getUserById, logout } from '../services/dataService';
+import { getAttendances, getUsers, getUserById, logout, searchGlobal } from '../services/dataService';
 import { User } from '../types';
 
 const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: any, label: string, collapsed: boolean }) => (
@@ -30,6 +30,29 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   const navigate = useNavigate();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
 
+  // Search State
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<{ members: User[], teams: any[], attendances: any[] }>({ members: [], teams: [], attendances: [] });
+  const [isSearching, setIsSearching] = useState(false);
+  const [showSearchResults, setShowSearchResults] = useState(false);
+
+  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: [] });
+        setShowSearchResults(false);
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchQuery]);
+
   useEffect(() => {
     const fetchCurrentUser = async () => {
       const storedUserId = localStorage.getItem('ctms_user_id');
@@ -171,14 +194,126 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Main Content */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0 transition-colors">
+        <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">
+          <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>
           </div>
 
-          <div className="flex items-center gap-4 sm:gap-6">
+          {/* Search Bar - Moved to left/center and made wider */}
+          <div className="hidden md:block relative flex-1 max-w-2xl">
+            <div className="flex items-center bg-zinc-100 dark:bg-dark-bg rounded-xl px-4 py-2.5 w-full border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
+              {isSearching ? <Loader2 size={18} className="text-brand-yellow animate-spin" /> : <Search size={18} className="text-zinc-400 dark:text-dark-muted" />}
+              <input 
+                type="text" 
+                placeholder="Buscar membros, equipes ou atendimentos..." 
+                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">
+                  {/* 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 => (
+                        <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={m.avatar_url?.startsWith('http') ? m.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${m.avatar_url || ''}`} 
+                            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.summary}</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()}</span>
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {searchResults.members.length === 0 && searchResults.teams.length === 0 && searchResults.attendances.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}
@@ -188,16 +323,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
               {isDark ? <Sun size={20} /> : <Moon size={20} />}
             </button>
 
-            {/* Search Bar */}
-            <div className="hidden md:flex items-center bg-zinc-100 dark:bg-dark-bg rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
-              <Search size={18} className="text-zinc-400 dark:text-dark-muted" />
-              <input 
-                type="text" 
-                placeholder="Buscar..." 
-                className="bg-transparent border-none outline-none text-sm ml-2 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted" 
-              />
-            </div>
-
             {/* Notifications */}
             <div className="relative">
               <button className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors">

services/dataService.ts

@@ -17,6 +17,19 @@ const getHeaders = () => {
   };
 };
 
+export const searchGlobal = async (query: string): Promise<{ members: User[], teams: any[], attendances: any[] }> => {
+  try {
+    const response = await fetch(`${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: [] };
+  }
+};
+
 export const getAttendances = async (tenantId: string, filter: DashboardFilter): Promise<Attendance[]> => {
   try {
     const params = new URLSearchParams();