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

front-end-agency/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

front-end-agency/Dockerfile

@@ -0,0 +1,41 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build Next.js
+RUN npm run build
+
+# Runtime stage
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install only production dependencies
+RUN npm ci --omit=dev
+
+# Copy built app from builder
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+
+# Expose port
+EXPOSE 3000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD node -e "require('http').get('http://localhost:3000', (r) => {if (r.statusCode !== 200) throw new Error(r.statusCode)})"
+
+# Start app
+CMD ["npm", "start"]

front-end-agency/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

front-end-agency/app/(agency)/clientes/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+export default function ClientesPage() {
+    return (
+        <div className="p-6">
+            <div className="mb-6">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Clientes</h1>
+                <p className="text-gray-600 dark:text-gray-400">Gerencie sua carteira de clientes</p>
+            </div>
+
+            <div className="bg-white dark:bg-gray-800 rounded-lg p-12 border border-gray-200 dark:border-gray-700 text-center">
+                <div className="max-w-md mx-auto">
+                    <div className="w-24 h-24 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i className="ri-user-line text-5xl text-blue-600 dark:text-blue-400"></i>
+                    </div>
+                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
+                        Módulo CRM em Desenvolvimento
+                    </h2>
+                    <p className="text-gray-600 dark:text-gray-400">
+                        Em breve você poderá gerenciar seus clientes com recursos avançados de CRM.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/dashboard/page.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getUser } from "@/lib/auth";
+import {
+    ChartBarIcon,
+    UserGroupIcon,
+    FolderIcon,
+    CurrencyDollarIcon,
+    ArrowTrendingUpIcon,
+    ArrowTrendingDownIcon
+} from '@heroicons/react/24/outline';
+
+interface StatCardProps {
+    title: string;
+    value: string | number;
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    trend?: number;
+    color: 'blue' | 'purple' | 'gray' | 'green';
+}
+
+const colorClasses = {
+    blue: {
+        iconBg: 'bg-blue-50 dark:bg-blue-900/20',
+        iconColor: 'text-blue-600 dark:text-blue-400',
+        trend: 'text-blue-600 dark:text-blue-400'
+    },
+    purple: {
+        iconBg: 'bg-purple-50 dark:bg-purple-900/20',
+        iconColor: 'text-purple-600 dark:text-purple-400',
+        trend: 'text-purple-600 dark:text-purple-400'
+    },
+    gray: {
+        iconBg: 'bg-gray-50 dark:bg-gray-900/20',
+        iconColor: 'text-gray-600 dark:text-gray-400',
+        trend: 'text-gray-600 dark:text-gray-400'
+    },
+    green: {
+        iconBg: 'bg-emerald-50 dark:bg-emerald-900/20',
+        iconColor: 'text-emerald-600 dark:text-emerald-400',
+        trend: 'text-emerald-600 dark:text-emerald-400'
+    }
+};
+
+function StatCard({ title, value, icon: Icon, trend, color }: StatCardProps) {
+    const colors = colorClasses[color];
+    const isPositive = trend && trend > 0;
+
+    return (
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
+            <div className="flex items-center justify-between">
+                <div className="flex-1">
+                    <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
+                    <p className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">{value}</p>
+                    {trend !== undefined && (
+                        <div className="flex items-center mt-2">
+                            {isPositive ? (
+                                <ArrowTrendingUpIcon className="w-4 h-4 text-emerald-500" />
+                            ) : (
+                                <ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
+                            )}
+                            <span className={`text-sm font-medium ml-1 ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
+                                {Math.abs(trend)}%
+                            </span>
+                            <span className="text-xs text-gray-500 dark:text-gray-400 ml-1">vs mês anterior</span>
+                        </div>
+                    )}
+                </div>
+                <div className={`${colors.iconBg} p-3 rounded-xl`}>
+                    <Icon className={`w-8 h-8 ${colors.iconColor}`} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default function DashboardPage() {
+    const router = useRouter();
+    const [stats, setStats] = useState({
+        clientes: 0,
+        projetos: 0,
+        tarefas: 0,
+        faturamento: 0
+    });
+
+    useEffect(() => {
+        // Verificar se é SUPERADMIN e redirecionar
+        const user = getUser();
+        if (user && user.role === 'SUPERADMIN') {
+            router.push('/superadmin');
+            return;
+        }
+
+        // Simulando carregamento de dados
+        setTimeout(() => {
+            setStats({
+                clientes: 127,
+                projetos: 18,
+                tarefas: 64,
+                faturamento: 87500
+            });
+        }, 300);
+    }, [router]);
+
+    return (
+        <div className="p-6 max-w-7xl mx-auto">
+            {/* Header */}
+            <div className="mb-8">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    Dashboard
+                </h1>
+                <p className="text-gray-600 dark:text-gray-400">
+                    Bem-vindo ao seu painel de controle
+                </p>
+            </div>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <StatCard
+                    title="Clientes Ativos"
+                    value={stats.clientes}
+                    icon={UserGroupIcon}
+                    trend={12.5}
+                    color="blue"
+                />
+                <StatCard
+                    title="Projetos em Andamento"
+                    value={stats.projetos}
+                    icon={FolderIcon}
+                    trend={8.2}
+                    color="purple"
+                />
+                <StatCard
+                    title="Tarefas Pendentes"
+                    value={stats.tarefas}
+                    icon={ChartBarIcon}
+                    trend={-3.1}
+                    color="gray"
+                />
+                <StatCard
+                    title="Faturamento"
+                    value={new Intl.NumberFormat('pt-BR', {
+                        style: 'currency',
+                        currency: 'BRL',
+                        minimumFractionDigits: 0
+                    }).format(stats.faturamento)}
+                    icon={CurrencyDollarIcon}
+                    trend={25.3}
+                    color="green"
+                />
+            </div>
+
+            {/* Coming Soon Card */}
+            <div className="bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-12">
+                <div className="max-w-2xl mx-auto text-center">
+                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6" style={{ background: 'var(--gradient-primary)' }}>
+                        <ChartBarIcon className="w-8 h-8 text-white" />
+                    </div>
+                    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
+                        Em Desenvolvimento
+                    </h2>
+                    <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+                        Estamos construindo recursos incríveis de CRM e ERP para sua agência.
+                        Em breve você terá acesso a análises detalhadas, gestão completa de clientes e muito mais.
+                    </p>
+                    <div className="flex flex-wrap items-center justify-center gap-3">
+                        {['CRM', 'ERP', 'Projetos', 'Pagamentos', 'Documentos', 'Suporte', 'Contratos'].map((item) => (
+                            <span
+                                key={item}
+                                className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700"
+                            >
+                                {item}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

front-end-agency/app/(agency)/layout.tsx

@@ -0,0 +1,635 @@
+"use client";
+
+import { useEffect, useState, Fragment } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import { Menu, Transition } from '@headlessui/react';
+import {
+    Bars3Icon,
+    XMarkIcon,
+    MagnifyingGlassIcon,
+    BellIcon,
+    Cog6ToothIcon,
+    UserCircleIcon,
+    ArrowRightOnRectangleIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+    UserGroupIcon,
+    BuildingOfficeIcon,
+    FolderIcon,
+    CreditCardIcon,
+    DocumentTextIcon,
+    LifebuoyIcon,
+    DocumentCheckIcon,
+    UsersIcon,
+    UserPlusIcon,
+    PhoneIcon,
+    FunnelIcon,
+    ChartBarIcon,
+    HomeIcon,
+    CubeIcon,
+    ShoppingCartIcon,
+    BanknotesIcon,
+    DocumentDuplicateIcon,
+    ShareIcon,
+    DocumentMagnifyingGlassIcon,
+    TrashIcon,
+    RectangleStackIcon,
+    CalendarIcon,
+    UserGroupIcon as TeamIcon,
+    ReceiptPercentIcon,
+    CreditCardIcon as PaymentIcon,
+    ChatBubbleLeftRightIcon,
+    BookOpenIcon,
+    ArchiveBoxIcon,
+    PencilSquareIcon,
+} from '@heroicons/react/24/outline';
+
+const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
+const ThemeTester = dynamic(() => import('@/components/ThemeTester'), { ssr: false });
+const DynamicFavicon = dynamic(() => import('@/components/DynamicFavicon'), { ssr: false });
+
+const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+
+const setGradientVariables = (gradient: string) => {
+    document.documentElement.style.setProperty('--gradient-primary', gradient);
+    document.documentElement.style.setProperty('--gradient', gradient);
+    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
+    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
+};
+
+export default function AgencyLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [user, setUser] = useState<any>(null);
+    const [agencyName, setAgencyName] = useState('');
+    const [agencyLogo, setAgencyLogo] = useState('');
+    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [activeSubmenu, setActiveSubmenu] = useState<number | null>(null);
+    const [selectedClient, setSelectedClient] = useState<any>(null);
+
+    // Mock de clientes - no futuro virá da API
+    const clients = [
+        { id: 1, name: 'Todos os Clientes', avatar: null },
+        { id: 2, name: 'Empresa ABC Ltda', avatar: 'A' },
+        { id: 3, name: 'Tech Solutions Inc', avatar: 'T' },
+        { id: 4, name: 'Marketing Pro', avatar: 'M' },
+        { id: 5, name: 'Design Studio', avatar: 'D' },
+    ];
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        const userData = localStorage.getItem('user');
+
+        if (!token || !userData) {
+            router.push('/login');
+            return;
+        }
+        const parsedUser = JSON.parse(userData);
+        setUser(parsedUser);
+
+        if (parsedUser.role === 'SUPERADMIN') {
+            router.push('/superadmin');
+            return;
+        }
+
+        const hostname = window.location.hostname;
+        const hostSubdomain = hostname.split('.')[0] || 'default';
+        const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || parsedUser?.tenant_id || hostSubdomain;
+
+        setAgencyName(parsedUser?.subdomain || hostSubdomain);
+
+        // Buscar logo da agência
+        const fetchAgencyLogo = async () => {
+            try {
+                const response = await fetch('/api/agency/profile', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json',
+                    },
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.logo_url) {
+                        setAgencyLogo(data.logo_url);
+                    }
+                }
+            } catch (error) {
+                console.error('Erro ao buscar logo da agência:', error);
+            }
+        };
+
+        fetchAgencyLogo();
+
+        const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`);
+        setGradientVariables(storedGradient || DEFAULT_GRADIENT);
+
+        // Inicializar com "Todos os Clientes"
+        setSelectedClient(clients[0]);
+
+        // Atalho de teclado para abrir pesquisa (Ctrl/Cmd + K)
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                setSearchOpen(true);
+            }
+            if (e.key === 'Escape') {
+                setSearchOpen(false);
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            setGradientVariables(DEFAULT_GRADIENT);
+        };
+    }, [router]);
+
+    useEffect(() => {
+        const hostname = window.location.hostname;
+        const hostSubdomain = hostname.split('.')[0] || 'default';
+        const userData = localStorage.getItem('user');
+        const parsedUser = userData ? JSON.parse(userData) : null;
+        const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || parsedUser?.tenant_id || hostSubdomain;
+        const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`) || DEFAULT_GRADIENT;
+
+        setGradientVariables(storedGradient);
+    }, [pathname]);
+
+    if (!user) {
+        return null;
+    }
+
+    const menuItems = [
+        {
+            icon: UserGroupIcon,
+            label: 'CRM',
+            href: '/crm',
+            submenu: [
+                { icon: UsersIcon, label: 'Clientes', href: '/crm/clientes' },
+                { icon: UserPlusIcon, label: 'Leads', href: '/crm/leads' },
+                { icon: PhoneIcon, label: 'Contatos', href: '/crm/contatos' },
+                { icon: FunnelIcon, label: 'Funil de Vendas', href: '/crm/funil' },
+                { icon: ChartBarIcon, label: 'Relatórios', href: '/crm/relatorios' },
+            ]
+        },
+        {
+            icon: BuildingOfficeIcon,
+            label: 'ERP',
+            href: '/erp',
+            submenu: [
+                { icon: HomeIcon, label: 'Dashboard', href: '/erp/dashboard' },
+                { icon: CubeIcon, label: 'Estoque', href: '/erp/estoque' },
+                { icon: ShoppingCartIcon, label: 'Compras', href: '/erp/compras' },
+                { icon: BanknotesIcon, label: 'Vendas', href: '/erp/vendas' },
+                { icon: ChartBarIcon, label: 'Financeiro', href: '/erp/financeiro' },
+            ]
+        },
+        {
+            icon: FolderIcon,
+            label: 'Projetos',
+            href: '/projetos',
+            submenu: [
+                { icon: RectangleStackIcon, label: 'Todos Projetos', href: '/projetos/todos' },
+                { icon: RectangleStackIcon, label: 'Kanban', href: '/projetos/kanban' },
+                { icon: CalendarIcon, label: 'Calendário', href: '/projetos/calendario' },
+                { icon: TeamIcon, label: 'Equipes', href: '/projetos/equipes' },
+            ]
+        },
+        {
+            icon: CreditCardIcon,
+            label: 'Pagamentos',
+            href: '/pagamentos',
+            submenu: [
+                { icon: DocumentTextIcon, label: 'Faturas', href: '/pagamentos/faturas' },
+                { icon: ReceiptPercentIcon, label: 'Recebimentos', href: '/pagamentos/recebimentos' },
+                { icon: PaymentIcon, label: 'Assinaturas', href: '/pagamentos/assinaturas' },
+                { icon: BanknotesIcon, label: 'Gateway', href: '/pagamentos/gateway' },
+            ]
+        },
+        {
+            icon: DocumentTextIcon,
+            label: 'Documentos',
+            href: '/documentos',
+            submenu: [
+                { icon: FolderIcon, label: 'Meus Arquivos', href: '/documentos/arquivos' },
+                { icon: ShareIcon, label: 'Compartilhados', href: '/documentos/compartilhados' },
+                { icon: DocumentDuplicateIcon, label: 'Modelos', href: '/documentos/modelos' },
+                { icon: TrashIcon, label: 'Lixeira', href: '/documentos/lixeira' },
+            ]
+        },
+        {
+            icon: LifebuoyIcon,
+            label: 'Suporte',
+            href: '/suporte',
+            submenu: [
+                { icon: DocumentMagnifyingGlassIcon, label: 'Tickets', href: '/suporte/tickets' },
+                { icon: BookOpenIcon, label: 'Base de Conhecimento', href: '/suporte/kb' },
+                { icon: ChatBubbleLeftRightIcon, label: 'Chat', href: '/suporte/chat' },
+            ]
+        },
+        {
+            icon: DocumentCheckIcon,
+            label: 'Contratos',
+            href: '/contratos',
+            submenu: [
+                { icon: DocumentCheckIcon, label: 'Ativos', href: '/contratos/ativos' },
+                { icon: PencilSquareIcon, label: 'Rascunhos', href: '/contratos/rascunhos' },
+                { icon: ArchiveBoxIcon, label: 'Arquivados', href: '/contratos/arquivados' },
+                { icon: DocumentDuplicateIcon, label: 'Modelos', href: '/contratos/modelos' },
+            ]
+        },
+    ];
+
+    const handleLogout = () => {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        router.push('/login');
+    };
+
+    return (
+        <div className="flex h-screen bg-gray-50 dark:bg-gray-950">
+            {/* Favicon Dinâmico */}
+            <DynamicFavicon logoUrl={agencyLogo} />
+
+            {/* Sidebar */}
+            <aside className={`${activeSubmenu !== null ? 'w-20' : (sidebarOpen ? 'w-64' : 'w-20')} transition-all duration-300 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col`}>
+                {/* Logo */}
+                <div className="h-16 flex items-center justify-center border-b border-gray-200 dark:border-gray-800">
+                    {(sidebarOpen && activeSubmenu === null) ? (
+                        <div className="flex items-center justify-between px-4 w-full">
+                            <div className="flex items-center space-x-3">
+                                {agencyLogo ? (
+                                    <img src={agencyLogo} alt="Logo" className="w-8 h-8 rounded-lg object-contain shrink-0" />
+                                ) : (
+                                    <div className="w-8 h-8 rounded-lg shrink-0" style={{ background: 'var(--gradient-primary)' }}></div>
+                                )}
+                                <span className="font-bold text-lg dark:text-white capitalize">{agencyName}</span>
+                            </div>
+                            <button
+                                onClick={() => setSidebarOpen(!sidebarOpen)}
+                                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
+                            >
+                                <XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                            </button>
+                        </div>
+                    ) : (
+                        <>
+                            {agencyLogo ? (
+                                <img src={agencyLogo} alt="Logo" className="w-8 h-8 rounded-lg object-contain" />
+                            ) : (
+                                <div className="w-8 h-8 rounded-lg" style={{ background: 'var(--gradient-primary)' }}></div>
+                            )}
+                        </>
+                    )}
+                </div>
+
+                {/* Menu */}
+                <nav className="flex-1 overflow-y-auto py-4 px-3">
+                    {menuItems.map((item, idx) => {
+                        const Icon = item.icon;
+                        const isActive = activeSubmenu === idx;
+                        return (
+                            <button
+                                key={idx}
+                                onClick={() => setActiveSubmenu(isActive ? null : idx)}
+                                className={`w-full flex items-center ${(sidebarOpen && activeSubmenu === null) ? 'space-x-3 px-3' : 'justify-center px-0'} py-2.5 mb-1 rounded-lg transition-all group cursor-pointer ${isActive
+                                        ? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900'
+                                        : 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                                    }`}
+                            >
+                                <Icon className={`${(sidebarOpen && activeSubmenu === null) ? 'w-5 h-5' : 'w-[18px] h-[18px]'} stroke-[1.5]`} />
+                                {(sidebarOpen && activeSubmenu === null) && (
+                                    <>
+                                        <span className="flex-1 text-left text-sm font-normal">{item.label}</span>
+                                        <ChevronRightIcon className={`w-4 h-4 transition-transform ${isActive ? 'rotate-90' : ''}`} />
+                                    </>
+                                )}
+                            </button>
+                        );
+                    })}
+                </nav>
+
+                {/* User Menu */}
+                <div className="p-4 border-t border-gray-200 dark:border-gray-800">
+                    {(sidebarOpen && activeSubmenu === null) ? (
+                        <Menu as="div" className="relative">
+                            <Menu.Button className="w-full flex items-center space-x-3 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors">
+                                <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold" style={{ background: 'var(--gradient-primary)' }}>
+                                    {user?.name?.charAt(0).toUpperCase()}
+                                </div>
+                                <div className="flex-1 text-left">
+                                    <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{user?.name}</p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400">{user?.role === 'ADMIN_AGENCIA' ? 'Admin' : 'Cliente'}</p>
+                                </div>
+                                <ChevronDownIcon className="w-4 h-4 text-gray-400" />
+                            </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 bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                                    <Menu.Item>
+                                        {({ active }) => (
+                                            <a
+                                                href="/perfil"
+                                                className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} flex items-center px-4 py-3 text-sm text-gray-700 dark:text-gray-300`}
+                                            >
+                                                <UserCircleIcon className="w-5 h-5 mr-3" />
+                                                Meu Perfil
+                                            </a>
+                                        )}
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                        {({ active }) => (
+                                            <button
+                                                onClick={handleLogout}
+                                                className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full flex items-center px-4 py-3 text-sm text-red-600 dark:text-red-400`}
+                                            >
+                                                <ArrowRightOnRectangleIcon className="w-5 h-5 mr-3" />
+                                                Sair
+                                            </button>
+                                        )}
+                                    </Menu.Item>
+                                </Menu.Items>
+                            </Transition>
+                        </Menu>
+                    ) : (
+                        <button
+                            onClick={handleLogout}
+                            className="w-10 h-10 mx-auto rounded-full flex items-center justify-center text-white cursor-pointer"
+                            style={{ background: 'var(--gradient-primary)' }}
+                            title="Sair"
+                        >
+                            <ArrowRightOnRectangleIcon className="w-5 h-5" />
+                        </button>
+                    )}
+                </div>
+            </aside>
+
+            {/* Submenu Lateral */}
+            <Transition
+                show={activeSubmenu !== null}
+                as={Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="transform -translate-x-full opacity-0"
+                enterTo="transform translate-x-0 opacity-100"
+                leave="transition ease-in duration-150"
+                leaveFrom="transform translate-x-0 opacity-100"
+                leaveTo="transform -translate-x-full opacity-0"
+            >
+                <aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col">
+                    {activeSubmenu !== null && (
+                        <>
+                            <div className="h-16 flex items-center justify-between px-4 border-b border-gray-200 dark:border-gray-800">
+                                <h2 className="font-semibold text-gray-900 dark:text-white">{menuItems[activeSubmenu].label}</h2>
+                                <button
+                                    onClick={() => setActiveSubmenu(null)}
+                                    className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
+                                >
+                                    <XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                                </button>
+                            </div>
+                            <nav className="flex-1 overflow-y-auto py-4 px-3">
+                                {menuItems[activeSubmenu].submenu?.map((subItem, idx) => {
+                                    const SubIcon = subItem.icon;
+                                    return (
+                                        <a
+                                            key={idx}
+                                            href={subItem.href}
+                                            className="flex items-center space-x-3 px-4 py-2.5 mb-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
+                                        >
+                                            <SubIcon className="w-5 h-5 stroke-[1.5]" />
+                                            <span>{subItem.label}</span>
+                                        </a>
+                                    );
+                                })}
+                            </nav>
+                        </>
+                    )}
+                </aside>
+            </Transition>
+
+            {/* Main Content */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+                {/* Header */}
+                <header className="h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-6">
+                    <div className="flex items-center space-x-4">
+                        <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
+                            Dashboard
+                        </h1>
+
+                        {/* Seletor de Cliente */}
+                        <Menu as="div" className="relative">
+                            <Menu.Button className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors cursor-pointer">
+                                {selectedClient?.avatar ? (
+                                    <div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-semibold" style={{ background: 'var(--gradient-primary)' }}>
+                                        {selectedClient.avatar}
+                                    </div>
+                                ) : (
+                                    <UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+                                )}
+                                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    {selectedClient?.name || 'Selecionar Cliente'}
+                                </span>
+                                <ChevronDownIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                            </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 left-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
+                                    <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+                                        <div className="relative">
+                                            <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                                            <input
+                                                type="text"
+                                                placeholder="Buscar cliente..."
+                                                className="w-full pl-9 pr-3 py-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="max-h-64 overflow-y-auto p-2">
+                                        {clients.map((client) => (
+                                            <Menu.Item key={client.id}>
+                                                {({ active }) => (
+                                                    <button
+                                                        onClick={() => setSelectedClient(client)}
+                                                        className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                                                            } ${selectedClient?.id === client.id ? 'bg-gray-100 dark:bg-gray-800' : ''
+                                                            } w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg transition-colors cursor-pointer`}
+                                                    >
+                                                        {client.avatar ? (
+                                                            <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0" style={{ background: 'var(--gradient-primary)' }}>
+                                                                {client.avatar}
+                                                            </div>
+                                                        ) : (
+                                                            <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                                                                <UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+                                                            </div>
+                                                        )}
+                                                        <span className="flex-1 text-left text-sm font-medium text-gray-900 dark:text-white">
+                                                            {client.name}
+                                                        </span>
+                                                        {selectedClient?.id === client.id && (
+                                                            <div className="w-2 h-2 rounded-full bg-gray-900 dark:bg-gray-100"></div>
+                                                        )}
+                                                    </button>
+                                                )}
+                                            </Menu.Item>
+                                        ))}
+                                    </div>
+                                </Menu.Items>
+                            </Transition>
+                        </Menu>
+                    </div>
+
+                    <div className="flex items-center space-x-2">
+                        {/* Pesquisa */}
+                        <button
+                            onClick={() => setSearchOpen(true)}
+                            className="flex items-center space-x-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                        >
+                            <MagnifyingGlassIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                            <span className="text-sm text-gray-500 dark:text-gray-400">Pesquisar...</span>
+                            <kbd className="hidden sm:inline-flex items-center px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
+                                Ctrl K
+                            </kbd>
+                        </button>
+
+                        <ThemeToggle />
+
+                        {/* Notificações */}
+                        <Menu as="div" className="relative">
+                            <Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg relative transition-colors">
+                                <BellIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+                                <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
+                            </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 right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                                    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+                                        <h3 className="font-semibold text-gray-900 dark:text-white">Notificações</h3>
+                                    </div>
+                                    <div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                                        Nenhuma notificação no momento
+                                    </div>
+                                </Menu.Items>
+                            </Transition>
+                        </Menu>
+
+                        {/* Configurações */}
+                        <a
+                            href="/configuracoes"
+                            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                        >
+                            <Cog6ToothIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+                        </a>
+                    </div>
+                </header>
+
+                {/* Page Content */}
+                <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-950">
+                    {children}
+                </main>
+            </div>
+
+            {/* Modal de Pesquisa */}
+            <Transition appear show={searchOpen} as={Fragment}>
+                <div className="fixed inset-0 z-50 overflow-y-auto">
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-200"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-150"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setSearchOpen(false)} />
+                    </Transition.Child>
+
+                    <div className="flex min-h-full items-start justify-center p-4 pt-[15vh]">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-200"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-150"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <div className="w-full max-w-2xl bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden relative z-10">
+                                <div className="flex items-center px-4 border-b border-gray-200 dark:border-gray-800">
+                                    <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" />
+                                    <input
+                                        type="text"
+                                        placeholder="Pesquisar páginas, clientes, projetos..."
+                                        autoFocus
+                                        className="w-full px-4 py-4 bg-transparent text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none"
+                                    />
+                                    <button
+                                        onClick={() => setSearchOpen(false)}
+                                        className="text-xs text-gray-500 dark:text-gray-400 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded"
+                                    >
+                                        ESC
+                                    </button>
+                                </div>
+
+                                <div className="p-4 max-h-96 overflow-y-auto">
+                                    <div className="text-center py-12">
+                                        <MagnifyingGlassIcon className="w-12 h-12 text-gray-300 dark:text-gray-700 mx-auto mb-3" />
+                                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                                            Digite para buscar...
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950">
+                                    <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                                        <div className="flex items-center space-x-4">
+                                            <span className="flex items-center">
+                                                <kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↑↓</kbd>
+                                                navegar
+                                            </span>
+                                            <span className="flex items-center">
+                                                <kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↵</kbd>
+                                                selecionar
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Transition>
+
+            {/* Theme Tester - Temporário para desenvolvimento */}
+            <ThemeTester />
+        </div>
+    );
+}

