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.
This commit is contained in:
Cauê Faleiros
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user