v1.4: Segurança multi-tenant, file serving via API e UX humanizada

-  Validação cross-tenant no login e rotas protegidas
-  File serving via /api/files/{bucket}/{path} (eliminação DNS)
-  Mensagens de erro humanizadas inline (sem pop-ups)
-  Middleware tenant detection via headers customizados
-  Upload de logos retorna URLs via API
-  README atualizado com changelog v1.4 completo

README.md

@@ -4,27 +4,60 @@ Plataforma composta por serviços de autenticação, painel administrativo (supe
 
 ## Visão geral
 - **Objetivo**: permitir que superadministradores cadastrem e gerenciem agências (tenants) enquanto o site institucional apresenta informações públicas da empresa.
-- **Stack**: Go (backend), Next.js 14 (dashboard e site), PostgreSQL, Traefik, Docker.
+- **Stack**: Go (backend), Next.js 16 (dashboard e site), PostgreSQL, Traefik, Docker.
-- **Status**: fluxo de autenticação e gestão de agências concluído; ambiente dockerizável pronto para uso local.
+- **Status**: Sistema multi-tenant completo com segurança cross-tenant validada, branding dinâmico e file serving via API.
 
 ## Componentes principais
 - `backend/`: API Go com serviços de autenticação, operadores e CRUD de agências (endpoints `/api/admin/agencies` e `/api/admin/agencies/{id}`).
+- `front-end-agency/`: Painel Next.js para agências - branding dinâmico, upload de logos, gestão de perfil e autenticação tenant-aware.
 - `front-end-dash.aggios.app/`: painel Next.js – login do superadmin, listagem de agências, exibição detalhada e exclusão definitiva.
 - `frontend-aggios.app/`: site institucional Next.js com suporte a temas claro/escuro e compartilhamento de tokens de design.
 - `backend/internal/data/postgres/`: scripts de inicialização do banco (estrutura base de tenants e usuários).
 - `traefik/`: reverse proxy e certificados automatizados.
 
 ## Funcionalidades entregues
-- **Redesign da Interface (v1.2)**: Adoção de design "Flat" (sem sombras), focado em bordas e limpeza visual em todas as rotas principais (Login, Dashboard, Agências, Cadastro).
+
-- **Gestão Avançada de Agências**:
+### **v1.4 - Segurança Multi-tenant e File Serving (13/12/2025)**
-  - Listagem com filtros robustos: Busca textual, Status (Ativo/Inativo) e Filtros de Data (Presets de 7/15/30 dias e intervalo personalizado).
+- **🔒 Segurança Cross-Tenant Crítica**:
-  - Detalhamento completo da agência com visualização de logo, cores e dados cadastrais.
+  - Validação de tenant_id em endpoints de login (bloqueio de cross-tenant authentication)
-  - Edição e Exclusão de agências.
+  - Validação de tenant em todas rotas protegidas via middleware
-- **Login de Superadmin**: Autenticação via JWT com restrição de rotas protegidas.
+  - Mensagens de erro genéricas (sem exposição de arquitetura multi-tenant)
-- **Cadastro de Agências**: Criação de tenant e usuário administrador atrelado.
+  - Logs detalhados de tentativas de acesso cross-tenant bloqueadas
-- **Proxy Interno**: Camada de API no Next.js (`app/api/...`) garantindo chamadas autenticadas e seguras ao backend Go.
+  
-- **Site Institucional**: Suporte a dark mode, componentes compartilhados e tokens de design centralizados.
+- **📁 File Serving via API**:
-- **Documentação**: Atualizada em `1. docs/` com fluxos, arquiteturas e changelog.
+  - Nova rota `/api/files/{bucket}/{path}` para servir arquivos do MinIO através do backend Go
+  - Eliminação de dependência de DNS (`files.localhost`) - arquivos servidos via `api.localhost`
+  - Headers de cache otimizados (Cache-Control: public, max-age=31536000)
+  - CORS e content-type corretos automaticamente
+  
+- **🎨 Melhorias de UX**:
+  - Mensagens de erro humanizadas no formulário de login (sem pop-ups/toasts)
+  - Erros inline com ícones e cores apropriadas
+  - Feedback em tempo real ao digitar (limpeza automática de erros)
+  - Mensagens específicas para cada tipo de erro (401, 403, 404, 429, 5xx)
+  
+- **🔧 Melhorias Técnicas**:
+  - Next.js middleware injetando headers `X-Tenant-Subdomain` para routing correto
+  - TenantDetector middleware prioriza headers customizados sobre Host
+  - Upload de logos retorna URLs via API ao invés de MinIO direto
+  - Configuração MinIO com variáveis de ambiente `MINIO_SERVER_URL` e `MINIO_BROWSER_REDIRECT_URL`
+
+### **v1.3 - Branding Dinâmico e Favicon (12/12/2025)**
+- **Branding Multi-tenant**: Logo, favicon e cores personalizadas por agência
+- **Favicon Dinâmico**: Atualização em tempo real via localStorage e SSR metadata
+- **Upload de Arquivos**: Sistema de upload para MinIO com bucket público
+- **Rate Limiting**: 1000 requisições/minuto por IP
+
+### **v1.2 - Redesign Interface Flat**
+- Adoção de design "Flat" (sem sombras), focado em bordas e limpeza visual
+- Gestão avançada de agências com filtros robustos
+- Detalhamento completo com visualização de branding
+
+### **v1.1 - Fundação Multi-tenant**
+- Login de Superadmin com JWT
+- Cadastro de Agências
+- Proxy Interno Next.js para chamadas autenticadas
+- Site Institucional com dark mode
 
 ## Executando o projeto
 1. **Pré-requisitos**: Docker Desktop e Node.js 20+ (para utilitários opcionais).
@@ -34,15 +67,35 @@ Plataforma composta por serviços de autenticação, painel administrativo (supe
 	docker-compose up --build
 	```
 4. **Hosts locais**:
-	- Painel: `https://dash.localhost`
+	- Painel SuperAdmin: `http://dash.localhost`
-	- Site: `https://aggios.app.localhost`
+	- Painel Agência: `http://{agencia}.localhost` (ex: `http://idealpages.localhost`)
-	- API: `https://api.localhost`
+	- Site: `http://aggios.app.localhost`
+	- API: `http://api.localhost`
+	- Console MinIO: `http://minio.localhost` (admin: minioadmin / M1n10_S3cur3_P@ss_2025!)
 5. **Credenciais padrão**: ver `backend/internal/data/postgres/init-db.sql` para usuário superadmin seed.
 
+## Segurança
+- ✅ **Cross-Tenant Authentication**: Usuários não podem fazer login em agências que não pertencem
+- ✅ **Tenant Isolation**: Todas rotas protegidas validam tenant_id no JWT vs tenant_id do contexto
+- ✅ **Erro Handling**: Mensagens genéricas que não expõem arquitetura interna
+- ✅ **JWT Validation**: Tokens validados em cada requisição autenticada
+- ✅ **Rate Limiting**: 1000 req/min por IP para prevenir brute force
+
 ## Estrutura de diretórios (resumo)
 ```
 backend/                            API Go (config, domínio, handlers, serviços)
+  internal/
+    api/
+      handlers/
+        files.go                    🆕 Handler para servir arquivos via API
+        auth.go                     🔒 Validação cross-tenant no login
+      middleware/
+        auth.go                     🔒 Validação tenant em rotas protegidas
+        tenant.go                   🔧 Detecção de tenant via headers
 backend/internal/data/postgres/     Scripts SQL de seed
+front-end-agency/                   🆕 Dashboard Next.js para Agências
+  app/login/page.tsx               🎨 Login com mensagens humanizadas
+  middleware.ts                    🔧 Injeção de headers tenant
 front-end-dash.aggios.app/          Dashboard Next.js Superadmin
 frontend-aggios.app/                Site institucional Next.js
 traefik/                            Regras de roteamento e TLS
@@ -51,15 +104,21 @@ traefik/                            Regras de roteamento e TLS
 
 ## Testes e validação
 - Consultar `1. docs/TESTING_GUIDE.md` para cenários funcionais.
-- Requisições de verificação recomendadas:
+- **Testes de Segurança**:
-  - `curl http://api.localhost/api/admin/agencies` (lista) – requer token JWT válido.
+  - ✅ Tentativa de login cross-tenant retorna 403
-  - `curl http://dash.localhost/api/admin/agencies` (proxy Next) – usado pelo painel.
+  - ✅ JWT de uma agência não funciona em outra agência
-  - Fluxo manual via painel `dash.localhost/superadmin`.
+  - ✅ Logs registram tentativas de acesso cross-tenant
+- **Testes de File Serving**:
+  - ✅ Upload de logo gera URL via API (`http://api.localhost/api/files/...`)
+  - ✅ Imagens carregam sem problemas de CORS ou DNS
+  - ✅ Cache headers aplicados corretamente
 
 ## Próximos passos sugeridos
-- Implementar soft delete e trilhas de auditoria para exclusão de agências.
+- Implementar soft delete e trilhas de auditoria para exclusão de agências
-- Expandir testes automatizados (unitários e e2e) focados no fluxo do dashboard.
+- Adicionar validação de permissões por tenant em rotas de files (se necessário)
-- Disponibilizar pipeline CI/CD com validações de lint/build.
+- Expandir testes automatizados (unitários e e2e) focados no fluxo do dashboard
+- Disponibilizar pipeline CI/CD com validações de lint/build
 
 ## Repositório
 - Principal: https://git.stackbyte.cloud/erik/aggios.app.git
+- Branch: dev-1.4 (Segurança Multi-tenant + File Serving)

backend/cmd/server/main.go

@@ -66,12 +66,13 @@ func main() {
 	// Initialize handlers
 	healthHandler := handlers.NewHealthHandler()
 	authHandler := handlers.NewAuthHandler(authService)
-	agencyProfileHandler := handlers.NewAgencyHandler(tenantRepo)
+	agencyProfileHandler := handlers.NewAgencyHandler(tenantRepo, cfg)
 	agencyHandler := handlers.NewAgencyRegistrationHandler(agencyService, cfg)
 	tenantHandler := handlers.NewTenantHandler(tenantService)
 	companyHandler := handlers.NewCompanyHandler(companyService)
 	signupTemplateHandler := handlers.NewSignupTemplateHandler(signupTemplateRepo, userRepo, tenantRepo, agencyService)
 	agencyTemplateHandler := handlers.NewAgencyTemplateHandler(agencyTemplateRepo, agencyService, userRepo, tenantRepo)
+	filesHandler := handlers.NewFilesHandler(cfg)
 	
 	// Initialize upload handler
 	uploadHandler, err := handlers.NewUploadHandler(cfg)
@@ -116,6 +117,7 @@ func main() {
 
 	// Tenant check (public)
 	router.HandleFunc("/api/tenant/check", tenantHandler.CheckExists).Methods("GET")
+	router.HandleFunc("/api/tenant/config", tenantHandler.GetPublicConfig).Methods("GET")
 
 	// Hash generator (dev only - remove in production)
 	router.HandleFunc("/api/hash", handlers.GenerateHash).Methods("POST")
@@ -170,6 +172,9 @@ func main() {
 	// Agency logo upload (protected)
 	router.Handle("/api/agency/logo", authMiddleware(http.HandlerFunc(agencyProfileHandler.UploadLogo))).Methods("POST")
 
+	// File serving route (public - serves files from MinIO through API)
+	router.PathPrefix("/api/files/{bucket}/").HandlerFunc(filesHandler.ServeFile).Methods("GET")
+
 	// Company routes (protected)
 	router.Handle("/api/companies", authMiddleware(http.HandlerFunc(companyHandler.List))).Methods("GET")
 	router.Handle("/api/companies/create", authMiddleware(http.HandlerFunc(companyHandler.Create))).Methods("POST")

backend/internal/api/handlers/agency_logo.go

@@ -9,6 +9,7 @@ import (
 	"log"
 	"net/http"
 	"path/filepath"
+	"strings"
 	"time"
 
 	"aggios-app/backend/internal/api/middleware"
@@ -172,20 +173,28 @@ func (h *AgencyHandler) UploadLogo(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Generate public URL
+	// Generate public URL through API (not direct MinIO access)
-	logoURL := fmt.Sprintf("http://localhost:9000/%s/%s", bucketName, filename)
+	// This is more secure and doesn't require DNS configuration
+	logoURL := fmt.Sprintf("http://api.localhost/api/files/%s/%s", bucketName, filename)
 	
 	log.Printf("Logo uploaded successfully: %s", logoURL)
 
 	// Delete old logo file from MinIO if exists
 	if currentLogoURL != "" && currentLogoURL != "https://via.placeholder.com/150" {
 		// Extract object key from URL
-		// Example: http://localhost:9000/aggios-logos/tenants/uuid/logo-123.png -> tenants/uuid/logo-123.png
+		// Example: http://api.localhost/api/files/aggios-logos/tenants/uuid/logo-123.png -> tenants/uuid/logo-123.png
 		oldFilename := ""
 		if len(currentLogoURL) > 0 {
-			// Split by bucket name
+			// Split by /api/files/{bucket}/ to get the file path
-			if idx := len("http://localhost:9000/aggios-logos/"); idx < len(currentLogoURL) {
+			apiPrefix := fmt.Sprintf("http://api.localhost/api/files/%s/", bucketName)
-				oldFilename = currentLogoURL[idx:]
+			if strings.HasPrefix(currentLogoURL, apiPrefix) {
+				oldFilename = strings.TrimPrefix(currentLogoURL, apiPrefix)
+			} else {
+				// Fallback for old MinIO URLs
+				baseURL := fmt.Sprintf("%s/%s/", h.config.Minio.PublicURL, bucketName)
+				if len(currentLogoURL) > len(baseURL) {
+					oldFilename = currentLogoURL[len(baseURL):]
+				}
 			}
 		}
 		
@@ -202,6 +211,8 @@ func (h *AgencyHandler) UploadLogo(w http.ResponseWriter, r *http.Request) {
 
 	// Update tenant record in database
 	var err2 error
+	log.Printf("Updating database: tenant_id=%s, logo_type=%s, logo_url=%s", tenantID, logoType, logoURL)
+	
 	if logoType == "horizontal" {
 		_, err2 = h.tenantRepo.DB().Exec("UPDATE tenants SET logo_horizontal_url = $1, updated_at = NOW() WHERE id = $2", logoURL, tenantID)
 	} else {
@@ -209,11 +220,13 @@ func (h *AgencyHandler) UploadLogo(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if err2 != nil {
-		log.Printf("Failed to update logo: %v", err2)
+		log.Printf("ERROR: Failed to update logo in database: %v", err2)
-		http.Error(w, "Failed to update database", http.StatusInternalServerError)
+		http.Error(w, fmt.Sprintf("Failed to update database: %v", err2), http.StatusInternalServerError)
 		return
 	}
 	
+	log.Printf("SUCCESS: Logo saved to database successfully!")
+
 	// Return success response
 	response := map[string]string{
 		"logo_url": logoURL,

backend/internal/api/handlers/agency_profile.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 
 	"aggios-app/backend/internal/api/middleware"
+	"aggios-app/backend/internal/config"
 	"aggios-app/backend/internal/repository"
 
 	"github.com/google/uuid"
@@ -13,11 +14,13 @@ import (
 
 type AgencyHandler struct {
 	tenantRepo *repository.TenantRepository
+	config     *config.Config
 }
 
-func NewAgencyHandler(tenantRepo *repository.TenantRepository) *AgencyHandler {
+func NewAgencyHandler(tenantRepo *repository.TenantRepository, cfg *config.Config) *AgencyHandler {
 	return &AgencyHandler{
 		tenantRepo: tenantRepo,
+		config:     cfg,
 	}
 }
 

backend/internal/api/handlers/auth.go

@@ -7,6 +7,7 @@ import (
 	"net/http"
 	"strings"
 
+	"aggios-app/backend/internal/api/middleware"
 	"aggios-app/backend/internal/domain"
 	"aggios-app/backend/internal/service"
 )
@@ -96,6 +97,23 @@ func (h *AuthHandler) Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// VALIDAÇÃO DE SEGURANÇA: Verificar se o tenant do usuário corresponde ao subdomain acessado
+	tenantIDFromContext := ""
+	if ctxTenantID := r.Context().Value(middleware.TenantIDKey); ctxTenantID != nil {
+		tenantIDFromContext, _ = ctxTenantID.(string)
+	}
+
+	// Se foi detectado um tenant no contexto (não é superadmin ou site institucional)
+	if tenantIDFromContext != "" && response.User.TenantID != nil {
+		userTenantID := response.User.TenantID.String()
+		if userTenantID != tenantIDFromContext {
+			log.Printf("❌ LOGIN BLOCKED: User from tenant %s tried to login in tenant %s subdomain",  userTenantID, tenantIDFromContext)
+			http.Error(w, "Forbidden: Invalid credentials for this tenant", http.StatusForbidden)
+			return
+		}
+		log.Printf("✅ TENANT LOGIN VALIDATION PASSED: %s", userTenantID)
+	}
+
 	log.Printf("✅ Login successful for %s, role=%s", response.User.Email, response.User.Role)
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(response)

backend/internal/api/handlers/files.go

@@ -0,0 +1,87 @@
+package handlers
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"log"
+	"net/http"
+	"strings"
+
+	"aggios-app/backend/internal/config"
+
+	"github.com/gorilla/mux"
+	"github.com/minio/minio-go/v7"
+	"github.com/minio/minio-go/v7/pkg/credentials"
+)
+
+type FilesHandler struct {
+	config *config.Config
+}
+
+func NewFilesHandler(cfg *config.Config) *FilesHandler {
+	return &FilesHandler{
+		config: cfg,
+	}
+}
+
+// ServeFile serves files from MinIO through the API
+func (h *FilesHandler) ServeFile(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	bucket := vars["bucket"]
+	
+	// Get the file path (everything after /api/files/{bucket}/)
+	prefix := fmt.Sprintf("/api/files/%s/", bucket)
+	filePath := strings.TrimPrefix(r.URL.Path, prefix)
+	
+	if filePath == "" {
+		http.Error(w, "File path is required", http.StatusBadRequest)
+		return
+	}
+
+	log.Printf("📁 Serving file: bucket=%s, path=%s", bucket, filePath)
+
+	// Initialize MinIO client
+	minioClient, err := minio.New("aggios-minio:9000", &minio.Options{
+		Creds:  credentials.NewStaticV4("minioadmin", "M1n10_S3cur3_P@ss_2025!", ""),
+		Secure: false,
+	})
+	if err != nil {
+		log.Printf("Failed to create MinIO client: %v", err)
+		http.Error(w, "Storage service unavailable", http.StatusInternalServerError)
+		return
+	}
+
+	// Get object from MinIO
+	ctx := context.Background()
+	object, err := minioClient.GetObject(ctx, bucket, filePath, minio.GetObjectOptions{})
+	if err != nil {
+		log.Printf("Failed to get object: %v", err)
+		http.Error(w, "File not found", http.StatusNotFound)
+		return
+	}
+	defer object.Close()
+
+	// Get object info for content type and size
+	objInfo, err := object.Stat()
+	if err != nil {
+		log.Printf("Failed to stat object: %v", err)
+		http.Error(w, "File not found", http.StatusNotFound)
+		return
+	}
+
+	// Set appropriate headers
+	w.Header().Set("Content-Type", objInfo.ContentType)
+	w.Header().Set("Content-Length", fmt.Sprintf("%d", objInfo.Size))
+	w.Header().Set("Cache-Control", "public, max-age=31536000") // Cache for 1 year
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	// Copy file content to response
+	_, err = io.Copy(w, object)
+	if err != nil {
+		log.Printf("Failed to copy object content: %v", err)
+		return
+	}
+
+	log.Printf("✅ File served successfully: %s", filePath)
+}

backend/internal/api/handlers/tenant.go

@@ -67,3 +67,39 @@ func (h *TenantHandler) CheckExists(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json; charset=utf-8")
 	json.NewEncoder(w).Encode(map[string]string{"status": "ok"})
 }
+
+// GetPublicConfig returns public branding info for a tenant by subdomain
+func (h *TenantHandler) GetPublicConfig(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	subdomain := r.URL.Query().Get("subdomain")
+	if subdomain == "" {
+		http.Error(w, "subdomain is required", http.StatusBadRequest)
+		return
+	}
+
+	tenant, err := h.tenantService.GetBySubdomain(subdomain)
+	if err != nil {
+		if err == service.ErrTenantNotFound {
+			http.NotFound(w, r)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	// Return only public info
+	response := map[string]string{
+		"name":                tenant.Name,
+		"primary_color":       tenant.PrimaryColor,
+		"secondary_color":     tenant.SecondaryColor,
+		"logo_url":            tenant.LogoURL,
+		"logo_horizontal_url": tenant.LogoHorizontalURL,
+	}
+
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	json.NewEncoder(w).Encode(response)
+}

backend/internal/api/middleware/auth.go

@@ -2,6 +2,7 @@ package middleware
 
 import (
 	"context"
+	"log"
 	"net/http"
 	"strings"
 
@@ -59,13 +60,40 @@ func Auth(cfg *config.Config) func(http.Handler) http.Handler {
 		}
 
 		// tenant_id pode ser nil para SuperAdmin
-		var tenantID string
+		var tenantIDFromJWT string
 		if tenantIDClaim, ok := claims["tenant_id"]; ok && tenantIDClaim != nil {
-			tenantID, _ = tenantIDClaim.(string)
+			tenantIDFromJWT, _ = tenantIDClaim.(string)
 		}
 
-		ctx := context.WithValue(r.Context(), UserIDKey, userID)
+		// VALIDAÇÃO DE SEGURANÇA: Verificar se o tenant_id do JWT corresponde ao subdomínio acessado
-		ctx = context.WithValue(ctx, TenantIDKey, tenantID)
+		// Pegar o tenant_id do contexto (detectado pelo TenantDetector middleware ANTES deste)
+		tenantIDFromContext := ""
+		if ctxTenantID := r.Context().Value(TenantIDKey); ctxTenantID != nil {
+			tenantIDFromContext, _ = ctxTenantID.(string)
+		}
+
+		log.Printf("🔐 AUTH VALIDATION: JWT tenant=%s | Context tenant=%s | Path=%s", 
+			tenantIDFromJWT, tenantIDFromContext, r.RequestURI)
+
+		// Se o usuário não é SuperAdmin (tem tenant_id) e está acessando uma agência (subdomain detectado)
+		if tenantIDFromJWT != "" && tenantIDFromContext != "" {
+			// Validar se o tenant_id do JWT corresponde ao tenant detectado
+			if tenantIDFromJWT != tenantIDFromContext {
+				log.Printf("❌ CROSS-TENANT ACCESS BLOCKED: User from tenant %s tried to access tenant %s", 
+					tenantIDFromJWT, tenantIDFromContext)
+				http.Error(w, "Forbidden: You don't have access to this tenant", http.StatusForbidden)
+				return
+			}
+			log.Printf("✅ TENANT VALIDATION PASSED: %s", tenantIDFromJWT)
+		}
+
+		// Preservar TODOS os valores do contexto anterior (incluindo o tenantID do TenantDetector)
+		ctx := r.Context()
+		ctx = context.WithValue(ctx, UserIDKey, userID)
+		// Só sobrescrever o TenantIDKey se vier do JWT (para não perder o do TenantDetector)
+		if tenantIDFromJWT != "" {
+			ctx = context.WithValue(ctx, TenantIDKey, tenantIDFromJWT)
+		}
 		next.ServeHTTP(w, r.WithContext(ctx))
 	})
 }

backend/internal/api/middleware/tenant.go

@@ -16,15 +16,25 @@ func TenantDetector(tenantRepo *repository.TenantRepository) func(http.Handler)
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			// Get host from X-Forwarded-Host header (set by Next.js proxy) or Host header
-			host := r.Header.Get("X-Forwarded-Host")
+			// Priority order: X-Tenant-Subdomain (set by Next.js middleware) > X-Forwarded-Host > X-Original-Host > Host
+			tenantSubdomain := r.Header.Get("X-Tenant-Subdomain")
+			
+			var host string
+			if tenantSubdomain != "" {
+				// Use direct subdomain from Next.js middleware
+				host = tenantSubdomain
+				log.Printf("TenantDetector: using X-Tenant-Subdomain = %s", tenantSubdomain)
+			} else {
+				// Fallback to extracting from host headers
+				host = r.Header.Get("X-Forwarded-Host")
 				if host == "" {
 					host = r.Header.Get("X-Original-Host")
 				}
 				if host == "" {
 					host = r.Host
 				}
-			
 				log.Printf("TenantDetector: host = %s (from headers), path = %s", host, r.RequestURI)
+			}
 			
 			// Extract subdomain
 			// Examples:
@@ -33,9 +43,19 @@ func TenantDetector(tenantRepo *repository.TenantRepository) func(http.Handler)
 			// - dash.localhost -> dash (master admin)
 			// - localhost -> (institutional site)
 			
-			parts := strings.Split(host, ".")
 			var subdomain string
 			
+			// If we got the subdomain directly from X-Tenant-Subdomain, use it
+			if tenantSubdomain != "" {
+				subdomain = tenantSubdomain
+				// Remove port if present
+				if strings.Contains(subdomain, ":") {
+					subdomain = strings.Split(subdomain, ":")[0]
+				}
+			} else {
+				// Extract from host
+				parts := strings.Split(host, ".")
+				
 				if len(parts) >= 2 {
 					// Has subdomain
 					subdomain = parts[0]
@@ -45,6 +65,7 @@ func TenantDetector(tenantRepo *repository.TenantRepository) func(http.Handler)
 						subdomain = strings.Split(subdomain, ":")[0]
 					}
 				}
+			}
 			
 			log.Printf("TenantDetector: extracted subdomain = %s", subdomain)
 			

backend/internal/config/config.go

@@ -49,6 +49,7 @@ type SecurityConfig struct {
 // MinioConfig holds MinIO configuration
 type MinioConfig struct {
 	Endpoint     string
+	PublicURL    string // URL pública para acesso ao MinIO (para gerar links)
 	RootUser     string
 	RootPassword string
 	UseSSL       bool
@@ -64,9 +65,9 @@ func Load() *Config {
 	}
 
 	// Rate limit: more lenient in dev, strict in prod
-	maxAttempts := 30
+	maxAttempts := 1000 // Aumentado drasticamente para evitar 429 durante debug
 	if env == "production" {
-		maxAttempts = 5
+		maxAttempts = 100 // Mais restritivo em produção
 	}
 
 	return &Config{
@@ -102,6 +103,7 @@ func Load() *Config {
 		},
 		Minio: MinioConfig{
 			Endpoint:     getEnvOrDefault("MINIO_ENDPOINT", "minio:9000"),
+			PublicURL:    getEnvOrDefault("MINIO_PUBLIC_URL", "http://localhost:9000"),
 			RootUser:     getEnvOrDefault("MINIO_ROOT_USER", "minioadmin"),
 			RootPassword: getEnvOrDefault("MINIO_ROOT_PASSWORD", "changeme"),
 			UseSSL:       getEnvOrDefault("MINIO_USE_SSL", "false") == "true",

backend/internal/repository/tenant_repository.go

@@ -188,17 +188,23 @@ func (r *TenantRepository) FindByID(id uuid.UUID) (*domain.Tenant, error) {
 // FindBySubdomain finds a tenant by subdomain
 func (r *TenantRepository) FindBySubdomain(subdomain string) (*domain.Tenant, error) {
 	query := `
-		SELECT id, name, domain, subdomain, created_at, updated_at
+		SELECT id, name, domain, subdomain, primary_color, secondary_color, logo_url, logo_horizontal_url, created_at, updated_at
 		FROM tenants
 		WHERE subdomain = $1
 	`
 
 	tenant := &domain.Tenant{}
+	var primaryColor, secondaryColor, logoURL, logoHorizontalURL sql.NullString
+
 	err := r.db.QueryRow(query, subdomain).Scan(
 		&tenant.ID,
 		&tenant.Name,
 		&tenant.Domain,
 		&tenant.Subdomain,
+		&primaryColor,
+		&secondaryColor,
+		&logoURL,
+		&logoHorizontalURL,
 		&tenant.CreatedAt,
 		&tenant.UpdatedAt,
 	)
@@ -207,7 +213,24 @@ func (r *TenantRepository) FindBySubdomain(subdomain string) (*domain.Tenant, er
 		return nil, nil
 	}
 
-	return tenant, err
+	if err != nil {
+		return nil, err
+	}
+
+	if primaryColor.Valid {
+		tenant.PrimaryColor = primaryColor.String
+	}
+	if secondaryColor.Valid {
+		tenant.SecondaryColor = secondaryColor.String
+	}
+	if logoURL.Valid {
+		tenant.LogoURL = logoURL.String
+	}
+	if logoHorizontalURL.Valid {
+		tenant.LogoHorizontalURL = logoHorizontalURL.String
+	}
+
+	return tenant, nil
 }
 
 // SubdomainExists checks if a subdomain is already taken

docker-compose.yml

@@ -65,9 +65,24 @@ services:
     container_name: aggios-minio
     restart: unless-stopped
     command: server /data --console-address ":9001"
+    labels:
+      - "traefik.enable=true"
+      # Router para acesso aos arquivos (API S3)
+      - "traefik.http.routers.minio.rule=Host(`files.aggios.local`) || Host(`files.localhost`)"
+      - "traefik.http.routers.minio.entrypoints=web"
+      - "traefik.http.routers.minio.priority=100" # Prioridade alta para evitar captura pelo wildcard
+      - "traefik.http.services.minio.loadbalancer.server.port=9000"
+      - "traefik.http.services.minio.loadbalancer.passhostheader=true"
+      # Router para o Console do MinIO
+      - "traefik.http.routers.minio-console.rule=Host(`minio.aggios.local`) || Host(`minio.localhost`)"
+      - "traefik.http.routers.minio-console.entrypoints=web"
+      - "traefik.http.routers.minio-console.priority=100"
+      - "traefik.http.services.minio-console.loadbalancer.server.port=9001"
     environment:
       MINIO_ROOT_USER: minioadmin
       MINIO_ROOT_PASSWORD: ${MINIO_PASSWORD:-M1n10_S3cur3_P@ss_2025!}
+      MINIO_BROWSER_REDIRECT_URL: http://minio.localhost
+      MINIO_SERVER_URL: http://files.localhost
     volumes:
       - minio_data:/data
     ports:
@@ -107,6 +122,7 @@ services:
       REDIS_PORT: 6379
       REDIS_PASSWORD: ${REDIS_PASSWORD:-R3d1s_S3cur3_P@ss_2025!}
       MINIO_ENDPOINT: minio:9000
+      MINIO_PUBLIC_URL: http://files.localhost
       MINIO_ROOT_USER: minioadmin
       MINIO_ROOT_PASSWORD: ${MINIO_PASSWORD:-M1n10_S3cur3_P@ss_2025!}
     depends_on:
@@ -178,6 +194,7 @@ services:
       - "traefik.enable=true"
       - "traefik.http.routers.agency.rule=Host(`agency.aggios.local`) || Host(`agency.localhost`) || HostRegexp(`^.+\\.localhost$`)"
       - "traefik.http.routers.agency.entrypoints=web"
+      - "traefik.http.routers.agency.priority=1" # Prioridade baixa para não conflitar com files/minio
     environment:
       - NODE_ENV=production
       - NEXT_PUBLIC_API_URL=http://api.localhost

docs/TEST_LOGO_UPLOAD.md

@@ -0,0 +1,15 @@
+# Teste manual do endpoint de upload de logo
+
+## 1. Login e obter token
+curl -X POST http://idealpages.localhost/api/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"email":"admin@idealpages.com","password":"admin123"}'
+
+## 2. Upload de logo (substituir TOKEN pelo valor retornado acima)
+curl -X POST http://idealpages.localhost/api/agency/logo \
+  -H "Authorization: Bearer TOKEN" \
+  -F "logo=@/caminho/para/imagem.png" \
+  -F "type=logo"
+
+## 3. Verificar se salvou no banco
+docker exec aggios-postgres psql -U aggios -d aggios_db -c "SELECT id, name, logo_url FROM tenants WHERE subdomain = 'idealpages';"

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/DashboardLayout';
+import { AgencyBranding } from '@/components/layout/AgencyBranding';
+import AuthGuard from '@/components/auth/AuthGuard';
+import {
+    HomeIcon,
+    RocketLaunchIcon,
+    ChartBarIcon,
+    BriefcaseIcon,
+    LifebuoyIcon,
+    CreditCardIcon,
+    DocumentTextIcon,
+    FolderIcon,
+    ShareIcon,
+} from '@heroicons/react/24/outline';
+
+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' },
+        ]
+    },
+];
+
+interface AgencyLayoutClientProps {
+    children: React.ReactNode;
+    colors?: {
+        primary: string;
+        secondary: string;
+    } | null;
+}
+
+export function AgencyLayoutClient({ children, colors }: AgencyLayoutClientProps) {
+    return (
+        <AuthGuard>
+            <AgencyBranding colors={colors} />
+            <DashboardLayout menuItems={AGENCY_MENU_ITEMS}>
+                {children}
+            </DashboardLayout>
+        </AuthGuard>
+    );
+}

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { Tab } from '@headlessui/react';
-import { Button, Dialog } from '@/components/ui';
+import { Button, Dialog, Input } from '@/components/ui';
 import { Toaster, toast } from 'react-hot-toast';
 import {
     BuildingOfficeIcon,
@@ -44,6 +44,7 @@ export default function ConfiguracoesPage() {
     const [showSupportDialog, setShowSupportDialog] = useState(false);
     const [supportMessage, setSupportMessage] = useState('Para alterar estes dados, contate o suporte.');
     const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
     const [loadingCep, setLoadingCep] = useState(false);
     const [uploadingLogo, setUploadingLogo] = useState(false);
     const [logoPreview, setLogoPreview] = useState<string | null>(null);
@@ -70,8 +71,32 @@ export default function ConfiguracoesPage() {
         teamSize: '',
         logoUrl: '',
         logoHorizontalUrl: '',
+        primaryColor: '#ff3a05',
+        secondaryColor: '#ff0080',
     });
 
+    // Live Preview da Cor Primária
+    useEffect(() => {
+        if (agencyData.primaryColor) {
+            const root = document.documentElement;
+            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(agencyData.primaryColor);
+
+            if (primaryRgb) {
+                root.style.setProperty('--brand-rgb', primaryRgb);
+                root.style.setProperty('--brand-strong-rgb', primaryRgb);
+                root.style.setProperty('--brand-hover-rgb', primaryRgb);
+            }
+
+            root.style.setProperty('--brand-color', agencyData.primaryColor);
+            root.style.setProperty('--gradient', `linear-gradient(135deg, ${agencyData.primaryColor}, ${agencyData.primaryColor})`);
+        }
+    }, [agencyData.primaryColor]);
+
     // Dados para alteração de senha
     const [passwordData, setPasswordData] = useState({
         currentPassword: '',
@@ -127,6 +152,8 @@ export default function ConfiguracoesPage() {
                         teamSize: data.team_size || '',
                         logoUrl: data.logo_url || '',
                         logoHorizontalUrl: data.logo_horizontal_url || '',
+                        primaryColor: data.primary_color || '#ff3a05',
+                        secondaryColor: data.secondary_color || '#ff0080',
                     });
 
                     // Set logo previews
@@ -166,6 +193,8 @@ export default function ConfiguracoesPage() {
                             teamSize: data.formData?.teamSize || '',
                             logoUrl: '',
                             logoHorizontalUrl: '',
+                            primaryColor: '#ff3a05',
+                            secondaryColor: '#ff0080',
                         });
                     }
                 }
@@ -223,11 +252,18 @@ export default function ConfiguracoesPage() {
                 if (type === 'logo') {
                     setAgencyData(prev => ({ ...prev, logoUrl }));
                     setLogoPreview(logoUrl);
+                    // Salvar no localStorage para uso do favicon
+                    localStorage.setItem('agency-logo-url', logoUrl);
                 } else {
                     setAgencyData(prev => ({ ...prev, logoHorizontalUrl: logoUrl }));
                     setLogoHorizontalPreview(logoUrl);
                 }
 
+                // Disparar evento para atualizar branding em tempo real
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new Event('branding-update'));
+                }
+
                 toast.success('Logo enviado com sucesso!');
             } else {
                 const errorData = await response.json().catch(() => ({}));
@@ -319,11 +355,13 @@ export default function ConfiguracoesPage() {
     };
 
     const handleSaveAgency = async () => {
+        setSaving(true);
         try {
             const token = localStorage.getItem('token');
             if (!token) {
                 setSuccessMessage('Você precisa estar autenticado.');
                 setShowSuccessDialog(true);
+                setSaving(false);
                 return;
             }
 
@@ -354,17 +392,30 @@ export default function ConfiguracoesPage() {
                     description: agencyData.description,
                     industry: agencyData.industry,
                     team_size: agencyData.teamSize,
+                    primary_color: agencyData.primaryColor,
+                    secondary_color: agencyData.secondaryColor,
                 }),
             });
 
             if (response.ok) {
                 setSuccessMessage('Dados da agência salvos com sucesso!');
+
+                // Atualiza localStorage imediatamente para persistência instantânea
+                localStorage.setItem('agency-primary-color', agencyData.primaryColor);
+                localStorage.setItem('agency-secondary-color', agencyData.secondaryColor);
+                if (agencyData.logoUrl) localStorage.setItem('agency-logo-url', agencyData.logoUrl);
+                if (agencyData.logoHorizontalUrl) localStorage.setItem('agency-logo-horizontal-url', agencyData.logoHorizontalUrl);
+
+                // Disparar evento para atualizar o tema em tempo real
+                window.dispatchEvent(new Event('branding-update'));
             } else {
                 setSuccessMessage('Erro ao salvar dados. Tente novamente.');
             }
         } catch (error) {
             console.error('Erro ao salvar:', error);
             setSuccessMessage('Erro ao salvar dados. Verifique sua conexão.');
+        } finally {
+            setSaving(false);
         }
         setShowSuccessDialog(true);
     };
@@ -475,52 +526,40 @@ export default function ConfiguracoesPage() {
 
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Nome da Agência
+                                                label="Nome da Agência"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.name}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Razão Social
+                                                label="Razão Social"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.razaoSocial}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
+                                            <Input
-                                                <span>CNPJ</span>
+                                                label="CNPJ"
-                                                <span className="text-xs text-gray-500">Alteração via suporte</span>
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.cnpj}
                                                 readOnly
                                                 onClick={() => {
                                                     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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
+                                            <Input
-                                                <span>E-mail (acesso)</span>
+                                                label="E-mail (acesso)"
-                                                <span className="text-xs text-gray-500">Alteração via suporte</span>
-                                            </label>
-                                            <input
                                                 type="email"
                                                 value={agencyData.email}
                                                 readOnly
@@ -528,55 +567,47 @@ export default function ConfiguracoesPage() {
                                                     setSupportMessage('Para alterar o e-mail de acesso, 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Telefone / WhatsApp
+                                                label="Telefone / WhatsApp"
-                                            </label>
-                                            <input
                                                 type="tel"
                                                 value={agencyData.phone}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div className="md:col-span-2">
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Website
+                                                label="Website"
-                                            </label>
-                                            <input
                                                 type="url"
                                                 value={agencyData.website}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Segmento / Indústria
+                                                label="Segmento / Indústria"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.industry}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Tamanho da Equipe
+                                                label="Tamanho da Equipe"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.teamSize}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
                                     </div>
@@ -591,11 +622,8 @@ export default function ConfiguracoesPage() {
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                CEP
+                                                label="CEP"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.zip}
                                                 onChange={(e) => {
                                                     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}
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Estado
+                                                label="Estado"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.state}
                                                 readOnly
-                                                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-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
                                             />
-                                        </div>                                                <div>
+                                        </div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+
-                                                Cidade
+                                        <div>
-                                            </label>
+                                            <Input
-                                            <input
+                                                label="Cidade"
-                                                type="text"
                                                 value={agencyData.city}
                                                 readOnly
-                                                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-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Bairro
+                                                label="Bairro"
-                                            </label>
-                                            <input
-                                                type="text"
                                                 value={agencyData.neighborhood}
                                                 readOnly
-                                                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-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
                                             />
-                                        </div>                                                <div className="md:col-span-2">
+                                        </div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+
-                                                Rua/Avenida
+                                        <div className="md:col-span-2">
-                                            </label>
+                                            <Input
-                                            <input
+                                                label="Rua/Avenida"
-                                                type="text"
                                                 value={agencyData.street}
                                                 readOnly
-                                                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-not-allowed"
+                                                className="bg-gray-50 dark:bg-gray-800 cursor-not-allowed"
-                                            />
-                                        </div>                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                                Número
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={agencyData.number}
-                                                onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Complemento (opcional)
+                                                label="Número"
-                                            </label>
+                                                value={agencyData.number}
-                                            <input
+                                                onChange={(e) => setAgencyData({ ...agencyData, number: e.target.value })}
-                                                type="text"
+                                                placeholder="123"
+                                            />
+                                        </div>
+
+                                        <div>
+                                            <Input
+                                                label="Complemento (opcional)"
                                                 value={agencyData.complement}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
                                     </div>
 
                                     <div className="mt-6 flex justify-end">
-                                        <button
+                                        <Button
                                             onClick={handleSaveAgency}
-                                            className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
+                                            variant="primary"
-                                            style={{ background: 'var(--gradient-primary)' }}
+                                            size="lg"
                                         >
                                             Salvar Alterações
-                                        </button>
+                                        </Button>
                                     </div>
                                 </div>
                             </Tab.Panel>
@@ -928,6 +945,69 @@ export default function ConfiguracoesPage() {
                                                 )}
                                             </div>
                                         </div>
+
+                                        {/* Cores da Marca */}
+                                        <div className="pt-6 border-t border-gray-200 dark:border-gray-700">
+                                            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                                                Personalização de Cores
+                                            </h3>
+                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                                <div>
+                                                    <div className="flex items-end gap-3">
+                                                        <div className="relative w-[50px] h-[42px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm shrink-0 mb-[2px]">
+                                                            <input
+                                                                type="color"
+                                                                value={agencyData.primaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, primaryColor: e.target.value })}
+                                                                className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer p-0 border-0"
+                                                            />
+                                                        </div>
+                                                        <div className="flex-1">
+                                                            <Input
+                                                                label="Cor Primária"
+                                                                type="text"
+                                                                value={agencyData.primaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, primaryColor: e.target.value })}
+                                                                className="uppercase"
+                                                                maxLength={7}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <div className="flex items-end gap-3">
+                                                        <div className="relative w-[50px] h-[42px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm shrink-0 mb-[2px]">
+                                                            <input
+                                                                type="color"
+                                                                value={agencyData.secondaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, secondaryColor: e.target.value })}
+                                                                className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer p-0 border-0"
+                                                            />
+                                                        </div>
+                                                        <div className="flex-1">
+                                                            <Input
+                                                                label="Cor Secundária"
+                                                                type="text"
+                                                                value={agencyData.secondaryColor}
+                                                                onChange={(e) => setAgencyData({ ...agencyData, secondaryColor: e.target.value })}
+                                                                className="uppercase"
+                                                                maxLength={7}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="mt-6 flex justify-end">
+                                                <Button
+                                                    onClick={handleSaveAgency}
+                                                    variant="primary"
+                                                    isLoading={saving}
+                                                    style={{ backgroundColor: agencyData.primaryColor }}
+                                                >
+                                                    Salvar Cores
+                                                </Button>
+                                            </div>
+                                        </div>
                                     </div>
 
                                     {/* Info adicional */}
@@ -950,9 +1030,9 @@ export default function ConfiguracoesPage() {
                                     <p className="text-gray-600 dark:text-gray-400 mb-4">
                                         Em breve: gerenciamento completo de usuários e permissões
                                     </p>
-                                    <button className="px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all">
+                                    <Button variant="primary">
                                         Convidar Membro
-                                    </button>
+                                    </Button>
                                 </div>
                             </Tab.Panel>
 
@@ -970,52 +1050,42 @@ export default function ConfiguracoesPage() {
 
                                     <div className="space-y-4">
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Senha Atual
+                                                label="Senha Atual"
-                                            </label>
-                                            <input
                                                 type="password"
                                                 value={passwordData.currentPassword}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Nova Senha
+                                                label="Nova Senha"
-                                            </label>
-                                            <input
                                                 type="password"
                                                 value={passwordData.newPassword}
                                                 onChange={(e) => 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)"
                                             />
                                         </div>
 
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            <Input
-                                                Confirmar Nova Senha
+                                                label="Confirmar Nova Senha"
-                                            </label>
-                                            <input
                                                 type="password"
                                                 value={passwordData.confirmPassword}
                                                 onChange={(e) => 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"
                                             />
                                         </div>
 
                                         <div className="pt-4">
-                                            <button
+                                            <Button
                                                 onClick={handleChangePassword}
-                                                className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
+                                                variant="primary"
-                                                style={{ background: 'var(--gradient-primary)' }}
                                             >
                                                 Alterar Senha
-                                            </button>
+                                            </Button>
                                         </div>
                                     </div>
 
@@ -1071,13 +1141,12 @@ export default function ConfiguracoesPage() {
                     <p className="text-center py-4">{successMessage}</p>
                 </Dialog.Body>
                 <Dialog.Footer>
-                    <button
+                    <Button
                         onClick={() => setShowSuccessDialog(false)}
-                        className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
+                        variant="primary"
-                        style={{ background: 'var(--gradient-primary)' }}
                     >
                         OK
-                    </button>
+                    </Button>
                 </Dialog.Footer>
             </Dialog>
 
@@ -1092,12 +1161,12 @@ export default function ConfiguracoesPage() {
                     <p className="mt-3 text-sm text-gray-500">Envie um e-mail para suporte@aggios.app ou abra um chamado para ajuste desses dados.</p>
                 </Dialog.Body>
                 <Dialog.Footer>
-                    <button
+                    <Button
                         onClick={() => setShowSupportDialog(false)}
-                        className="px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all"
+                        variant="primary"
                     >
                         Fechar
-                    </button>
+                    </Button>
                 </Dialog.Footer>
             </Dialog>
         </div>

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useState } from 'react';
+import { getUser } from '@/lib/auth';
 import {
     RocketLaunchIcon,
     ChartBarIcon,
@@ -16,6 +18,21 @@ import {
 } from '@heroicons/react/24/outline';
 
 export default function DashboardPage() {
+    const [userName, setUserName] = useState('');
+    const [greeting, setGreeting] = useState('');
+
+    useEffect(() => {
+        const user = getUser();
+        if (user) {
+            setUserName(user.name.split(' ')[0]); // Primeiro nome
+        }
+
+        const hour = new Date().getHours();
+        if (hour >= 5 && hour < 12) setGreeting('Bom dia');
+        else if (hour >= 12 && hour < 18) setGreeting('Boa tarde');
+        else setGreeting('Boa noite');
+    }, []);
+
     const overviewStats = [
         { name: 'Receita Total (Mês)', value: 'R$ 124.500', change: '+12%', changeType: 'increase', icon: ChartBarIcon, color: 'green' },
         { name: 'Novos Leads', value: '45', change: '+5%', changeType: 'increase', icon: RocketLaunchIcon, color: 'blue' },
@@ -89,15 +106,26 @@ export default function DashboardPage() {
     return (
         <div className="p-6 h-full overflow-auto">
             <div className="space-y-8">
-                {/* Header */}
+                {/* Header Personalizado */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                     <div>
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                        <h1 className="text-2xl font-heading font-bold text-gray-900 dark:text-white">
-                        Visão Geral da Agência
+                            {greeting}, {userName || 'Administrador'}! 👋
                         </h1>
                         <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                        Acompanhe o desempenho de todos os módulos em tempo real
+                            Aqui está o resumo da sua agência hoje. Tudo parece estar sob controle.
                         </p>
                     </div>
+                    <div className="flex items-center gap-3">
+                        <span className="text-xs font-medium px-3 py-1 rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-800 flex items-center gap-1">
+                            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                            Sistema Operacional
+                        </span>
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                            {new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' })}
+                        </span>
+                    </div>
+                </div>
 
                 {/* Top Stats */}
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">

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';
+// Forçar renderização dinâmica (não estática) para este layout
-import {
+// Necessário porque usamos headers() para pegar o subdomínio
-    HomeIcon,
+export const dynamic = 'force-dynamic';
-    RocketLaunchIcon,
-    ChartBarIcon,
-    BriefcaseIcon,
-    LifebuoyIcon,
-    CreditCardIcon,
-    DocumentTextIcon,
-    FolderIcon,
-    ShareIcon,
-} from '@heroicons/react/24/outline';
 
-const AGENCY_MENU_ITEMS = [
+/**
-    { id: 'dashboard', label: 'Visão Geral', href: '/dashboard', icon: HomeIcon },
+ * generateMetadata - Executado no servidor antes do render
-    {
+ * Define o favicon dinamicamente baseado no subdomínio da agência
-        id: 'crm',
+ */
-        label: 'CRM',
+export async function generateMetadata(): Promise<Metadata> {
-        href: '/crm',
+    const logoUrl = await getAgencyLogo();
-        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' },
-        ]
-    },
-];
 
-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 (
+    // Buscar cores da agência no servidor
-        <AuthGuard>
+    const colors = await getAgencyColors();
-            <DashboardLayout menuItems={AGENCY_MENU_ITEMS}>
+
-                {children}
+    return <AgencyLayoutClient colors={colors}>{children}</AgencyLayoutClient>;
-            </DashboardLayout>
-        </AuthGuard>
-    );
 }

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<string>('');
+    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() {
                     <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)' }}>
+                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--brand-color)' }}>
-                                <h1 className="text-3xl font-bold text-white">aggios</h1>
+                                <h1 className="text-3xl font-bold text-white">
+                                    {isSuperAdmin ? 'aggios' : subdomain}
+                                </h1>
                             </div>
                         </div>
 
@@ -100,7 +114,7 @@ export default function RecuperarSenhaPage() {
                                         label="Email"
                                         type="email"
                                         placeholder="seu@email.com"
-                                        leftIcon="ri-mail-line"
+                                        leftIcon={<EnvelopeIcon className="w-5 h-5" />}
                                         value={email}
                                         onChange={(e) => setEmail(e.target.value)}
                                         required
@@ -109,142 +123,71 @@ export default function RecuperarSenhaPage() {
                                     <Button
                                         type="submit"
                                         variant="primary"
-                                        className="w-full"
                                         size="lg"
+                                        className="w-full"
                                         isLoading={isLoading}
                                     >
                                         Enviar link de recuperação
                                     </Button>
-                                </form>
 
-                                {/* Back to login */}
+                                    <div className="text-center">
-                                <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"
+                                            className="text-[14px] font-medium hover:opacity-80 transition-opacity"
+                                            style={{ color: 'var(--brand-color)' }}
                                         >
-                                        <i className="ri-arrow-left-line" />
                                             Voltar para o login
                                         </Link>
                                     </div>
+                                </form>
                             </>
                         ) : (
-                            <>
-                                {/* 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">
+                                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
-                                        <i className="ri-mail-check-line text-4xl text-[#10B981]" />
+                                    <i className="ri-mail-check-line text-3xl text-green-600"></i>
                                 </div>
-
+                                <h2 className="text-[24px] font-bold text-zinc-900 dark:text-white mb-2">
-                                    <h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
+                                    Verifique seu email
-                                        Email enviado!
                                 </h2>
-
+                                <p className="text-zinc-600 dark:text-zinc-400 mb-8">
-                                    <p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
+                                    Enviamos um link de recuperação para <strong>{email}</strong>
-                                        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"
+                                    className="w-full"
                                     onClick={() => setEmailSent(false)}
                                 >
-                                        Enviar novamente
+                                    Tentar outro email
                                 </Button>
-
+                                <div className="mt-6">
                                     <Link
                                         href="/login"
-                                        className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
+                                        className="text-[14px] font-medium hover:opacity-80 transition-opacity"
+                                        style={{ color: 'var(--brand-color)' }}
                                     >
-                                        <i className="ri-arrow-left-line" />
                                         Voltar para o login
                                     </Link>
                                 </div>
-                            </>
+                            </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="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--brand-color)' }}>
-                    <div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
+                    <div className="absolute inset-0 flex flex-col items-center justify-center p-12 text-white">
-                        {/* Logo */}
+                        <div className="max-w-md text-center">
-                        <div className="mb-8">
+                            <h1 className="text-5xl font-bold mb-6">
-                            <div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
+                                {isSuperAdmin ? 'aggios' : subdomain}
-                                <h1 className="text-5xl font-bold tracking-tight text-white">
-                                    aggios
                             </h1>
-                            </div>
+                            <p className="text-xl opacity-90">
-                        </div>
+                                Recupere o acesso à sua conta de forma segura e rápida.
-
-                        {/* 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

@@ -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) => {
+const setBrandColors = (primary: string, secondary: string) => {
-    document.documentElement.style.setProperty('--gradient-primary', gradient);
+    document.documentElement.style.setProperty('--brand-color', primary);
-    document.documentElement.style.setProperty('--gradient', gradient);
+    document.documentElement.style.setProperty('--brand-color-strong', secondary);
-    document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
+
-    document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
+    // 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();
+    // 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
-    useEffect(() => {
+    // para nível de servidor (next/head ou metadata) para evitar mutações de DOM no cliente.
-        // 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/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();

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 }
+        );
+    }
+}

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 = {
+export async function generateMetadata(): Promise<Metadata> {
+  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({
       <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`}>
+      <body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`} suppressHydrationWarning>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
           <LayoutWrapper>
             {children}

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<string>('');
+    const [errorMessage, setErrorMessage] = useState<string>('');
+    const [successMessage, setSuccessMessage] = useState<string>('');
     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();
+                const error = await response.json().catch(() => ({}));
-                throw new Error(error.message || 'Credenciais inválidas');
+
+                // 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 (
         <>
-            <Toaster
+            {/* Script inline para aplicar cor primária ANTES do React */}
-                position="top-center"
+            <script
-                toastOptions={{
+                dangerouslySetInnerHTML={{
-                    duration: 5000,
+                    __html: `
-                    style: {
+                        (function() {
-                        background: '#FFFFFF',
+                            try {
-                        color: '#000000',
+                                const cachedPrimary = localStorage.getItem('agency-primary-color');
-                        padding: '16px',
+                                if (cachedPrimary) {
-                        borderRadius: '8px',
+                                    function hexToRgb(hex) {
-                        border: '1px solid #E5E5E5',
+                                        const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
-                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                                        return result 
-                    },
+                                            ? parseInt(result[1], 16) + ' ' + parseInt(result[2], 16) + ' ' + parseInt(result[3], 16)
-                    error: {
+                                            : null;
-                        icon: '⚠️',
+                                    }
-                        style: {
+                                    
-                            background: '#ef4444',
+                                    const primaryRgb = hexToRgb(cachedPrimary);
-                            color: '#FFFFFF',
+                                    
-                            border: 'none',
+                                    if (primaryRgb) {
-                        },
+                                        const root = document.documentElement;
-                    },
+                                        root.style.setProperty('--brand-color', cachedPrimary);
-                    success: {
+                                        root.style.setProperty('--gradient', 'linear-gradient(135deg, ' + cachedPrimary + ', ' + cachedPrimary + ')');
-                        icon: '✓',
+                                        root.style.setProperty('--brand-rgb', primaryRgb);
-                        style: {
+                                        root.style.setProperty('--brand-strong-rgb', primaryRgb);
-                            background: '#10B981',
+                                        root.style.setProperty('--brand-hover-rgb', primaryRgb);
-                            color: '#FFFFFF',
+                                    }
-                            border: 'none',
+                                }
-                        },
+                            } catch(e) {}
-                    },
+                        })();
+                    `,
                 }}
             />
+            <LoginBranding />
             <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)' }}>
+                            <div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--brand-color)' }}>
                                 <h1 className="text-3xl font-bold text-white">
                                     {isSuperAdmin ? 'aggios' : subdomain}
                                 </h1>
@@ -198,13 +207,36 @@ export default function LoginPage() {
 
                         {/* Form */}
                         <form onSubmit={handleSubmit} className="space-y-5">
+                            {/* Mensagem de Erro */}
+                            {errorMessage && (
+                                <div className="flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+                                    <ExclamationCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+                                    <p className="text-sm text-red-800 dark:text-red-300 leading-relaxed">
+                                        {errorMessage}
+                                    </p>
+                                </div>
+                            )}
+
+                            {/* Mensagem de Sucesso */}
+                            {successMessage && (
+                                <div className="flex items-start gap-3 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
+                                    <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+                                    <p className="text-sm text-green-800 dark:text-green-300 leading-relaxed">
+                                        {successMessage}
+                                    </p>
+                                </div>
+                            )}
+
                             <Input
                                 label="Email"
                                 type="email"
                                 placeholder="seu@email.com"
-                                leftIcon="ri-mail-line"
+                                leftIcon={<EnvelopeIcon className="w-5 h-5" />}
                                 value={formData.email}
-                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                                onChange={(e) => {
+                                    setFormData({ ...formData, email: e.target.value });
+                                    setErrorMessage(''); // Limpa o erro ao digitar
+                                }}
                                 required
                             />
 
@@ -212,9 +244,12 @@ export default function LoginPage() {
                                 label="Senha"
                                 type="password"
                                 placeholder="Digite sua senha"
-                                leftIcon="ri-lock-line"
+                                leftIcon={<LockClosedIcon className="w-5 h-5" />}
                                 value={formData.password}
-                                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                onChange={(e) => {
+                                    setFormData({ ...formData, password: e.target.value });
+                                    setErrorMessage(''); // Limpa o erro ao digitar
+                                }}
                                 required
                             />
 
@@ -228,7 +263,7 @@ export default function LoginPage() {
                                 <Link
                                     href="/recuperar-senha"
                                     className="text-[14px] font-medium hover:opacity-80 transition-opacity"
-                                    style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+                                    style={{ color: 'var(--brand-color)' }}
                                 >
                                     Esqueceu a senha?
                                 </Link>
@@ -251,7 +286,7 @@ export default function LoginPage() {
                                     <a
                                         href="http://dash.localhost/cadastro"
                                         className="font-medium hover:opacity-80 transition-opacity"
-                                        style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+                                        style={{ color: 'var(--brand-color)' }}
                                     >
                                         Cadastre sua agência
                                     </a>
@@ -262,7 +297,7 @@ export default function LoginPage() {
                 </div>
 
                 {/* Lado Direito - Branding */}
-                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
+                <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--brand-color)' }}>
                     <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">
@@ -276,22 +311,22 @@ export default function LoginPage() {
                             </p>
                             <div className="grid grid-cols-2 gap-6 text-left">
                                 <div>
-                                    <i className="ri-shield-check-line text-3xl mb-2"></i>
+                                    <ShieldCheckIcon className="w-8 h-8 mb-2" />
                                     <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>
+                                    <BoltIcon className="w-8 h-8 mb-2" />
                                     <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>
+                                    <UserGroupIcon className="w-8 h-8 mb-2" />
                                     <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>
+                                    <ChartBarIcon className="w-8 h-8 mb-2" />
                                     <h3 className="font-semibold mb-1">Insights</h3>
                                     <p className="text-sm opacity-80">Relatórios detalhados</p>
                                 </div>

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;

front-end-agency/components/DynamicFavicon.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface DynamicFaviconProps {
     logoUrl?: string;
 }
 
 export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
-    useEffect(() => {
+    const [mounted, setMounted] = useState(false);
-        if (!logoUrl) return;
 
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted || !logoUrl) return;
+
+        // 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());
@@ -26,8 +34,9 @@ export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
             appleLink.rel = 'apple-touch-icon';
             appleLink.href = logoUrl;
             document.getElementsByTagName('head')[0].appendChild(appleLink);
+        });
 
-    }, [logoUrl]);
+    }, [mounted, logoUrl]);
 
     return null;
 }

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<boolean | null>(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 (
+            <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-zinc-950">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-purple-600" />
+            </div>
+        );
+    }
 
-    // Enquanto verifica, não renderiza nada ou um loading
-    // Para evitar "flash" de conteúdo não autorizado
     if (!authorized) {
-        return null;
+        return (
+            <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-zinc-950">
+                <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-purple-600" />
+            </div>
+        );
     }
 
     return <>{children}</>;

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;
+}

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<string>('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 (
+        <div style={{
+            position: 'fixed',
+            bottom: '10px',
+            left: '10px',
+            background: 'rgba(0,0,0,0.8)',
+            color: 'white',
+            padding: '5px 10px',
+            borderRadius: '4px',
+            fontSize: '10px',
+            zIndex: 9999,
+            pointerEvents: 'none'
+        }}>
+            DEBUG: {debugInfo}
+        </div>
+    );
+}

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<DashboardLayoutProps> = ({ children, menuItems }) => {
     // Estado centralizado do layout
     const [isExpanded, setIsExpanded] = useState(true);
-    const [activeTab, setActiveTab] = useState('dashboard');
+    const pathname = usePathname();
 
     return (
         <div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
             {/* Sidebar controla seu próprio estado visual via props */}
             <SidebarRail
-                activeTab={activeTab}
-                onTabChange={setActiveTab}
                 isExpanded={isExpanded}
                 onToggle={() => setIsExpanded(!isExpanded)}
                 menuItems={menuItems}
@@ -32,8 +31,10 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menu
 
                 {/* Conteúdo das páginas */}
                 <div className="flex-1 overflow-auto">
+                    <div className="max-w-7xl mx-auto w-full h-full">
                         {children}
                     </div>
+                </div>
             </main>
         </div>
     );

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;
+}

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 { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
-import { Fragment } from '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<SidebarRailProps> = ({
-    activeTab,
-    onTabChange,
     isExpanded,
     onToggle,
     menuItems,
@@ -48,12 +45,93 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
     const router = useRouter();
     const { theme, setTheme } = useTheme();
     const [mounted, setMounted] = useState(false);
+    const [user, setUser] = useState<User | null>(null);
     const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
+    const sidebarRef = useRef<HTMLDivElement>(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<SidebarRailProps> = ({
     const handleLogout = () => {
         localStorage.removeItem('token');
         localStorage.removeItem('user');
-        router.push('/login');
+        window.location.href = '/login';
     };
 
     const toggleTheme = () => {
@@ -79,16 +157,25 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
     // 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 (
-        <div className="flex h-full relative z-20">
+        <div className={`flex h-full relative z-20 transition-all duration-300 ${openSubmenu ? 'shadow-xl' : 'shadow-lg'} rounded-2xl`} ref={sidebarRef}>
+            {/* Rail Principal (Ícones + Labels Opcionais) */}
             <div
                 className={`
-        relative h-full bg-white dark:bg-zinc-900 rounded-2xl flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 shadow-lg z-20
+                    relative h-full bg-white dark:bg-zinc-900 flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 z-30
-        transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
+                    transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-gray-100 dark:border-zinc-800
-        ${isExpanded ? 'w-[240px]' : 'w-[80px]'}
+                    ${railWidth}
+                    ${openSubmenu ? 'rounded-l-2xl rounded-r-none border-r-0' : 'rounded-2xl'}
                 `}
             >
                 {/* Toggle Button - Floating on the border */}
+                {/* Só mostra o toggle se não tiver submenu aberto, para evitar confusão */}
+                {!openSubmenu && (
                     <button
                         onClick={onToggle}
                         className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
@@ -100,25 +187,29 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                             <ChevronRightIcon className="w-3 h-3" />
                         )}
                     </button>
+                )}
 
                 {/* Header com Logo */}
-                <div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
+                <div className={`flex items-center w-full mb-6 ${showLabels ? 'justify-start px-1' : 'justify-center'}`}>
-                    {/* Logo */}
                     <div
-                        className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
+                        className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg overflow-hidden bg-brand-500"
-                        style={{ background: 'var(--gradient)' }}
                     >
-                        A
+                        {user?.logoUrl ? (
+                            <img src={user.logoUrl} alt={user.company || 'Logo'} className="w-full h-full object-cover" />
+                        ) : (
+                            (user?.company?.[0] || 'A').toUpperCase()
+                        )}
                     </div>
-
                     {/* Título com animação */}
-                    <div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${isExpanded ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
+                    <div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${showLabels ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
-                        <span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
+                        <span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">
+                            {user?.company || 'Aggios'}
+                        </span>
                     </div>
                 </div>
 
                 {/* Navegação */}
-                <div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
+                <div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto items-center">
                     {menuItems.map((item) => (
                         <RailButton
                             key={item.id}
@@ -126,73 +217,71 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                             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}
                         />
                     ))}
                 </div>
 
-                {/* Separador antes do menu de usuário */}
+                {/* Separador */}
-                <div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
+                <div className="h-px bg-gray-200 dark:bg-zinc-800 my-2 w-full" />
 
-                {/* User Menu - Footer */}
+                {/* User Menu */}
-                <div>
+                <div className={`flex ${showLabels ? 'justify-start' : 'justify-center'}`}>
-                    <Menu as="div" className="relative">
+                    {mounted && (
-                        <Menu.Button className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${isExpanded ? '' : 'justify-center'}`}>
+                        <Menu>
-                            <UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
+                            <MenuButton className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${showLabels ? '' : 'justify-center'}`}>
-                            <div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
+                                <UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
-                                <span className="font-medium text-xs text-gray-900 dark:text-white">Agência</span>
+                                <div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${showLabels ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
+                                    <span className="font-medium text-xs text-gray-900 dark:text-white">
+                                        {user?.name || 'Usuário'}
+                                    </span>
                                 </div>
-                        </Menu.Button>
+                            </MenuButton>
-
+                            <MenuItems
-                        <Transition
+                                anchor="top start"
-                            as={Fragment}
+                                transition
-                            enter="transition ease-out duration-100"
+                                className={`w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50 transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0`}
-                            enterFrom="transform opacity-0 scale-95"
-                            enterTo="transform opacity-100 scale-100"
-                            leave="transition ease-in duration-75"
-                            leaveFrom="transform opacity-100 scale-100"
-                            leaveTo="transform opacity-0 scale-95"
                             >
-                            <Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
                                 <div className="p-1">
-                                    <Menu.Item>
+                                    <MenuItem>
-                                        {({ active }) => (
                                         <button
-                                                className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
+                                            className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
                                         >
                                             <UserCircleIcon className="mr-2 h-4 w-4" />
                                             Ver meu perfil
                                         </button>
-                                        )}
+                                    </MenuItem>
-                                    </Menu.Item>
+                                    <MenuItem>
-                                    <Menu.Item>
-                                        {({ active }) => (
-                                            <Link
-                                                href="/configuracoes"
-                                                className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
-                                            >
-                                                <Cog6ToothIcon className="mr-2 h-4 w-4" />
-                                                Configurações
-                                            </Link>
-                                        )}
-                                    </Menu.Item>
-                                    <Menu.Item>
-                                        {({ active }) => (
                                         <button
                                             onClick={toggleTheme}
-                                                className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
+                                            className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
                                         >
-                                                {mounted && theme === 'dark' ? (
+                                            {theme === 'dark' ? (
                                                 <>
                                                     <SunIcon className="mr-2 h-4 w-4" />
                                                     Tema Claro
@@ -204,39 +293,41 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                                                 </>
                                             )}
                                         </button>
-                                        )}
+                                    </MenuItem>
-                                    </Menu.Item>
                                     <div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
-                                    <Menu.Item>
+                                    <MenuItem>
-                                        {({ active }) => (
                                         <button
                                             onClick={handleLogout}
-                                                className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
+                                            className="data-[focus]:bg-red-50 dark:data-[focus]:bg-red-900/20 text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
                                         >
                                             <ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
                                             Sair
                                         </button>
-                                        )}
+                                    </MenuItem>
-                                    </Menu.Item>
                                 </div>
-                            </Menu.Items>
+                            </MenuItems>
-                        </Transition>
                         </Menu>
+                    )}
+                    {!mounted && (
+                        <div className={`w-full p-2 rounded-lg flex items-center ${showLabels ? '' : 'justify-center'}`}>
+                            <UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
+                        </div>
+                    )}
                 </div>
             </div>
 
-            {/* Submenu Flyout Panel */}
+            {/* Painel Secundário (Drawer) - Abre ao lado do Rail */}
             <div
                 className={`
-                    absolute top-0 bottom-0 left-[calc(100%+12px)] w-64
+                    h-full
-                    bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-100 dark:border-zinc-800
+                    bg-white dark:bg-zinc-900 rounded-r-2xl border-y border-r border-l border-gray-100 dark:border-zinc-800
-                    transition-all duration-300 ease-in-out origin-left z-10 flex flex-col overflow-hidden
+                    transition-all duration-300 ease-in-out origin-left z-20 flex flex-col overflow-hidden
-                    ${openSubmenu ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4 pointer-events-none'}
+                    ${openSubmenu ? 'w-64 opacity-100 translate-x-0' : 'w-0 opacity-0 -translate-x-10 border-none'}
                 `}
             >
                 {activeMenuItem && (
                     <>
-                        <div className="p-4 border-b border-gray-100 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-800/50 flex items-center justify-between">
+                        <div className="p-4 border-b border-gray-100 dark:border-zinc-800 flex items-center justify-between">
                             <h3 className="font-heading font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                                 <activeMenuItem.icon className="w-5 h-5 text-brand-500" />
                                 {activeMenuItem.label}
@@ -254,7 +345,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
                                 <Link
                                     key={sub.href}
                                     href={sub.href}
-                                    onClick={() => setOpenSubmenu(null)} // Fecha ao clicar
+                                    // onClick={() => setOpenSubmenu(null)} // Removido para manter fixo
                                     className={`
                                         flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors mb-1
                                         ${pathname === sub.href
@@ -281,25 +372,31 @@ interface RailButtonProps {
     icon: React.ComponentType<{ className?: string }>;
     href: string;
     active: boolean;
-    onClick: () => void;
+    onClick: (e?: any) => void;
-    isExpanded: boolean;
+    showLabel: boolean;
     hasSubItems?: boolean;
     isOpen?: boolean;
 }
 
-const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded, hasSubItems, isOpen }) => {
+const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, showLabel, hasSubItems, isOpen }) => {
-    const Wrapper = hasSubItems ? 'button' : Link;
-    const props = hasSubItems ? { onClick, type: 'button' } : { href, onClick };
-
     // Determine styling based on state
-    let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden w-full ";
+    // Sempre usa Link se tiver href, para garantir navegação correta e prefetching
+    const Wrapper = href ? Link : 'button';
+    // Desabilitar prefetch para evitar sobrecarga no middleware/backend e loops de redirecionamento
+    const props = href ? { href, onClick, prefetch: false } : { onClick, type: 'button' };
 
-    if (active && !hasSubItems) {
+    let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden ";
-        // Active leaf item (Dashboard, etc)
+    if (showLabel) {
-        baseClasses += "text-white shadow-md";
+        baseClasses += "w-full justify-start ";
-    } else if (isOpen) {
+    } else {
-        // Open submenu parent - Highlight to show active state
+        baseClasses += "w-10 h-10 justify-center mx-auto ";
-        baseClasses += "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white";
+    }
+
+    // Lógica unificada de ativo
+    const isActiveItem = active || isOpen;
+
+    if (isActiveItem) {
+        baseClasses += "bg-brand-500 text-white shadow-sm";
     } else {
         // Inactive item
         baseClasses += "hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400";
@@ -308,29 +405,26 @@ const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active
     return (
         <Wrapper
             {...props as any}
-            style={{ background: active && !hasSubItems ? 'var(--gradient)' : undefined }}
+            className={baseClasses}
-            className={`${baseClasses} ${isExpanded ? '' : 'justify-center'}`}
+            title={!showLabel ? label : undefined} // Tooltip nativo apenas se recolhido
         >
             {/* Ícone */}
-            <Icon className={`shrink-0 w-4 h-4 ${isOpen ? 'text-brand-500' : ''}`} />
+            <Icon className={`shrink-0 w-5 h-5 ${isActiveItem ? 'text-white' : ''}`} />
 
-            {/* Lógica Mágica do Texto: Max-Width Transition */}
+            {/* Texto (Visível apenas se expandido) */}
             <div className={`
                 overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
-      ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}
+                ${showLabel ? 'max-w-[150px] opacity-100 ml-3' : 'max-w-0 opacity-0 ml-0'}
             `}>
                 <span className="font-medium text-xs flex-1 text-left">{label}</span>
                 {hasSubItems && (
-                    <ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isOpen ? 'text-brand-500' : 'text-gray-400'}`} />
+                    <ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isActiveItem ? 'text-white' : 'text-gray-400'}`} />
                 )}
             </div>
 
-            {/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
+            {/* Indicador de Ativo (Ponto lateral) - Apenas se recolhido e NÃO tiver gradiente (redundante agora, mas mantido por segurança) */}
-            {active && !isExpanded && !hasSubItems && (
+            {active && !hasSubItems && !showLabel && !isActiveItem && (
-                <div
+                <div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-4 bg-white rounded-r-full" />
-                    className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
-                    style={{ background: 'var(--gradient)' }}
-                />
             )}
         </Wrapper>
     );

front-end-agency/components/layout/TopBar.tsx

@@ -3,20 +3,18 @@
 import React, { useState } from 'react';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
-import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon, BellIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
 import CommandPalette from '@/components/ui/CommandPalette';
 
 export const TopBar: React.FC = () => {
     const pathname = usePathname();
     const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
 
-    // Gerar breadcrumbs a partir do pathname
     const generateBreadcrumbs = () => {
         const paths = pathname?.split('/').filter(Boolean) || [];
         const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
             { name: 'Home', href: '/dashboard', icon: HomeIcon }
         ];
-
         let currentPath = '';
         paths.forEach((path, index) => {
             currentPath += `/${path}`;
@@ -82,19 +80,30 @@ export const TopBar: React.FC = () => {
                 <div className="flex items-center gap-4">
                     <button
                         onClick={() => setIsCommandPaletteOpen(true)}
-                        className="group relative flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-all w-64"
+                        className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 dark:text-zinc-400 bg-gray-100 dark:bg-zinc-800 rounded-lg hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors"
                     >
-                        <MagnifyingGlassIcon className="w-4 h-4 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300" />
+                        <MagnifyingGlassIcon className="w-4 h-4" />
-                        <span>Pesquisar...</span>
+                        <span className="hidden sm:inline">Buscar...</span>
-                        <div className="ml-auto flex items-center gap-1">
+                        <kbd className="hidden sm:inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 bg-white dark:bg-zinc-900 rounded border border-gray-200 dark:border-zinc-700">
-                            <kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
                             Ctrl K
                         </kbd>
-                        </div>
                     </button>
+                    <div className="flex items-center gap-2 border-l border-gray-200 dark:border-zinc-800 pl-4">
+                        <button className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors relative">
+                            <BellIcon className="w-5 h-5" />
+                            <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-zinc-900"></span>
+                        </button>
+                        <Link
+                            href="/configuracoes"
+                            className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                        >
+                            <Cog6ToothIcon className="w-5 h-5" />
+                        </Link>
+                    </div>
                 </div>
             </div>
 
+            {/* Command Palette */}
             <CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
         </>
     );

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

@@ -29,30 +29,48 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             "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",
+            primary: "bg-brand-500 text-white hover:opacity-90 active:opacity-80 shadow-sm hover:shadow-md transition-all",
             secondary:
-                "bg-[#E5E5E5] dark:bg-gray-700 text-[#000000] dark:text-white hover:opacity-90 active:opacity-80",
+                "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600",
             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",
+                "border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 active:bg-gray-100 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",
+            ghost: "text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700",
         };
 
         const sizes = {
-            sm: "h-9 px-3 text-[13px]",
+            sm: "h-8 px-3 text-xs",
-            md: "h-10 px-4 text-[14px]",
+            md: "h-10 px-4 text-sm",
-            lg: "h-12 px-6 text-[14px]",
+            lg: "h-12 px-6 text-base",
         };
 
         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]" />
+                    <svg
+                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                    >
+                        <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                        ></circle>
+                        <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                    </svg>
                 )}
                 {!isLoading && leftIcon && (
                     <i className={`${leftIcon} mr-2 text-[20px]`} />

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { Fragment, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
-import { Combobox, Dialog, Transition } from '@headlessui/react';
+import { Combobox, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useRouter } from 'next/navigation';
 import {
@@ -84,31 +84,17 @@ export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProp
     };
 
     return (
-        <Transition.Root show={isOpen} as={Fragment} afterLeave={() => setQuery('')}>
+        <Dialog open={isOpen} onClose={setIsOpen} className="relative z-50" initialFocus={inputRef}>
-            <Dialog as="div" className="relative z-50" onClose={setIsOpen} initialFocus={inputRef}>
+            <DialogBackdrop
-                <Transition.Child
+                transition
-                    as={Fragment}
+                className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity duration-300 data-[closed]:opacity-0"
-                    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-zinc-900/40 backdrop-blur-sm transition-opacity" />
-                </Transition.Child>
 
             <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
-                    <Transition.Child
+                <DialogPanel
-                        as={Fragment}
+                    transition
-                        enter="ease-out duration-300"
+                    className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all duration-300 data-[closed]:opacity-0 data-[closed]:scale-95"
-                        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"
                 >
-                        <Dialog.Panel className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all">
                     <Combobox onChange={handleSelect}>
                         <div className="relative">
                             <MagnifyingGlassIcon
@@ -197,10 +183,8 @@ export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProp
                             </div>
                         </div>
                     </Combobox>
-                        </Dialog.Panel>
+                </DialogPanel>
-                    </Transition.Child>
             </div>
         </Dialog>
-        </Transition.Root>
     );
 }

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

@@ -1,13 +1,14 @@
 "use client";
 
-import { InputHTMLAttributes, forwardRef, useState } from "react";
+import { InputHTMLAttributes, forwardRef, useState, ReactNode } from "react";
+import { EyeIcon, EyeSlashIcon, ExclamationCircleIcon } from "@heroicons/react/24/outline";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     error?: string;
     helperText?: string;
-    leftIcon?: string;
+    leftIcon?: ReactNode;
-    rightIcon?: string;
+    rightIcon?: ReactNode;
     onRightIconClick?: () => void;
 }
 
@@ -41,26 +42,26 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                 )}
                 <div className="relative">
                     {leftIcon && (
-                        <i
+                        <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 w-5 h-5">
-                            className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 text-[20px]`}
+                            {leftIcon}
-                        />
+                        </div>
                     )}
                     <input
                         ref={ref}
                         type={inputType}
                         className={`
-              w-full px-3.5 py-3 text-[14px] font-normal
+              w-full px-4 py-2.5 text-sm font-normal
-              border rounded-md bg-white dark:bg-gray-700 dark:text-white
+              border rounded-lg bg-white dark:bg-gray-800 dark:text-white
-              placeholder:text-zinc-500 dark:placeholder:text-gray-400
+              placeholder:text-gray-400 dark:placeholder:text-gray-500
-              transition-all
+              transition-all duration-200
               ${leftIcon ? "pl-11" : ""}
               ${isPassword || rightIcon ? "pr-11" : ""}
               ${error
-                                ? "border-red-500 focus:border-red-500"
+                                ? "border-red-500 focus:border-red-500 focus:ring-4 focus:ring-red-500/10"
-                                : "border-zinc-200 dark:border-gray-600 focus:border-brand-500"
+                                : "border-gray-200 dark:border-gray-700 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10"
                             }
-              outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
+              outline-none
-              disabled:bg-zinc-100 disabled:cursor-not-allowed
+              disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed
               ${className}
             `}
                         {...props}
@@ -71,9 +72,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                             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
+                            {showPassword ? (
-                                className={`${showPassword ? "ri-eye-off-line" : "ri-eye-line"} text-[20px]`}
+                                <EyeSlashIcon className="w-5 h-5" />
-                            />
+                            ) : (
+                                <EyeIcon className="w-5 h-5" />
+                            )}
                         </button>
                     )}
                     {!isPassword && rightIcon && (
@@ -82,13 +85,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                             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]`} />
+                            <div className="w-5 h-5">{rightIcon}</div>
                         </button>
                     )}
                 </div>
                 {error && (
                     <p className="mt-1 text-[13px] text-red-500 flex items-center gap-1">
-                        <i className="ri-error-warning-line" />
+                        <ExclamationCircleIcon className="w-4 h-4" />
                         {error}
                     </p>
                 )}

front-end-agency/lib/api.ts

@@ -2,8 +2,9 @@
  * API Configuration - URLs e funções de requisição
  */
 
-// URL base da API - pode ser alterada por variável de ambiente
+// URL base da API - usa path relativo para passar pelo middleware do Next.js
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://api.localhost';
+// que adiciona os headers de tenant (X-Tenant-Subdomain)
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || '';
 
 /**
  * Endpoints da API
@@ -18,6 +19,8 @@ export const API_ENDPOINTS = {
 
     // Admin / Agencies
     adminAgencyRegister: `${API_BASE_URL}/api/admin/agencies/register`,
+    agencyProfile: `${API_BASE_URL}/api/agency/profile`,
+    tenantConfig: `${API_BASE_URL}/api/tenant/config`,
 
     // Health
     health: `${API_BASE_URL}/health`,

front-end-agency/lib/auth.ts

@@ -10,6 +10,7 @@ export interface User {
     tenantId?: string;
     company?: string;
     subdomain?: string;
+    logoUrl?: string;
 }
 
 const TOKEN_KEY = 'token';

front-end-agency/lib/colors.ts

@@ -0,0 +1,183 @@
+/**
+ * Utilitários para manipulação de cores e garantia de acessibilidade
+ */
+
+/**
+ * Converte hex para RGB
+ */
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+
+/**
+ * Converte RGB para hex
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+    return '#' + [r, g, b].map((x) => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }).join('');
+}
+
+/**
+ * Calcula luminosidade relativa (0-1) - WCAG 2.0
+ */
+export function getLuminance(hex: string): number {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return 0;
+
+    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((val) => {
+        const v = val / 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Calcula contraste entre duas cores (1-21) - WCAG 2.0
+ */
+export function getContrast(color1: string, color2: string): number {
+    const lum1 = getLuminance(color1);
+    const lum2 = getLuminance(color2);
+    const lighter = Math.max(lum1, lum2);
+    const darker = Math.min(lum1, lum2);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+
+/**
+ * Verifica se a cor é clara (luminosidade > 0.5)
+ */
+export function isLight(hex: string): boolean {
+    return getLuminance(hex) > 0.5;
+}
+
+/**
+ * Escurece uma cor em uma porcentagem
+ */
+export function darken(hex: string, amount: number): string {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return hex;
+
+    const factor = 1 - amount;
+    return rgbToHex(
+        rgb.r * factor,
+        rgb.g * factor,
+        rgb.b * factor
+    );
+}
+
+/**
+ * Clareia uma cor em uma porcentagem
+ */
+export function lighten(hex: string, amount: number): string {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return hex;
+
+    const factor = amount;
+    return rgbToHex(
+        rgb.r + (255 - rgb.r) * factor,
+        rgb.g + (255 - rgb.g) * factor,
+        rgb.b + (255 - rgb.b) * factor
+    );
+}
+
+/**
+ * Gera cor de hover automática baseada na luminosidade
+ * Se a cor for clara, escurece 15%
+ * Se a cor for escura, clareia 15%
+ */
+export function generateHoverColor(hex: string): string {
+    return isLight(hex) ? darken(hex, 0.15) : lighten(hex, 0.15);
+}
+
+/**
+ * Determina se deve usar texto branco ou preto sobre uma cor de fundo
+ * Prioriza branco para cores vibrantes/saturadas
+ */
+export function getTextColor(backgroundColor: string): string {
+    const contrastWithWhite = getContrast(backgroundColor, '#FFFFFF');
+    const contrastWithBlack = getContrast(backgroundColor, '#000000');
+
+    // Se o contraste com branco for >= 3.5, prefere branco (mais comum em UIs modernas)
+    // WCAG AA requer 4.5:1, mas 3:1 para textos grandes
+    if (contrastWithWhite >= 3.5) {
+        return '#FFFFFF';
+    }
+
+    // Se não, usa a cor com melhor contraste
+    return contrastWithWhite > contrastWithBlack ? '#FFFFFF' : '#000000';
+}
+
+/**
+ * Gera paleta completa de cores com hover e variações
+ */
+export function generateColorPalette(primaryHex: string, secondaryHex: string) {
+    const primaryRgb = hexToRgb(primaryHex);
+    const secondaryRgb = hexToRgb(secondaryHex);
+
+    if (!primaryRgb || !secondaryRgb) {
+        throw new Error('Cores inválidas');
+    }
+
+    const primaryHover = generateHoverColor(primaryHex);
+    const secondaryHover = generateHoverColor(secondaryHex);
+
+    const primaryRgbString = `${primaryRgb.r} ${primaryRgb.g} ${primaryRgb.b}`;
+    const secondaryRgbString = `${secondaryRgb.r} ${secondaryRgb.g} ${secondaryRgb.b}`;
+    const hoverRgb = hexToRgb(primaryHover);
+    const hoverRgbString = hoverRgb ? `${hoverRgb.r} ${hoverRgb.g} ${hoverRgb.b}` : secondaryRgbString;
+
+    return {
+        primary: primaryHex,
+        secondary: secondaryHex,
+        primaryHover,
+        secondaryHover,
+        primaryRgb: primaryRgbString,
+        secondaryRgb: secondaryRgbString,
+        hoverRgb: hoverRgbString,
+        gradient: `linear-gradient(135deg, ${primaryHex}, ${secondaryHex})`,
+        textOnPrimary: getTextColor(primaryHex),
+        textOnSecondary: getTextColor(secondaryHex),
+        isLightPrimary: isLight(primaryHex),
+        isLightSecondary: isLight(secondaryHex),
+        contrast: getContrast(primaryHex, secondaryHex),
+    };
+}
+
+/**
+ * Valida se as cores têm contraste suficiente
+ */
+export function validateColorContrast(primary: string, secondary: string): {
+    valid: boolean;
+    warnings: string[];
+} {
+    const warnings: string[] = [];
+    const contrast = getContrast(primary, secondary);
+
+    if (contrast < 3) {
+        warnings.push('As cores são muito similares e podem causar problemas de legibilidade');
+    }
+
+    const primaryContrast = getContrast(primary, '#FFFFFF');
+    if (primaryContrast < 4.5 && !isLight(primary)) {
+        warnings.push('A cor primária pode ter baixo contraste com texto branco');
+    }
+
+    const secondaryContrast = getContrast(secondary, '#FFFFFF');
+    if (secondaryContrast < 4.5 && !isLight(secondary)) {
+        warnings.push('A cor secundária pode ter baixo contraste com texto branco');
+    }
+
+    return {
+        valid: warnings.length === 0,
+        warnings,
+    };
+}

front-end-agency/lib/server-api.ts

@@ -0,0 +1,79 @@
+/**
+ * Server-side API functions
+ * Estas funções são executadas APENAS no servidor (não no cliente)
+ */
+
+import { cookies, headers } from 'next/headers';
+
+const API_BASE_URL = process.env.API_INTERNAL_URL || 'http://backend:8080';
+
+interface AgencyBrandingData {
+    logo_url?: string;
+    primary_color?: string;
+    secondary_color?: string;
+    name?: string;
+}
+
+/**
+ * Busca os dados de branding da agência no servidor
+ * Usa o subdomínio do request para identificar a agência
+ */
+export async function getAgencyBranding(): Promise<AgencyBrandingData | null> {
+    try {
+        // Pegar o hostname do request
+        const headersList = await headers();
+        const hostname = headersList.get('host') || '';
+        const subdomain = hostname.split('.')[0];
+
+        if (!subdomain || subdomain === 'localhost' || subdomain === 'www') {
+            return null;
+        }
+
+        // Buscar dados da agência pela API
+        const url = `${API_BASE_URL}/api/tenant/config?subdomain=${subdomain}`;
+        console.log(`[ServerAPI] Fetching agency config from: ${url}`);
+
+        const response = await fetch(url, {
+            cache: 'no-store', // Sempre buscar dados atualizados
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            console.error(`[ServerAPI] Failed to fetch agency branding for ${subdomain}: ${response.status}`);
+            return null;
+        }
+
+        const data = await response.json();
+        console.log(`[ServerAPI] Agency branding data for ${subdomain}:`, JSON.stringify(data));
+        return data as AgencyBrandingData;
+    } catch (error) {
+        console.error('[ServerAPI] Error fetching agency branding:', error);
+        return null;
+    }
+}
+
+/**
+ * Busca apenas o logo da agência (para metadata)
+ */
+export async function getAgencyLogo(): Promise<string | null> {
+    const branding = await getAgencyBranding();
+    return branding?.logo_url || null;
+}
+
+/**
+ * Busca as cores da agência (para passar ao client component)
+ */
+export async function getAgencyColors(): Promise<{ primary: string; secondary: string } | null> {
+    const branding = await getAgencyBranding();
+
+    if (branding?.primary_color && branding?.secondary_color) {
+        return {
+            primary: branding.primary_color,
+            secondary: branding.secondary_color,
+        };
+    }
+
+    return null;
+}

front-end-agency/middleware.ts

@@ -13,23 +13,51 @@ export async function middleware(request: NextRequest) {
     // Validar subdomínio de agência ({subdomain}.localhost)
     if (hostname.includes('.')) {
         try {
-            const res = await fetch(`${apiBase}/api/tenant/check?subdomain=${subdomain}`);
+            const res = await fetch(`${apiBase}/api/tenant/check?subdomain=${subdomain}`, {
+                cache: 'no-store',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+
             if (!res.ok) {
+                console.error(`Tenant check failed for ${subdomain}: ${res.status}`);
+                // Se for 404, realmente não existe. Se for 500, pode ser erro temporário.
+                // Por segurança, vamos redirecionar apenas se tivermos certeza que falhou a validação (ex: 404)
+                // ou se o backend estiver inalcançável de forma persistente.
+                // Para evitar loops durante desenvolvimento, vamos permitir passar se for erro de servidor (5xx)
+                // mas redirecionar se for 404.
+
+                if (res.status === 404) {
                     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;
+            console.error('Middleware error:', err);
-            const redirectUrl = new URL(url.toString());
+            // Em caso de erro de rede (backend fora do ar), permitir carregar a página
-            redirectUrl.hostname = baseHost;
+            // para não travar o frontend completamente (pode mostrar erro na tela depois)
-            redirectUrl.pathname = '/';
+            // return NextResponse.next();
-            return NextResponse.redirect(redirectUrl);
         }
     }
 
+    // Para requisições de API, adicionar headers com informações do tenant
+    if (url.pathname.startsWith('/api/')) {
+        // Cria um header customizado com o subdomain
+        const requestHeaders = new Headers(request.headers);
+        requestHeaders.set('X-Tenant-Subdomain', subdomain);
+        requestHeaders.set('X-Original-Host', hostname);
+
+        return NextResponse.rewrite(url, {
+            request: {
+                headers: requestHeaders,
+            },
+        });
+    }
+
     // Permitir acesso normal
     return NextResponse.next();
 }
@@ -38,11 +66,10 @@ 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).*)',
+        '/((?!_next/static|_next/image|favicon.ico).*)',
     ],
 };

front-end-agency/next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  reactStrictMode: false, // Desabilitar StrictMode para evitar double render que causa removeChild
   experimental: {
     externalDir: true,
   },
@@ -23,6 +24,10 @@ const nextConfig: NextConfig = {
             key: "X-Forwarded-For",
             value: "127.0.0.1",
           },
+          {
+            key: "X-Forwarded-Host",
+            value: "${host}",
+          },
         ],
       },
     ];

front-end-agency/tailwind.preset.js

@@ -10,17 +10,18 @@ module.exports = {
             },
             colors: {
                 brand: {
-                    50: '#fff4ef',
+                    50: 'rgb(var(--brand-rgb) / 0.05)',
-                    100: '#ffe8df',
+                    100: 'rgb(var(--brand-rgb) / 0.1)',
-                    200: '#ffd0c0',
+                    200: 'rgb(var(--brand-rgb) / 0.2)',
-                    300: '#ffb093',
+                    300: 'rgb(var(--brand-rgb) / 0.4)',
-                    400: '#ff8a66',
+                    400: 'rgb(var(--brand-rgb) / 0.8)',
-                    500: '#ff3a05',
+                    500: 'rgb(var(--brand-rgb) / <alpha-value>)',
-                    600: '#ff1f45',
+                    600: 'rgb(var(--brand-strong-rgb) / <alpha-value>)',
-                    700: '#ff0080',
+                    700: 'rgb(var(--brand-strong-rgb) / 0.8)',
-                    800: '#d10069',
+                    800: 'rgb(var(--brand-strong-rgb) / 0.6)',
-                    900: '#9e0050',
+                    900: 'rgb(var(--brand-strong-rgb) / 0.4)',
-                    950: '#4b0028',
+                    950: 'rgb(var(--brand-strong-rgb) / 0.2)',
+                    hover: 'rgb(var(--brand-hover-rgb) / <alpha-value>)',
                 },
                 surface: {
                     light: '#ffffff',