feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs

front-end-dash.aggios.app/components/layout/DashboardLayout.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React, { useState } from 'react';
+import { SidebarRail } from './SidebarRail';
+import { TopBar } from './TopBar';
+
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
+    // Estado centralizado do layout
+    const [isExpanded, setIsExpanded] = useState(true);
+    const [activeTab, setActiveTab] = useState('dashboard');
+
+    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)}
+            />
+
+            {/* Área de Conteúdo (Children) */}
+            <main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white dark:bg-zinc-900 rounded-2xl shadow-lg relative transition-colors duration-300 border border-transparent dark:border-zinc-800">
+                {/* TopBar com Breadcrumbs e Search */}
+                <TopBar />
+
+                {/* Conteúdo das páginas */}
+                <div className="flex-1 overflow-auto">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+};

front-end-dash.aggios.app/components/layout/SidebarRail.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { Menu, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { useTheme } from 'next-themes';
+import {
+    HomeIcon,
+    BuildingOfficeIcon,
+    LinkIcon,
+    Cog6ToothIcon,
+    DocumentTextIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    UserCircleIcon,
+    ArrowRightOnRectangleIcon,
+    SunIcon,
+    MoonIcon,
+} from '@heroicons/react/24/outline';
+
+interface SidebarRailProps {
+    activeTab: string;
+    onTabChange: (tab: string) => void;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+
+export const SidebarRail: React.FC<SidebarRailProps> = ({
+    activeTab,
+    onTabChange,
+    isExpanded,
+    onToggle,
+}) => {
+    const pathname = usePathname();
+    const router = useRouter();
+    const { theme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    const menuItems = [
+        { id: 'dashboard', label: 'Dashboard', href: '/superadmin', icon: HomeIcon },
+        { id: 'agencies', label: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon },
+        { id: 'templates', label: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon },
+        { id: 'agency-templates', label: 'Templates Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon },
+        { id: 'settings', label: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon },
+    ];
+
+    const handleLogout = () => {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        router.push('/login');
+    };
+
+    const toggleTheme = () => {
+        setTheme(theme === 'dark' ? 'light' : 'dark');
+    };
+
+    return (
+        <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
+        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]'}
+      `}
+        >
+            {/* 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>
+
+            {/* Header com Logo */}
+            <div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
+                {/* Logo */}
+                <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)' }}
+                >
+                    A
+                </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-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
+                </div>
+            </div>
+
+            {/* Separador removido para visual mais limpo */}
+
+            {/* Navegação */}
+            <div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
+                {menuItems.map((item) => (
+                    <RailButton
+                        key={item.id}
+                        label={item.label}
+                        icon={item.icon}
+                        href={item.href}
+                        active={pathname === item.href || (item.href !== '/superadmin' && pathname?.startsWith(item.href))}
+                        onClick={() => onTabChange(item.id)}
+                        isExpanded={isExpanded}
+                    />
+                ))}
+            </div>
+
+            {/* Separador antes do menu de usuário */}
+            <div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
+
+            {/* 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">SuperAdmin</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 ring-1 ring-black ring-opacity-5 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 }) => (
+                                        <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>
+                            </div>
+                        </Menu.Items>
+                    </Transition>
+                </Menu>
+            </div>
+        </div>
+    );
+};
+
+// Subcomponente do Botão (Essencial para a animação do texto)
+interface RailButtonProps {
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    href: string;
+    active: boolean;
+    onClick: () => void;
+    isExpanded: boolean;
+}
+
+const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded }) => (
+    <Link
+        href={href}
+        onClick={onClick}
+        style={{ background: active ? 'var(--gradient)' : undefined }}
+        className={`
+      flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden
+      ${active
+                ? 'text-white shadow-md'
+                : 'hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400'
+            }
+      ${isExpanded ? '' : 'justify-center'}
+    `}
+    >
+        {/* Ícone */}
+        <Icon className="shrink-0 w-4 h-4" />
+
+        {/* Lógica Mágica do Texto: Max-Width Transition */}
+        <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">{label}</span>
+        </div>
+
+        {/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
+        {active && !isExpanded && (
+            <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)' }}
+            />
+        )}
+    </Link>
+);

front-end-dash.aggios.app/components/layout/TopBar.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+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 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: '/superadmin', icon: HomeIcon }
+        ];
+
+        let currentPath = '';
+        paths.forEach((path, index) => {
+            currentPath += `/${path}`;
+
+            // Mapeamento de nomes amigáveis
+            const nameMap: Record<string, string> = {
+                'superadmin': 'SuperAdmin',
+                'agencies': 'Agências',
+                'signup-templates': 'Templates',
+                'agency-templates': 'Templates Agência',
+                'settings': 'Configurações',
+                'new': 'Novo',
+            };
+
+            if (index > 0) { // Pula 'superadmin' no breadcrumb
+                breadcrumbs.push({
+                    name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1),
+                    href: currentPath,
+                });
+            }
+        });
+
+        return breadcrumbs;
+    };
+
+    const breadcrumbs = generateBreadcrumbs();
+
+    return (
+        <>
+            <div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-6 py-3 flex items-center justify-between transition-colors">
+                {/* Breadcrumbs */}
+                <nav className="flex items-center gap-2 text-xs">
+                    {breadcrumbs.map((crumb, index) => {
+                        const Icon = crumb.icon;
+                        const isLast = index === breadcrumbs.length - 1;
+
+                        return (
+                            <div key={crumb.href} className="flex items-center gap-2">
+                                {Icon ? (
+                                    <Link
+                                        href={crumb.href}
+                                        className="flex items-center gap-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-colors"
+                                    >
+                                        <Icon className="w-3.5 h-3.5" />
+                                        <span>{crumb.name}</span>
+                                    </Link>
+                                ) : (
+                                    <Link
+                                        href={crumb.href}
+                                        className={`${isLast ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200'} transition-colors`}
+                                    >
+                                        {crumb.name}
+                                    </Link>
+                                )}
+
+                                {!isLast && <ChevronRightIcon className="w-3 h-3 text-gray-400 dark:text-zinc-600" />}
+                            </div>
+                        );
+                    })}
+                </nav>
+
+                {/* Search Bar Trigger */}
+                <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"
+                    >
+                        <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>
+                    </button>
+                </div>
+            </div>
+
+            <CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
+        </>
+    );
+};