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
This commit is contained in:
Erik Silva
130
front-end-agency/app/(agency)/AgencyLayoutClient.tsx
Normal file
130
front-end-agency/app/(agency)/AgencyLayoutClient.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
Nome da Agência
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Nome da Agência"
|
||||
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">
|
||||
Razão Social
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Razão Social"
|
||||
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">
|
||||
<span>CNPJ</span>
|
||||
<span className="text-xs text-gray-500">Alteração via suporte</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="CNPJ"
|
||||
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">
|
||||
<span>E-mail (acesso)</span>
|
||||
<span className="text-xs text-gray-500">Alteração via suporte</span>
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
label="E-mail (acesso)"
|
||||
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">
|
||||
Telefone / WhatsApp
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
label="Telefone / WhatsApp"
|
||||
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">
|
||||
Website
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
label="Website"
|
||||
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">
|
||||
Segmento / Indústria
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Segmento / Indústria"
|
||||
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">
|
||||
Tamanho da Equipe
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Tamanho da Equipe"
|
||||
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">
|
||||
CEP
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="CEP"
|
||||
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">
|
||||
Estado
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Estado"
|
||||
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>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Cidade
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
label="Cidade"
|
||||
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">
|
||||
Bairro
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Bairro"
|
||||
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">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Rua/Avenida
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<Input
|
||||
label="Rua/Avenida"
|
||||
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"
|
||||
/>
|
||||
</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"
|
||||
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">
|
||||
Complemento (opcional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
<Input
|
||||
label="Número"
|
||||
value={agencyData.number}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, number: e.target.value })}
|
||||
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"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
variant="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">
|
||||
Senha Atual
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
label="Senha Atual"
|
||||
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">
|
||||
Nova Senha
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
label="Nova Senha"
|
||||
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">
|
||||
Confirmar Nova Senha
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
label="Confirmar Nova Senha"
|
||||
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"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
variant="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"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
variant="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>
|
||||
|
||||
@@ -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,14 +106,25 @@ export default function DashboardPage() {
|
||||
return (
|
||||
<div className="p-6 h-full overflow-auto">
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Visão Geral da Agência
|
||||
</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
|
||||
</p>
|
||||
{/* Header Personalizado */}
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-heading font-bold text-gray-900 dark:text-white">
|
||||
{greeting}, {userName || 'Administrador'}! 👋
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
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 */}
|
||||
|
||||
@@ -1,125 +1,34 @@
|
||||
"use client";
|
||||
import { Metadata } from 'next';
|
||||
import { getAgencyLogo, getAgencyColors } from '@/lib/server-api';
|
||||
import { AgencyLayoutClient } from './AgencyLayoutClient';
|
||||
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout';
|
||||
import {
|
||||
HomeIcon,
|
||||
RocketLaunchIcon,
|
||||
ChartBarIcon,
|
||||
BriefcaseIcon,
|
||||
LifebuoyIcon,
|
||||
CreditCardIcon,
|
||||
DocumentTextIcon,
|
||||
FolderIcon,
|
||||
ShareIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
// Forçar renderização dinâmica (não estática) para este layout
|
||||
// Necessário porque usamos headers() para pegar o subdomínio
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
const AGENCY_MENU_ITEMS = [
|
||||
{ id: 'dashboard', label: 'Visão Geral', href: '/dashboard', icon: HomeIcon },
|
||||
{
|
||||
id: 'crm',
|
||||
label: 'CRM',
|
||||
href: '/crm',
|
||||
icon: RocketLaunchIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/crm' },
|
||||
{ label: 'Clientes', href: '/crm/clientes' },
|
||||
{ label: 'Funis', href: '/crm/funis' },
|
||||
{ label: 'Negociações', href: '/crm/negociacoes' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'erp',
|
||||
label: 'ERP',
|
||||
href: '/erp',
|
||||
icon: ChartBarIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/erp' },
|
||||
{ label: 'Fluxo de Caixa', href: '/erp/fluxo-caixa' },
|
||||
{ label: 'Contas a Pagar', href: '/erp/contas-pagar' },
|
||||
{ label: 'Contas a Receber', href: '/erp/contas-receber' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'projetos',
|
||||
label: 'Projetos',
|
||||
href: '/projetos',
|
||||
icon: BriefcaseIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/projetos' },
|
||||
{ label: 'Meus Projetos', href: '/projetos/lista' },
|
||||
{ label: 'Tarefas', href: '/projetos/tarefas' },
|
||||
{ label: 'Cronograma', href: '/projetos/cronograma' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'helpdesk',
|
||||
label: 'Helpdesk',
|
||||
href: '/helpdesk',
|
||||
icon: LifebuoyIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/helpdesk' },
|
||||
{ label: 'Chamados', href: '/helpdesk/chamados' },
|
||||
{ label: 'Base de Conhecimento', href: '/helpdesk/kb' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'pagamentos',
|
||||
label: 'Pagamentos',
|
||||
href: '/pagamentos',
|
||||
icon: CreditCardIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/pagamentos' },
|
||||
{ label: 'Cobranças', href: '/pagamentos/cobrancas' },
|
||||
{ label: 'Assinaturas', href: '/pagamentos/assinaturas' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'contratos',
|
||||
label: 'Contratos',
|
||||
href: '/contratos',
|
||||
icon: DocumentTextIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/contratos' },
|
||||
{ label: 'Ativos', href: '/contratos/ativos' },
|
||||
{ label: 'Modelos', href: '/contratos/modelos' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'documentos',
|
||||
label: 'Documentos',
|
||||
href: '/documentos',
|
||||
icon: FolderIcon,
|
||||
subItems: [
|
||||
{ label: 'Meus Arquivos', href: '/documentos' },
|
||||
{ label: 'Compartilhados', href: '/documentos/compartilhados' },
|
||||
{ label: 'Lixeira', href: '/documentos/lixeira' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'social',
|
||||
label: 'Redes Sociais',
|
||||
href: '/social',
|
||||
icon: ShareIcon,
|
||||
subItems: [
|
||||
{ label: 'Dashboard', href: '/social' },
|
||||
{ label: 'Agendamento', href: '/social/agendamento' },
|
||||
{ label: 'Relatórios', href: '/social/relatorios' },
|
||||
]
|
||||
},
|
||||
];
|
||||
/**
|
||||
* generateMetadata - Executado no servidor antes do render
|
||||
* Define o favicon dinamicamente baseado no subdomínio da agência
|
||||
*/
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const logoUrl = await getAgencyLogo();
|
||||
|
||||
import AuthGuard from '@/components/auth/AuthGuard';
|
||||
return {
|
||||
icons: {
|
||||
icon: logoUrl || '/favicon.ico',
|
||||
shortcut: logoUrl || '/favicon.ico',
|
||||
apple: logoUrl || '/favicon.ico',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default function AgencyLayout({
|
||||
export default async function AgencyLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardLayout menuItems={AGENCY_MENU_ITEMS}>
|
||||
{children}
|
||||
</DashboardLayout>
|
||||
</AuthGuard>
|
||||
);
|
||||
// Buscar cores da agência no servidor
|
||||
const colors = await getAgencyColors();
|
||||
|
||||
return <AgencyLayoutClient colors={colors}>{children}</AgencyLayoutClient>;
|
||||
}
|
||||
|
||||
@@ -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)' }}>
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
<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>
|
||||
</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="mt-6 text-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: 'var(--brand-color)' }}
|
||||
>
|
||||
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">
|
||||
<i className="ri-mail-check-line text-4xl text-[#10B981]" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
|
||||
Email enviado!
|
||||
</h2>
|
||||
|
||||
<p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
|
||||
Enviamos um link de recuperação para:
|
||||
</p>
|
||||
|
||||
<p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
|
||||
{email}
|
||||
</p>
|
||||
|
||||
<div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
|
||||
<div className="flex gap-4">
|
||||
<i className="ri-information-line text-[#ff3a05] text-xl mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-zinc-900 dark:text-white mb-1">
|
||||
Verifique sua caixa de entrada
|
||||
</h4>
|
||||
<p className="text-xs text-zinc-600 dark:text-zinc-400">
|
||||
Clique no link que enviamos para redefinir sua senha.
|
||||
Se não receber em alguns minutos, verifique sua pasta de spam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mb-4"
|
||||
onClick={() => setEmailSent(false)}
|
||||
>
|
||||
Enviar novamente
|
||||
</Button>
|
||||
|
||||
<div className="text-center">
|
||||
<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-3xl text-green-600"></i>
|
||||
</div>
|
||||
<h2 className="text-[24px] font-bold text-zinc-900 dark:text-white mb-2">
|
||||
Verifique seu email
|
||||
</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 mb-8">
|
||||
Enviamos um link de recuperação para <strong>{email}</strong>
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => setEmailSent(false)}
|
||||
>
|
||||
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="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight text-white">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-lock-password-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Protegemos seus dados com os mais altos padrões de segurança.
|
||||
Seu link de recuperação é único e expira em 24 horas.
|
||||
<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">
|
||||
{isSuperAdmin ? 'aggios' : subdomain}
|
||||
</h1>
|
||||
<p className="text-xl opacity-90">
|
||||
Recupere o acesso à sua conta de forma segura e rápida.
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,25 +1,53 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
// Helper to lighten color
|
||||
const lightenColor = (color: string, percent: number) => {
|
||||
const num = parseInt(color.replace("#", ""), 16),
|
||||
amt = Math.round(2.55 * percent),
|
||||
R = (num >> 16) + amt,
|
||||
B = ((num >> 8) & 0x00ff) + amt,
|
||||
G = (num & 0x0000ff) + amt;
|
||||
return (
|
||||
"#" +
|
||||
(
|
||||
0x1000000 +
|
||||
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
||||
(B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
|
||||
(G < 255 ? (G < 1 ? 0 : G) : 255)
|
||||
)
|
||||
.toString(16)
|
||||
.slice(1)
|
||||
);
|
||||
};
|
||||
|
||||
const setGradientVariables = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
const setBrandColors = (primary: string, secondary: string) => {
|
||||
document.documentElement.style.setProperty('--brand-color', primary);
|
||||
document.documentElement.style.setProperty('--brand-color-strong', secondary);
|
||||
|
||||
// Create a lighter version of primary for hover
|
||||
const primaryLight = lightenColor(primary, 20); // Lighten by 20%
|
||||
document.documentElement.style.setProperty('--brand-color-hover', primaryLight);
|
||||
|
||||
// Set RGB variables if needed by other components
|
||||
const hexToRgb = (hex: string) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
|
||||
};
|
||||
|
||||
const primaryRgb = hexToRgb(primary);
|
||||
const secondaryRgb = hexToRgb(secondary);
|
||||
const primaryLightRgb = hexToRgb(primaryLight);
|
||||
|
||||
if (primaryRgb) document.documentElement.style.setProperty('--brand-rgb', primaryRgb);
|
||||
if (secondaryRgb) document.documentElement.style.setProperty('--brand-strong-rgb', secondaryRgb);
|
||||
if (primaryLightRgb) document.documentElement.style.setProperty('--brand-hover-rgb', primaryLightRgb);
|
||||
};
|
||||
|
||||
export default function LayoutWrapper({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
// Em toda troca de rota, volta para o tema padrão; layouts específicos (ex.: agência) aplicam o próprio na sequência
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
}, [pathname]);
|
||||
|
||||
// Temporariamente desativado o carregamento dinâmico de cores/tema para eliminar possíveis
|
||||
// efeitos colaterais de hidratação e 429 no middleware/backend. Se precisar reativar, mover
|
||||
// para nível de servidor (next/head ou metadata) para evitar mutações de DOM no cliente.
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
51
front-end-agency/app/api/tenant/public-config/route.ts
Normal file
51
front-end-agency/app/api/tenant/public-config/route.ts
Normal file
@@ -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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { Inter, Open_Sans, Fira_Code } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import LayoutWrapper from "./LayoutWrapper";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { getAgencyLogo } from "@/lib/server-api";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
@@ -22,10 +23,19 @@ const firaCode = Fira_Code({
|
||||
weight: ["400", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Aggios - Dashboard",
|
||||
description: "Plataforma SaaS para agências digitais",
|
||||
};
|
||||
export async function generateMetadata(): Promise<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}
|
||||
|
||||
@@ -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();
|
||||
throw new Error(error.message || 'Credenciais inválidas');
|
||||
const error = await response.json().catch(() => ({}));
|
||||
|
||||
// Mensagens humanizadas para cada tipo de erro
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
setErrorMessage('Email ou senha incorretos. Por favor, verifique seus dados e tente novamente.');
|
||||
} else if (response.status >= 500) {
|
||||
setErrorMessage('Estamos com problemas no servidor no momento. Por favor, tente novamente em alguns instantes.');
|
||||
} else {
|
||||
setErrorMessage(error.message || 'Algo deu errado ao tentar fazer login. Por favor, tente novamente.');
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
@@ -121,57 +127,60 @@ export default function LoginPage() {
|
||||
|
||||
console.log('Login successful:', data.user);
|
||||
|
||||
toast.success('Login realizado com sucesso! Redirecionando...');
|
||||
setSuccessMessage('Login realizado com sucesso! Redirecionando você agora...');
|
||||
|
||||
setTimeout(() => {
|
||||
const target = isSuperAdmin ? '/superadmin' : '/dashboard';
|
||||
window.location.href = target;
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Erro ao fazer login. Verifique suas credenciais.');
|
||||
console.error('Login error:', error);
|
||||
setErrorMessage('Não conseguimos conectar ao servidor. Verifique sua conexão com a internet e tente novamente.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#FFFFFF',
|
||||
color: '#000000',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #E5E5E5',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ef4444',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
icon: '✓',
|
||||
style: {
|
||||
background: '#10B981',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
{/* Script inline para aplicar cor primária ANTES do React */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
try {
|
||||
const cachedPrimary = localStorage.getItem('agency-primary-color');
|
||||
if (cachedPrimary) {
|
||||
function hexToRgb(hex) {
|
||||
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(cachedPrimary);
|
||||
|
||||
if (primaryRgb) {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty('--brand-color', cachedPrimary);
|
||||
root.style.setProperty('--gradient', 'linear-gradient(135deg, ' + cachedPrimary + ', ' + cachedPrimary + ')');
|
||||
root.style.setProperty('--brand-rgb', primaryRgb);
|
||||
root.style.setProperty('--brand-strong-rgb', primaryRgb);
|
||||
root.style.setProperty('--brand-hover-rgb', primaryRgb);
|
||||
}
|
||||
}
|
||||
} 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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,33 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface DynamicFaviconProps {
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
export default function DynamicFavicon({ logoUrl }: DynamicFaviconProps) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!logoUrl) return;
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Remove favicons antigos
|
||||
const existingLinks = document.querySelectorAll("link[rel*='icon']");
|
||||
existingLinks.forEach(link => link.remove());
|
||||
useEffect(() => {
|
||||
if (!mounted || !logoUrl) return;
|
||||
|
||||
// Adiciona novo favicon
|
||||
const link = document.createElement('link');
|
||||
link.type = 'image/x-icon';
|
||||
link.rel = 'shortcut icon';
|
||||
link.href = logoUrl;
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
// Usar requestAnimationFrame para garantir que a hidratação terminou
|
||||
requestAnimationFrame(() => {
|
||||
// Remove favicons antigos
|
||||
const existingLinks = document.querySelectorAll("link[rel*='icon']");
|
||||
existingLinks.forEach(link => link.remove());
|
||||
|
||||
// Adiciona Apple touch icon
|
||||
const appleLink = document.createElement('link');
|
||||
appleLink.rel = 'apple-touch-icon';
|
||||
appleLink.href = logoUrl;
|
||||
document.getElementsByTagName('head')[0].appendChild(appleLink);
|
||||
// Adiciona novo favicon
|
||||
const link = document.createElement('link');
|
||||
link.type = 'image/x-icon';
|
||||
link.rel = 'shortcut icon';
|
||||
link.href = logoUrl;
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
|
||||
}, [logoUrl]);
|
||||
// Adiciona Apple touch icon
|
||||
const appleLink = document.createElement('link');
|
||||
appleLink.rel = 'apple-touch-icon';
|
||||
appleLink.href = logoUrl;
|
||||
document.getElementsByTagName('head')[0].appendChild(appleLink);
|
||||
});
|
||||
|
||||
}, [mounted, logoUrl]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -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}</>;
|
||||
|
||||
138
front-end-agency/components/auth/LoginBranding.tsx
Normal file
138
front-end-agency/components/auth/LoginBranding.tsx
Normal file
@@ -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;
|
||||
}
|
||||
169
front-end-agency/components/layout/AgencyBranding.tsx
Normal file
169
front-end-agency/components/layout/AgencyBranding.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,7 +31,9 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menu
|
||||
|
||||
{/* Conteúdo das páginas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
<div className="max-w-7xl mx-auto w-full h-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
54
front-end-agency/components/layout/FaviconUpdater.tsx
Normal file
54
front-end-agency/components/layout/FaviconUpdater.tsx
Normal file
@@ -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;
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { Fragment } from 'react';
|
||||
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { getUser, User, getToken, saveAuth } from '@/lib/auth';
|
||||
import { API_ENDPOINTS } from '@/lib/api';
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
@@ -30,16 +31,12 @@ export interface MenuItem {
|
||||
}
|
||||
|
||||
interface SidebarRailProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
menuItems: MenuItem[];
|
||||
}
|
||||
|
||||
export const SidebarRail: React.FC<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,46 +157,59 @@ 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
|
||||
transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
|
||||
${isExpanded ? 'w-[240px]' : 'w-[80px]'}
|
||||
`}
|
||||
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-gray-100 dark:border-zinc-800
|
||||
${railWidth}
|
||||
${openSubmenu ? 'rounded-l-2xl rounded-r-none border-r-0' : 'rounded-2xl'}
|
||||
`}
|
||||
>
|
||||
{/* Toggle Button - Floating on the border */}
|
||||
<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"
|
||||
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronLeftIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
{/* 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"
|
||||
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronLeftIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<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'}`}>
|
||||
{/* Logo */}
|
||||
<div className={`flex items-center w-full mb-6 ${showLabels ? 'justify-start px-1' : 'justify-center'}`}>
|
||||
<div
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
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"
|
||||
>
|
||||
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'}`}>
|
||||
<span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
|
||||
<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">
|
||||
{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,117 +217,117 @@ 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 */}
|
||||
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
|
||||
{/* Separador */}
|
||||
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2 w-full" />
|
||||
|
||||
{/* User Menu - Footer */}
|
||||
<div>
|
||||
<Menu as="div" className="relative">
|
||||
<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'}`}>
|
||||
<UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
|
||||
<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'}`}>
|
||||
<span className="font-medium text-xs text-gray-900 dark:text-white">Agência</span>
|
||||
</div>
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className={`absolute ${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>
|
||||
{({ 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`}
|
||||
>
|
||||
<UserCircleIcon className="mr-2 h-4 w-4" />
|
||||
Ver meu perfil
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<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`}
|
||||
>
|
||||
{mounted && theme === 'dark' ? (
|
||||
<>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Tema Claro
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Tema Escuro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
||||
<Menu.Item>
|
||||
{({ 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`}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
|
||||
Sair
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
{/* User Menu */}
|
||||
<div className={`flex ${showLabels ? 'justify-start' : 'justify-center'}`}>
|
||||
{mounted && (
|
||||
<Menu>
|
||||
<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'}`}>
|
||||
<UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||
<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.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</MenuButton>
|
||||
<MenuItems
|
||||
anchor="top start"
|
||||
transition
|
||||
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`}
|
||||
>
|
||||
<div className="p-1">
|
||||
<MenuItem>
|
||||
<button
|
||||
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>
|
||||
<MenuItem>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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"
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
<>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Tema Claro
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Tema Escuro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</MenuItem>
|
||||
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
||||
<MenuItem>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
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>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</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
|
||||
bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-100 dark:border-zinc-800
|
||||
transition-all duration-300 ease-in-out origin-left z-10 flex flex-col overflow-hidden
|
||||
${openSubmenu ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4 pointer-events-none'}
|
||||
h-full
|
||||
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-20 flex flex-col overflow-hidden
|
||||
${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;
|
||||
isExpanded: boolean;
|
||||
onClick: (e?: any) => void;
|
||||
showLabel: boolean;
|
||||
hasSubItems?: boolean;
|
||||
isOpen?: boolean;
|
||||
}
|
||||
|
||||
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded, hasSubItems, isOpen }) => {
|
||||
const Wrapper = hasSubItems ? 'button' : Link;
|
||||
const props = hasSubItems ? { onClick, type: 'button' } : { href, onClick };
|
||||
|
||||
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, showLabel, hasSubItems, isOpen }) => {
|
||||
// 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) {
|
||||
// Active leaf item (Dashboard, etc)
|
||||
baseClasses += "text-white shadow-md";
|
||||
} else if (isOpen) {
|
||||
// Open submenu parent - Highlight to show active state
|
||||
baseClasses += "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white";
|
||||
let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden ";
|
||||
if (showLabel) {
|
||||
baseClasses += "w-full justify-start ";
|
||||
} else {
|
||||
baseClasses += "w-10 h-10 justify-center mx-auto ";
|
||||
}
|
||||
|
||||
// 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} ${isExpanded ? '' : 'justify-center'}`}
|
||||
className={baseClasses}
|
||||
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'}
|
||||
`}>
|
||||
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
|
||||
${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) */}
|
||||
{active && !isExpanded && !hasSubItems && (
|
||||
<div
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
/>
|
||||
{/* Indicador de Ativo (Ponto lateral) - Apenas se recolhido e NÃO tiver gradiente (redundante agora, mas mantido por segurança) */}
|
||||
{active && !hasSubItems && !showLabel && !isActiveItem && (
|
||||
<div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-4 bg-white rounded-r-full" />
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@@ -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" />
|
||||
<span>Pesquisar...</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</div>
|
||||
<MagnifyingGlassIcon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Buscar...</span>
|
||||
<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">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</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} />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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",
|
||||
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",
|
||||
"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-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]",
|
||||
md: "h-10 px-4 text-[14px]",
|
||||
lg: "h-12 px-6 text-[14px]",
|
||||
sm: "h-8 px-3 text-xs",
|
||||
md: "h-10 px-4 text-sm",
|
||||
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]`} />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useState, useEffect, useRef } from 'react';
|
||||
import { Combobox, Dialog, Transition } from '@headlessui/react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Combobox, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
@@ -84,123 +84,107 @@ export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProp
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment} afterLeave={() => setQuery('')}>
|
||||
<Dialog as="div" className="relative z-50" onClose={setIsOpen} initialFocus={inputRef}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
<Dialog open={isOpen} onClose={setIsOpen} className="relative z-50" initialFocus={inputRef}>
|
||||
<DialogBackdrop
|
||||
transition
|
||||
className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity duration-300 data-[closed]:opacity-0"
|
||||
/>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<DialogPanel
|
||||
transition
|
||||
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"
|
||||
>
|
||||
<div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
<Combobox onChange={handleSelect}>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
|
||||
placeholder="O que você procura?"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
displayValue={(item: any) => item?.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<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
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
|
||||
placeholder="O que você procura?"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
displayValue={(item: any) => item?.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredItems.length > 0 && (
|
||||
<Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
{Object.entries(groups).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<Combobox.Option
|
||||
key={item.href}
|
||||
value={item}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-4 py-2.5 transition-colors ${active
|
||||
? '[background:var(--gradient)] text-white'
|
||||
: ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
|
||||
}`}>
|
||||
<item.icon
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{active && (
|
||||
<ArrowRightIcon className="h-4 w-4 text-white/70" />
|
||||
)}
|
||||
</div>
|
||||
{filteredItems.length > 0 && (
|
||||
<Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
{Object.entries(groups).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<Combobox.Option
|
||||
key={item.href}
|
||||
value={item}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-4 py-2.5 transition-colors ${active
|
||||
? '[background:var(--gradient)] text-white'
|
||||
: ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
|
||||
}`}>
|
||||
<item.icon
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{active && (
|
||||
<ArrowRightIcon className="h-4 w-4 text-white/70" />
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
|
||||
{query !== '' && filteredItems.length === 0 && (
|
||||
<div className="py-14 px-6 text-center text-sm sm:px-14">
|
||||
<MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
<p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
|
||||
<p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para "{query}". Tente buscar por páginas ou ações.</p>
|
||||
</div>
|
||||
)}
|
||||
{query !== '' && filteredItems.length === 0 && (
|
||||
<div className="py-14 px-6 text-center text-sm sm:px-14">
|
||||
<MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
<p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
|
||||
<p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para "{query}". Tente buscar por páginas ou ações.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
|
||||
<div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
|
||||
Selecionar
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
|
||||
Navegar
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
|
||||
Fechar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
|
||||
<div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
|
||||
Selecionar
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
|
||||
Navegar
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
|
||||
Fechar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
rightIcon?: string;
|
||||
leftIcon?: ReactNode;
|
||||
rightIcon?: ReactNode;
|
||||
onRightIconClick?: () => void;
|
||||
}
|
||||
|
||||
@@ -41,26 +42,26 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
)}
|
||||
<div className="relative">
|
||||
{leftIcon && (
|
||||
<i
|
||||
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 text-[20px]`}
|
||||
/>
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 w-5 h-5">
|
||||
{leftIcon}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
ref={ref}
|
||||
type={inputType}
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white dark:bg-gray-700 dark:text-white
|
||||
placeholder:text-zinc-500 dark:placeholder:text-gray-400
|
||||
transition-all
|
||||
w-full px-4 py-2.5 text-sm font-normal
|
||||
border rounded-lg bg-white dark:bg-gray-800 dark:text-white
|
||||
placeholder:text-gray-400 dark:placeholder:text-gray-500
|
||||
transition-all duration-200
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
${isPassword || rightIcon ? "pr-11" : ""}
|
||||
${error
|
||||
? "border-red-500 focus:border-red-500"
|
||||
: "border-zinc-200 dark:border-gray-600 focus:border-brand-500"
|
||||
? "border-red-500 focus:border-red-500 focus:ring-4 focus:ring-red-500/10"
|
||||
: "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
|
||||
disabled:bg-zinc-100 disabled:cursor-not-allowed
|
||||
outline-none
|
||||
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
|
||||
className={`${showPassword ? "ri-eye-off-line" : "ri-eye-line"} text-[20px]`}
|
||||
/>
|
||||
{showPassword ? (
|
||||
<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>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://api.localhost';
|
||||
// URL base da API - usa path relativo para passar pelo middleware do Next.js
|
||||
// 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`,
|
||||
|
||||
@@ -10,6 +10,7 @@ export interface User {
|
||||
tenantId?: string;
|
||||
company?: string;
|
||||
subdomain?: string;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
const TOKEN_KEY = 'token';
|
||||
|
||||
183
front-end-agency/lib/colors.ts
Normal file
183
front-end-agency/lib/colors.ts
Normal file
@@ -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,
|
||||
};
|
||||
}
|
||||
79
front-end-agency/lib/server-api.ts
Normal file
79
front-end-agency/lib/server-api.ts
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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) {
|
||||
const baseHost = hostname.split('.').slice(1).join('.') || hostname;
|
||||
const redirectUrl = new URL(url.toString());
|
||||
redirectUrl.hostname = baseHost;
|
||||
redirectUrl.pathname = '/';
|
||||
return NextResponse.redirect(redirectUrl);
|
||||
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;
|
||||
const redirectUrl = new URL(url.toString());
|
||||
redirectUrl.hostname = baseHost;
|
||||
redirectUrl.pathname = '/';
|
||||
return NextResponse.redirect(redirectUrl);
|
||||
console.error('Middleware error:', err);
|
||||
// Em caso de erro de rede (backend fora do ar), permitir carregar a página
|
||||
// para não travar o frontend completamente (pode mostrar erro na tela depois)
|
||||
// return NextResponse.next();
|
||||
}
|
||||
}
|
||||
|
||||
// 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).*)',
|
||||
],
|
||||
};
|
||||
|
||||
@@ -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}",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -10,17 +10,18 @@ module.exports = {
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#fff4ef',
|
||||
100: '#ffe8df',
|
||||
200: '#ffd0c0',
|
||||
300: '#ffb093',
|
||||
400: '#ff8a66',
|
||||
500: '#ff3a05',
|
||||
600: '#ff1f45',
|
||||
700: '#ff0080',
|
||||
800: '#d10069',
|
||||
900: '#9e0050',
|
||||
950: '#4b0028',
|
||||
50: 'rgb(var(--brand-rgb) / 0.05)',
|
||||
100: 'rgb(var(--brand-rgb) / 0.1)',
|
||||
200: 'rgb(var(--brand-rgb) / 0.2)',
|
||||
300: 'rgb(var(--brand-rgb) / 0.4)',
|
||||
400: 'rgb(var(--brand-rgb) / 0.8)',
|
||||
500: 'rgb(var(--brand-rgb) / <alpha-value>)',
|
||||
600: 'rgb(var(--brand-strong-rgb) / <alpha-value>)',
|
||||
700: 'rgb(var(--brand-strong-rgb) / 0.8)',
|
||||
800: 'rgb(var(--brand-strong-rgb) / 0.6)',
|
||||
900: 'rgb(var(--brand-strong-rgb) / 0.4)',
|
||||
950: 'rgb(var(--brand-strong-rgb) / 0.2)',
|
||||
hover: 'rgb(var(--brand-hover-rgb) / <alpha-value>)',
|
||||
},
|
||||
surface: {
|
||||
light: '#ffffff',
|
||||
|
||||
Reference in New Issue
Block a user