2a112f169d
- Create CreatePlanModal component with Headless UI Dialog - Implement dark mode support throughout plans UI - Update plans/page.tsx with professional card layout - Update plans/[id]/page.tsx with consistent styling - Add proper spacing, typography, and color consistency - Implement smooth animations and transitions - Add success/error message feedback - Improve form UX with better input styling
436 lines
21 KiB
TypeScript
436 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
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,
|
|
ChevronDownIcon,
|
|
UserCircleIcon,
|
|
ArrowRightOnRectangleIcon,
|
|
SunIcon,
|
|
MoonIcon,
|
|
Cog6ToothIcon,
|
|
XMarkIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
export interface MenuItem {
|
|
id: string;
|
|
label: string;
|
|
href: string;
|
|
icon: any;
|
|
subItems?: {
|
|
label: string;
|
|
href: string;
|
|
}[];
|
|
}
|
|
|
|
interface SidebarRailProps {
|
|
isExpanded: boolean;
|
|
onToggle: () => void;
|
|
menuItems: MenuItem[];
|
|
}
|
|
|
|
export const SidebarRail: React.FC<SidebarRailProps> = ({
|
|
isExpanded,
|
|
onToggle,
|
|
menuItems,
|
|
}) => {
|
|
const pathname = usePathname();
|
|
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) {
|
|
// Usar localStorage como fallback se API não retornar logo
|
|
const cachedLogo = localStorage.getItem('agency-logo-url');
|
|
const finalLogoUrl = data.logo_url || cachedLogo;
|
|
|
|
const updatedUser = {
|
|
...currentUser,
|
|
company: data.name || currentUser.company,
|
|
logoUrl: finalLogoUrl
|
|
};
|
|
setUser(updatedUser);
|
|
saveAuth(token, updatedUser); // Persistir atualização
|
|
|
|
// Atualizar localStorage do logo (preservar se já existe)
|
|
if (finalLogoUrl) {
|
|
console.log('📝 Salvando logo no localStorage:', finalLogoUrl);
|
|
localStorage.setItem('agency-logo-url', finalLogoUrl);
|
|
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) {
|
|
const activeItem = menuItems.find(item =>
|
|
item.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href))
|
|
);
|
|
if (activeItem) {
|
|
setOpenSubmenu(activeItem.id);
|
|
}
|
|
}
|
|
}, [pathname, isExpanded, menuItems]);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
window.location.href = '/login';
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme === 'dark' ? 'light' : 'dark');
|
|
};
|
|
|
|
// 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 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 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 */}
|
|
{/* 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 ${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 overflow-hidden bg-brand-500"
|
|
>
|
|
{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 ${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 items-center">
|
|
{menuItems.map((item) => (
|
|
<RailButton
|
|
key={item.id}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
href={item.href}
|
|
active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
|
|
onClick={(e: any) => {
|
|
if (item.subItems) {
|
|
// 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 {
|
|
setOpenSubmenu(null);
|
|
}
|
|
}}
|
|
showLabel={showLabels}
|
|
hasSubItems={!!item.subItems}
|
|
isOpen={openSubmenu === item.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Separador */}
|
|
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2 w-full" />
|
|
|
|
{/* 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>
|
|
</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>
|
|
|
|
{/* Painel Secundário (Drawer) - Abre ao lado do Rail */}
|
|
<div
|
|
className={`
|
|
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 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}
|
|
</h3>
|
|
<button
|
|
onClick={() => setOpenSubmenu(null)}
|
|
className="p-1 rounded-md hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-500 dark:text-gray-400 transition-colors"
|
|
aria-label="Fechar submenu"
|
|
>
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<div className="p-2 flex-1 overflow-y-auto">
|
|
{activeMenuItem.subItems?.map((sub) => (
|
|
<Link
|
|
key={sub.href}
|
|
href={sub.href}
|
|
// 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
|
|
? 'bg-brand-50 dark:bg-brand-900/10 text-brand-600 dark:text-brand-400'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white'
|
|
}
|
|
`}
|
|
>
|
|
<span className={`w-1.5 h-1.5 rounded-full ${pathname === sub.href ? 'bg-brand-500' : 'bg-gray-300 dark:bg-zinc-600'}`} />
|
|
{sub.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Subcomponente do Botão
|
|
interface RailButtonProps {
|
|
label: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
href: string;
|
|
active: boolean;
|
|
onClick: (e?: any) => void;
|
|
showLabel: boolean;
|
|
hasSubItems?: boolean;
|
|
isOpen?: boolean;
|
|
}
|
|
|
|
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, showLabel, hasSubItems, isOpen }) => {
|
|
// Determine styling based on state
|
|
// 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' };
|
|
|
|
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";
|
|
}
|
|
|
|
return (
|
|
<Wrapper
|
|
{...props as any}
|
|
className={baseClasses}
|
|
title={!showLabel ? label : undefined} // Tooltip nativo apenas se recolhido
|
|
>
|
|
{/* Ícone */}
|
|
<Icon className={`shrink-0 w-5 h-5 ${isActiveItem ? 'text-white' : ''}`} />
|
|
|
|
{/* Texto (Visível apenas se expandido) */}
|
|
<div className={`
|
|
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 ${isActiveItem ? 'text-white' : 'text-gray-400'}`} />
|
|
)}
|
|
</div>
|
|
|
|
{/* 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>
|
|
);
|
|
};
|