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

2025-12-11 23:39:54 -03:00
parent 053e180321
commit dc98d5dccc
129 changed files with 20730 additions and 1611 deletions
--- a/front-end-dash.aggios.app/components/layout/TopBar.tsx
+++ b/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} />
+        </>
+    );
+};