-
- setAgencyData({ ...agencyData, name: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="Ex: Minha Agência"
/>
-
- setAgencyData({ ...agencyData, razaoSocial: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="Razão Social Ltda"
/>
-
- {
setSupportMessage('Para alterar CNPJ, contate o suporte.');
setShowSupportDialog(true);
}}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
+ className="cursor-pointer bg-gray-50 dark:bg-gray-800"
+ helperText="Alteração via suporte"
/>
-
-
-
- setAgencyData({ ...agencyData, phone: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="(00) 00000-0000"
/>
-
- setAgencyData({ ...agencyData, website: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="https://www.suaagencia.com.br"
+ leftIcon="ri-global-line"
/>
-
- setAgencyData({ ...agencyData, industry: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="Ex: Marketing Digital"
/>
-
- setAgencyData({ ...agencyData, teamSize: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="Ex: 10-50 funcionários"
/>
-
- {
const formatted = formatCep(e.target.value);
@@ -617,85 +645,74 @@ export default function ConfiguracoesPage() {
}));
}
}}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="00000-000"
+ rightIcon={loadingCep ? "ri-loader-4-line animate-spin" : undefined}
/>
-
-
-
-
-
+
+
@@ -928,6 +945,69 @@ export default function ConfiguracoesPage() {
)}
+
-
-
-
-
-
+
+
+
-
-
- setAgencyData({ ...agencyData, number: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
/>
-
- setAgencyData({ ...agencyData, number: e.target.value })}
+ placeholder="123"
+ />
+
+
+
+ setAgencyData({ ...agencyData, complement: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
+ placeholder="Apto 101, Bloco B"
/>
-
+
+
{/* Info adicional */}
@@ -950,9 +1030,9 @@ export default function ConfiguracoesPage() {
+ Personalização de Cores +
+
+
+
+
+
+
+
+ setAgencyData({ ...agencyData, primaryColor: e.target.value })}
+ className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer p-0 border-0"
+ />
+
+
+ setAgencyData({ ...agencyData, primaryColor: e.target.value })}
+ className="uppercase"
+ maxLength={7}
+ />
+
+
+
+
+
+
+ setAgencyData({ ...agencyData, secondaryColor: e.target.value })}
+ className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer p-0 border-0"
+ />
+
+
+ setAgencyData({ ...agencyData, secondaryColor: e.target.value })}
+ className="uppercase"
+ maxLength={7}
+ />
+
+
+
+
+ Em breve: gerenciamento completo de usuários e permissões
- @@ -970,52 +1050,42 @@ export default function ConfiguracoesPage() {
-
- setPasswordData({ ...passwordData, currentPassword: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
placeholder="Digite sua senha atual"
/>
-
- setPasswordData({ ...passwordData, newPassword: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
placeholder="Digite a nova senha (mínimo 8 caracteres)"
/>
-
- setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
- className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
placeholder="Digite a nova senha novamente"
/>
-
+
{successMessage}
Envie um e-mail para suporte@aggios.app ou abra um chamado para ajuste desses dados.
- {/* Header */}
-
- {
+ const logoUrl = await getAgencyLogo();
-import AuthGuard from '@/components/auth/AuthGuard';
+ return {
+ icons: {
+ icon: logoUrl || '/favicon.ico',
+ shortcut: logoUrl || '/favicon.ico',
+ apple: logoUrl || '/favicon.ico',
+ },
+ };
+}
-export default function AgencyLayout({
+export default async function AgencyLayout({
children,
}: {
children: React.ReactNode;
}) {
- return (
-
-
- {children}
-
-
- );
+ // Buscar cores da agência no servidor
+ const colors = await getAgencyColors();
+
+ return {children} ;
}
diff --git a/front-end-agency/app/(auth)/recuperar-senha/page.tsx b/front-end-agency/app/(auth)/recuperar-senha/page.tsx
index 998d468..11e1277 100644
--- a/front-end-agency/app/(auth)/recuperar-senha/page.tsx
+++ b/front-end-agency/app/(auth)/recuperar-senha/page.tsx
@@ -1,14 +1,26 @@
"use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import Link from "next/link";
import { Button, Input } from "@/components/ui";
import toast, { Toaster } from 'react-hot-toast';
+import { EnvelopeIcon } from "@heroicons/react/24/outline";
export default function RecuperarSenhaPage() {
const [isLoading, setIsLoading] = useState(false);
const [email, setEmail] = useState("");
const [emailSent, setEmailSent] = useState(false);
+ const [subdomain, setSubdomain] = useState('');
+ const [isSuperAdmin, setIsSuperAdmin] = useState(false);
+
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ const hostname = window.location.hostname;
+ const sub = hostname.split('.')[0];
+ setSubdomain(sub);
+ setIsSuperAdmin(sub === 'dash');
+ }
+ }, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
@@ -77,8 +89,10 @@ export default function RecuperarSenhaPage() {
- Visão Geral da Agência -
-- Acompanhe o desempenho de todos os módulos em tempo real -
+ {/* Header Personalizado */} +
+
{/* Top Stats */}
diff --git a/front-end-agency/app/(agency)/layout.tsx b/front-end-agency/app/(agency)/layout.tsx
index 0e4bf9d..76e4f83 100644
--- a/front-end-agency/app/(agency)/layout.tsx
+++ b/front-end-agency/app/(agency)/layout.tsx
@@ -1,125 +1,34 @@
-"use client";
+import { Metadata } from 'next';
+import { getAgencyLogo, getAgencyColors } from '@/lib/server-api';
+import { AgencyLayoutClient } from './AgencyLayoutClient';
-import { DashboardLayout } from '@/components/layout/DashboardLayout';
-import {
- HomeIcon,
- RocketLaunchIcon,
- ChartBarIcon,
- BriefcaseIcon,
- LifebuoyIcon,
- CreditCardIcon,
- DocumentTextIcon,
- FolderIcon,
- ShareIcon,
-} from '@heroicons/react/24/outline';
+// Forçar renderização dinâmica (não estática) para este layout
+// Necessário porque usamos headers() para pegar o subdomínio
+export const dynamic = 'force-dynamic';
-const AGENCY_MENU_ITEMS = [
- { id: 'dashboard', label: 'Visão Geral', href: '/dashboard', icon: HomeIcon },
- {
- id: 'crm',
- label: 'CRM',
- href: '/crm',
- icon: RocketLaunchIcon,
- subItems: [
- { label: 'Dashboard', href: '/crm' },
- { label: 'Clientes', href: '/crm/clientes' },
- { label: 'Funis', href: '/crm/funis' },
- { label: 'Negociações', href: '/crm/negociacoes' },
- ]
- },
- {
- id: 'erp',
- label: 'ERP',
- href: '/erp',
- icon: ChartBarIcon,
- subItems: [
- { label: 'Dashboard', href: '/erp' },
- { label: 'Fluxo de Caixa', href: '/erp/fluxo-caixa' },
- { label: 'Contas a Pagar', href: '/erp/contas-pagar' },
- { label: 'Contas a Receber', href: '/erp/contas-receber' },
- ]
- },
- {
- id: 'projetos',
- label: 'Projetos',
- href: '/projetos',
- icon: BriefcaseIcon,
- subItems: [
- { label: 'Dashboard', href: '/projetos' },
- { label: 'Meus Projetos', href: '/projetos/lista' },
- { label: 'Tarefas', href: '/projetos/tarefas' },
- { label: 'Cronograma', href: '/projetos/cronograma' },
- ]
- },
- {
- id: 'helpdesk',
- label: 'Helpdesk',
- href: '/helpdesk',
- icon: LifebuoyIcon,
- subItems: [
- { label: 'Dashboard', href: '/helpdesk' },
- { label: 'Chamados', href: '/helpdesk/chamados' },
- { label: 'Base de Conhecimento', href: '/helpdesk/kb' },
- ]
- },
- {
- id: 'pagamentos',
- label: 'Pagamentos',
- href: '/pagamentos',
- icon: CreditCardIcon,
- subItems: [
- { label: 'Dashboard', href: '/pagamentos' },
- { label: 'Cobranças', href: '/pagamentos/cobrancas' },
- { label: 'Assinaturas', href: '/pagamentos/assinaturas' },
- ]
- },
- {
- id: 'contratos',
- label: 'Contratos',
- href: '/contratos',
- icon: DocumentTextIcon,
- subItems: [
- { label: 'Dashboard', href: '/contratos' },
- { label: 'Ativos', href: '/contratos/ativos' },
- { label: 'Modelos', href: '/contratos/modelos' },
- ]
- },
- {
- id: 'documentos',
- label: 'Documentos',
- href: '/documentos',
- icon: FolderIcon,
- subItems: [
- { label: 'Meus Arquivos', href: '/documentos' },
- { label: 'Compartilhados', href: '/documentos/compartilhados' },
- { label: 'Lixeira', href: '/documentos/lixeira' },
- ]
- },
- {
- id: 'social',
- label: 'Redes Sociais',
- href: '/social',
- icon: ShareIcon,
- subItems: [
- { label: 'Dashboard', href: '/social' },
- { label: 'Agendamento', href: '/social/agendamento' },
- { label: 'Relatórios', href: '/social/relatorios' },
- ]
- },
-];
+/**
+ * generateMetadata - Executado no servidor antes do render
+ * Define o favicon dinamicamente baseado no subdomínio da agência
+ */
+export async function generateMetadata(): Promise
+
+ + {greeting}, {userName || 'Administrador'}! 👋 +
++ Aqui está o resumo da sua agência hoje. Tudo parece estar sob controle. +
+
+
+
+ Sistema Operacional
+
+
+ {new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' })}
+
+
{/* Logo mobile */}
-
{/* Lado Direito - Branding */}
-
-
@@ -100,7 +114,7 @@ export default function RecuperarSenhaPage() {
label="Email"
type="email"
placeholder="seu@email.com"
- leftIcon="ri-mail-line"
+ leftIcon={aggios
+
+
+ {isSuperAdmin ? 'aggios' : subdomain} +
-
-
- Voltar para o login
-
-
+
+
+ Voltar para o login
+
+
+
) : (
- <>
- {/* Success Message */}
-
-
-
-
-
- - Email enviado! -
- -- Enviamos um link de recuperação para: -
- -- {email} -
- -
-
-
-
-
+
-
-
-
-
- - Verifique sua caixa de entrada -
-- Clique no link que enviamos para redefinir sua senha. - Se não receber em alguns minutos, verifique sua pasta de spam. -
-
+
)}
+
+
+ + Verifique seu email +
++ Enviamos um link de recuperação para {email} +
+ +
-
Voltar para o login
-
+
-
- {/* Logo */}
- {
+ const logoUrl = await getAgencyLogo();
+
+ return {
+ title: "Aggios - Dashboard",
+ description: "Plataforma SaaS para agências digitais",
+ icons: {
+ icon: logoUrl || '/favicon.ico',
+ shortcut: logoUrl || '/favicon.ico',
+ apple: logoUrl || '/favicon.ico',
+ },
+ };
+}
export default function RootLayout({
children,
@@ -37,7 +47,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/front-end-agency/app/login/page.tsx b/front-end-agency/app/login/page.tsx
index 60052b4..9e9c771 100644
--- a/front-end-agency/app/login/page.tsx
+++ b/front-end-agency/app/login/page.tsx
@@ -3,26 +3,29 @@
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, getToken, clearAuth } from '@/lib/auth';
import { API_ENDPOINTS } from '@/lib/api';
import dynamic from 'next/dynamic';
+import { LoginBranding } from '@/components/auth/LoginBranding';
+import {
+ EnvelopeIcon,
+ LockClosedIcon,
+ ShieldCheckIcon,
+ BoltIcon,
+ UserGroupIcon,
+ ChartBarIcon,
+ ExclamationCircleIcon,
+ CheckCircleIcon
+} from "@heroicons/react/24/outline";
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('');
+ const [errorMessage, setErrorMessage] = useState('');
+ const [successMessage, setSuccessMessage] = useState('');
const [formData, setFormData] = useState({
email: "",
password: "",
@@ -37,22 +40,6 @@ export default function LoginPage() {
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()) {
// Validar token antes de redirecionar para evitar loops
const token = getToken();
@@ -80,19 +67,27 @@ export default function LoginPage() {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
+ setErrorMessage('');
+ setSuccessMessage('');
+ // Validações do lado do cliente
if (!formData.email) {
- toast.error('Por favor, insira seu email');
+ setErrorMessage('Por favor, insira seu email para continuar.');
return;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
- toast.error('Por favor, insira um email válido');
+ setErrorMessage('Ops! O formato do email não parece correto. Por favor, verifique e tente novamente.');
return;
}
if (!formData.password) {
- toast.error('Por favor, insira sua senha');
+ setErrorMessage('Por favor, insira sua senha para acessar sua conta.');
+ return;
+ }
+
+ if (formData.password.length < 3) {
+ setErrorMessage('A senha parece muito curta. Por favor, verifique se digitou corretamente.');
return;
}
@@ -111,8 +106,19 @@ export default function LoginPage() {
});
if (!response.ok) {
- const error = await response.json();
- throw new Error(error.message || 'Credenciais inválidas');
+ const error = await response.json().catch(() => ({}));
+
+ // Mensagens humanizadas para cada tipo de erro
+ if (response.status === 401 || response.status === 403) {
+ setErrorMessage('Email ou senha incorretos. Por favor, verifique seus dados e tente novamente.');
+ } else if (response.status >= 500) {
+ setErrorMessage('Estamos com problemas no servidor no momento. Por favor, tente novamente em alguns instantes.');
+ } else {
+ setErrorMessage(error.message || 'Algo deu errado ao tentar fazer login. Por favor, tente novamente.');
+ }
+
+ setIsLoading(false);
+ return;
}
const data = await response.json();
@@ -121,57 +127,60 @@ export default function LoginPage() {
console.log('Login successful:', data.user);
- toast.success('Login realizado com sucesso! Redirecionando...');
+ setSuccessMessage('Login realizado com sucesso! Redirecionando você agora...');
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.');
+ console.error('Login error:', error);
+ setErrorMessage('Não conseguimos conectar ao servidor. Verifique sua conexão com a internet e tente novamente.');
setIsLoading(false);
}
};
return (
<>
-
-
-
- {/* Conteúdo */}
-
-
- - aggios -
-
-
);
}
+
diff --git a/front-end-agency/app/LayoutWrapper.tsx b/front-end-agency/app/LayoutWrapper.tsx
index 7b82691..7cb0a9c 100644
--- a/front-end-agency/app/LayoutWrapper.tsx
+++ b/front-end-agency/app/LayoutWrapper.tsx
@@ -1,25 +1,53 @@
'use client';
import { ReactNode } from 'react';
-import { useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
+// Helper to lighten color
+const lightenColor = (color: string, percent: number) => {
+ const num = parseInt(color.replace("#", ""), 16),
+ amt = Math.round(2.55 * percent),
+ R = (num >> 16) + amt,
+ B = ((num >> 8) & 0x00ff) + amt,
+ G = (num & 0x0000ff) + amt;
+ return (
+ "#" +
+ (
+ 0x1000000 +
+ (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+ (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
+ (G < 255 ? (G < 1 ? 0 : G) : 255)
+ )
+ .toString(16)
+ .slice(1)
+ );
+};
-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'));
+const setBrandColors = (primary: string, secondary: string) => {
+ document.documentElement.style.setProperty('--brand-color', primary);
+ document.documentElement.style.setProperty('--brand-color-strong', secondary);
+
+ // Create a lighter version of primary for hover
+ const primaryLight = lightenColor(primary, 20); // Lighten by 20%
+ document.documentElement.style.setProperty('--brand-color-hover', primaryLight);
+
+ // Set RGB variables if needed by other components
+ const hexToRgb = (hex: string) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+ };
+
+ const primaryRgb = hexToRgb(primary);
+ const secondaryRgb = hexToRgb(secondary);
+ const primaryLightRgb = hexToRgb(primaryLight);
+
+ if (primaryRgb) document.documentElement.style.setProperty('--brand-rgb', primaryRgb);
+ if (secondaryRgb) document.documentElement.style.setProperty('--brand-strong-rgb', secondaryRgb);
+ if (primaryLightRgb) document.documentElement.style.setProperty('--brand-hover-rgb', primaryLightRgb);
};
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]);
-
+ // Temporariamente desativado o carregamento dinâmico de cores/tema para eliminar possíveis
+ // efeitos colaterais de hidratação e 429 no middleware/backend. Se precisar reativar, mover
+ // para nível de servidor (next/head ou metadata) para evitar mutações de DOM no cliente.
return <>{children};
}
diff --git a/front-end-agency/app/api/agency/logo/route.ts b/front-end-agency/app/api/agency/logo/route.ts
index e452212..22ea0b1 100644
--- a/front-end-agency/app/api/agency/logo/route.ts
+++ b/front-end-agency/app/api/agency/logo/route.ts
@@ -4,19 +4,33 @@ const BACKEND_URL = process.env.API_INTERNAL_URL || 'http://aggios-backend:8080'
export async function POST(request: NextRequest) {
try {
+ console.log('🔵 [Next.js] Logo upload route called');
+
const authorization = request.headers.get('authorization');
if (!authorization) {
+ console.log('❌ [Next.js] No authorization header');
return NextResponse.json(
{ error: 'Unauthorized' },
{ status: 401 }
);
}
+ console.log('✅ [Next.js] Authorization header present');
+
// Get form data from request
const formData = await request.formData();
+ const logo = formData.get('logo');
+ const type = formData.get('type');
- console.log('Forwarding logo upload to backend:', BACKEND_URL);
+ console.log('📦 [Next.js] FormData received:', {
+ hasLogo: !!logo,
+ logoType: logo ? (logo as File).type : null,
+ logoSize: logo ? (logo as File).size : null,
+ type: type
+ });
+
+ console.log('🚀 [Next.js] Forwarding to backend:', BACKEND_URL);
// Forward to backend
const response = await fetch(`${BACKEND_URL}/api/agency/logo`, {
@@ -27,7 +41,7 @@ export async function POST(request: NextRequest) {
body: formData,
});
- console.log('Backend response status:', response.status);
+ console.log('📡 [Next.js] Backend response status:', response.status);
if (!response.ok) {
const errorText = await response.text();
diff --git a/front-end-agency/app/api/tenant/public-config/route.ts b/front-end-agency/app/api/tenant/public-config/route.ts
new file mode 100644
index 0000000..cef180a
--- /dev/null
+++ b/front-end-agency/app/api/tenant/public-config/route.ts
@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.API_INTERNAL_URL || 'http://backend:8080';
+
+export async function GET(request: NextRequest) {
+ try {
+ const { searchParams } = new URL(request.url);
+ const subdomain = searchParams.get('subdomain');
+
+ if (!subdomain) {
+ return NextResponse.json(
+ { error: 'Subdomain is required' },
+ { status: 400 }
+ );
+ }
+
+ // Buscar configuração pública do tenant
+ const response = await fetch(
+ `${API_BASE_URL}/api/tenant/config?subdomain=${subdomain}`,
+ {
+ cache: 'no-store',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+
+ if (!response.ok) {
+ return NextResponse.json(
+ { error: 'Tenant not found' },
+ { status: 404 }
+ );
+ }
+
+ const data = await response.json();
+
+ // Retornar apenas dados públicos
+ return NextResponse.json({
+ name: data.name,
+ primary_color: data.primary_color,
+ secondary_color: data.secondary_color,
+ logo_url: data.logo_url,
+ });
+ } catch (error) {
+ console.error('Error fetching tenant config:', error);
+ return NextResponse.json(
+ { error: 'Internal server error' },
+ { status: 500 }
+ );
+ }
+}
diff --git a/front-end-agency/app/layout.tsx b/front-end-agency/app/layout.tsx
index 08d0c54..0c48857 100644
--- a/front-end-agency/app/layout.tsx
+++ b/front-end-agency/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter, Open_Sans, Fira_Code } from "next/font/google";
import "./globals.css";
import LayoutWrapper from "./LayoutWrapper";
import { ThemeProvider } from "next-themes";
+import { getAgencyLogo } from "@/lib/server-api";
const inter = Inter({
variable: "--font-inter",
@@ -22,10 +23,19 @@ const firaCode = Fira_Code({
weight: ["400", "600"],
});
-export const metadata: Metadata = {
- title: "Aggios - Dashboard",
- description: "Plataforma SaaS para agências digitais",
-};
+export async function generateMetadata(): Promise
-
-
- Recuperação segura
-- Protegemos seus dados com os mais altos padrões de segurança. - Seu link de recuperação é único e expira em 24 horas. +
+
+
-
- {/* Círculos decorativos */}
-
-
+
+ {isSuperAdmin ? 'aggios' : subdomain} +
++ Recupere o acesso à sua conta de forma segura e rápida.
- - {/* Features */} -
-
-
-
-
-
-
-
- Criptografia de ponta
-Seus dados são protegidos com tecnologia de última geração
-
-
-
-
-
-
-
- Link temporário
-O link expira em 24h para sua segurança
-
-
-
-
-
-
-
- Suporte disponível
-Nossa equipe está pronta para ajudar caso precise
-
{/* Lado Esquerdo - Formulário */}
{/* Logo mobile */}
-
+
{/* Lado Direito - Branding */}
-
{isSuperAdmin ? 'aggios' : subdomain}
@@ -198,13 +207,36 @@ export default function LoginPage() { {/* Form */}
+
@@ -276,22 +311,22 @@ export default function LoginPage() {
@@ -276,22 +311,22 @@ export default function LoginPage() {
-
+ Seguro
Proteção de dados
-
+ Rápido
Performance otimizada
-
+ Colaborativo
Trabalho em equipe
-
+ Insights
Relatórios detalhados
diff --git a/front-end-agency/app/tokens.css b/front-end-agency/app/tokens.css
index b0ccdf7..f7eb4eb 100644
--- a/front-end-agency/app/tokens.css
+++ b/front-end-agency/app/tokens.css
@@ -9,6 +9,8 @@
/* Cores sólidas de marca (usadas em textos/bordas) */
--brand-color: #ff3a05;
--brand-color-strong: #ff0080;
+ --brand-rgb: 255 58 5;
+ --brand-strong-rgb: 255 0 128;
/* Superfícies e tipografia */
--color-surface-light: #ffffff;
diff --git a/front-end-agency/components/DynamicFavicon.tsx b/front-end-agency/components/DynamicFavicon.tsx
index 6d89531..722a5b7 100644
--- a/front-end-agency/components/DynamicFavicon.tsx
+++ b/front-end-agency/components/DynamicFavicon.tsx
@@ -1,33 +1,42 @@
"use client";
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
interface DynamicFaviconProps {
logoUrl?: string;
}
export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
+ const [mounted, setMounted] = useState(false);
+
useEffect(() => {
- if (!logoUrl) return;
+ setMounted(true);
+ }, []);
- // Remove favicons antigos
- const existingLinks = document.querySelectorAll("link[rel*='icon']");
- existingLinks.forEach(link => link.remove());
+ useEffect(() => {
+ if (!mounted || !logoUrl) return;
- // 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);
+ // Usar requestAnimationFrame para garantir que a hidratação terminou
+ requestAnimationFrame(() => {
+ // Remove favicons antigos
+ const existingLinks = document.querySelectorAll("link[rel*='icon']");
+ existingLinks.forEach(link => link.remove());
- // Adiciona Apple touch icon
- const appleLink = document.createElement('link');
- appleLink.rel = 'apple-touch-icon';
- appleLink.href = logoUrl;
- document.getElementsByTagName('head')[0].appendChild(appleLink);
+ // 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);
- }, [logoUrl]);
+ // Adiciona Apple touch icon
+ const appleLink = document.createElement('link');
+ appleLink.rel = 'apple-touch-icon';
+ appleLink.href = logoUrl;
+ document.getElementsByTagName('head')[0].appendChild(appleLink);
+ });
+
+ }, [mounted, logoUrl]);
return null;
}
diff --git a/front-end-agency/components/auth/AuthGuard.tsx b/front-end-agency/components/auth/AuthGuard.tsx
index e4da0d1..3005e39 100644
--- a/front-end-agency/components/auth/AuthGuard.tsx
+++ b/front-end-agency/components/auth/AuthGuard.tsx
@@ -7,9 +7,16 @@ import { isAuthenticated } from '@/lib/auth';
export default function AuthGuard({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
- const [authorized, setAuthorized] = useState(false);
+ const [authorized, setAuthorized] = useState(null);
+ const [mounted, setMounted] = useState(false);
useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+
const checkAuth = () => {
const isAuth = isAuthenticated();
@@ -35,12 +42,24 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
window.addEventListener('storage', handleStorageChange);
return () => window.removeEventListener('storage', handleStorageChange);
- }, [router, pathname]);
+ }, [router, pathname, mounted]);
+
+ // Enquanto verifica (ou não está montado), mostra um loading simples
+ // Isso evita problemas de hidratação mantendo a estrutura DOM consistente
+ if (!mounted || authorized === null) {
+ return (
+
+
+
+ );
+ }
- // Enquanto verifica, não renderiza nada ou um loading
- // Para evitar "flash" de conteúdo não autorizado
if (!authorized) {
- return null;
+ return (
+
+
+
+ );
}
return <>{children};
diff --git a/front-end-agency/components/auth/LoginBranding.tsx b/front-end-agency/components/auth/LoginBranding.tsx
new file mode 100644
index 0000000..b53717b
--- /dev/null
+++ b/front-end-agency/components/auth/LoginBranding.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * LoginBranding - Aplica cor primária da agência na página de login
+ * Busca cor do localStorage ou da API se não houver cache
+ */
+export function LoginBranding() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+
+ const hexToRgb = (hex: string) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+ };
+
+ const applyTheme = (primary: string) => {
+ if (!primary) return;
+
+ const root = document.documentElement;
+ const primaryRgb = hexToRgb(primary);
+
+ root.style.setProperty('--brand-color', primary);
+ root.style.setProperty('--gradient', `linear-gradient(135deg, ${primary}, ${primary})`);
+
+ if (primaryRgb) {
+ root.style.setProperty('--brand-rgb', primaryRgb);
+ root.style.setProperty('--brand-strong-rgb', primaryRgb);
+ root.style.setProperty('--brand-hover-rgb', primaryRgb);
+ }
+ };
+
+ const updateFavicon = (url: string) => {
+ if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+ try {
+ console.log('🎨 LoginBranding: Atualizando favicon para:', url);
+ const newHref = `${url}${url.includes('?') ? '&' : '?'}v=${Date.now()}`;
+
+ // Buscar TODOS os links de ícone existentes
+ const existingLinks = document.querySelectorAll("link[rel*='icon']");
+
+ if (existingLinks.length > 0) {
+ // Atualizar href de todos os links existentes (SEM REMOVER)
+ existingLinks.forEach(link => {
+ link.setAttribute('href', newHref);
+ });
+ console.log(`✅ ${existingLinks.length} favicons atualizados`);
+ } else {
+ // Criar novo link apenas se não existir nenhum
+ const newLink = document.createElement('link');
+ newLink.rel = 'icon';
+ newLink.type = 'image/x-icon';
+ newLink.href = newHref;
+ document.head.appendChild(newLink);
+ console.log('✅ Novo favicon criado');
+ }
+ } catch (error) {
+ console.error('❌ Erro ao atualizar favicon:', error);
+ }
+ };
+
+ const loadBranding = async () => {
+ if (typeof window === 'undefined') return;
+
+ const hostname = window.location.hostname;
+ const subdomain = hostname.split('.')[0];
+
+ // Para dash.localhost ou localhost sem subdomínio, não buscar
+ if (!subdomain || subdomain === 'localhost' || subdomain === 'www' || subdomain === 'dash') {
+ return;
+ }
+
+ try {
+ // 1. Buscar DIRETO do backend (bypass da rota Next.js que está com problema)
+ console.log('LoginBranding: Buscando cores para:', subdomain);
+ const apiUrl = `/api/tenant/config?subdomain=${subdomain}`;
+ console.log('LoginBranding: URL:', apiUrl);
+
+ const response = await fetch(apiUrl);
+
+ if (response.ok) {
+ const data = await response.json();
+ console.log('LoginBranding: Dados recebidos:', data);
+
+ if (data.primary_color) {
+ applyTheme(data.primary_color);
+ localStorage.setItem('agency-primary-color', data.primary_color);
+ console.log('LoginBranding: Cor aplicada!');
+ }
+
+ if (data.logo_url) {
+ updateFavicon(data.logo_url);
+ localStorage.setItem('agency-logo-url', data.logo_url);
+ console.log('LoginBranding: Favicon aplicado!');
+ }
+ return;
+ } else {
+ console.error('LoginBranding: API retornou:', response.status);
+ }
+
+ // 2. Fallback para cache
+ console.log('LoginBranding: Tentando cache');
+ const cachedPrimary = localStorage.getItem('agency-primary-color');
+ const cachedLogo = localStorage.getItem('agency-logo-url');
+
+ if (cachedPrimary) {
+ applyTheme(cachedPrimary);
+ }
+ if (cachedLogo) {
+ updateFavicon(cachedLogo);
+ }
+ } catch (error) {
+ console.error('LoginBranding: Erro:', error);
+ const cachedPrimary = localStorage.getItem('agency-primary-color');
+ const cachedLogo = localStorage.getItem('agency-logo-url');
+
+ if (cachedPrimary) {
+ applyTheme(cachedPrimary);
+ }
+ if (cachedLogo) {
+ updateFavicon(cachedLogo);
+ }
+ }
+ };
+
+ loadBranding();
+ }, [mounted]);
+
+ return null;
+}
diff --git a/front-end-agency/components/layout/AgencyBranding.tsx b/front-end-agency/components/layout/AgencyBranding.tsx
new file mode 100644
index 0000000..5f44b91
--- /dev/null
+++ b/front-end-agency/components/layout/AgencyBranding.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface AgencyBrandingProps {
+ colors?: {
+ primary: string;
+ secondary: string;
+ } | null;
+}
+
+/**
+ * AgencyBranding - Aplica as cores da agência via CSS Variables
+ * O favicon agora é tratado via Metadata API no layout (server-side)
+ */
+export function AgencyBranding({ colors }: AgencyBrandingProps) {
+ const [mounted, setMounted] = useState(false);
+
+ const [debugInfo, setDebugInfo] = useState('Iniciando...');
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+
+ const hexToRgb = (hex: string) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+ };
+
+ const applyTheme = (primary: string, secondary: string) => {
+ if (!primary || !secondary) return;
+
+ const root = document.documentElement;
+ const primaryRgb = hexToRgb(primary);
+ const secondaryRgb = hexToRgb(secondary);
+
+ const gradient = `linear-gradient(135deg, ${primary}, ${primary})`;
+ const gradientText = `linear-gradient(to right, ${primary}, ${primary})`;
+
+ root.style.setProperty('--gradient', gradient);
+ root.style.setProperty('--gradient-text', gradientText);
+ root.style.setProperty('--gradient-primary', gradient);
+ root.style.setProperty('--color-gradient-brand', gradient);
+
+ root.style.setProperty('--brand-color', primary);
+ root.style.setProperty('--brand-color-strong', secondary);
+
+ if (primaryRgb) root.style.setProperty('--brand-rgb', primaryRgb);
+ if (secondaryRgb) root.style.setProperty('--brand-strong-rgb', secondaryRgb);
+
+ // Salvar no localStorage para cache
+ if (typeof window !== 'undefined') {
+ const hostname = window.location.hostname;
+ const sub = hostname.split('.')[0];
+ if (sub && sub !== 'www') {
+ localStorage.setItem(`agency-theme:${sub}`, gradient);
+ localStorage.setItem('agency-primary-color', primary);
+ localStorage.setItem('agency-secondary-color', secondary);
+ }
+ }
+ };
+
+ const updateFavicon = (url: string) => {
+ if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+ try {
+ setDebugInfo(`Tentando atualizar favicon: ${url}`);
+ console.log('🎨 AgencyBranding: Atualizando favicon para:', url);
+
+ const newHref = `${url}${url.includes('?') ? '&' : '?'}v=${Date.now()}`;
+
+ // Buscar TODOS os links de ícone existentes
+ const existingLinks = document.querySelectorAll("link[rel*='icon']");
+
+ if (existingLinks.length > 0) {
+ // Atualizar href de todos os links existentes (SEM REMOVER)
+ existingLinks.forEach(link => {
+ link.setAttribute('href', newHref);
+ });
+ setDebugInfo(`Favicon atualizado (${existingLinks.length} links)`);
+ console.log(`✅ ${existingLinks.length} favicons atualizados`);
+ } else {
+ // Criar novo link apenas se não existir nenhum
+ const newLink = document.createElement('link');
+ newLink.rel = 'icon';
+ newLink.type = 'image/x-icon';
+ newLink.href = newHref;
+ document.head.appendChild(newLink);
+ setDebugInfo('Novo favicon criado');
+ console.log('✅ Novo favicon criado');
+ }
+ } catch (error) {
+ setDebugInfo(`Erro: ${error}`);
+ console.error('❌ Erro ao atualizar favicon:', error);
+ }
+ };
+
+ // Se temos cores do servidor, aplicar imediatamente
+ if (colors) {
+ applyTheme(colors.primary, colors.secondary);
+ } else {
+ // Fallback: tentar pegar do cache do localStorage
+ const cachedPrimary = localStorage.getItem('agency-primary-color');
+ const cachedSecondary = localStorage.getItem('agency-secondary-color');
+
+ if (cachedPrimary && cachedSecondary) {
+ applyTheme(cachedPrimary, cachedSecondary);
+ }
+ }
+
+ // Atualizar favicon se houver logo salvo (após montar)
+ const cachedLogo = localStorage.getItem('agency-logo-url');
+ if (cachedLogo) {
+ console.log('🔍 Logo encontrado no cache:', cachedLogo);
+ updateFavicon(cachedLogo);
+ } else {
+ setDebugInfo('Nenhum logo no cache');
+ console.log('⚠️ Nenhum logo encontrado no cache');
+ }
+
+ // Listener para atualizações em tempo real (ex: da página de configurações)
+ const handleUpdate = () => {
+ console.log('🔔 Evento branding-update recebido!');
+ setDebugInfo('Evento branding-update recebido');
+
+ const cachedPrimary = localStorage.getItem('agency-primary-color');
+ const cachedSecondary = localStorage.getItem('agency-secondary-color');
+ const cachedLogo = localStorage.getItem('agency-logo-url');
+
+ if (cachedPrimary && cachedSecondary) {
+ console.log('🎨 Aplicando cores do cache');
+ applyTheme(cachedPrimary, cachedSecondary);
+ }
+
+ if (cachedLogo) {
+ console.log('🖼️ Atualizando favicon do cache:', cachedLogo);
+ updateFavicon(cachedLogo);
+ }
+ };
+
+ window.addEventListener('branding-update', handleUpdate);
+
+ return () => {
+ window.removeEventListener('branding-update', handleUpdate);
+ };
+ }, [mounted, colors]);
+
+ if (!mounted) return null;
+
+ return (
+
+ DEBUG: {debugInfo}
+
+ );
+}
diff --git a/front-end-agency/components/layout/DashboardLayout.tsx b/front-end-agency/components/layout/DashboardLayout.tsx
index 1d3d950..981ef0f 100644
--- a/front-end-agency/components/layout/DashboardLayout.tsx
+++ b/front-end-agency/components/layout/DashboardLayout.tsx
@@ -1,6 +1,7 @@
'use client';
import React, { useState } from 'react';
+import { usePathname } from 'next/navigation';
import { SidebarRail, MenuItem } from './SidebarRail';
import { TopBar } from './TopBar';
@@ -12,14 +13,12 @@ interface DashboardLayoutProps {
export const DashboardLayout: React.FC = ({ children, menuItems }) => {
// Estado centralizado do layout
const [isExpanded, setIsExpanded] = useState(true);
- const [activeTab, setActiveTab] = useState('dashboard');
+ const pathname = usePathname();
return (
{/* Sidebar controla seu próprio estado visual via props */}
setIsExpanded(!isExpanded)}
menuItems={menuItems}
@@ -32,7 +31,9 @@ export const DashboardLayout: React.FC = ({ children, menu
{/* Conteúdo das páginas */}
- {children}
+
+ {children}
+
diff --git a/front-end-agency/components/layout/FaviconUpdater.tsx b/front-end-agency/components/layout/FaviconUpdater.tsx
new file mode 100644
index 0000000..65397a9
--- /dev/null
+++ b/front-end-agency/components/layout/FaviconUpdater.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getUser } from '@/lib/auth';
+
+export function FaviconUpdater() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+
+ const updateFavicon = () => {
+ const user = getUser();
+ if (user?.logoUrl) {
+ // Usar requestAnimationFrame para garantir que o DOM esteja estável após hidratação
+ requestAnimationFrame(() => {
+ const link: HTMLLinkElement = document.querySelector("link[rel*='icon']") || document.createElement('link');
+ link.type = 'image/x-icon';
+ link.rel = 'shortcut icon';
+ link.href = user.logoUrl!;
+ if (!link.parentNode) {
+ document.getElementsByTagName('head')[0].appendChild(link);
+ }
+ });
+ }
+ };
+
+ // Atraso pequeno para garantir que a hidratação terminou
+ const timer = setTimeout(() => {
+ updateFavicon();
+ }, 0);
+
+ // Ouve mudanças no localStorage
+ const handleStorage = () => {
+ requestAnimationFrame(() => updateFavicon());
+ };
+ window.addEventListener('storage', handleStorage);
+
+ // Custom event para atualização interna na mesma aba
+ window.addEventListener('auth-update', handleStorage);
+
+ return () => {
+ clearTimeout(timer);
+ window.removeEventListener('storage', handleStorage);
+ window.removeEventListener('auth-update', handleStorage);
+ };
+ }, [mounted]);
+
+ return null;
+}
diff --git a/front-end-agency/components/layout/SidebarRail.tsx b/front-end-agency/components/layout/SidebarRail.tsx
index 0917ec1..2e19659 100644
--- a/front-end-agency/components/layout/SidebarRail.tsx
+++ b/front-end-agency/components/layout/SidebarRail.tsx
@@ -1,11 +1,12 @@
'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
-import { Menu, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
import { useTheme } from 'next-themes';
+import { getUser, User, getToken, saveAuth } from '@/lib/auth';
+import { API_ENDPOINTS } from '@/lib/api';
import {
ChevronLeftIcon,
ChevronRightIcon,
@@ -30,16 +31,12 @@ export interface MenuItem {
}
interface SidebarRailProps {
- activeTab: string;
- onTabChange: (tab: string) => void;
isExpanded: boolean;
onToggle: () => void;
menuItems: MenuItem[];
}
export const SidebarRail: React.FC = ({
- activeTab,
- onTabChange,
isExpanded,
onToggle,
menuItems,
@@ -48,12 +45,93 @@ export const SidebarRail: React.FC = ({
const router = useRouter();
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
+ const [user, setUser] = useState(null);
const [openSubmenu, setOpenSubmenu] = useState(null);
+ const sidebarRef = useRef(null);
useEffect(() => {
setMounted(true);
+ const currentUser = getUser();
+ setUser(currentUser);
+
+ // Buscar perfil da agência para atualizar logo e nome
+ const fetchProfile = async () => {
+ const token = getToken();
+ if (!token) return;
+
+ try {
+ const res = await fetch(API_ENDPOINTS.agencyProfile, {
+ headers: {
+ 'Authorization': `Bearer ${token}`
+ }
+ });
+
+ if (res.ok) {
+ const data = await res.json();
+ if (currentUser) {
+ const updatedUser = {
+ ...currentUser,
+ company: data.name || currentUser.company,
+ logoUrl: data.logo_url
+ };
+ setUser(updatedUser);
+ saveAuth(token, updatedUser); // Persistir atualização
+
+ // Atualizar localStorage do logo para uso do favicon
+ if (data.logo_url) {
+ console.log('📝 Salvando logo no localStorage:', data.logo_url);
+ localStorage.setItem('agency-logo-url', data.logo_url);
+ window.dispatchEvent(new Event('auth-update')); // Notificar favicon
+ window.dispatchEvent(new Event('branding-update')); // Notificar AgencyBranding
+ }
+ }
+ }
+ } catch (error) {
+ console.error('Error fetching agency profile:', error);
+ }
+ };
+
+ fetchProfile();
+
+ // Listener para atualizar logo em tempo real após upload
+ // REMOVIDO: Causa loop infinito com o dispatchEvent dentro do fetchProfile
+ // O AgencyBranding já cuida de atualizar o favicon/cores
+ // Se precisar atualizar o sidebar após upload, usar um evento específico 'logo-uploaded'
+ /*
+ const handleBrandingUpdate = () => {
+ console.log('SidebarRail: branding-update event received');
+ fetchProfile(); // Re-buscar perfil do backend
+ };
+
+ window.addEventListener('branding-update', handleBrandingUpdate);
+
+ return () => {
+ window.removeEventListener('branding-update', handleBrandingUpdate);
+ };
+ */
}, []);
+ // Fechar submenu ao clicar fora
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+ // Verifica se o submenu aberto corresponde à rota atual
+ // Se estivermos navegando dentro do módulo (ex: CRM), o menu deve permanecer fixo
+ const activeItem = menuItems.find(item => item.id === openSubmenu);
+ const isRouteActive = activeItem && activeItem.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href));
+
+ if (!isRouteActive) {
+ setOpenSubmenu(null);
+ }
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [openSubmenu, pathname, menuItems]);
+
// Auto-open submenu if active
useEffect(() => {
if (isExpanded && pathname) {
@@ -69,7 +147,7 @@ export const SidebarRail: React.FC = ({
const handleLogout = () => {
localStorage.removeItem('token');
localStorage.removeItem('user');
- router.push('/login');
+ window.location.href = '/login';
};
const toggleTheme = () => {
@@ -79,46 +157,59 @@ export const SidebarRail: React.FC = ({
// Encontrar o item ativo para renderizar o submenu
const activeMenuItem = menuItems.find(item => item.id === openSubmenu);
+ // Lógica de largura do Rail: Se tiver submenu aberto, força recolhimento visual (80px)
+ // Se não, respeita o estado isExpanded
+ const railWidth = isExpanded && !openSubmenu ? 'w-[240px]' : 'w-[80px]';
+ const showLabels = isExpanded && !openSubmenu;
+
return (
-
+
+ {/* Rail Principal (Ícones + Labels Opcionais) */}
{/* Toggle Button - Floating on the border */}
-
+ {/* Só mostra o toggle se não tiver submenu aberto, para evitar confusão */}
+ {!openSubmenu && (
+
+ )}
{/* Header com Logo */}
-
- {/* Logo */}
+
- A
+ {user?.logoUrl ? (
+ 
+ ) : (
+ (user?.company?.[0] || 'A').toUpperCase()
+ )}
-
{/* Título com animação */}
-
- Aggios
+
+
+ {user?.company || 'Aggios'}
+
{/* Navegação */}
-
+
{menuItems.map((item) => (
= ({
icon={item.icon}
href={item.href}
active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
- onClick={() => {
+ onClick={(e: any) => {
if (item.subItems) {
- setOpenSubmenu(openSubmenu === item.id ? null : item.id);
+ // Se já estiver aberto, fecha e previne navegação (opcional)
+ if (openSubmenu === item.id) {
+ // Se quisermos permitir fechar sem navegar:
+ // e.preventDefault();
+ // setOpenSubmenu(null);
+
+ // Mas se o usuário quer ir para a home do módulo, deixamos navegar.
+ // O useEffect vai reabrir se a rota for do módulo.
+ // Para forçar o fechamento, teríamos que ter lógica mais complexa.
+ // Vamos assumir que clicar no pai sempre leva pra home do pai.
+ // E o useEffect cuida de abrir o menu.
+ // Então NÃO fazemos nada aqui se for abrir.
+ } else {
+ // Se for abrir, deixamos o Link navegar.
+ // O useEffect vai abrir o menu quando a rota mudar.
+ // NÃO setamos o estado aqui para evitar conflito com a navegação.
+ }
} else {
- onTabChange(item.id);
setOpenSubmenu(null);
}
}}
- isExpanded={isExpanded}
+ showLabel={showLabels}
hasSubItems={!!item.subItems}
isOpen={openSubmenu === item.id}
/>
))}
- {/* Separador antes do menu de usuário */}
-
+ {/* Separador */}
+
- {/* User Menu - Footer */}
-
-
-
+
Seguro
Proteção de dados
-
+
Rápido
Performance otimizada
-
+
Colaborativo
Trabalho em equipe
-
+
diff --git a/front-end-agency/app/tokens.css b/front-end-agency/app/tokens.css
index b0ccdf7..f7eb4eb 100644
--- a/front-end-agency/app/tokens.css
+++ b/front-end-agency/app/tokens.css
@@ -9,6 +9,8 @@
/* Cores sólidas de marca (usadas em textos/bordas) */
--brand-color: #ff3a05;
--brand-color-strong: #ff0080;
+ --brand-rgb: 255 58 5;
+ --brand-strong-rgb: 255 0 128;
/* Superfícies e tipografia */
--color-surface-light: #ffffff;
diff --git a/front-end-agency/components/DynamicFavicon.tsx b/front-end-agency/components/DynamicFavicon.tsx
index 6d89531..722a5b7 100644
--- a/front-end-agency/components/DynamicFavicon.tsx
+++ b/front-end-agency/components/DynamicFavicon.tsx
@@ -1,33 +1,42 @@
"use client";
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
interface DynamicFaviconProps {
logoUrl?: string;
}
export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
+ const [mounted, setMounted] = useState(false);
+
useEffect(() => {
- if (!logoUrl) return;
+ setMounted(true);
+ }, []);
- // Remove favicons antigos
- const existingLinks = document.querySelectorAll("link[rel*='icon']");
- existingLinks.forEach(link => link.remove());
+ useEffect(() => {
+ if (!mounted || !logoUrl) return;
- // 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);
+ // Usar requestAnimationFrame para garantir que a hidratação terminou
+ requestAnimationFrame(() => {
+ // Remove favicons antigos
+ const existingLinks = document.querySelectorAll("link[rel*='icon']");
+ existingLinks.forEach(link => link.remove());
- // Adiciona Apple touch icon
- const appleLink = document.createElement('link');
- appleLink.rel = 'apple-touch-icon';
- appleLink.href = logoUrl;
- document.getElementsByTagName('head')[0].appendChild(appleLink);
+ // 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);
- }, [logoUrl]);
+ // Adiciona Apple touch icon
+ const appleLink = document.createElement('link');
+ appleLink.rel = 'apple-touch-icon';
+ appleLink.href = logoUrl;
+ document.getElementsByTagName('head')[0].appendChild(appleLink);
+ });
+
+ }, [mounted, logoUrl]);
return null;
}
diff --git a/front-end-agency/components/auth/AuthGuard.tsx b/front-end-agency/components/auth/AuthGuard.tsx
index e4da0d1..3005e39 100644
--- a/front-end-agency/components/auth/AuthGuard.tsx
+++ b/front-end-agency/components/auth/AuthGuard.tsx
@@ -7,9 +7,16 @@ import { isAuthenticated } from '@/lib/auth';
export default function AuthGuard({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
- const [authorized, setAuthorized] = useState(false);
+ const [authorized, setAuthorized] = useStateInsights
Relatórios detalhados
+
+
+ );
+ }
- // Enquanto verifica, não renderiza nada ou um loading
- // Para evitar "flash" de conteúdo não autorizado
if (!authorized) {
- return null;
+ return (
+
+
+
+ );
}
return <>{children};
diff --git a/front-end-agency/components/auth/LoginBranding.tsx b/front-end-agency/components/auth/LoginBranding.tsx
new file mode 100644
index 0000000..b53717b
--- /dev/null
+++ b/front-end-agency/components/auth/LoginBranding.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * LoginBranding - Aplica cor primária da agência na página de login
+ * Busca cor do localStorage ou da API se não houver cache
+ */
+export function LoginBranding() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+
+ const hexToRgb = (hex: string) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+ };
+
+ const applyTheme = (primary: string) => {
+ if (!primary) return;
+
+ const root = document.documentElement;
+ const primaryRgb = hexToRgb(primary);
+
+ root.style.setProperty('--brand-color', primary);
+ root.style.setProperty('--gradient', `linear-gradient(135deg, ${primary}, ${primary})`);
+
+ if (primaryRgb) {
+ root.style.setProperty('--brand-rgb', primaryRgb);
+ root.style.setProperty('--brand-strong-rgb', primaryRgb);
+ root.style.setProperty('--brand-hover-rgb', primaryRgb);
+ }
+ };
+
+ const updateFavicon = (url: string) => {
+ if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+ try {
+ console.log('🎨 LoginBranding: Atualizando favicon para:', url);
+ const newHref = `${url}${url.includes('?') ? '&' : '?'}v=${Date.now()}`;
+
+ // Buscar TODOS os links de ícone existentes
+ const existingLinks = document.querySelectorAll("link[rel*='icon']");
+
+ if (existingLinks.length > 0) {
+ // Atualizar href de todos os links existentes (SEM REMOVER)
+ existingLinks.forEach(link => {
+ link.setAttribute('href', newHref);
+ });
+ console.log(`✅ ${existingLinks.length} favicons atualizados`);
+ } else {
+ // Criar novo link apenas se não existir nenhum
+ const newLink = document.createElement('link');
+ newLink.rel = 'icon';
+ newLink.type = 'image/x-icon';
+ newLink.href = newHref;
+ document.head.appendChild(newLink);
+ console.log('✅ Novo favicon criado');
+ }
+ } catch (error) {
+ console.error('❌ Erro ao atualizar favicon:', error);
+ }
+ };
+
+ const loadBranding = async () => {
+ if (typeof window === 'undefined') return;
+
+ const hostname = window.location.hostname;
+ const subdomain = hostname.split('.')[0];
+
+ // Para dash.localhost ou localhost sem subdomínio, não buscar
+ if (!subdomain || subdomain === 'localhost' || subdomain === 'www' || subdomain === 'dash') {
+ return;
+ }
+
+ try {
+ // 1. Buscar DIRETO do backend (bypass da rota Next.js que está com problema)
+ console.log('LoginBranding: Buscando cores para:', subdomain);
+ const apiUrl = `/api/tenant/config?subdomain=${subdomain}`;
+ console.log('LoginBranding: URL:', apiUrl);
+
+ const response = await fetch(apiUrl);
+
+ if (response.ok) {
+ const data = await response.json();
+ console.log('LoginBranding: Dados recebidos:', data);
+
+ if (data.primary_color) {
+ applyTheme(data.primary_color);
+ localStorage.setItem('agency-primary-color', data.primary_color);
+ console.log('LoginBranding: Cor aplicada!');
+ }
+
+ if (data.logo_url) {
+ updateFavicon(data.logo_url);
+ localStorage.setItem('agency-logo-url', data.logo_url);
+ console.log('LoginBranding: Favicon aplicado!');
+ }
+ return;
+ } else {
+ console.error('LoginBranding: API retornou:', response.status);
+ }
+
+ // 2. Fallback para cache
+ console.log('LoginBranding: Tentando cache');
+ const cachedPrimary = localStorage.getItem('agency-primary-color');
+ const cachedLogo = localStorage.getItem('agency-logo-url');
+
+ if (cachedPrimary) {
+ applyTheme(cachedPrimary);
+ }
+ if (cachedLogo) {
+ updateFavicon(cachedLogo);
+ }
+ } catch (error) {
+ console.error('LoginBranding: Erro:', error);
+ const cachedPrimary = localStorage.getItem('agency-primary-color');
+ const cachedLogo = localStorage.getItem('agency-logo-url');
+
+ if (cachedPrimary) {
+ applyTheme(cachedPrimary);
+ }
+ if (cachedLogo) {
+ updateFavicon(cachedLogo);
+ }
+ }
+ };
+
+ loadBranding();
+ }, [mounted]);
+
+ return null;
+}
diff --git a/front-end-agency/components/layout/AgencyBranding.tsx b/front-end-agency/components/layout/AgencyBranding.tsx
new file mode 100644
index 0000000..5f44b91
--- /dev/null
+++ b/front-end-agency/components/layout/AgencyBranding.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface AgencyBrandingProps {
+ colors?: {
+ primary: string;
+ secondary: string;
+ } | null;
+}
+
+/**
+ * AgencyBranding - Aplica as cores da agência via CSS Variables
+ * O favicon agora é tratado via Metadata API no layout (server-side)
+ */
+export function AgencyBranding({ colors }: AgencyBrandingProps) {
+ const [mounted, setMounted] = useState(false);
+
+ const [debugInfo, setDebugInfo] = useState
+ DEBUG: {debugInfo}
+
+ );
+}
diff --git a/front-end-agency/components/layout/DashboardLayout.tsx b/front-end-agency/components/layout/DashboardLayout.tsx
index 1d3d950..981ef0f 100644
--- a/front-end-agency/components/layout/DashboardLayout.tsx
+++ b/front-end-agency/components/layout/DashboardLayout.tsx
@@ -1,6 +1,7 @@
'use client';
import React, { useState } from 'react';
+import { usePathname } from 'next/navigation';
import { SidebarRail, MenuItem } from './SidebarRail';
import { TopBar } from './TopBar';
@@ -12,14 +13,12 @@ interface DashboardLayoutProps {
export const DashboardLayout: React.FC
{/* Sidebar controla seu próprio estado visual via props */}
setIsExpanded(!isExpanded)}
menuItems={menuItems}
@@ -32,7 +31,9 @@ export const DashboardLayout: React.FC = ({ children, menu
{/* Conteúdo das páginas */}
diff --git a/front-end-agency/components/layout/FaviconUpdater.tsx b/front-end-agency/components/layout/FaviconUpdater.tsx
new file mode 100644
index 0000000..65397a9
--- /dev/null
+++ b/front-end-agency/components/layout/FaviconUpdater.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getUser } from '@/lib/auth';
+
+export function FaviconUpdater() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ if (!mounted) return;
+
+ const updateFavicon = () => {
+ const user = getUser();
+ if (user?.logoUrl) {
+ // Usar requestAnimationFrame para garantir que o DOM esteja estável após hidratação
+ requestAnimationFrame(() => {
+ const link: HTMLLinkElement = document.querySelector("link[rel*='icon']") || document.createElement('link');
+ link.type = 'image/x-icon';
+ link.rel = 'shortcut icon';
+ link.href = user.logoUrl!;
+ if (!link.parentNode) {
+ document.getElementsByTagName('head')[0].appendChild(link);
+ }
+ });
+ }
+ };
+
+ // Atraso pequeno para garantir que a hidratação terminou
+ const timer = setTimeout(() => {
+ updateFavicon();
+ }, 0);
+
+ // Ouve mudanças no localStorage
+ const handleStorage = () => {
+ requestAnimationFrame(() => updateFavicon());
+ };
+ window.addEventListener('storage', handleStorage);
+
+ // Custom event para atualização interna na mesma aba
+ window.addEventListener('auth-update', handleStorage);
+
+ return () => {
+ clearTimeout(timer);
+ window.removeEventListener('storage', handleStorage);
+ window.removeEventListener('auth-update', handleStorage);
+ };
+ }, [mounted]);
+
+ return null;
+}
diff --git a/front-end-agency/components/layout/SidebarRail.tsx b/front-end-agency/components/layout/SidebarRail.tsx
index 0917ec1..2e19659 100644
--- a/front-end-agency/components/layout/SidebarRail.tsx
+++ b/front-end-agency/components/layout/SidebarRail.tsx
@@ -1,11 +1,12 @@
'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
-import { Menu, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
import { useTheme } from 'next-themes';
+import { getUser, User, getToken, saveAuth } from '@/lib/auth';
+import { API_ENDPOINTS } from '@/lib/api';
import {
ChevronLeftIcon,
ChevronRightIcon,
@@ -30,16 +31,12 @@ export interface MenuItem {
}
interface SidebarRailProps {
- activeTab: string;
- onTabChange: (tab: string) => void;
isExpanded: boolean;
onToggle: () => void;
menuItems: MenuItem[];
}
export const SidebarRail: React.FC
- {children}
+
+ {children}
+
+
+ {/* Rail Principal (Ícones + Labels Opcionais) */}
{/* Toggle Button - Floating on the border */}
-
+ {/* Só mostra o toggle se não tiver submenu aberto, para evitar confusão */}
+ {!openSubmenu && (
+
+ )}
{/* Header com Logo */}
-
- {/* Logo */}
+
- A
+ {user?.logoUrl ? (
+
+ ) : (
+ (user?.company?.[0] || 'A').toUpperCase()
+ )}
-
{/* Título com animação */}
-
- Aggios
+
{/* Navegação */}
-
+
+ {user?.company || 'Aggios'}
+
+
{menuItems.map((item) => (
= ({
icon={item.icon}
href={item.href}
active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
- onClick={() => {
+ onClick={(e: any) => {
if (item.subItems) {
- setOpenSubmenu(openSubmenu === item.id ? null : item.id);
+ // Se já estiver aberto, fecha e previne navegação (opcional)
+ if (openSubmenu === item.id) {
+ // Se quisermos permitir fechar sem navegar:
+ // e.preventDefault();
+ // setOpenSubmenu(null);
+
+ // Mas se o usuário quer ir para a home do módulo, deixamos navegar.
+ // O useEffect vai reabrir se a rota for do módulo.
+ // Para forçar o fechamento, teríamos que ter lógica mais complexa.
+ // Vamos assumir que clicar no pai sempre leva pra home do pai.
+ // E o useEffect cuida de abrir o menu.
+ // Então NÃO fazemos nada aqui se for abrir.
+ } else {
+ // Se for abrir, deixamos o Link navegar.
+ // O useEffect vai abrir o menu quando a rota mudar.
+ // NÃO setamos o estado aqui para evitar conflito com a navegação.
+ }
} else {
- onTabChange(item.id);
setOpenSubmenu(null);
}
}}
- isExpanded={isExpanded}
+ showLabel={showLabels}
hasSubItems={!!item.subItems}
isOpen={openSubmenu === item.id}
/>
))}
- {/* Separador antes do menu de usuário */}
-
+ {/* Separador */}
+
- {/* User Menu - Footer */}
-
-