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>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user