feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)

2025-12-12 15:24:38 -03:00
parent 83ce15bb36
commit 04c954c3d9
36 changed files with 2628 additions and 923 deletions
--- a/front-end-agency/components/layout/TopBar.tsx
+++ b/front-end-agency/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: '/dashboard', icon: HomeIcon }
+        ];
+
+        let currentPath = '';
+        paths.forEach((path, index) => {
+            currentPath += `/${path}`;
+
+            // Mapeamento de nomes amigáveis
+            const nameMap: Record<string, string> = {
+                'dashboard': 'Dashboard',
+                'clientes': 'Clientes',
+                'projetos': 'Projetos',
+                'financeiro': 'Financeiro',
+                'configuracoes': 'Configurações',
+                'novo': 'Novo',
+            };
+
+            if (path !== 'dashboard') { // Evita duplicar Home/Dashboard se a rota for /dashboard
+                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} />
+        </>
+    );
+};