v1.4: Segurança multi-tenant, file serving via API e UX humanizada
- Validação cross-tenant no login e rotas protegidas
- File serving via /api/files/{bucket}/{path} (eliminação DNS)
- Mensagens de erro humanizadas inline (sem pop-ups)
- Middleware tenant detection via headers customizados
- Upload de logos retorna URLs via API
- README atualizado com changelog v1.4 completo
This commit is contained in:
Erik Silva
169
front-end-agency/components/layout/AgencyBranding.tsx
Normal file
169
front-end-agency/components/layout/AgencyBranding.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface AgencyBrandingProps {
|
||||
colors?: {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* AgencyBranding - Aplica as cores da agência via CSS Variables
|
||||
* O favicon agora é tratado via Metadata API no layout (server-side)
|
||||
*/
|
||||
export function AgencyBranding({ colors }: AgencyBrandingProps) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const [debugInfo, setDebugInfo] = useState<string>('Iniciando...');
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const hexToRgb = (hex: string) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
|
||||
};
|
||||
|
||||
const applyTheme = (primary: string, secondary: string) => {
|
||||
if (!primary || !secondary) return;
|
||||
|
||||
const root = document.documentElement;
|
||||
const primaryRgb = hexToRgb(primary);
|
||||
const secondaryRgb = hexToRgb(secondary);
|
||||
|
||||
const gradient = `linear-gradient(135deg, ${primary}, ${primary})`;
|
||||
const gradientText = `linear-gradient(to right, ${primary}, ${primary})`;
|
||||
|
||||
root.style.setProperty('--gradient', gradient);
|
||||
root.style.setProperty('--gradient-text', gradientText);
|
||||
root.style.setProperty('--gradient-primary', gradient);
|
||||
root.style.setProperty('--color-gradient-brand', gradient);
|
||||
|
||||
root.style.setProperty('--brand-color', primary);
|
||||
root.style.setProperty('--brand-color-strong', secondary);
|
||||
|
||||
if (primaryRgb) root.style.setProperty('--brand-rgb', primaryRgb);
|
||||
if (secondaryRgb) root.style.setProperty('--brand-strong-rgb', secondaryRgb);
|
||||
|
||||
// Salvar no localStorage para cache
|
||||
if (typeof window !== 'undefined') {
|
||||
const hostname = window.location.hostname;
|
||||
const sub = hostname.split('.')[0];
|
||||
if (sub && sub !== 'www') {
|
||||
localStorage.setItem(`agency-theme:${sub}`, gradient);
|
||||
localStorage.setItem('agency-primary-color', primary);
|
||||
localStorage.setItem('agency-secondary-color', secondary);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const updateFavicon = (url: string) => {
|
||||
if (typeof window === 'undefined' || typeof document === 'undefined') return;
|
||||
|
||||
try {
|
||||
setDebugInfo(`Tentando atualizar favicon: ${url}`);
|
||||
console.log('🎨 AgencyBranding: Atualizando favicon para:', url);
|
||||
|
||||
const newHref = `${url}${url.includes('?') ? '&' : '?'}v=${Date.now()}`;
|
||||
|
||||
// Buscar TODOS os links de ícone existentes
|
||||
const existingLinks = document.querySelectorAll("link[rel*='icon']");
|
||||
|
||||
if (existingLinks.length > 0) {
|
||||
// Atualizar href de todos os links existentes (SEM REMOVER)
|
||||
existingLinks.forEach(link => {
|
||||
link.setAttribute('href', newHref);
|
||||
});
|
||||
setDebugInfo(`Favicon atualizado (${existingLinks.length} links)`);
|
||||
console.log(`✅ ${existingLinks.length} favicons atualizados`);
|
||||
} else {
|
||||
// Criar novo link apenas se não existir nenhum
|
||||
const newLink = document.createElement('link');
|
||||
newLink.rel = 'icon';
|
||||
newLink.type = 'image/x-icon';
|
||||
newLink.href = newHref;
|
||||
document.head.appendChild(newLink);
|
||||
setDebugInfo('Novo favicon criado');
|
||||
console.log('✅ Novo favicon criado');
|
||||
}
|
||||
} catch (error) {
|
||||
setDebugInfo(`Erro: ${error}`);
|
||||
console.error('❌ Erro ao atualizar favicon:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Se temos cores do servidor, aplicar imediatamente
|
||||
if (colors) {
|
||||
applyTheme(colors.primary, colors.secondary);
|
||||
} else {
|
||||
// Fallback: tentar pegar do cache do localStorage
|
||||
const cachedPrimary = localStorage.getItem('agency-primary-color');
|
||||
const cachedSecondary = localStorage.getItem('agency-secondary-color');
|
||||
|
||||
if (cachedPrimary && cachedSecondary) {
|
||||
applyTheme(cachedPrimary, cachedSecondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Atualizar favicon se houver logo salvo (após montar)
|
||||
const cachedLogo = localStorage.getItem('agency-logo-url');
|
||||
if (cachedLogo) {
|
||||
console.log('🔍 Logo encontrado no cache:', cachedLogo);
|
||||
updateFavicon(cachedLogo);
|
||||
} else {
|
||||
setDebugInfo('Nenhum logo no cache');
|
||||
console.log('⚠️ Nenhum logo encontrado no cache');
|
||||
}
|
||||
|
||||
// Listener para atualizações em tempo real (ex: da página de configurações)
|
||||
const handleUpdate = () => {
|
||||
console.log('🔔 Evento branding-update recebido!');
|
||||
setDebugInfo('Evento branding-update recebido');
|
||||
|
||||
const cachedPrimary = localStorage.getItem('agency-primary-color');
|
||||
const cachedSecondary = localStorage.getItem('agency-secondary-color');
|
||||
const cachedLogo = localStorage.getItem('agency-logo-url');
|
||||
|
||||
if (cachedPrimary && cachedSecondary) {
|
||||
console.log('🎨 Aplicando cores do cache');
|
||||
applyTheme(cachedPrimary, cachedSecondary);
|
||||
}
|
||||
|
||||
if (cachedLogo) {
|
||||
console.log('🖼️ Atualizando favicon do cache:', cachedLogo);
|
||||
updateFavicon(cachedLogo);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('branding-update', handleUpdate);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('branding-update', handleUpdate);
|
||||
};
|
||||
}, [mounted, colors]);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
bottom: '10px',
|
||||
left: '10px',
|
||||
background: 'rgba(0,0,0,0.8)',
|
||||
color: 'white',
|
||||
padding: '5px 10px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '10px',
|
||||
zIndex: 9999,
|
||||
pointerEvents: 'none'
|
||||
}}>
|
||||
DEBUG: {debugInfo}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { SidebarRail, MenuItem } from './SidebarRail';
|
||||
import { TopBar } from './TopBar';
|
||||
|
||||
@@ -12,14 +13,12 @@ interface DashboardLayoutProps {
|
||||
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menuItems }) => {
|
||||
// Estado centralizado do layout
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('dashboard');
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
|
||||
{/* Sidebar controla seu próprio estado visual via props */}
|
||||
<SidebarRail
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
isExpanded={isExpanded}
|
||||
onToggle={() => setIsExpanded(!isExpanded)}
|
||||
menuItems={menuItems}
|
||||
@@ -32,7 +31,9 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menu
|
||||
|
||||
{/* Conteúdo das páginas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
<div className="max-w-7xl mx-auto w-full h-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
54
front-end-agency/components/layout/FaviconUpdater.tsx
Normal file
54
front-end-agency/components/layout/FaviconUpdater.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getUser } from '@/lib/auth';
|
||||
|
||||
export function FaviconUpdater() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const updateFavicon = () => {
|
||||
const user = getUser();
|
||||
if (user?.logoUrl) {
|
||||
// Usar requestAnimationFrame para garantir que o DOM esteja estável após hidratação
|
||||
requestAnimationFrame(() => {
|
||||
const link: HTMLLinkElement = document.querySelector("link[rel*='icon']") || document.createElement('link');
|
||||
link.type = 'image/x-icon';
|
||||
link.rel = 'shortcut icon';
|
||||
link.href = user.logoUrl!;
|
||||
if (!link.parentNode) {
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Atraso pequeno para garantir que a hidratação terminou
|
||||
const timer = setTimeout(() => {
|
||||
updateFavicon();
|
||||
}, 0);
|
||||
|
||||
// Ouve mudanças no localStorage
|
||||
const handleStorage = () => {
|
||||
requestAnimationFrame(() => updateFavicon());
|
||||
};
|
||||
window.addEventListener('storage', handleStorage);
|
||||
|
||||
// Custom event para atualização interna na mesma aba
|
||||
window.addEventListener('auth-update', handleStorage);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
window.removeEventListener('storage', handleStorage);
|
||||
window.removeEventListener('auth-update', handleStorage);
|
||||
};
|
||||
}, [mounted]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { Fragment } from 'react';
|
||||
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { getUser, User, getToken, saveAuth } from '@/lib/auth';
|
||||
import { API_ENDPOINTS } from '@/lib/api';
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
@@ -30,16 +31,12 @@ export interface MenuItem {
|
||||
}
|
||||
|
||||
interface SidebarRailProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
menuItems: MenuItem[];
|
||||
}
|
||||
|
||||
export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
activeTab,
|
||||
onTabChange,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
menuItems,
|
||||
@@ -48,12 +45,93 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
const router = useRouter();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
|
||||
const sidebarRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const currentUser = getUser();
|
||||
setUser(currentUser);
|
||||
|
||||
// Buscar perfil da agência para atualizar logo e nome
|
||||
const fetchProfile = async () => {
|
||||
const token = getToken();
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(API_ENDPOINTS.agencyProfile, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (currentUser) {
|
||||
const updatedUser = {
|
||||
...currentUser,
|
||||
company: data.name || currentUser.company,
|
||||
logoUrl: data.logo_url
|
||||
};
|
||||
setUser(updatedUser);
|
||||
saveAuth(token, updatedUser); // Persistir atualização
|
||||
|
||||
// Atualizar localStorage do logo para uso do favicon
|
||||
if (data.logo_url) {
|
||||
console.log('📝 Salvando logo no localStorage:', data.logo_url);
|
||||
localStorage.setItem('agency-logo-url', data.logo_url);
|
||||
window.dispatchEvent(new Event('auth-update')); // Notificar favicon
|
||||
window.dispatchEvent(new Event('branding-update')); // Notificar AgencyBranding
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching agency profile:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProfile();
|
||||
|
||||
// Listener para atualizar logo em tempo real após upload
|
||||
// REMOVIDO: Causa loop infinito com o dispatchEvent dentro do fetchProfile
|
||||
// O AgencyBranding já cuida de atualizar o favicon/cores
|
||||
// Se precisar atualizar o sidebar após upload, usar um evento específico 'logo-uploaded'
|
||||
/*
|
||||
const handleBrandingUpdate = () => {
|
||||
console.log('SidebarRail: branding-update event received');
|
||||
fetchProfile(); // Re-buscar perfil do backend
|
||||
};
|
||||
|
||||
window.addEventListener('branding-update', handleBrandingUpdate);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('branding-update', handleBrandingUpdate);
|
||||
};
|
||||
*/
|
||||
}, []);
|
||||
|
||||
// Fechar submenu ao clicar fora
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
|
||||
// Verifica se o submenu aberto corresponde à rota atual
|
||||
// Se estivermos navegando dentro do módulo (ex: CRM), o menu deve permanecer fixo
|
||||
const activeItem = menuItems.find(item => item.id === openSubmenu);
|
||||
const isRouteActive = activeItem && activeItem.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href));
|
||||
|
||||
if (!isRouteActive) {
|
||||
setOpenSubmenu(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [openSubmenu, pathname, menuItems]);
|
||||
|
||||
// Auto-open submenu if active
|
||||
useEffect(() => {
|
||||
if (isExpanded && pathname) {
|
||||
@@ -69,7 +147,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
router.push('/login');
|
||||
window.location.href = '/login';
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
@@ -79,46 +157,59 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
// Encontrar o item ativo para renderizar o submenu
|
||||
const activeMenuItem = menuItems.find(item => item.id === openSubmenu);
|
||||
|
||||
// Lógica de largura do Rail: Se tiver submenu aberto, força recolhimento visual (80px)
|
||||
// Se não, respeita o estado isExpanded
|
||||
const railWidth = isExpanded && !openSubmenu ? 'w-[240px]' : 'w-[80px]';
|
||||
const showLabels = isExpanded && !openSubmenu;
|
||||
|
||||
return (
|
||||
<div className="flex h-full relative z-20">
|
||||
<div className={`flex h-full relative z-20 transition-all duration-300 ${openSubmenu ? 'shadow-xl' : 'shadow-lg'} rounded-2xl`} ref={sidebarRef}>
|
||||
{/* Rail Principal (Ícones + Labels Opcionais) */}
|
||||
<div
|
||||
className={`
|
||||
relative h-full bg-white dark:bg-zinc-900 rounded-2xl flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 shadow-lg z-20
|
||||
transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
|
||||
${isExpanded ? 'w-[240px]' : 'w-[80px]'}
|
||||
`}
|
||||
relative h-full bg-white dark:bg-zinc-900 flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 z-30
|
||||
transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-gray-100 dark:border-zinc-800
|
||||
${railWidth}
|
||||
${openSubmenu ? 'rounded-l-2xl rounded-r-none border-r-0' : 'rounded-2xl'}
|
||||
`}
|
||||
>
|
||||
{/* Toggle Button - Floating on the border */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
|
||||
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronLeftIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
{/* Só mostra o toggle se não tiver submenu aberto, para evitar confusão */}
|
||||
{!openSubmenu && (
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
|
||||
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronLeftIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Header com Logo */}
|
||||
<div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
|
||||
{/* Logo */}
|
||||
<div className={`flex items-center w-full mb-6 ${showLabels ? 'justify-start px-1' : 'justify-center'}`}>
|
||||
<div
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg overflow-hidden bg-brand-500"
|
||||
>
|
||||
A
|
||||
{user?.logoUrl ? (
|
||||
<img src={user.logoUrl} alt={user.company || 'Logo'} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
(user?.company?.[0] || 'A').toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Título com animação */}
|
||||
<div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${isExpanded ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
|
||||
<span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
|
||||
<div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${showLabels ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
|
||||
<span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">
|
||||
{user?.company || 'Aggios'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navegação */}
|
||||
<div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
|
||||
<div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto items-center">
|
||||
{menuItems.map((item) => (
|
||||
<RailButton
|
||||
key={item.id}
|
||||
@@ -126,117 +217,117 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
icon={item.icon}
|
||||
href={item.href}
|
||||
active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
|
||||
onClick={() => {
|
||||
onClick={(e: any) => {
|
||||
if (item.subItems) {
|
||||
setOpenSubmenu(openSubmenu === item.id ? null : item.id);
|
||||
// Se já estiver aberto, fecha e previne navegação (opcional)
|
||||
if (openSubmenu === item.id) {
|
||||
// Se quisermos permitir fechar sem navegar:
|
||||
// e.preventDefault();
|
||||
// setOpenSubmenu(null);
|
||||
|
||||
// Mas se o usuário quer ir para a home do módulo, deixamos navegar.
|
||||
// O useEffect vai reabrir se a rota for do módulo.
|
||||
// Para forçar o fechamento, teríamos que ter lógica mais complexa.
|
||||
// Vamos assumir que clicar no pai sempre leva pra home do pai.
|
||||
// E o useEffect cuida de abrir o menu.
|
||||
// Então NÃO fazemos nada aqui se for abrir.
|
||||
} else {
|
||||
// Se for abrir, deixamos o Link navegar.
|
||||
// O useEffect vai abrir o menu quando a rota mudar.
|
||||
// NÃO setamos o estado aqui para evitar conflito com a navegação.
|
||||
}
|
||||
} else {
|
||||
onTabChange(item.id);
|
||||
setOpenSubmenu(null);
|
||||
}
|
||||
}}
|
||||
isExpanded={isExpanded}
|
||||
showLabel={showLabels}
|
||||
hasSubItems={!!item.subItems}
|
||||
isOpen={openSubmenu === item.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Separador antes do menu de usuário */}
|
||||
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
|
||||
{/* Separador */}
|
||||
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2 w-full" />
|
||||
|
||||
{/* User Menu - Footer */}
|
||||
<div>
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${isExpanded ? '' : 'justify-center'}`}>
|
||||
<UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
|
||||
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
|
||||
<span className="font-medium text-xs text-gray-900 dark:text-white">Agência</span>
|
||||
</div>
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
|
||||
<div className="p-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<UserCircleIcon className="mr-2 h-4 w-4" />
|
||||
Ver meu perfil
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href="/configuracoes"
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<Cog6ToothIcon className="mr-2 h-4 w-4" />
|
||||
Configurações
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
{mounted && theme === 'dark' ? (
|
||||
<>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Tema Claro
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Tema Escuro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
|
||||
Sair
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
{/* User Menu */}
|
||||
<div className={`flex ${showLabels ? 'justify-start' : 'justify-center'}`}>
|
||||
{mounted && (
|
||||
<Menu>
|
||||
<MenuButton className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${showLabels ? '' : 'justify-center'}`}>
|
||||
<UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${showLabels ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
|
||||
<span className="font-medium text-xs text-gray-900 dark:text-white">
|
||||
{user?.name || 'Usuário'}
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</MenuButton>
|
||||
<MenuItems
|
||||
anchor="top start"
|
||||
transition
|
||||
className={`w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50 transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0`}
|
||||
>
|
||||
<div className="p-1">
|
||||
<MenuItem>
|
||||
<button
|
||||
className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
|
||||
>
|
||||
<UserCircleIcon className="mr-2 h-4 w-4" />
|
||||
Ver meu perfil
|
||||
</button>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
<>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Tema Claro
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Tema Escuro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</MenuItem>
|
||||
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
||||
<MenuItem>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="data-[focus]:bg-red-50 dark:data-[focus]:bg-red-900/20 text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
|
||||
Sair
|
||||
</button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</Menu>
|
||||
)}
|
||||
{!mounted && (
|
||||
<div className={`w-full p-2 rounded-lg flex items-center ${showLabels ? '' : 'justify-center'}`}>
|
||||
<UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submenu Flyout Panel */}
|
||||
{/* Painel Secundário (Drawer) - Abre ao lado do Rail */}
|
||||
<div
|
||||
className={`
|
||||
absolute top-0 bottom-0 left-[calc(100%+12px)] w-64
|
||||
bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-100 dark:border-zinc-800
|
||||
transition-all duration-300 ease-in-out origin-left z-10 flex flex-col overflow-hidden
|
||||
${openSubmenu ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4 pointer-events-none'}
|
||||
h-full
|
||||
bg-white dark:bg-zinc-900 rounded-r-2xl border-y border-r border-l border-gray-100 dark:border-zinc-800
|
||||
transition-all duration-300 ease-in-out origin-left z-20 flex flex-col overflow-hidden
|
||||
${openSubmenu ? 'w-64 opacity-100 translate-x-0' : 'w-0 opacity-0 -translate-x-10 border-none'}
|
||||
`}
|
||||
>
|
||||
{activeMenuItem && (
|
||||
<>
|
||||
<div className="p-4 border-b border-gray-100 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-800/50 flex items-center justify-between">
|
||||
<div className="p-4 border-b border-gray-100 dark:border-zinc-800 flex items-center justify-between">
|
||||
<h3 className="font-heading font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<activeMenuItem.icon className="w-5 h-5 text-brand-500" />
|
||||
{activeMenuItem.label}
|
||||
@@ -254,7 +345,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
<Link
|
||||
key={sub.href}
|
||||
href={sub.href}
|
||||
onClick={() => setOpenSubmenu(null)} // Fecha ao clicar
|
||||
// onClick={() => setOpenSubmenu(null)} // Removido para manter fixo
|
||||
className={`
|
||||
flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors mb-1
|
||||
${pathname === sub.href
|
||||
@@ -281,25 +372,31 @@ interface RailButtonProps {
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
href: string;
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
isExpanded: boolean;
|
||||
onClick: (e?: any) => void;
|
||||
showLabel: boolean;
|
||||
hasSubItems?: boolean;
|
||||
isOpen?: boolean;
|
||||
}
|
||||
|
||||
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded, hasSubItems, isOpen }) => {
|
||||
const Wrapper = hasSubItems ? 'button' : Link;
|
||||
const props = hasSubItems ? { onClick, type: 'button' } : { href, onClick };
|
||||
|
||||
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, showLabel, hasSubItems, isOpen }) => {
|
||||
// Determine styling based on state
|
||||
let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden w-full ";
|
||||
// Sempre usa Link se tiver href, para garantir navegação correta e prefetching
|
||||
const Wrapper = href ? Link : 'button';
|
||||
// Desabilitar prefetch para evitar sobrecarga no middleware/backend e loops de redirecionamento
|
||||
const props = href ? { href, onClick, prefetch: false } : { onClick, type: 'button' };
|
||||
|
||||
if (active && !hasSubItems) {
|
||||
// Active leaf item (Dashboard, etc)
|
||||
baseClasses += "text-white shadow-md";
|
||||
} else if (isOpen) {
|
||||
// Open submenu parent - Highlight to show active state
|
||||
baseClasses += "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white";
|
||||
let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden ";
|
||||
if (showLabel) {
|
||||
baseClasses += "w-full justify-start ";
|
||||
} else {
|
||||
baseClasses += "w-10 h-10 justify-center mx-auto ";
|
||||
}
|
||||
|
||||
// Lógica unificada de ativo
|
||||
const isActiveItem = active || isOpen;
|
||||
|
||||
if (isActiveItem) {
|
||||
baseClasses += "bg-brand-500 text-white shadow-sm";
|
||||
} else {
|
||||
// Inactive item
|
||||
baseClasses += "hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400";
|
||||
@@ -308,29 +405,26 @@ const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active
|
||||
return (
|
||||
<Wrapper
|
||||
{...props as any}
|
||||
style={{ background: active && !hasSubItems ? 'var(--gradient)' : undefined }}
|
||||
className={`${baseClasses} ${isExpanded ? '' : 'justify-center'}`}
|
||||
className={baseClasses}
|
||||
title={!showLabel ? label : undefined} // Tooltip nativo apenas se recolhido
|
||||
>
|
||||
{/* Ícone */}
|
||||
<Icon className={`shrink-0 w-4 h-4 ${isOpen ? 'text-brand-500' : ''}`} />
|
||||
<Icon className={`shrink-0 w-5 h-5 ${isActiveItem ? 'text-white' : ''}`} />
|
||||
|
||||
{/* Lógica Mágica do Texto: Max-Width Transition */}
|
||||
{/* Texto (Visível apenas se expandido) */}
|
||||
<div className={`
|
||||
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
|
||||
${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}
|
||||
`}>
|
||||
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
|
||||
${showLabel ? 'max-w-[150px] opacity-100 ml-3' : 'max-w-0 opacity-0 ml-0'}
|
||||
`}>
|
||||
<span className="font-medium text-xs flex-1 text-left">{label}</span>
|
||||
{hasSubItems && (
|
||||
<ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isOpen ? 'text-brand-500' : 'text-gray-400'}`} />
|
||||
<ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isActiveItem ? 'text-white' : 'text-gray-400'}`} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
|
||||
{active && !isExpanded && !hasSubItems && (
|
||||
<div
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
/>
|
||||
{/* Indicador de Ativo (Ponto lateral) - Apenas se recolhido e NÃO tiver gradiente (redundante agora, mas mantido por segurança) */}
|
||||
{active && !hasSubItems && !showLabel && !isActiveItem && (
|
||||
<div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-4 bg-white rounded-r-full" />
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@@ -3,20 +3,18 @@
|
||||
import React, { useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
|
||||
import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon, BellIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
|
||||
import CommandPalette from '@/components/ui/CommandPalette';
|
||||
|
||||
export const TopBar: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
|
||||
|
||||
// Gerar breadcrumbs a partir do pathname
|
||||
const generateBreadcrumbs = () => {
|
||||
const paths = pathname?.split('/').filter(Boolean) || [];
|
||||
const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
|
||||
{ name: 'Home', href: '/dashboard', icon: HomeIcon }
|
||||
];
|
||||
|
||||
let currentPath = '';
|
||||
paths.forEach((path, index) => {
|
||||
currentPath += `/${path}`;
|
||||
@@ -82,19 +80,30 @@ export const TopBar: React.FC = () => {
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setIsCommandPaletteOpen(true)}
|
||||
className="group relative flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-all w-64"
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 dark:text-zinc-400 bg-gray-100 dark:bg-zinc-800 rounded-lg hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-4 h-4 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300" />
|
||||
<span>Pesquisar...</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</div>
|
||||
<MagnifyingGlassIcon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Buscar...</span>
|
||||
<kbd className="hidden sm:inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 bg-white dark:bg-zinc-900 rounded border border-gray-200 dark:border-zinc-700">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</button>
|
||||
<div className="flex items-center gap-2 border-l border-gray-200 dark:border-zinc-800 pl-4">
|
||||
<button className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors relative">
|
||||
<BellIcon className="w-5 h-5" />
|
||||
<span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-zinc-900"></span>
|
||||
</button>
|
||||
<Link
|
||||
href="/configuracoes"
|
||||
className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
>
|
||||
<Cog6ToothIcon className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Command Palette */}
|
||||
<CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user