front-end-agency/app/(auth)/LayoutWrapper.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+export default function AuthLayoutWrapper({ children }: { children: ReactNode }) {
+    return <>{children}</>;
+}

front-end-agency/app/(auth)/layout.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+export default function LoginLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <div className="min-h-screen bg-[#FDFDFC] dark:bg-gray-900">
+            {children}
+        </div>
+    );
+}

front-end-agency/app/(auth)/recuperar-senha/page.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Button, Input } from "@/components/ui";
+import toast, { Toaster } from 'react-hot-toast';
+
+export default function RecuperarSenhaPage() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [email, setEmail] = useState("");
+    const [emailSent, setEmailSent] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        // Validações básicas
+        if (!email) {
+            toast.error('Por favor, insira seu email');
+            return;
+        }
+
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+            toast.error('Por favor, insira um email válido');
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            // Simular envio de email
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+
+            setEmailSent(true);
+            toast.success('Email de recuperação enviado com sucesso!');
+        } catch (error) {
+            toast.error('Erro ao enviar email. Tente novamente.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <>
+            <Toaster
+                position="top-center"
+                toastOptions={{
+                    duration: 5000,
+                    style: {
+                        background: '#FFFFFF',
+                        color: '#000000',
+                        padding: '16px',
+                        borderRadius: '8px',
+                        border: '1px solid #E5E5E5',
+                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    },
+                    error: {
+                        icon: '⚠️',
+                        style: {
+                            background: '#ef4444',
+                            color: '#FFFFFF',
+                            border: 'none',
+                        },
+                    },
+                    success: {
+                        icon: '✓',
+                        style: {
+                            background: '#10B981',
+                            color: '#FFFFFF',
+                            border: 'none',
+                        },
+                    },
+                }}
+            />
+            <div className="flex min-h-screen">
+                {/* Lado Esquerdo - Formulário */}
+                <div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
+                    <div className="w-full max-w-md">
+                        {/* Logo mobile */}
+                        <div className="lg:hidden text-center mb-8">
+                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
+                                <h1 className="text-3xl font-bold text-white">aggios</h1>
+                            </div>
+                        </div>
+
+                        {!emailSent ? (
+                            <>
+                                {/* Header */}
+                                <div className="mb-8">
+                                    <h2 className="text-[28px] font-bold text-zinc-900 dark:text-white">
+                                        Recuperar Senha
+                                    </h2>
+                                    <p className="text-[14px] text-zinc-600 dark:text-zinc-400 mt-2">
+                                        Digite seu email e enviaremos um link para redefinir sua senha
+                                    </p>
+                                </div>
+
+                                {/* Form */}
+                                <form onSubmit={handleSubmit} className="space-y-5">
+                                    <Input
+                                        label="Email"
+                                        type="email"
+                                        placeholder="seu@email.com"
+                                        leftIcon="ri-mail-line"
+                                        value={email}
+                                        onChange={(e) => setEmail(e.target.value)}
+                                        required
+                                    />
+
+                                    <Button
+                                        type="submit"
+                                        variant="primary"
+                                        className="w-full"
+                                        size="lg"
+                                        isLoading={isLoading}
+                                    >
+                                        Enviar link de recuperação
+                                    </Button>
+                                </form>
+
+                                {/* Back to login */}
+                                <div className="mt-6 text-center">
+                                    <Link
+                                        href="/login"
+                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
+                                    >
+                                        <i className="ri-arrow-left-line" />
+                                        Voltar para o login
+                                    </Link>
+                                </div>
+                            </>
+                        ) : (
+                            <>
+                                {/* Success Message */}
+                                <div className="text-center">
+                                    <div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
+                                        <i className="ri-mail-check-line text-4xl text-[#10B981]" />
+                                    </div>
+
+                                    <h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
+                                        Email enviado!
+                                    </h2>
+
+                                    <p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
+                                        Enviamos um link de recuperação para:
+                                    </p>
+
+                                    <p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
+                                        {email}
+                                    </p>
+
+                                    <div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
+                                        <div className="flex gap-4">
+                                            <i className="ri-information-line text-[#ff3a05] text-xl mt-0.5" />
+                                            <div>
+                                                <h4 className="text-sm font-semibold text-zinc-900 dark:text-white mb-1">
+                                                    Verifique sua caixa de entrada
+                                                </h4>
+                                                <p className="text-xs text-zinc-600 dark:text-zinc-400">
+                                                    Clique no link que enviamos para redefinir sua senha.
+                                                    Se não receber em alguns minutos, verifique sua pasta de spam.
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <Button
+                                        variant="outline"
+                                        className="w-full mb-4"
+                                        onClick={() => setEmailSent(false)}
+                                    >
+                                        Enviar novamente
+                                    </Button>
+
+                                    <Link
+                                        href="/login"
+                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
+                                    >
+                                        <i className="ri-arrow-left-line" />
+                                        Voltar para o login
+                                    </Link>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                {/* Lado Direito - Branding */}
+                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
+                    <div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
+                        {/* Logo */}
+                        <div className="mb-8">
+                            <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                                <h1 className="text-5xl font-bold tracking-tight text-white">
+                                    aggios
+                                </h1>
+                            </div>
+                        </div>
+
+                        {/* Conteúdo */}
+                        <div className="max-w-lg text-center">
+                            <div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
+                                <i className="ri-lock-password-line text-4xl" />
+                            </div>
+                            <h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
+                            <p className="text-white/80 text-lg mb-8">
+                                Protegemos seus dados com os mais altos padrões de segurança.
+                                Seu link de recuperação é único e expira em 24 horas.
+                            </p>
+
+                            {/* Features */}
+                            <div className="space-y-4 text-left">
+                                <div className="flex items-start gap-3">
+                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                                        <i className="ri-shield-check-line text-sm" />
+                                    </div>
+                                    <div>
+                                        <h4 className="font-semibold mb-1">Criptografia de ponta</h4>
+                                        <p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
+                                    </div>
+                                </div>
+                                <div className="flex items-start gap-3">
+                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                                        <i className="ri-time-line text-sm" />
+                                    </div>
+                                    <div>
+                                        <h4 className="font-semibold mb-1">Link temporário</h4>
+                                        <p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
+                                    </div>
+                                </div>
+                                <div className="flex items-start gap-3">
+                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                                        <i className="ri-customer-service-2-line text-sm" />
+                                    </div>
+                                    <div>
+                                        <h4 className="font-semibold mb-1">Suporte disponível</h4>
+                                        <p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Círculos decorativos */}
+                    <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+                </div>
+            </div>
+        </>
+    );
+}

front-end-agency/app/LayoutWrapper.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+
+const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+
+const setGradientVariables = (gradient: string) => {
+    document.documentElement.style.setProperty('--gradient-primary', gradient);
+    document.documentElement.style.setProperty('--gradient', gradient);
+    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
+    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
+};
+
+export default function LayoutWrapper({ children }: { children: ReactNode }) {
+    const pathname = usePathname();
+
+    useEffect(() => {
+        // Em toda troca de rota, volta para o tema padrão; layouts específicos (ex.: agência) aplicam o próprio na sequência
+        setGradientVariables(DEFAULT_GRADIENT);
+    }, [pathname]);
+
+    return <>{children}</>;
+}

front-end-agency/app/api/[...path]/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+    const { path: pathArray } = await params;
+    const path = pathArray?.join("/") || "";
+    const token = req.headers.get("authorization");
+    const host = req.headers.get("host");
+
+    try {
+        const response = await fetch(`http://backend:8080/api/${path}${req.nextUrl.search}`, {
+            method: "GET",
+            headers: {
+                "Authorization": token || "",
+                "Content-Type": "application/json",
+                "X-Forwarded-Host": host || "",
+                "X-Original-Host": host || "",
+            },
+        });
+
+        const data = await response.json();
+        return NextResponse.json(data, { status: response.status });
+    } catch (error) {
+        console.error("API proxy error:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+    }
+}
+
+export async function PUT(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+    const { path: pathArray } = await params;
+    const path = pathArray?.join("/") || "";
+    const token = req.headers.get("authorization");
+    const host = req.headers.get("host");
+    const body = await req.json();
+
+    try {
+        const response = await fetch(`http://backend:8080/api/${path}${req.nextUrl.search}`, {
+            method: "PUT",
+            headers: {
+                "Authorization": token || "",
+                "Content-Type": "application/json",
+                "X-Forwarded-Host": host || "",
+                "X-Original-Host": host || "",
+            },
+            body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+        return NextResponse.json(data, { status: response.status });
+    } catch (error) {
+        console.error("API proxy error:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+    }
+}
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+    const { path: pathArray } = await params;
+    const path = pathArray?.join("/") || "";
+    const token = req.headers.get("authorization");
+    const host = req.headers.get("host");
+    const body = await req.json();
+
+    try {
+        const response = await fetch(`http://backend:8080/api/${path}${req.nextUrl.search}`, {
+            method: "POST",
+            headers: {
+                "Authorization": token || "",
+                "Content-Type": "application/json",
+                "X-Forwarded-Host": host || "",
+                "X-Original-Host": host || "",
+            },
+            body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+        return NextResponse.json(data, { status: response.status });
+    } catch (error) {
+        console.error("API proxy error:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+    }
+}

front-end-agency/app/api/admin/agencies/[id]/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const BACKEND_BASE_URL = 'http://aggios-backend:8080';
+
+export async function GET(_request: NextRequest, context: { params: Promise<{ id: string }> }) {
+    try {
+        const { id } = await context.params;
+        const response = await fetch(`${BACKEND_BASE_URL}/api/admin/agencies/${id}`, {
+            method: 'GET',
+        });
+
+        const contentType = response.headers.get('content-type');
+        const isJSON = contentType && contentType.includes('application/json');
+        const payload = isJSON ? await response.json() : await response.text();
+
+        if (!response.ok) {
+            const errorBody = typeof payload === 'string' ? { error: payload } : payload;
+            return NextResponse.json(errorBody, { status: response.status });
+        }
+
+        return NextResponse.json(payload, { status: response.status });
+    } catch (error) {
+        console.error('Agency detail proxy error:', error);
+        return NextResponse.json({ error: 'Erro ao buscar detalhes da agência' }, { status: 500 });
+    }
+}
+
+export async function DELETE(_request: NextRequest, context: { params: Promise<{ id: string }> }) {
+    try {
+        const { id } = await context.params;
+        const response = await fetch(`${BACKEND_BASE_URL}/api/admin/agencies/${id}`, {
+            method: 'DELETE',
+        });
+
+        if (!response.ok && response.status !== 204) {
+            const payload = await response.json().catch(() => ({ error: 'Erro ao excluir agência' }));
+            return NextResponse.json(payload, { status: response.status });
+        }
+
+        return new NextResponse(null, { status: response.status });
+    } catch (error) {
+        console.error('Agency delete proxy error:', error);
+        return NextResponse.json({ error: 'Erro ao excluir agência' }, { status: 500 });
+    }
+}

front-end-agency/app/api/admin/agencies/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+    try {
+        const response = await fetch('http://aggios-backend:8080/api/admin/agencies', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            return NextResponse.json(data, { status: response.status });
+        }
+
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Agencies list error:', error);
+        return NextResponse.json(
+            { error: 'Erro ao buscar agências' },
+            { status: 500 }
+        );
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body = await request.json();
+
+        const response = await fetch('http://aggios-backend:8080/api/admin/agencies/register', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            return NextResponse.json(data, { status: response.status });
+        }
+
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Agency registration error:', error);
+        return NextResponse.json(
+            { error: 'Erro ao registrar agência' },
+            { status: 500 }
+        );
+    }
+}

front-end-agency/app/api/agency/logo/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const BACKEND_URL = process.env.API_INTERNAL_URL || 'http://aggios-backend:8080';
+
+export async function POST(request: NextRequest) {
+    try {
+        const authorization = request.headers.get('authorization');
+
+        if (!authorization) {
+            return NextResponse.json(
+                { error: 'Unauthorized' },
+                { status: 401 }
+            );
+        }
+
+        // Get form data from request
+        const formData = await request.formData();
+
+        console.log('Forwarding logo upload to backend:', BACKEND_URL);
+
+        // Forward to backend
+        const response = await fetch(`${BACKEND_URL}/api/agency/logo`, {
+            method: 'POST',
+            headers: {
+                'Authorization': authorization,
+            },
+            body: formData,
+        });
+
+        console.log('Backend response status:', response.status);
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error('Backend error:', errorText);
+            return NextResponse.json(
+                { error: errorText || 'Failed to upload logo' },
+                { status: response.status }
+            );
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Logo upload error:', error);
+        return NextResponse.json(
+            { error: 'Internal server error: ' + (error instanceof Error ? error.message : String(error)) },
+            { status: 500 }
+        );
+    }
+}

front-end-agency/app/api/auth/login/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+    try {
+        const body = await request.json();
+
+        const response = await fetch('http://aggios-backend:8080/api/auth/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            return NextResponse.json(data, { status: response.status });
+        }
+
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Login error:', error);
+        return NextResponse.json(
+            { error: 'Erro ao processar login' },
+            { status: 500 }
+        );
+    }
+}

front-end-agency/app/globals.css

@@ -0,0 +1,183 @@
+@config "../tailwind.config.js";
+
+@import "tailwindcss";
+@import "./tokens.css";
+
+@variant dark (&:where(.dark, .dark *));
+
+:root {
+  color-scheme: light;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+@layer base {
+  * {
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  }
+
+  a,
+  button,
+  [role="button"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="button"],
+  label[for] {
+    cursor: pointer;
+  }
+
+  body {
+    background-color: var(--color-surface-muted);
+    color: var(--color-text-primary);
+    transition: background-color 0.25s ease, color 0.25s ease;
+  }
+
+  ::selection {
+    background-color: var(--color-brand-500);
+    color: var(--color-text-inverse);
+  }
+
+  /* Seleção em campos de formulário usa o gradiente padrão da marca */
+  input::selection,
+  textarea::selection,
+  select::selection {
+    background: var(--color-gradient-brand);
+    color: var(--color-text-inverse);
+  }
+
+  .surface-card {
+    background-color: var(--color-surface-card);
+    border: 1px solid var(--color-border-strong);
+    box-shadow: 0 20px 80px rgba(15, 23, 42, 0.08);
+  }
+
+  .glass-panel {
+    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
+    backdrop-filter: blur(20px);
+  }
+
+  .gradient-text {
+    background: var(--color-gradient-brand);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

front-end-agency/app/layout.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import { Inter, Open_Sans, Fira_Code } from "next/font/google";
+import "./globals.css";
+import LayoutWrapper from "./LayoutWrapper";
+import { ThemeProvider } from "next-themes";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+const openSans = Open_Sans({
+  variable: "--font-open-sans",
+  subsets: ["latin"],
+  weight: ["600", "700"],
+});
+
+const firaCode = Fira_Code({
+  variable: "--font-fira-code",
+  subsets: ["latin"],
+  weight: ["400", "600"],
+});
+
+export const metadata: Metadata = {
+  title: "Aggios - Dashboard",
+  description: "Plataforma SaaS para agências digitais",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="pt-BR" suppressHydrationWarning>
+      <head>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
+      </head>
+      <body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+          <LayoutWrapper>
+            {children}
+          </LayoutWrapper>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

front-end-agency/app/login/page.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Button, Input, Checkbox } from "@/components/ui";
+import toast, { Toaster } from 'react-hot-toast';
+import { saveAuth, isAuthenticated } from '@/lib/auth';
+import dynamic from 'next/dynamic';
+
+const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
+
+const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+
+const setGradientVariables = (gradient: string) => {
+    document.documentElement.style.setProperty('--gradient-primary', gradient);
+    document.documentElement.style.setProperty('--gradient', gradient);
+    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
+    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
+};
+
+export default function LoginPage() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSuperAdmin, setIsSuperAdmin] = useState(false);
+    const [subdomain, setSubdomain] = useState<string>('');
+    const [formData, setFormData] = useState({
+        email: "",
+        password: "",
+        rememberMe: false,
+    });
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const hostname = window.location.hostname;
+            const sub = hostname.split('.')[0];
+            const superAdmin = sub === 'dash';
+            setSubdomain(sub);
+            setIsSuperAdmin(superAdmin);
+
+            // Aplicar tema: dash sempre padrão; tenants aplicam o salvo ou vindo via query param
+            const searchParams = new URLSearchParams(window.location.search);
+            const themeParam = searchParams.get('theme');
+
+            if (superAdmin) {
+                setGradientVariables(DEFAULT_GRADIENT);
+            } else {
+                const stored = localStorage.getItem(`agency-theme:${sub}`);
+                const gradient = themeParam || stored || DEFAULT_GRADIENT;
+                setGradientVariables(gradient);
+
+                if (themeParam) {
+                    localStorage.setItem(`agency-theme:${sub}`, gradient);
+                }
+            }
+
+            if (isAuthenticated()) {
+                const target = superAdmin ? '/superadmin' : '/dashboard';
+                window.location.href = target;
+            }
+        }
+    }, []);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!formData.email) {
+            toast.error('Por favor, insira seu email');
+            return;
+        }
+
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            toast.error('Por favor, insira um email válido');
+            return;
+        }
+
+        if (!formData.password) {
+            toast.error('Por favor, insira sua senha');
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    email: formData.email,
+                    password: formData.password,
+                }),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.message || 'Credenciais inválidas');
+            }
+
+            const data = await response.json();
+
+            saveAuth(data.token, data.user);
+
+            console.log('Login successful:', data.user);
+
+            toast.success('Login realizado com sucesso! Redirecionando...');
+
+            setTimeout(() => {
+                const target = isSuperAdmin ? '/superadmin' : '/dashboard';
+                window.location.href = target;
+            }, 1000);
+        } catch (error: any) {
+            toast.error(error.message || 'Erro ao fazer login. Verifique suas credenciais.');
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <>
+            <Toaster
+                position="top-center"
+                toastOptions={{
+                    duration: 5000,
+                    style: {
+                        background: '#FFFFFF',
+                        color: '#000000',
+                        padding: '16px',
+                        borderRadius: '8px',
+                        border: '1px solid #E5E5E5',
+                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    },
+                    error: {
+                        icon: '⚠️',
+                        style: {
+                            background: '#ef4444',
+                            color: '#FFFFFF',
+                            border: 'none',
+                        },
+                    },
+                    success: {
+                        icon: '✓',
+                        style: {
+                            background: '#10B981',
+                            color: '#FFFFFF',
+                            border: 'none',
+                        },
+                    },
+                }}
+            />
+            <div className="flex min-h-screen">
+                {/* Lado Esquerdo - Formulário */}
+                <div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
+                    <div className="w-full max-w-md">
+                        {/* Logo mobile */}
+                        <div className="lg:hidden text-center mb-8">
+                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
+                                <h1 className="text-3xl font-bold text-white">
+                                    {isSuperAdmin ? 'aggios' : subdomain}
+                                </h1>
+                            </div>
+                        </div>
+
+                        {/* Theme Toggle */}
+                        <div className="flex justify-end mb-4">
+                            <ThemeToggle />
+                        </div>
+
+                        {/* Header */}
+                        <div className="mb-8">
+                            <h2 className="text-[28px] font-bold text-[#000000] dark:text-white">
+                                {isSuperAdmin ? 'Painel Administrativo' : 'Bem-vindo de volta'}
+                            </h2>
+                            <p className="text-[14px] text-[#7D7D7D] dark:text-gray-400 mt-2">
+                                {isSuperAdmin
+                                    ? 'Acesso exclusivo para administradores Aggios'
+                                    : 'Entre com suas credenciais para acessar o painel'
+                                }
+                            </p>
+                        </div>
+
+                        {/* Form */}
+                        <form onSubmit={handleSubmit} className="space-y-5">
+                            <Input
+                                label="Email"
+                                type="email"
+                                placeholder="seu@email.com"
+                                leftIcon="ri-mail-line"
+                                value={formData.email}
+                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                                required
+                            />
+
+                            <Input
+                                label="Senha"
+                                type="password"
+                                placeholder="Digite sua senha"
+                                leftIcon="ri-lock-line"
+                                value={formData.password}
+                                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                required
+                            />
+
+                            <div className="flex items-center justify-between">
+                                <Checkbox
+                                    id="rememberMe"
+                                    label="Lembrar de mim"
+                                    checked={formData.rememberMe}
+                                    onChange={(e) => setFormData({ ...formData, rememberMe: e.target.checked })}
+                                />
+                                <Link
+                                    href="/recuperar-senha"
+                                    className="text-[14px] font-medium hover:opacity-80 transition-opacity"
+                                    style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+                                >
+                                    Esqueceu a senha?
+                                </Link>
+                            </div>
+
+                            <Button
+                                type="submit"
+                                variant="primary"
+                                size="lg"
+                                className="w-full"
+                                disabled={isLoading}
+                            >
+                                {isLoading ? 'Entrando...' : 'Entrar'}
+                            </Button>
+
+                            {/* Link para cadastro - apenas para agências */}
+                            {!isSuperAdmin && (
+                                <p className="text-center text-[14px] text-[#7D7D7D] dark:text-gray-400">
+                                    Ainda não tem conta?{' '}
+                                    <a
+                                        href="http://dash.localhost/cadastro"
+                                        className="font-medium hover:opacity-80 transition-opacity"
+                                        style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+                                    >
+                                        Cadastre sua agência
+                                    </a>
+                                </p>
+                            )}
+                        </form>
+                    </div>
+                </div>
+
+                {/* Lado Direito - Branding */}
+                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
+                    <div className="absolute inset-0 flex flex-col items-center justify-center p-12 text-white">
+                        <div className="max-w-md text-center">
+                            <h1 className="text-5xl font-bold mb-6">
+                                {isSuperAdmin ? 'aggios' : subdomain}
+                            </h1>
+                            <p className="text-xl opacity-90 mb-8">
+                                {isSuperAdmin
+                                    ? 'Gerencie todas as agências em um só lugar'
+                                    : 'Gerencie seus clientes com eficiência'
+                                }
+                            </p>
+                            <div className="grid grid-cols-2 gap-6 text-left">
+                                <div>
+                                    <i className="ri-shield-check-line text-3xl mb-2"></i>
+                                    <h3 className="font-semibold mb-1">Seguro</h3>
+                                    <p className="text-sm opacity-80">Proteção de dados</p>
+                                </div>
+                                <div>
+                                    <i className="ri-speed-line text-3xl mb-2"></i>
+                                    <h3 className="font-semibold mb-1">Rápido</h3>
+                                    <p className="text-sm opacity-80">Performance otimizada</p>
+                                </div>
+                                <div>
+                                    <i className="ri-team-line text-3xl mb-2"></i>
+                                    <h3 className="font-semibold mb-1">Colaborativo</h3>
+                                    <p className="text-sm opacity-80">Trabalho em equipe</p>
+                                </div>
+                                <div>
+                                    <i className="ri-line-chart-line text-3xl mb-2"></i>
+                                    <h3 className="font-semibold mb-1">Insights</h3>
+                                    <p className="text-sm opacity-80">Relatórios detalhados</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

front-end-agency/app/not-found.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui";
+
+export default function NotFound() {
+    return (
+        <div className="flex min-h-screen">
+            {/* Lado Esquerdo - Conteúdo 404 */}
+            <div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
+                <div className="w-full max-w-md text-center">
+                    {/* Logo mobile */}
+                    <div className="lg:hidden mb-8">
+                        <div className="inline-block px-6 py-3 rounded-2xl bg-linear-to-r from-brand-500 to-brand-700">
+                            <h1 className="text-3xl font-bold text-white">aggios</h1>
+                        </div>
+                    </div>
+
+                    {/* 404 Number */}
+                    <div className="mb-6">
+                        <h1 className="text-[120px] font-bold leading-none gradient-text">
+                            404
+                        </h1>
+                    </div>
+
+                    {/* Message */}
+                    <div className="mb-6">
+                        <h2 className="text-[28px] font-bold text-[#000000] mb-2">
+                            Página não encontrada
+                        </h2>
+                        <p className="text-[14px] text-[#7D7D7D] leading-relaxed">
+                            Desculpe, a página que você está procurando não existe ou foi movida.
+                            Verifique a URL ou volte para a página inicial.
+                        </p>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="space-y-3">
+                        <Button
+                            variant="primary"
+                            className="w-full"
+                            size="lg"
+                            leftIcon="ri-login-box-line"
+                            onClick={() => window.location.href = '/login'}
+                        >
+                            Fazer login
+                        </Button>
+
+                        <Button
+                            variant="outline"
+                            className="w-full"
+                            size="lg"
+                            leftIcon="ri-user-add-line"
+                            onClick={() => window.location.href = '/cadastro'}
+                        >
+                            Criar conta
+                        </Button>
+                    </div>
+
+                    {/* Help Section */}
+                    <div className="mt-8 p-5 bg-[#F5F5F5] rounded-lg text-left">
+                        <h4 className="text-[13px] font-semibold text-[#000000] mb-3 flex items-center gap-2">
+                            <i className="ri-questionnaire-line text-[16px] gradient-text" />
+                            Precisa de ajuda?
+                        </h4>
+                        <ul className="text-[13px] text-[#7D7D7D] space-y-2">
+                            <li className="flex items-start gap-2">
+                                <i className="ri-arrow-right-s-line text-[16px] gradient-text mt-0.5" />
+                                <span>Verifique se a URL está correta</span>
+                            </li>
+                            <li className="flex items-start gap-2">
+                                <i className="ri-arrow-right-s-line text-[16px] gradient-text mt-0.5" />
+                                <span>Tente buscar no menu principal</span>
+                            </li>
+                            <li className="flex items-start gap-2">
+                                <i className="ri-arrow-right-s-line text-[16px] gradient-text mt-0.5" />
+                                <span>Entre em contato com o suporte se o problema persistir</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* Lado Direito - Branding */}
+            <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
+                <div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
+                    {/* Logo */}
+                    <div className="mb-8">
+                        <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                            <h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
+                                aggios
+                            </h1>
+                        </div>
+                    </div>
+
+                    {/* Conteúdo */}
+                    <div className="max-w-lg text-center">
+                        <div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
+                            <i className="ri-compass-3-line text-4xl" />
+                        </div>
+                        <h2 className="text-4xl font-bold mb-4">Perdido? Estamos aqui!</h2>
+                        <p className="text-white/80 text-lg mb-8">
+                            Mesmo que esta página não exista, temos muitas outras funcionalidades incríveis
+                            esperando por você no Aggios.
+                        </p>
+
+                        {/* Features */}
+                        <div className="space-y-4 text-left">
+                            <div className="flex items-start gap-3">
+                                <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                                    <i className="ri-dashboard-line text-sm" />
+                                </div>
+                                <div>
+                                    <h4 className="font-semibold mb-1">Dashboard Completo</h4>
+                                    <p className="text-white/70 text-sm">Visualize todos os seus projetos e métricas</p>
+                                </div>
+                            </div>
+                            <div className="flex items-start gap-3">
+                                <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                                    <i className="ri-team-line text-sm" />
+                                </div>
+                                <div>
+                                    <h4 className="font-semibold mb-1">Gestão de Equipe</h4>
+                                    <p className="text-white/70 text-sm">Organize e acompanhe sua equipe</p>
+                                </div>
+                            </div>
+                            <div className="flex items-start gap-3">
+                                <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                                    <i className="ri-customer-service-line text-sm" />
+                                </div>
+                                <div>
+                                    <h4 className="font-semibold mb-1">Suporte 24/7</h4>
+                                    <p className="text-white/70 text-sm">Estamos sempre disponíveis para ajudar</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Círculos decorativos */}
+                <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+                <div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+            </div>
+        </div>
+    );
+}

