feat: implement categorized global search with RBAC

- Added /api/search endpoint with strict role-based data isolation. - Created searchGlobal function in dataService. - Refined header UI with an interactive, categorized search results dropdown.
2026-03-09 15:25:12 -03:00
parent 000bc38712
commit c07967188a
3 changed files with 222 additions and 9 deletions
--- a/backend/index.js
+++ b/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 {
--- a/components/Layout.tsx
+++ b/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');
@@ -189,15 +212,120 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
            </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 className="hidden md:block relative">
+              <div className="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">
+                {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..." 
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onFocus={() => searchQuery.length >= 2 && setShowSearchResults(true)}
+                  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>
+
+              {/* Search Results Dropdown */}
+              {showSearchResults && (
+                <div className="absolute top-full mt-2 left-0 right-0 w-[400px] 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">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-8 h-8 rounded-full border border-zinc-100 dark:border-dark-border"
+                              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">Equipes</div>
+                        {searchResults.teams.map(t => (
+                          <button
+                            key={t.id}
+                            onClick={() => {
+                              navigate(`/admin/teams`); // For now just to teams list
+                              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-8 h-8 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted">
+                              <Building2 size={16} />
+                            </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">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-8 h-8 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">
+                              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">
+                                <span>{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>

+            {/* Close results when clicking outside */}
+            {showSearchResults && <div className="fixed inset-0 z-40" onClick={() => setShowSearchResults(false)} />}
+
            {/* 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">
--- a/services/dataService.ts
+++ b/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();