front-end-agency/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/login");
+}

front-end-agency/app/tokens.css

@@ -0,0 +1,54 @@
+@layer theme {
+    :root {
+        /* Gradientes */
+        --gradient: linear-gradient(135deg, #ff3a05, #ff0080);
+        --gradient-text: linear-gradient(to right, #ff3a05, #ff0080);
+        --gradient-primary: linear-gradient(135deg, #ff3a05, #ff0080);
+        --color-gradient-brand: linear-gradient(135deg, #ff3a05, #ff0080);
+
+        /* Cores sólidas de marca (usadas em textos/bordas) */
+        --brand-color: #ff3a05;
+        --brand-color-strong: #ff0080;
+
+        /* Superfícies e tipografia */
+        --color-surface-light: #ffffff;
+        --color-surface-dark: #0a0a0a;
+        --color-surface-muted: #f5f7fb;
+        --color-surface-card: #ffffff;
+        --color-border-strong: rgba(15, 23, 42, 0.08);
+        --color-text-primary: #0f172a;
+        --color-text-secondary: #475569;
+        --color-text-inverse: #f8fafc;
+        --color-gray-50: #f9fafb;
+        --color-gray-100: #f3f4f6;
+        --color-gray-200: #e5e7eb;
+        --color-gray-300: #d1d5db;
+        --color-gray-400: #9ca3af;
+        --color-gray-500: #6b7280;
+        --color-gray-600: #4b5563;
+        --color-gray-700: #374151;
+        --color-gray-800: #1f2937;
+        --color-gray-900: #111827;
+        --color-gray-950: #030712;
+
+        /* Espaçamento */
+        --spacing-xs: 0.25rem;
+        --spacing-sm: 0.5rem;
+        --spacing-md: 1rem;
+        --spacing-lg: 1.5rem;
+        --spacing-xl: 2rem;
+        --spacing-2xl: 3rem;
+    }
+
+    .dark {
+        /* Invertendo superfícies e texto para dark mode */
+        --color-surface-light: #020617;
+        --color-surface-dark: #f8fafc;
+        --color-surface-muted: #0b1220;
+        --color-surface-card: #0f172a;
+        --color-border-strong: rgba(148, 163, 184, 0.25);
+        --color-text-primary: #f8fafc;
+        --color-text-secondary: #cbd5f5;
+        --color-text-inverse: #0f172a;
+    }
+}

front-end-agency/components/DynamicFavicon.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from 'react';
+
+interface DynamicFaviconProps {
+    logoUrl?: string;
+}
+
+export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
+    useEffect(() => {
+        if (!logoUrl) return;
+
+        // Remove favicons antigos
+        const existingLinks = document.querySelectorAll("link[rel*='icon']");
+        existingLinks.forEach(link => link.remove());
+
+        // Adiciona novo favicon
+        const link = document.createElement('link');
+        link.type = 'image/x-icon';
+        link.rel = 'shortcut icon';
+        link.href = logoUrl;
+        document.getElementsByTagName('head')[0].appendChild(link);
+
+        // Adiciona Apple touch icon
+        const appleLink = document.createElement('link');
+        appleLink.rel = 'apple-touch-icon';
+        appleLink.href = logoUrl;
+        document.getElementsByTagName('head')[0].appendChild(appleLink);
+
+    }, [logoUrl]);
+
+    return null;
+}

front-end-agency/components/ThemeTester.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from 'react';
+import { SwatchIcon } from '@heroicons/react/24/outline';
+
+const themePresets = [
+    {
+        name: 'Azul (Marca)',
+        gradient: 'linear-gradient(135deg, #0ea5e9, #0284c7)',
+    },
+    {
+        name: 'Azul/Roxo',
+        gradient: 'linear-gradient(135deg, #0066FF, #9333EA)',
+    },
+    {
+        name: 'Verde/Esmeralda',
+        gradient: 'linear-gradient(135deg, #10B981, #059669)',
+    },
+    {
+        name: 'Ciano/Azul',
+        gradient: 'linear-gradient(135deg, #06B6D4, #3B82F6)',
+    },
+    {
+        name: 'Rosa/Roxo',
+        gradient: 'linear-gradient(135deg, #EC4899, #A855F7)',
+    },
+    {
+        name: 'Vermelho/Laranja',
+        gradient: 'linear-gradient(135deg, #EF4444, #F97316)',
+    },
+    {
+        name: 'Índigo/Violeta',
+        gradient: 'linear-gradient(135deg, #6366F1, #8B5CF6)',
+    },
+    {
+        name: 'Âmbar/Amarelo',
+        gradient: 'linear-gradient(135deg, #F59E0B, #EAB308)',
+    },
+];
+
+export default function ThemeTester() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const applyTheme = (gradient: string) => {
+        document.documentElement.style.setProperty('--gradient-primary', gradient);
+        document.documentElement.style.setProperty('--gradient', gradient);
+        document.documentElement.style.setProperty('--gradient-text', gradient);
+        document.documentElement.style.setProperty('--color-gradient-brand', gradient);
+    };
+
+    return (
+        <div className="fixed bottom-4 right-4 z-50">
+            {/* Botão flutuante */}
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110"
+                style={{ background: 'var(--gradient-primary)' }}
+                title="Testar Temas"
+            >
+                <SwatchIcon className="w-6 h-6 text-white" />
+            </button>
+
+            {/* Painel de temas */}
+            {isOpen && (
+                <div className="absolute bottom-16 right-0 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+                    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+                        <h3 className="font-semibold text-gray-900 dark:text-white">Testar Gradientes</h3>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            Clique para aplicar temporariamente
+                        </p>
+                    </div>
+
+                    <div className="p-3 max-h-96 overflow-y-auto space-y-2">
+                        {themePresets.map((theme) => (
+                            <button
+                                key={theme.name}
+                                onClick={() => applyTheme(theme.gradient)}
+                                className="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group"
+                            >
+                                <div
+                                    className="w-12 h-12 rounded-lg shrink-0"
+                                    style={{ background: theme.gradient }}
+                                />
+                                <span className="text-sm font-medium text-gray-900 dark:text-white text-left">
+                                    {theme.name}
+                                </span>
+                            </button>
+                        ))}
+                    </div>
+
+                    <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+                            💡 Recarregue a página para voltar ao tema original
+                        </p>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

front-end-agency/components/ThemeToggle.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
+
+export default function ThemeToggle() {
+    const { resolvedTheme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800" />;
+    }
+
+    const isDark = resolvedTheme === 'dark';
+
+    return (
+        <button
+            type="button"
+            onClick={() => setTheme(isDark ? 'light' : 'dark')}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+            aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
+            title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
+        >
+            {isDark ? (
+                <SunIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+            ) : (
+                <MoonIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+            )}
+        </button>
+    );
+}
+

front-end-agency/components/cadastro/DashboardPreview.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+interface DashboardPreviewProps {
+    companyName: string;
+    subdomain: string;
+    primaryColor: string;
+    secondaryColor: string;
+    logoUrl?: string;
+}
+
+export default function DashboardPreview({
+    companyName,
+    subdomain,
+    primaryColor,
+    secondaryColor,
+    logoUrl
+}: DashboardPreviewProps) {
+    return (
+        <div className="bg-white rounded-lg border-2 border-[#E5E5E5] overflow-hidden shadow-lg">
+            {/* Header do Preview */}
+            <div className="bg-[#F5F5F5] px-3 py-2 border-b border-[#E5E5E5] flex items-center gap-2">
+                <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
+                    <div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
+                    <div className="w-3 h-3 rounded-full bg-[#28CA42]" />
+                </div>
+                <div className="flex-1 text-center">
+                    <span className="text-xs text-[#7D7D7D]">
+                        {subdomain || 'seu-dominio'}.aggios.app
+                    </span>
+                </div>
+            </div>
+
+            {/* Conteúdo do Preview - Dashboard */}
+            <div className="aspect-video bg-[#F8F9FA] relative overflow-hidden">
+                {/* Sidebar */}
+                <div
+                    className="absolute left-0 top-0 bottom-0 w-16 flex flex-col items-center py-4 gap-3"
+                    style={{ backgroundColor: primaryColor }}
+                >
+                    {/* Logo/Initial */}
+                    <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white font-bold text-sm overflow-hidden">
+                        {logoUrl ? (
+                            <img src={logoUrl} alt="Logo" className="w-full h-full object-cover" />
+                        ) : (
+                            <span>{(companyName || 'E')[0].toUpperCase()}</span>
+                        )}
+                    </div>
+                    {/* Menu Icons */}
+                    <div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
+                        <i className="ri-dashboard-line text-white text-lg" />
+                    </div>
+                    <div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
+                        <i className="ri-folder-line text-lg" />
+                    </div>
+                    <div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
+                        <i className="ri-team-line text-lg" />
+                    </div>
+                    <div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
+                        <i className="ri-settings-3-line text-lg" />
+                    </div>
+                </div>
+
+                {/* Main Content */}
+                <div className="ml-16 p-4">
+                    {/* Top Bar */}
+                    <div className="flex items-center justify-between mb-4">
+                        <div>
+                            <h2 className="text-sm font-bold text-[#000000]">
+                                {companyName || 'Sua Empresa'}
+                            </h2>
+                            <p className="text-xs text-[#7D7D7D]">Dashboard</p>
+                        </div>
+                        <div className="flex gap-2">
+                            <div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
+                            <div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
+                        </div>
+                    </div>
+
+                    {/* Stats Cards */}
+                    <div className="grid grid-cols-3 gap-2 mb-3">
+                        <div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
+                            <div className="flex items-center gap-2 mb-1">
+                                <div
+                                    className="w-6 h-6 rounded flex items-center justify-center"
+                                    style={{ backgroundColor: `${primaryColor}20` }}
+                                >
+                                    <i className="ri-folder-line text-xs" style={{ color: primaryColor }} />
+                                </div>
+                                <span className="text-[10px] text-[#7D7D7D]">Projetos</span>
+                            </div>
+                            <p className="text-sm font-bold" style={{ color: primaryColor }}>24</p>
+                        </div>
+                        <div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
+                            <div className="flex items-center gap-2 mb-1">
+                                <div
+                                    className="w-6 h-6 rounded flex items-center justify-center"
+                                    style={{ backgroundColor: secondaryColor ? `${secondaryColor}20` : '#10B98120' }}
+                                >
+                                    <i className="ri-team-line text-xs" style={{ color: secondaryColor || '#10B981' }} />
+                                </div>
+                                <span className="text-[10px] text-[#7D7D7D]">Clientes</span>
+                            </div>
+                            <p className="text-sm font-bold" style={{ color: secondaryColor || '#10B981' }}>15</p>
+                        </div>
+                        <div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
+                            <div className="flex items-center gap-2 mb-1">
+                                <div className="w-6 h-6 rounded flex items-center justify-center bg-[#7D7D7D]/10">
+                                    <i className="ri-money-dollar-circle-line text-xs text-[#7D7D7D]" />
+                                </div>
+                                <span className="text-[10px] text-[#7D7D7D]">Receita</span>
+                            </div>
+                            <p className="text-sm font-bold text-[#7D7D7D]">R$ 45k</p>
+                        </div>
+                    </div>
+
+                    {/* Chart Area */}
+                    <div className="bg-white rounded-lg p-3 border border-[#E5E5E5]">
+                        <div className="flex items-center justify-between mb-2">
+                            <span className="text-xs font-semibold text-[#000000]">Desempenho</span>
+                            <button
+                                className="px-2 py-0.5 rounded text-[10px] text-white"
+                                style={{ backgroundColor: primaryColor }}
+                            >
+                                Este mês
+                            </button>
+                        </div>
+                        <div className="flex items-end gap-1 h-16">
+                            {[40, 70, 45, 80, 60, 90, 75].map((height, i) => (
+                                <div key={i} className="flex-1 flex flex-col justify-end">
+                                    <div
+                                        className="w-full rounded-t transition-all"
+                                        style={{
+                                            height: `${height}%`,
+                                            backgroundColor: i === 6 ? primaryColor : `${primaryColor}40`
+                                        }}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Footer Preview */}
+            <div className="bg-[#F5F5F5] px-3 py-2 text-center border-t border-[#E5E5E5]">
+                <p className="text-[10px] text-[#7D7D7D]">
+                    Preview do seu painel • As cores e layout podem ser ajustados
+                </p>
+            </div>
+        </div>
+    );
+}

front-end-agency/components/cadastro/DynamicBranding.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import DashboardPreview from "./DashboardPreview";
+
+interface DynamicBrandingProps {
+    currentStep: number;
+    companyName?: string;
+    subdomain?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    logoUrl?: string;
+}
+
+export default function DynamicBranding({
+    currentStep,
+    companyName = '',
+    subdomain = '',
+    primaryColor = '#0ea5e9',
+    secondaryColor = '#0284c7',
+    logoUrl = ''
+}: DynamicBrandingProps) {
+    const [activeTestimonial, setActiveTestimonial] = useState(0);
+
+    const testimonials = [
+        {
+            text: "Com o Aggios, nossa produtividade aumentou 40%. Gestão de projetos nunca foi tão simples!",
+            author: "Maria Silva",
+            company: "DigitalWorks",
+            avatar: "MS"
+        },
+        {
+            text: "Reduzi 60% do tempo gasto com controle financeiro. Tudo centralizado em um só lugar.",
+            author: "João Santos",
+            company: "TechHub",
+            avatar: "JS"
+        },
+        {
+            text: "A melhor decisão para nossa agência. Dashboard intuitivo e relatórios incríveis!",
+            author: "Ana Costa",
+            company: "CreativeFlow",
+            avatar: "AC"
+        }
+    ];
+
+    const stepContent = [
+        {
+            icon: "ri-user-heart-line",
+            title: "Bem-vindo ao Aggios!",
+            description: "Vamos criar sua conta em poucos passos",
+            benefits: [
+                "✓ Acesso completo ao painel",
+                "✓ Gestão ilimitada de projetos",
+                "✓ Suporte prioritário"
+            ]
+        },
+        {
+            icon: "ri-building-line",
+            title: "Configure sua Empresa",
+            description: "Personalize de acordo com seu negócio",
+            benefits: [
+                "✓ Dashboard personalizado",
+                "✓ Gestão de equipe e clientes",
+                "✓ Controle financeiro integrado"
+            ]
+        },
+        {
+            icon: "ri-map-pin-line",
+            title: "Quase lá!",
+            description: "Informações de localização e contato",
+            benefits: [
+                "✓ Multi-contatos configuráveis",
+                "✓ Integração com WhatsApp",
+                "✓ Notificações em tempo real"
+            ]
+        },
+        {
+            icon: "ri-global-line",
+            title: "Seu Domínio Exclusivo",
+            description: "Escolha como acessar seu painel",
+            benefits: [
+                "✓ Subdomínio personalizado",
+                "✓ SSL incluído gratuitamente",
+                "✓ Domínio próprio (opcional)"
+            ]
+        },
+        {
+            icon: "ri-palette-line",
+            title: "Personalize as Cores",
+            description: "Deixe com a cara da sua empresa",
+            benefits: [
+                "✓ Preview em tempo real",
+                "✓ Paleta de cores customizada",
+                "✓ Identidade visual única"
+            ]
+        }
+    ];
+
+    const content = stepContent[currentStep - 1] || stepContent[0];
+
+    // Auto-rotate testimonials
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
+        }, 5000);
+        return () => clearInterval(interval);
+    }, [testimonials.length]);
+
+    // Se for etapa 5, mostrar preview do dashboard
+    if (currentStep === 5) {
+        return (
+            <div className="relative z-10 flex flex-col justify-center items-center w-full p-12">
+                {/* Logo */}
+                <div className="mb-8">
+                    <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                        <h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
+                            aggios
+                        </h1>
+                    </div>
+                </div>
+
+                {/* Conteúdo */}
+                <div className="max-w-lg text-center">
+                    <h2 className="text-3xl font-bold mb-2 text-white">Preview do seu Painel</h2>
+                    <p className="text-white/80 text-lg">Veja como ficará seu dashboard personalizado</p>
+                </div>
+
+                {/* Preview */}
+                <div className="w-full max-w-3xl">
+                    <DashboardPreview
+                        companyName={companyName}
+                        subdomain={subdomain}
+                        primaryColor={primaryColor}
+                        secondaryColor={secondaryColor}
+                        logoUrl={logoUrl}
+                    />
+                </div>
+
+                {/* Info */}
+                <div className="mt-6 text-center">
+                    <p className="text-white/70 text-sm">
+                        As cores e configurações são atualizadas em tempo real
+                    </p>
+                </div>
+
+                {/* Decorative circles */}
+                <div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
+                <div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="relative z-10 flex flex-col justify-between w-full p-12 text-white">
+            {/* Logo e Conteúdo da Etapa */}
+            <div className="flex flex-col justify-center flex-1">
+                {/* Logo */}
+                <div className="mb-8">
+                    <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                        <h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
+                            aggios
+                        </h1>
+                    </div>
+                </div>
+
+                {/* Ícone e Título da Etapa */}
+                <div className="mb-6">
+                    <div className="w-16 h-16 rounded-2xl bg-white/20 flex items-center justify-center mb-4">
+                        <i className={`${content.icon} text-3xl`} />
+                    </div>
+                    <h2 className="text-3xl font-bold mb-2">{content.title}</h2>
+                    <p className="text-white/80 text-lg">{content.description}</p>
+                </div>
+
+                {/* Benefícios */}
+                <div className="space-y-3 mb-8">
+                    {content.benefits.map((benefit, index) => (
+                        <div
+                            key={index}
+                            className="flex items-center gap-3 text-white/90 animate-fade-in"
+                            style={{ animationDelay: `${index * 100}ms` }}
+                        >
+                            <span className="text-lg">{benefit}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Carrossel de Depoimentos */}
+            <div className="relative">
+                <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
+                    <div className="mb-4">
+                        <i className="ri-double-quotes-l text-3xl text-white/40" />
+                    </div>
+                    <p className="text-white/95 mb-4 min-h-[60px]">
+                        {testimonials[activeTestimonial].text}
+                    </p>
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center font-semibold">
+                            {testimonials[activeTestimonial].avatar}
+                        </div>
+                        <div>
+                            <p className="font-semibold text-white">
+                                {testimonials[activeTestimonial].author}
+                            </p>
+                            <p className="text-sm text-white/70">
+                                {testimonials[activeTestimonial].company}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Indicadores */}
+                <div className="flex gap-2 justify-center mt-4">
+                    {testimonials.map((_, index) => (
+                        <button
+                            key={index}
+                            onClick={() => setActiveTestimonial(index)}
+                            className={`h-1.5 rounded-full transition-all ${index === activeTestimonial
+                                ? "w-8 bg-white"
+                                : "w-1.5 bg-white/40 hover:bg-white/60"
+                                }`}
+                            aria-label={`Ir para depoimento ${index + 1}`}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* Decorative circles */}
+            <div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
+            <div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
+        </div>
+    );
+}

front-end-agency/components/ui/Button.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ButtonHTMLAttributes, forwardRef } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    leftIcon?: string;
+    rightIcon?: string;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+        {
+            children,
+            variant = "primary",
+            size = "md",
+            isLoading = false,
+            leftIcon,
+            rightIcon,
+            className = "",
+            disabled,
+            ...props
+        },
+        ref
+    ) => {
+        const baseStyles =
+            "inline-flex items-center justify-center font-medium rounded-[6px] transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
+
+        const variants = {
+            primary: "text-white hover:opacity-90 active:opacity-80",
+            secondary:
+                "bg-[#E5E5E5] dark:bg-gray-700 text-[#000000] dark:text-white hover:opacity-90 active:opacity-80",
+            outline:
+                "border border-[#E5E5E5] dark:border-gray-600 text-[#000000] dark:text-white hover:bg-[#E5E5E5]/10 dark:hover:bg-gray-700/50 active:bg-[#E5E5E5]/20 dark:active:bg-gray-700",
+            ghost: "text-[#000000] dark:text-white hover:bg-[#E5E5E5]/20 dark:hover:bg-gray-700/30 active:bg-[#E5E5E5]/30 dark:active:bg-gray-700/50",
+        };
+
+        const sizes = {
+            sm: "h-9 px-3 text-[13px]",
+            md: "h-10 px-4 text-[14px]",
+            lg: "h-12 px-6 text-[14px]",
+        };
+
+        return (
+            <button
+                ref={ref}
+                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+                style={variant === 'primary' ? { background: 'var(--gradient-primary)' } : undefined}
+                disabled={disabled || isLoading}
+                {...props}
+            >
+                {isLoading && (
+                    <i className="ri-loader-4-line animate-spin mr-2 text-[20px]" />
+                )}
+                {!isLoading && leftIcon && (
+                    <i className={`${leftIcon} mr-2 text-[20px]`} />
+                )}
+                {children}
+                {!isLoading && rightIcon && (
+                    <i className={`${rightIcon} ml-2 text-[20px]`} />
+                )}
+            </button>
+        );
+    }
+);
+
+Button.displayName = "Button";
+
+export default Button;

front-end-agency/components/ui/Checkbox.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { InputHTMLAttributes, forwardRef, useState } from "react";
+
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string | React.ReactNode;
+    error?: string;
+}
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    ({ label, error, className = "", onChange, checked: controlledChecked, ...props }, ref) => {
+        const [isChecked, setIsChecked] = useState(controlledChecked || false);
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            setIsChecked(e.target.checked);
+            if (onChange) {
+                onChange(e);
+            }
+        };
+
+        const checked = controlledChecked !== undefined ? controlledChecked : isChecked;
+
+        return (
+            <div className="w-full">
+                <label className="flex items-start gap-3 cursor-pointer group">
+                    <div className="relative flex items-center justify-center mt-0.5">
+                        <input
+                            ref={ref}
+                            type="checkbox"
+                            className={`
+                appearance-none w-[18px] h-[18px] border rounded-sm
+                                border-zinc-200 dark:border-gray-600 bg-white dark:bg-gray-700
+                                checked:border-brand-500
+                                focus:outline-none focus:border-brand-500
+                transition-colors cursor-pointer
+                ${className}
+              `}
+                            style={{
+                                background: checked ? 'var(--gradient-primary)' : undefined,
+                            }}
+                            checked={checked}
+                            onChange={handleChange}
+                            {...props}
+                        />
+                        <i
+                            className={`ri-check-line absolute text-white text-[14px] pointer-events-none transition-opacity ${checked ? 'opacity-100' : 'opacity-0'
+                                }`}
+                        />
+                    </div>
+                    {label && (
+                        <span className="text-[14px] text-zinc-900 dark:text-white select-none">
+                            {label}
+                        </span>
+                    )}
+                </label>
+                {error && (
+                    <p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
+                        <i className="ri-error-warning-line" />
+                        {error}
+                    </p>
+                )}
+            </div>
+        );
+    }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;

front-end-agency/components/ui/Dialog.tsx

@@ -0,0 +1,95 @@
+import { Fragment } from 'react';
+import { Dialog as HeadlessDialog, Transition } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showClose?: boolean;
+}
+
+const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+
+export default function Dialog({
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = 'md',
+    showClose = true,
+}: DialogProps) {
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <HeadlessDialog as="div" className="relative z-50" onClose={onClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <HeadlessDialog.Panel
+                                className={`w-full ${sizeClasses[size]} transform rounded-2xl bg-white dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all border border-gray-200 dark:border-gray-700`}
+                            >
+                                {title && (
+                                    <div className="flex items-center justify-between mb-4">
+                                        <HeadlessDialog.Title
+                                            as="h3"
+                                            className="text-lg font-semibold text-gray-900 dark:text-white"
+                                        >
+                                            {title}
+                                        </HeadlessDialog.Title>
+                                        {showClose && (
+                                            <button
+                                                onClick={onClose}
+                                                className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                                            >
+                                                <XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                                            </button>
+                                        )}
+                                    </div>
+                                )}
+
+                                {children}
+                            </HeadlessDialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </HeadlessDialog>
+        </Transition>
+    );
+}
+
+// Componente auxiliar para o corpo do dialog
+Dialog.Body = function DialogBody({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+    return <div className={`text-sm text-gray-600 dark:text-gray-300 ${className}`}>{children}</div>;
+};
+
+// Componente auxiliar para o rodapé do dialog
+Dialog.Footer = function DialogFooter({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+    return <div className={`mt-6 flex items-center justify-end space-x-3 ${className}`}>{children}</div>;
+};

front-end-agency/components/ui/Input.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { InputHTMLAttributes, forwardRef, useState } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    onRightIconClick?: () => void;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+    (
+        {
+            label,
+            error,
+            helperText,
+            leftIcon,
+            rightIcon,
+            onRightIconClick,
+            className = "",
+            type,
+            ...props
+        },
+        ref
+    ) => {
+        const [showPassword, setShowPassword] = useState(false);
+        const isPassword = type === "password";
+
+        const inputType = isPassword ? (showPassword ? "text" : "password") : type;
+
+        return (
+            <div className="w-full">
+                {label && (
+                    <label className="block text-[13px] font-semibold text-zinc-900 dark:text-white mb-2">
+                        {label}
+                        {props.required && <span className="text-brand-500 ml-1">*</span>}
+                    </label>
+                )}
+                <div className="relative">
+                    {leftIcon && (
+                        <i
+                            className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 text-[20px]`}
+                        />
+                    )}
+                    <input
+                        ref={ref}
+                        type={inputType}
+                        className={`
+              w-full px-3.5 py-3 text-[14px] font-normal
+              border rounded-md bg-white dark:bg-gray-700 dark:text-white
+              placeholder:text-zinc-500 dark:placeholder:text-gray-400
+              transition-all
+              ${leftIcon ? "pl-11" : ""}
+              ${isPassword || rightIcon ? "pr-11" : ""}
+              ${error
+                                ? "border-red-500 focus:border-red-500"
+                                : "border-zinc-200 dark:border-gray-600 focus:border-brand-500"
+                            }
+              outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
+              disabled:bg-zinc-100 disabled:cursor-not-allowed
+              ${className}
+            `}
+                        {...props}
+                    />
+                    {isPassword && (
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 transition-colors cursor-pointer"
+                        >
+                            <i
+                                className={`${showPassword ? "ri-eye-off-line" : "ri-eye-line"} text-[20px]`}
+                            />
+                        </button>
+                    )}
+                    {!isPassword && rightIcon && (
+                        <button
+                            type="button"
+                            onClick={onRightIconClick}
+                            className="absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 transition-colors cursor-pointer"
+                        >
+                            <i className={`${rightIcon} text-[20px]`} />
+                        </button>
+                    )}
+                </div>
+                {error && (
+                    <p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
+                        <i className="ri-error-warning-line" />
+                        {error}
+                    </p>
+                )}
+                {helperText && !error && (
+                    <p className="mt-1 text-[13px] text-zinc-500">{helperText}</p>
+                )}
+            </div>
+        );
+    }
+);
+
+Input.displayName = "Input";
+
+export default Input;

front-end-agency/components/ui/SearchableSelect.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { SelectHTMLAttributes, forwardRef, useState, useRef, useEffect } from "react";
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+
+interface SearchableSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    leftIcon?: string;
+    options: SelectOption[];
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    value?: string;
+}
+
+const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
+    (
+        {
+            label,
+            error,
+            helperText,
+            leftIcon,
+            options,
+            placeholder,
+            className = "",
+            onChange,
+            value,
+            required,
+            ...props
+        },
+        ref
+    ) => {
+        const [isOpen, setIsOpen] = useState(false);
+        const [searchTerm, setSearchTerm] = useState("");
+        const [selectedOption, setSelectedOption] = useState<SelectOption | null>(
+            options.find(opt => opt.value === value) || null
+        );
+        const containerRef = useRef<HTMLDivElement>(null);
+        const searchInputRef = useRef<HTMLInputElement>(null);
+
+        const filteredOptions = options.filter(option =>
+            option.label.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+
+        useEffect(() => {
+            const handleClickOutside = (event: MouseEvent) => {
+                if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                    setIsOpen(false);
+                }
+            };
+
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
+        }, []);
+
+        useEffect(() => {
+            if (isOpen && searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
+        }, [isOpen]);
+
+        useEffect(() => {
+            if (value) {
+                const option = options.find(opt => opt.value === value);
+                if (option) {
+                    setSelectedOption(option);
+                }
+            }
+        }, [value, options]);
+
+        const handleSelect = (option: SelectOption) => {
+            setSelectedOption(option);
+            setIsOpen(false);
+            setSearchTerm("");
+            if (onChange) {
+                onChange(option.value);
+            }
+        };
+
+        return (
+            <div className="w-full">
+                {/* Hidden select for form compatibility */}
+                <select
+                    ref={ref}
+                    value={selectedOption?.value || ""}
+                    onChange={(e) => {
+                        const option = options.find(opt => opt.value === e.target.value);
+                        if (option) handleSelect(option);
+                    }}
+                    className="hidden"
+                    required={required}
+                    {...props}
+                >
+                    <option value="" disabled>
+                        {placeholder || "Selecione uma opção"}
+                    </option>
+                    {options.map((option) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+
+                {label && (
+                    <label className="block text-[13px] font-semibold text-zinc-900 dark:text-white mb-2">
+                        {label}
+                        {required && <span className="text-brand-500 ml-1">*</span>}
+                    </label>
+                )}
+
+                <div ref={containerRef} className="relative">
+                    {leftIcon && (
+                        <i
+                            className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-zinc-500 dark:text-zinc-400 text-[20px] pointer-events-none z-10`}
+                        />
+                    )}
+
+                    {/* Custom trigger */}
+                    <button
+                        type="button"
+                        onClick={() => setIsOpen(!isOpen)}
+                        className={`
+                            w-full px-3.5 py-3 text-[14px] font-normal
+                            border rounded-md bg-white dark:bg-zinc-800
+                            text-zinc-900 dark:text-white text-left
+                            transition-all
+                            cursor-pointer
+                            ${leftIcon ? "pl-11" : ""}
+                            pr-11
+                            ${error
+                                ? "border-red-500 focus:border-red-500"
+                                : "border-zinc-200 dark:border-zinc-700 focus:border-brand-500"
+                            }
+                            outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
+                            ${className}
+                        `}
+                    >
+                        {selectedOption ? selectedOption.label : (
+                            <span className="text-zinc-500 dark:text-zinc-400">{placeholder || "Selecione uma opção"}</span>
+                        )}
+                    </button>
+
+                    <i className={`ri-arrow-${isOpen ? 'up' : 'down'}-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 dark:text-zinc-400 text-[20px] pointer-events-none transition-transform`} />
+
+                    {/* Dropdown */}
+                    {isOpen && (
+                        <div className="absolute z-50 w-full mt-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg max-h-[300px] overflow-hidden">
+                            {/* Search input */}
+                            <div className="p-2 border-b border-zinc-200 dark:border-zinc-700">
+                                <div className="relative">
+                                    <i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 dark:text-zinc-400 text-[16px]" />
+                                    <input
+                                        ref={searchInputRef}
+                                        type="text"
+                                        value={searchTerm}
+                                        onChange={(e) => setSearchTerm(e.target.value)}
+                                        placeholder="Buscar..."
+                                        className="w-full pl-9 pr-3 py-2 text-[14px] border border-zinc-200 dark:border-zinc-700 rounded-md outline-none focus:border-brand-500 shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder:text-zinc-500 dark:placeholder:text-zinc-400"
+                                    />
+                                </div>
+                            </div>
+
+                            {/* Options list */}
+                            <div className="overflow-y-auto max-h-60">
+                                {filteredOptions.length > 0 ? (
+                                    filteredOptions.map((option) => (
+                                        <button
+                                            key={option.value}
+                                            type="button"
+                                            onClick={() => handleSelect(option)}
+                                            className={`
+                                                w-full px-4 py-2.5 text-left text-[14px] transition-colors
+                                                hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer
+                                                ${selectedOption?.value === option.value ? 'bg-brand-500/10 text-brand-600 font-medium' : 'text-zinc-900 dark:text-white'}
+                                            `}
+                                        >
+                                            {option.label}
+                                        </button>
+                                    ))
+                                ) : (
+                                    <div className="px-4 py-8 text-center text-zinc-500 dark:text-zinc-400 text-[14px]">
+                                        Nenhum resultado encontrado
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                {helperText && !error && (
+                    <p className="mt-1.5 text-[12px] text-zinc-600 dark:text-zinc-400">{helperText}</p>
+                )}
+                {error && (
+                    <p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
+                        <i className="ri-error-warning-line" />
+                        {error}
+                    </p>
+                )}
+            </div>
+        );
+    }
+);
+
+SearchableSelect.displayName = "SearchableSelect";
+
+export default SearchableSelect;

front-end-agency/components/ui/Select.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { SelectHTMLAttributes, forwardRef } from "react";
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    leftIcon?: string;
+    options: SelectOption[];
+    placeholder?: string;
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+    (
+        {
+            label,
+            error,
+            helperText,
+            leftIcon,
+            options,
+            placeholder,
+            className = "",
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <div className="w-full">
+                {label && (
+                    <label className="block text-[13px] font-semibold text-zinc-900 mb-2">
+                        {label}
+                        {props.required && <span className="text-brand-500 ml-1">*</span>}
+                    </label>
+                )}
+                <div className="relative">
+                    {leftIcon && (
+                        <i
+                            className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none z-10`}
+                        />
+                    )}
+                    <select
+                        ref={ref}
+                        className={`
+              w-full px-3.5 py-3 text-[14px] font-normal
+              border rounded-md bg-white
+              text-zinc-900
+              transition-all appearance-none
+              cursor-pointer
+              ${leftIcon ? "pl-11" : ""}
+              pr-11
+              ${error
+                                ? "border-red-500 focus:border-red-500"
+                                : "border-zinc-200 focus:border-brand-500"
+                            }
+              outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
+              disabled:bg-zinc-100 disabled:cursor-not-allowed
+              ${className}
+            `}
+                        {...props}
+                    >
+                        <option value="" disabled>
+                            {placeholder || "Selecione uma opção"}
+                        </option>
+                        {options.map((option) => (
+                            <option key={option.value} value={option.value}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                    <i className="ri-arrow-down-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none" />
+                </div>
+                {helperText && !error && (
+                    <p className="mt-1.5 text-[12px] text-zinc-500">{helperText}</p>
+                )}
+                {error && <p className="mt-1.5 text-[12px] text-red-500">{error}</p>}
+            </div>
+        );
+    }
+);
+
+Select.displayName = "Select";
+
+export default Select;

front-end-agency/components/ui/index.ts

@@ -0,0 +1,6 @@
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";
+export { default as Checkbox } from "./Checkbox";
+export { default as Select } from "./Select";
+export { default as SearchableSelect } from "./SearchableSelect";
+export { default as Dialog } from "./Dialog";

front-end-agency/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

front-end-agency/lib/api.ts

@@ -0,0 +1,56 @@
+/**
+ * API Configuration - URLs e funções de requisição
+ */
+
+// URL base da API - pode ser alterada por variável de ambiente
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://api.localhost';
+
+/**
+ * Endpoints da API
+ */
+export const API_ENDPOINTS = {
+    // Auth
+    register: `${API_BASE_URL}/api/auth/register`,
+    login: `${API_BASE_URL}/api/auth/login`,
+    logout: `${API_BASE_URL}/api/auth/logout`,
+    refresh: `${API_BASE_URL}/api/auth/refresh`,
+    me: `${API_BASE_URL}/api/me`,
+
+    // Admin / Agencies
+    adminAgencyRegister: `${API_BASE_URL}/api/admin/agencies/register`,
+
+    // Health
+    health: `${API_BASE_URL}/health`,
+    apiHealth: `${API_BASE_URL}/api/health`,
+} as const;
+
+/**
+ * Wrapper para fetch com tratamento de erros
+ */
+export async function apiRequest<T = any>(
+    url: string,
+    options?: RequestInit
+): Promise<T> {
+    try {
+        const response = await fetch(url, {
+            ...options,
+            headers: {
+                'Content-Type': 'application/json',
+                ...options?.headers,
+            },
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data.message || `Erro ${response.status}`);
+        }
+
+        return data;
+    } catch (error) {
+        if (error instanceof Error) {
+            throw error;
+        }
+        throw new Error('Erro desconhecido na requisição');
+    }
+}

front-end-agency/lib/auth.ts

@@ -0,0 +1,79 @@
+/**
+ * Auth utilities - Gerenciamento de autenticação no cliente
+ */
+
+export interface User {
+    id: string;
+    email: string;
+    name: string;
+    role: string;
+    tenantId?: string;
+    company?: string;
+    subdomain?: string;
+}
+
+const TOKEN_KEY = 'token';
+const USER_KEY = 'user';
+
+/**
+ * Salva token e dados do usuário no localStorage
+ */
+export function saveAuth(token: string, user: User): void {
+    if (typeof window === 'undefined') return;
+
+    localStorage.setItem(TOKEN_KEY, token);
+    localStorage.setItem(USER_KEY, JSON.stringify(user));
+}
+
+/**
+ * Retorna o token JWT armazenado
+ */
+export function getToken(): string | null {
+    if (typeof window === 'undefined') return null;
+    return localStorage.getItem(TOKEN_KEY);
+}
+
+/**
+ * Retorna os dados do usuário armazenados
+ */
+export function getUser(): User | null {
+    if (typeof window === 'undefined') return null;
+
+    const userStr = localStorage.getItem(USER_KEY);
+    if (!userStr) return null;
+
+    try {
+        return JSON.parse(userStr);
+    } catch {
+        return null;
+    }
+}
+
+/**
+ * Verifica se o usuário está autenticado
+ */
+export function isAuthenticated(): boolean {
+    return !!getToken() && !!getUser();
+}
+
+/**
+ * Remove token e dados do usuário (logout)
+ */
+export function clearAuth(): void {
+    if (typeof window === 'undefined') return;
+
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(USER_KEY);
+}
+
+/**
+ * Retorna headers com Authorization para requisições autenticadas
+ */
+export function getAuthHeaders(): HeadersInit {
+    const token = getToken();
+
+    return {
+        'Content-Type': 'application/json',
+        ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+    };
+}

front-end-agency/middleware.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function middleware(request: NextRequest) {
+    const hostname = request.headers.get('host') || '';
+    const url = request.nextUrl;
+
+    const apiBase = process.env.API_INTERNAL_URL || 'http://backend:8080';
+
+    // Extrair subdomínio
+    const subdomain = hostname.split('.')[0];
+
+    // Validar subdomínio de agência ({subdomain}.localhost)
+    if (hostname.includes('.')) {
+        try {
+            const res = await fetch(`${apiBase}/api/tenant/check?subdomain=${subdomain}`);
+            if (!res.ok) {
+                const baseHost = hostname.split('.').slice(1).join('.') || hostname;
+                const redirectUrl = new URL(url.toString());
+                redirectUrl.hostname = baseHost;
+                redirectUrl.pathname = '/';
+                return NextResponse.redirect(redirectUrl);
+            }
+        } catch (err) {
+            const baseHost = hostname.split('.').slice(1).join('.') || hostname;
+            const redirectUrl = new URL(url.toString());
+            redirectUrl.hostname = baseHost;
+            redirectUrl.pathname = '/';
+            return NextResponse.redirect(redirectUrl);
+        }
+    }
+
+    // Permitir acesso normal
+    return NextResponse.next();
+}
+
+export const config = {
+    matcher: [
+        /*
+         * Match all request paths except for the ones starting with:
+         * - api (API routes)
+         * - _next/static (static files)
+         * - _next/image (image optimization files)
+         * - favicon.ico (favicon file)
+         */
+        '/((?!api|_next/static|_next/image|favicon.ico).*)',
+    ],
+};

front-end-agency/next.config.ts

@@ -0,0 +1,32 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  experimental: {
+    externalDir: true,
+  },
+  async rewrites() {
+    return {
+      beforeFiles: [
+        {
+          source: "/api/:path*",
+          destination: "http://backend:8080/api/:path*",
+        },
+      ],
+    };
+  },
+  headers: async () => {
+    return [
+      {
+        source: "/api/:path*",
+        headers: [
+          {
+            key: "X-Forwarded-For",
+            value: "127.0.0.1",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

front-end-agency/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "agency.aggios.app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-select": "^2.2.6",
+    "lucide-react": "^0.556.0",
+    "next": "16.0.7",
+    "next-themes": "^0.4.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hot-toast": "^2.6.0",
+    "remixicon": "^4.7.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.7",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

front-end-agency/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

front-end-agency/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

front-end-agency/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

front-end-agency/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

front-end-agency/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

front-end-agency/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

front-end-agency/tailwind.config.js

@@ -0,0 +1,12 @@
+const sharedPreset = require("./tailwind.preset.js");
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+    presets: [sharedPreset],
+    content: [
+        "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+};
+
+module.exports = config;

front-end-agency/tailwind.preset.js

@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: "class",
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+                mono: ['var(--font-fira-code)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+                heading: ['var(--font-open-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            },
+            colors: {
+                brand: {
+                    50: '#fff4ef',
+                    100: '#ffe8df',
+                    200: '#ffd0c0',
+                    300: '#ffb093',
+                    400: '#ff8a66',
+                    500: '#ff3a05',
+                    600: '#ff1f45',
+                    700: '#ff0080',
+                    800: '#d10069',
+                    900: '#9e0050',
+                    950: '#4b0028',
+                },
+                surface: {
+                    light: '#ffffff',
+                    dark: '#0a0a0a',
+                },
+            },
+            boxShadow: {
+                glow: '0 0 20px rgba(255, 58, 5, 0.25)',
+            },
+        },
+    },
+};

front-end-agency/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}