Prepara versao dev 1.0
This commit is contained in:
Erik Silva
26
front-end-dash.aggios.app/app/(agency)/clientes/page.tsx
Normal file
26
front-end-dash.aggios.app/app/(agency)/clientes/page.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
export default function ClientesPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Clientes</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">Gerencie sua carteira de clientes</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-12 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="w-24 h-24 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<i className="ri-user-line text-5xl text-blue-600 dark:text-blue-400"></i>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
|
||||
Módulo CRM em Desenvolvimento
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Em breve você poderá gerenciar seus clientes com recursos avançados de CRM.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
713
front-end-dash.aggios.app/app/(agency)/configuracoes/page.tsx
Normal file
713
front-end-dash.aggios.app/app/(agency)/configuracoes/page.tsx
Normal file
@@ -0,0 +1,713 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Tab } from '@headlessui/react';
|
||||
import { Dialog } from '@/components/ui';
|
||||
import {
|
||||
BuildingOfficeIcon,
|
||||
SwatchIcon,
|
||||
PhotoIcon,
|
||||
UserGroupIcon,
|
||||
ShieldCheckIcon,
|
||||
BellIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const tabs = [
|
||||
{ name: 'Dados da Agência', icon: BuildingOfficeIcon },
|
||||
{ name: 'Personalização', icon: SwatchIcon },
|
||||
{ name: 'Logo e Marca', icon: PhotoIcon },
|
||||
{ name: 'Equipe', icon: UserGroupIcon },
|
||||
{ name: 'Segurança', icon: ShieldCheckIcon },
|
||||
{ name: 'Notificações', icon: BellIcon },
|
||||
];
|
||||
|
||||
const themePresets = [
|
||||
{ name: 'Laranja/Rosa', gradient: 'linear-gradient(90deg, #FF3A05, #FF0080)', colors: ['#FF3A05', '#FF0080'] },
|
||||
{ name: 'Azul/Roxo', gradient: 'linear-gradient(90deg, #0066FF, #9333EA)', colors: ['#0066FF', '#9333EA'] },
|
||||
{ name: 'Verde/Esmeralda', gradient: 'linear-gradient(90deg, #10B981, #059669)', colors: ['#10B981', '#059669'] },
|
||||
{ name: 'Ciano/Azul', gradient: 'linear-gradient(90deg, #06B6D4, #3B82F6)', colors: ['#06B6D4', '#3B82F6'] },
|
||||
{ name: 'Rosa/Roxo', gradient: 'linear-gradient(90deg, #EC4899, #A855F7)', colors: ['#EC4899', '#A855F7'] },
|
||||
{ name: 'Vermelho/Laranja', gradient: 'linear-gradient(90deg, #EF4444, #F97316)', colors: ['#EF4444', '#F97316'] },
|
||||
];
|
||||
|
||||
export default function ConfiguracoesPage() {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const [selectedTheme, setSelectedTheme] = useState(0);
|
||||
const [customColor1, setCustomColor1] = useState('#FF3A05');
|
||||
const [customColor2, setCustomColor2] = useState('#FF0080');
|
||||
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Dados da agência (buscados da API)
|
||||
const [agencyData, setAgencyData] = useState({
|
||||
name: '',
|
||||
cnpj: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
website: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zip: '',
|
||||
razaoSocial: '',
|
||||
description: '',
|
||||
industry: '',
|
||||
});
|
||||
|
||||
// Dados para alteração de senha
|
||||
const [passwordData, setPasswordData] = useState({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
|
||||
// Buscar dados da agência da API
|
||||
useEffect(() => {
|
||||
const fetchAgencyData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const token = localStorage.getItem('token');
|
||||
const userData = localStorage.getItem('user');
|
||||
|
||||
if (!token || !userData) {
|
||||
console.error('Usuário não autenticado');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Buscar dados da API
|
||||
const response = await fetch('http://localhost:8080/api/agency/profile', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencyData({
|
||||
name: data.name || '',
|
||||
cnpj: data.cnpj || '',
|
||||
email: data.email || '',
|
||||
phone: data.phone || '',
|
||||
website: data.website || '',
|
||||
address: data.address || '',
|
||||
city: data.city || '',
|
||||
state: data.state || '',
|
||||
zip: data.zip || '',
|
||||
razaoSocial: data.razao_social || '',
|
||||
description: data.description || '',
|
||||
industry: data.industry || '',
|
||||
});
|
||||
} else {
|
||||
console.error('Erro ao buscar dados:', response.status);
|
||||
// Fallback para localStorage se API falhar
|
||||
const savedData = localStorage.getItem('cadastroData');
|
||||
if (savedData) {
|
||||
const data = JSON.parse(savedData);
|
||||
const user = JSON.parse(userData);
|
||||
setAgencyData({
|
||||
name: data.formData?.companyName || '',
|
||||
cnpj: data.formData?.cnpj || '',
|
||||
email: data.formData?.email || user.email || '',
|
||||
phone: data.contacts?.[0]?.phone || '',
|
||||
website: data.formData?.website || '',
|
||||
address: `${data.cepData?.logradouro || ''}, ${data.formData?.number || ''}`,
|
||||
city: data.cepData?.localidade || '',
|
||||
state: data.cepData?.uf || '',
|
||||
zip: data.formData?.cep || '',
|
||||
razaoSocial: data.cnpjData?.razaoSocial || '',
|
||||
description: data.formData?.description || '',
|
||||
industry: data.formData?.industry || '',
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao buscar dados da agência:', error);
|
||||
setSuccessMessage('Erro ao carregar dados da agência.');
|
||||
setShowSuccessDialog(true);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAgencyData();
|
||||
}, []);
|
||||
|
||||
const applyTheme = (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 applyCustomTheme = () => {
|
||||
const gradient = `linear-gradient(90deg, ${customColor1}, ${customColor2})`;
|
||||
applyTheme(gradient);
|
||||
};
|
||||
|
||||
const handleSaveAgency = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
setSuccessMessage('Você precisa estar autenticado.');
|
||||
setShowSuccessDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch('http://localhost:8080/api/agency/profile', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: agencyData.name,
|
||||
cnpj: agencyData.cnpj,
|
||||
email: agencyData.email,
|
||||
phone: agencyData.phone,
|
||||
website: agencyData.website,
|
||||
address: agencyData.address,
|
||||
city: agencyData.city,
|
||||
state: agencyData.state,
|
||||
zip: agencyData.zip,
|
||||
razao_social: agencyData.razaoSocial,
|
||||
description: agencyData.description,
|
||||
industry: agencyData.industry,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSuccessMessage('Dados da agência salvos com sucesso!');
|
||||
} 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.');
|
||||
}
|
||||
setShowSuccessDialog(true);
|
||||
};
|
||||
|
||||
const handleSaveTheme = () => {
|
||||
// TODO: Integrar com API para salvar no banco
|
||||
const selectedGradient = themePresets[selectedTheme].gradient;
|
||||
console.log('Salvando tema:', selectedGradient);
|
||||
setSuccessMessage('Tema salvo com sucesso!');
|
||||
setShowSuccessDialog(true);
|
||||
};
|
||||
|
||||
const handleChangePassword = async () => {
|
||||
// Validações
|
||||
if (!passwordData.currentPassword) {
|
||||
setSuccessMessage('Por favor, informe sua senha atual.');
|
||||
setShowSuccessDialog(true);
|
||||
return;
|
||||
}
|
||||
if (!passwordData.newPassword || passwordData.newPassword.length < 8) {
|
||||
setSuccessMessage('A nova senha deve ter pelo menos 8 caracteres.');
|
||||
setShowSuccessDialog(true);
|
||||
return;
|
||||
}
|
||||
if (passwordData.newPassword !== passwordData.confirmPassword) {
|
||||
setSuccessMessage('As senhas não coincidem.');
|
||||
setShowSuccessDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
setSuccessMessage('Você precisa estar autenticado.');
|
||||
setShowSuccessDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch('http://localhost:8080/api/auth/change-password', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
currentPassword: passwordData.currentPassword,
|
||||
newPassword: passwordData.newPassword,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
setSuccessMessage('Senha alterada com sucesso!');
|
||||
} else {
|
||||
const error = await response.text();
|
||||
setSuccessMessage(error || 'Erro ao alterar senha. Verifique sua senha atual.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao alterar senha:', error);
|
||||
setSuccessMessage('Erro ao alterar senha. Verifique sua conexão.');
|
||||
}
|
||||
setShowSuccessDialog(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Configurações
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Gerencie as configurações da sua agência
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Tabs */}
|
||||
<Tab.Group selectedIndex={selectedTab} onChange={setSelectedTab}>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-gray-100 dark:bg-gray-800 p-1 mb-8">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<Tab
|
||||
key={tab.name}
|
||||
className={({ selected }) =>
|
||||
`w-full flex items-center justify-center space-x-2 rounded-lg py-2.5 text-sm font-medium leading-5 transition-all
|
||||
${selected
|
||||
? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-white/[0.5] dark:hover:bg-gray-700/[0.5] hover:text-gray-900 dark:hover:text-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<span className="hidden sm:inline">{tab.name}</span>
|
||||
</Tab>
|
||||
);
|
||||
})}
|
||||
</Tab.List>
|
||||
|
||||
<Tab.Panels>
|
||||
{/* Tab 1: Dados da Agência */}
|
||||
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Informações da Agência
|
||||
</h2>
|
||||
|
||||
<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"
|
||||
value={agencyData.name}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, name: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
CNPJ
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={agencyData.cnpj}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, cnpj: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
E-mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={agencyData.email}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, email: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Telefone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={agencyData.phone}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, phone: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Website
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={agencyData.website}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, website: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Endereço
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={agencyData.address}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, address: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Cidade
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={agencyData.city}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, city: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Estado
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={agencyData.state}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, state: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
CEP
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={agencyData.zip}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, zip: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
onClick={handleSaveAgency}
|
||||
className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
>
|
||||
Salvar Alterações
|
||||
</button>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Tab 2: Personalização */}
|
||||
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Personalização do Dashboard
|
||||
</h2>
|
||||
|
||||
{/* Temas Pré-definidos */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
|
||||
Temas Pré-definidos
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{themePresets.map((theme, idx) => (
|
||||
<button
|
||||
key={theme.name}
|
||||
onClick={() => {
|
||||
setSelectedTheme(idx);
|
||||
applyTheme(theme.gradient);
|
||||
}}
|
||||
className={`p-4 rounded-xl border-2 transition-all hover:scale-105 ${selectedTheme === idx
|
||||
? 'border-gray-900 dark:border-gray-100'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-full h-24 rounded-lg mb-3"
|
||||
style={{ background: theme.gradient }}
|
||||
/>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{theme.name}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cores Customizadas */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
|
||||
Cores Personalizadas
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
Cor Primária
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={customColor1}
|
||||
onChange={(e) => setCustomColor1(e.target.value)}
|
||||
className="w-20 h-20 rounded-lg cursor-pointer border-2 border-gray-300 dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
Cor Secundária
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
value={customColor2}
|
||||
onChange={(e) => setCustomColor2(e.target.value)}
|
||||
className="w-20 h-20 rounded-lg cursor-pointer border-2 border-gray-300 dark:border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
Preview
|
||||
</label>
|
||||
<div
|
||||
className="h-20 rounded-lg"
|
||||
style={{ background: `linear-gradient(90deg, ${customColor1}, ${customColor2})` }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={applyCustomTheme}
|
||||
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"
|
||||
>
|
||||
Aplicar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
onClick={handleSaveTheme}
|
||||
className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
>
|
||||
Salvar Tema
|
||||
</button>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Tab 3: Logo e Marca */}
|
||||
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Logo e Identidade Visual
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
|
||||
Logo Principal
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center">
|
||||
<PhotoIcon className="w-12 h-12 mx-auto text-gray-400 mb-3" />
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
Arraste e solte sua logo aqui ou clique para fazer upload
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500">
|
||||
PNG, JPG ou SVG (máx. 2MB)
|
||||
</p>
|
||||
<button className="mt-4 px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg text-sm font-medium hover:scale-105 transition-all">
|
||||
Selecionar Arquivo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
|
||||
Favicon
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center">
|
||||
<PhotoIcon className="w-12 h-12 mx-auto text-gray-400 mb-3" />
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
Upload do favicon (ícone da aba do navegador)
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500">
|
||||
ICO ou PNG 32x32 pixels
|
||||
</p>
|
||||
<button className="mt-4 px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg text-sm font-medium hover:scale-105 transition-all">
|
||||
Selecionar Arquivo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
>
|
||||
Salvar Alterações
|
||||
</button>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Tab 4: Equipe */}
|
||||
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Gerenciamento de Equipe
|
||||
</h2>
|
||||
|
||||
<div className="text-center py-12">
|
||||
<UserGroupIcon className="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
|
||||
<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">
|
||||
Convidar Membro
|
||||
</button>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Tab 5: Segurança */}
|
||||
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Segurança e Privacidade
|
||||
</h2>
|
||||
|
||||
{/* Alteração de Senha */}
|
||||
<div className="max-w-2xl">
|
||||
<h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">
|
||||
Alterar Senha
|
||||
</h3>
|
||||
|
||||
<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
|
||||
type="password"
|
||||
value={passwordData.currentPassword}
|
||||
onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 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
|
||||
type="password"
|
||||
value={passwordData.newPassword}
|
||||
onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 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
|
||||
type="password"
|
||||
value={passwordData.confirmPassword}
|
||||
onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 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
|
||||
onClick={handleChangePassword}
|
||||
className="px-6 py-2 rounded-lg text-white font-medium transition-all hover:scale-105"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
>
|
||||
Alterar Senha
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recursos Futuros */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">
|
||||
Recursos em Desenvolvimento
|
||||
</h3>
|
||||
<div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShieldCheckIcon className="w-5 h-5" />
|
||||
<span>Autenticação em duas etapas (2FA)</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShieldCheckIcon className="w-5 h-5" />
|
||||
<span>Histórico de acessos</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShieldCheckIcon className="w-5 h-5" />
|
||||
<span>Dispositivos conectados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Tab 6: Notificações */}
|
||||
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
Preferências de Notificações
|
||||
</h2>
|
||||
|
||||
<div className="text-center py-12">
|
||||
<BellIcon className="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Em breve: configuração de notificações por e-mail, push e mais
|
||||
</p>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Dialog de Sucesso */}
|
||||
<Dialog
|
||||
isOpen={showSuccessDialog}
|
||||
onClose={() => setShowSuccessDialog(false)}
|
||||
title="Sucesso"
|
||||
size="sm"
|
||||
>
|
||||
<Dialog.Body>
|
||||
<p className="text-center py-4">{successMessage}</p>
|
||||
</Dialog.Body>
|
||||
<Dialog.Footer>
|
||||
<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)' }}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</Dialog.Footer>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
181
front-end-dash.aggios.app/app/(agency)/dashboard/page.tsx
Normal file
181
front-end-dash.aggios.app/app/(agency)/dashboard/page.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getUser } from "@/lib/auth";
|
||||
import {
|
||||
ChartBarIcon,
|
||||
UserGroupIcon,
|
||||
FolderIcon,
|
||||
CurrencyDollarIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
ArrowTrendingDownIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
trend?: number;
|
||||
color: 'blue' | 'purple' | 'gray' | 'green';
|
||||
}
|
||||
|
||||
const colorClasses = {
|
||||
blue: {
|
||||
iconBg: 'bg-blue-50 dark:bg-blue-900/20',
|
||||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||||
trend: 'text-blue-600 dark:text-blue-400'
|
||||
},
|
||||
purple: {
|
||||
iconBg: 'bg-purple-50 dark:bg-purple-900/20',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
trend: 'text-purple-600 dark:text-purple-400'
|
||||
},
|
||||
gray: {
|
||||
iconBg: 'bg-gray-50 dark:bg-gray-900/20',
|
||||
iconColor: 'text-gray-600 dark:text-gray-400',
|
||||
trend: 'text-gray-600 dark:text-gray-400'
|
||||
},
|
||||
green: {
|
||||
iconBg: 'bg-emerald-50 dark:bg-emerald-900/20',
|
||||
iconColor: 'text-emerald-600 dark:text-emerald-400',
|
||||
trend: 'text-emerald-600 dark:text-emerald-400'
|
||||
}
|
||||
};
|
||||
|
||||
function StatCard({ title, value, icon: Icon, trend, color }: StatCardProps) {
|
||||
const colors = colorClasses[color];
|
||||
const isPositive = trend && trend > 0;
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
|
||||
<p className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">{value}</p>
|
||||
{trend !== undefined && (
|
||||
<div className="flex items-center mt-2">
|
||||
{isPositive ? (
|
||||
<ArrowTrendingUpIcon className="w-4 h-4 text-emerald-500" />
|
||||
) : (
|
||||
<ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
|
||||
)}
|
||||
<span className={`text-sm font-medium ml-1 ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
|
||||
{Math.abs(trend)}%
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 ml-1">vs mês anterior</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${colors.iconBg} p-3 rounded-xl`}>
|
||||
<Icon className={`w-8 h-8 ${colors.iconColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [stats, setStats] = useState({
|
||||
clientes: 0,
|
||||
projetos: 0,
|
||||
tarefas: 0,
|
||||
faturamento: 0
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se é SUPERADMIN e redirecionar
|
||||
const user = getUser();
|
||||
if (user && user.role === 'SUPERADMIN') {
|
||||
router.push('/superadmin');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulando carregamento de dados
|
||||
setTimeout(() => {
|
||||
setStats({
|
||||
clientes: 127,
|
||||
projetos: 18,
|
||||
tarefas: 64,
|
||||
faturamento: 87500
|
||||
});
|
||||
}, 300);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Bem-vindo ao seu painel de controle
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<StatCard
|
||||
title="Clientes Ativos"
|
||||
value={stats.clientes}
|
||||
icon={UserGroupIcon}
|
||||
trend={12.5}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
title="Projetos em Andamento"
|
||||
value={stats.projetos}
|
||||
icon={FolderIcon}
|
||||
trend={8.2}
|
||||
color="purple"
|
||||
/>
|
||||
<StatCard
|
||||
title="Tarefas Pendentes"
|
||||
value={stats.tarefas}
|
||||
icon={ChartBarIcon}
|
||||
trend={-3.1}
|
||||
color="gray"
|
||||
/>
|
||||
<StatCard
|
||||
title="Faturamento"
|
||||
value={new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
minimumFractionDigits: 0
|
||||
}).format(stats.faturamento)}
|
||||
icon={CurrencyDollarIcon}
|
||||
trend={25.3}
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Coming Soon Card */}
|
||||
<div className="bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-12">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<ChartBarIcon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
|
||||
Em Desenvolvimento
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
Estamos construindo recursos incríveis de CRM e ERP para sua agência.
|
||||
Em breve você terá acesso a análises detalhadas, gestão completa de clientes e muito mais.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
{['CRM', 'ERP', 'Projetos', 'Pagamentos', 'Documentos', 'Suporte', 'Contratos'].map((item) => (
|
||||
<span
|
||||
key={item}
|
||||
className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
569
front-end-dash.aggios.app/app/(agency)/layout.tsx
Normal file
569
front-end-dash.aggios.app/app/(agency)/layout.tsx
Normal file
@@ -0,0 +1,569 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, Fragment } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import {
|
||||
Bars3Icon,
|
||||
XMarkIcon,
|
||||
MagnifyingGlassIcon,
|
||||
BellIcon,
|
||||
Cog6ToothIcon,
|
||||
UserCircleIcon,
|
||||
ArrowRightOnRectangleIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
UserGroupIcon,
|
||||
BuildingOfficeIcon,
|
||||
FolderIcon,
|
||||
CreditCardIcon,
|
||||
DocumentTextIcon,
|
||||
LifebuoyIcon,
|
||||
DocumentCheckIcon,
|
||||
UsersIcon,
|
||||
UserPlusIcon,
|
||||
PhoneIcon,
|
||||
FunnelIcon,
|
||||
ChartBarIcon,
|
||||
HomeIcon,
|
||||
CubeIcon,
|
||||
ShoppingCartIcon,
|
||||
BanknotesIcon,
|
||||
DocumentDuplicateIcon,
|
||||
ShareIcon,
|
||||
DocumentMagnifyingGlassIcon,
|
||||
TrashIcon,
|
||||
RectangleStackIcon,
|
||||
CalendarIcon,
|
||||
UserGroupIcon as TeamIcon,
|
||||
ReceiptPercentIcon,
|
||||
CreditCardIcon as PaymentIcon,
|
||||
ChatBubbleLeftRightIcon,
|
||||
BookOpenIcon,
|
||||
ArchiveBoxIcon,
|
||||
PencilSquareIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
|
||||
const ThemeTester = dynamic(() => import('@/components/ThemeTester'), { ssr: false });
|
||||
|
||||
export default function AgencyLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [agencyName, setAgencyName] = useState('');
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const [activeSubmenu, setActiveSubmenu] = useState<number | null>(null);
|
||||
const [selectedClient, setSelectedClient] = useState<any>(null);
|
||||
|
||||
// Mock de clientes - no futuro virá da API
|
||||
const clients = [
|
||||
{ id: 1, name: 'Todos os Clientes', avatar: null },
|
||||
{ id: 2, name: 'Empresa ABC Ltda', avatar: 'A' },
|
||||
{ id: 3, name: 'Tech Solutions Inc', avatar: 'T' },
|
||||
{ id: 4, name: 'Marketing Pro', avatar: 'M' },
|
||||
{ id: 5, name: 'Design Studio', avatar: 'D' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
const userData = localStorage.getItem('user');
|
||||
|
||||
if (!token || !userData) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const parsedUser = JSON.parse(userData);
|
||||
setUser(parsedUser);
|
||||
|
||||
if (parsedUser.role === 'SUPERADMIN') {
|
||||
router.push('/superadmin');
|
||||
return;
|
||||
}
|
||||
|
||||
const hostname = window.location.hostname;
|
||||
const subdomain = hostname.split('.')[0];
|
||||
setAgencyName(subdomain);
|
||||
|
||||
// Inicializar com "Todos os Clientes"
|
||||
setSelectedClient(clients[0]);
|
||||
|
||||
// Atalho de teclado para abrir pesquisa (Ctrl/Cmd + K)
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
setSearchOpen(true);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setSearchOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [router]);
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: UserGroupIcon,
|
||||
label: 'CRM',
|
||||
href: '/crm',
|
||||
submenu: [
|
||||
{ icon: UsersIcon, label: 'Clientes', href: '/crm/clientes' },
|
||||
{ icon: UserPlusIcon, label: 'Leads', href: '/crm/leads' },
|
||||
{ icon: PhoneIcon, label: 'Contatos', href: '/crm/contatos' },
|
||||
{ icon: FunnelIcon, label: 'Funil de Vendas', href: '/crm/funil' },
|
||||
{ icon: ChartBarIcon, label: 'Relatórios', href: '/crm/relatorios' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: BuildingOfficeIcon,
|
||||
label: 'ERP',
|
||||
href: '/erp',
|
||||
submenu: [
|
||||
{ icon: HomeIcon, label: 'Dashboard', href: '/erp/dashboard' },
|
||||
{ icon: CubeIcon, label: 'Estoque', href: '/erp/estoque' },
|
||||
{ icon: ShoppingCartIcon, label: 'Compras', href: '/erp/compras' },
|
||||
{ icon: BanknotesIcon, label: 'Vendas', href: '/erp/vendas' },
|
||||
{ icon: ChartBarIcon, label: 'Financeiro', href: '/erp/financeiro' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: FolderIcon,
|
||||
label: 'Projetos',
|
||||
href: '/projetos',
|
||||
submenu: [
|
||||
{ icon: RectangleStackIcon, label: 'Todos Projetos', href: '/projetos/todos' },
|
||||
{ icon: RectangleStackIcon, label: 'Kanban', href: '/projetos/kanban' },
|
||||
{ icon: CalendarIcon, label: 'Calendário', href: '/projetos/calendario' },
|
||||
{ icon: TeamIcon, label: 'Equipes', href: '/projetos/equipes' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: CreditCardIcon,
|
||||
label: 'Pagamentos',
|
||||
href: '/pagamentos',
|
||||
submenu: [
|
||||
{ icon: DocumentTextIcon, label: 'Faturas', href: '/pagamentos/faturas' },
|
||||
{ icon: ReceiptPercentIcon, label: 'Recebimentos', href: '/pagamentos/recebimentos' },
|
||||
{ icon: PaymentIcon, label: 'Assinaturas', href: '/pagamentos/assinaturas' },
|
||||
{ icon: BanknotesIcon, label: 'Gateway', href: '/pagamentos/gateway' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: DocumentTextIcon,
|
||||
label: 'Documentos',
|
||||
href: '/documentos',
|
||||
submenu: [
|
||||
{ icon: FolderIcon, label: 'Meus Arquivos', href: '/documentos/arquivos' },
|
||||
{ icon: ShareIcon, label: 'Compartilhados', href: '/documentos/compartilhados' },
|
||||
{ icon: DocumentDuplicateIcon, label: 'Modelos', href: '/documentos/modelos' },
|
||||
{ icon: TrashIcon, label: 'Lixeira', href: '/documentos/lixeira' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: LifebuoyIcon,
|
||||
label: 'Suporte',
|
||||
href: '/suporte',
|
||||
submenu: [
|
||||
{ icon: DocumentMagnifyingGlassIcon, label: 'Tickets', href: '/suporte/tickets' },
|
||||
{ icon: BookOpenIcon, label: 'Base de Conhecimento', href: '/suporte/kb' },
|
||||
{ icon: ChatBubbleLeftRightIcon, label: 'Chat', href: '/suporte/chat' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: DocumentCheckIcon,
|
||||
label: 'Contratos',
|
||||
href: '/contratos',
|
||||
submenu: [
|
||||
{ icon: DocumentCheckIcon, label: 'Ativos', href: '/contratos/ativos' },
|
||||
{ icon: PencilSquareIcon, label: 'Rascunhos', href: '/contratos/rascunhos' },
|
||||
{ icon: ArchiveBoxIcon, label: 'Arquivados', href: '/contratos/arquivados' },
|
||||
{ icon: DocumentDuplicateIcon, label: 'Modelos', href: '/contratos/modelos' },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-950">
|
||||
{/* Sidebar */}
|
||||
<aside className={`${activeSubmenu !== null ? 'w-20' : (sidebarOpen ? 'w-64' : 'w-20')} transition-all duration-300 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col`}>
|
||||
{/* Logo */}
|
||||
<div className="h-16 flex items-center justify-center border-b border-gray-200 dark:border-gray-800">
|
||||
{(sidebarOpen && activeSubmenu === null) ? (
|
||||
<div className="flex items-center justify-between px-4 w-full">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 rounded-lg shrink-0" style={{ background: 'var(--gradient-primary)' }}></div>
|
||||
<span className="font-bold text-lg dark:text-white capitalize">{agencyName}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
<XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-lg" style={{ background: 'var(--gradient-primary)' }}></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Menu */}
|
||||
<nav className="flex-1 overflow-y-auto py-4 px-3">
|
||||
{menuItems.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeSubmenu === idx;
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setActiveSubmenu(isActive ? null : idx)}
|
||||
className={`w-full flex items-center ${(sidebarOpen && activeSubmenu === null) ? 'space-x-3 px-3' : 'justify-center px-0'} py-2.5 mb-1 rounded-lg transition-all group cursor-pointer ${isActive
|
||||
? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`${(sidebarOpen && activeSubmenu === null) ? 'w-5 h-5' : 'w-[18px] h-[18px]'} stroke-[1.5]`} />
|
||||
{(sidebarOpen && activeSubmenu === null) && (
|
||||
<>
|
||||
<span className="flex-1 text-left text-sm font-normal">{item.label}</span>
|
||||
<ChevronRightIcon className={`w-4 h-4 transition-transform ${isActive ? 'rotate-90' : ''}`} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-800">
|
||||
{(sidebarOpen && activeSubmenu === null) ? (
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="w-full flex items-center space-x-3 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors">
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold" style={{ background: 'var(--gradient-primary)' }}>
|
||||
{user?.name?.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">{user?.name}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{user?.role === 'ADMIN_AGENCIA' ? 'Admin' : 'Cliente'}</p>
|
||||
</div>
|
||||
<ChevronDownIcon className="w-4 h-4 text-gray-400" />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="/perfil"
|
||||
className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} flex items-center px-4 py-3 text-sm text-gray-700 dark:text-gray-300`}
|
||||
>
|
||||
<UserCircleIcon className="w-5 h-5 mr-3" />
|
||||
Meu Perfil
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full flex items-center px-4 py-3 text-sm text-red-600 dark:text-red-400`}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="w-5 h-5 mr-3" />
|
||||
Sair
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-10 h-10 mx-auto rounded-full flex items-center justify-center text-white cursor-pointer"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
title="Sair"
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Submenu Lateral */}
|
||||
<Transition
|
||||
show={activeSubmenu !== null}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="transform -translate-x-full opacity-0"
|
||||
enterTo="transform translate-x-0 opacity-100"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="transform translate-x-0 opacity-100"
|
||||
leaveTo="transform -translate-x-full opacity-0"
|
||||
>
|
||||
<aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col">
|
||||
{activeSubmenu !== null && (
|
||||
<>
|
||||
<div className="h-16 flex items-center justify-between px-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h2 className="font-semibold text-gray-900 dark:text-white">{menuItems[activeSubmenu].label}</h2>
|
||||
<button
|
||||
onClick={() => setActiveSubmenu(null)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
<XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex-1 overflow-y-auto py-4 px-3">
|
||||
{menuItems[activeSubmenu].submenu?.map((subItem, idx) => {
|
||||
const SubIcon = subItem.icon;
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href={subItem.href}
|
||||
className="flex items-center space-x-3 px-4 py-2.5 mb-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<SubIcon className="w-5 h-5 stroke-[1.5]" />
|
||||
<span>{subItem.label}</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
</Transition>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h1 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Dashboard
|
||||
</h1>
|
||||
|
||||
{/* Seletor de Cliente */}
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors cursor-pointer">
|
||||
{selectedClient?.avatar ? (
|
||||
<div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-semibold" style={{ background: 'var(--gradient-primary)' }}>
|
||||
{selectedClient.avatar}
|
||||
</div>
|
||||
) : (
|
||||
<UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
)}
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{selectedClient?.name || 'Selecionar Cliente'}
|
||||
</span>
|
||||
<ChevronDownIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute left-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
|
||||
<div className="p-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar cliente..."
|
||||
className="w-full pl-9 pr-3 py-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto p-2">
|
||||
{clients.map((client) => (
|
||||
<Menu.Item key={client.id}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => setSelectedClient(client)}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''
|
||||
} ${selectedClient?.id === client.id ? 'bg-gray-100 dark:bg-gray-800' : ''
|
||||
} w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg transition-colors cursor-pointer`}
|
||||
>
|
||||
{client.avatar ? (
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0" style={{ background: 'var(--gradient-primary)' }}>
|
||||
{client.avatar}
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
|
||||
<UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
<span className="flex-1 text-left text-sm font-medium text-gray-900 dark:text-white">
|
||||
{client.name}
|
||||
</span>
|
||||
{selectedClient?.id === client.id && (
|
||||
<div className="w-2 h-2 rounded-full bg-gray-900 dark:bg-gray-100"></div>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Pesquisa */}
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center space-x-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Pesquisar...</span>
|
||||
<kbd className="hidden sm:inline-flex items-center px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</button>
|
||||
|
||||
<ThemeToggle />
|
||||
|
||||
{/* Notificações */}
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg relative transition-colors">
|
||||
<BellIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Notificações</h3>
|
||||
</div>
|
||||
<div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Nenhuma notificação no momento
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
||||
{/* Configurações */}
|
||||
<a
|
||||
href="/configuracoes"
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||
>
|
||||
<Cog6ToothIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-950">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Modal de Pesquisa */}
|
||||
<Transition appear show={searchOpen} as={Fragment}>
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setSearchOpen(false)} />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-[15vh]">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<div className="w-full max-w-2xl bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden relative z-10">
|
||||
<div className="flex items-center px-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<MagnifyingGlassIcon className="w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar páginas, clientes, projetos..."
|
||||
autoFocus
|
||||
className="w-full px-4 py-4 bg-transparent text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setSearchOpen(false)}
|
||||
className="text-xs text-gray-500 dark:text-gray-400 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded"
|
||||
>
|
||||
ESC
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 max-h-96 overflow-y-auto">
|
||||
<div className="text-center py-12">
|
||||
<MagnifyingGlassIcon className="w-12 h-12 text-gray-300 dark:text-gray-700 mx-auto mb-3" />
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Digite para buscar...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950">
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="flex items-center">
|
||||
<kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↑↓</kbd>
|
||||
navegar
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↵</kbd>
|
||||
selecionar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
{/* Theme Tester - Temporário para desenvolvimento */}
|
||||
<ThemeTester />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export default function AuthLayoutWrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -38,19 +38,6 @@ export default function CadastroPage() {
|
||||
|
||||
// Carregar dados do localStorage ao montar
|
||||
useEffect(() => {
|
||||
// Mostrar dica de atalho
|
||||
setTimeout(() => {
|
||||
toast('💡 Dica: Pressione a tecla T para preencher dados de teste automaticamente!', {
|
||||
duration: 5000,
|
||||
icon: '⚡',
|
||||
style: {
|
||||
background: '#FFA500',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
const saved = localStorage.getItem('cadastroFormData');
|
||||
if (saved) {
|
||||
try {
|
||||
@@ -94,20 +81,6 @@ export default function CadastroPage() {
|
||||
localStorage.setItem('cadastroFormData', JSON.stringify(dataToSave));
|
||||
}, [currentStep, completedSteps, formData, contacts, password, passwordStrength, cnpjData, cepData, subdomain, domainAvailable, primaryColor, secondaryColor, logoUrl]);
|
||||
|
||||
// ATALHO DE TECLADO - Pressione T para preencher dados de teste
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === 't' || e.key === 'T') {
|
||||
if (confirm('🚀 PREENCHER DADOS DE TESTE?\n\nIsso vai preencher todos os campos automaticamente e ir pro Step 5.\n\nClique OK para continuar.')) {
|
||||
fillTestData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyPress);
|
||||
return () => window.removeEventListener('keydown', handleKeyPress);
|
||||
}, []);
|
||||
|
||||
// Função para atualizar formData
|
||||
const updateFormData = (name: string, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
@@ -323,48 +296,48 @@ export default function CadastroPage() {
|
||||
const handleSubmitRegistration = async () => {
|
||||
try {
|
||||
const payload = {
|
||||
// Step 1 - Dados Pessoais
|
||||
email: formData.email,
|
||||
password: password,
|
||||
fullName: formData.fullName,
|
||||
newsletter: formData.newsletter || false,
|
||||
|
||||
// Step 2 - Empresa
|
||||
companyName: formData.companyName,
|
||||
// Dados da agência
|
||||
agencyName: formData.companyName,
|
||||
subdomain: subdomain,
|
||||
cnpj: formData.cnpj,
|
||||
razaoSocial: cnpjData.razaoSocial,
|
||||
razaoSocial: formData.razaoSocial,
|
||||
description: formData.description,
|
||||
website: formData.website,
|
||||
industry: formData.industry,
|
||||
teamSize: formData.teamSize,
|
||||
|
||||
// Step 3 - Localização e Contato
|
||||
// Endereço
|
||||
cep: formData.cep,
|
||||
state: cepData.state,
|
||||
city: cepData.city,
|
||||
neighborhood: cepData.neighborhood,
|
||||
street: cepData.street,
|
||||
state: formData.state,
|
||||
city: formData.city,
|
||||
neighborhood: formData.neighborhood,
|
||||
street: formData.street,
|
||||
number: formData.number,
|
||||
complement: formData.complement,
|
||||
contacts: contacts,
|
||||
|
||||
// Step 4 - Domínio
|
||||
subdomain: subdomain,
|
||||
|
||||
// Step 5 - Personalização
|
||||
primaryColor: primaryColor,
|
||||
secondaryColor: secondaryColor,
|
||||
logoUrl: logoUrl,
|
||||
// Admin
|
||||
adminEmail: formData.email,
|
||||
adminPassword: password,
|
||||
adminName: formData.fullName,
|
||||
};
|
||||
|
||||
console.log('📤 Enviando cadastro completo:', payload);
|
||||
toast.loading('Criando sua conta...', { id: 'register' });
|
||||
|
||||
const data = await apiRequest(API_ENDPOINTS.register, {
|
||||
const response = await fetch('/api/admin/agencies', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || 'Erro ao criar conta');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
console.log('📥 Resposta data:', data);
|
||||
|
||||
// Salvar autenticação
|
||||
@@ -373,6 +346,7 @@ export default function CadastroPage() {
|
||||
id: data.id,
|
||||
email: data.email,
|
||||
name: data.name,
|
||||
role: data.role || 'ADMIN_AGENCIA',
|
||||
tenantId: data.tenantId,
|
||||
company: data.company,
|
||||
subdomain: data.subdomain
|
||||
@@ -382,7 +356,7 @@ export default function CadastroPage() {
|
||||
// Sucesso - limpar localStorage do form
|
||||
localStorage.removeItem('cadastroFormData');
|
||||
|
||||
toast.success('Conta criada com sucesso! Redirecionando para o painel...', {
|
||||
toast.success('Conta criada com sucesso! Redirecionando para seu painel...', {
|
||||
id: 'register',
|
||||
duration: 2000,
|
||||
style: {
|
||||
@@ -391,9 +365,10 @@ export default function CadastroPage() {
|
||||
},
|
||||
});
|
||||
|
||||
// Aguardar 2 segundos e redirecionar para o painel
|
||||
// Redirecionar para o painel da agência no subdomínio
|
||||
setTimeout(() => {
|
||||
window.location.href = '/painel';
|
||||
const agencyUrl = `http://${data.subdomain}.localhost/login`;
|
||||
window.location.href = agencyUrl;
|
||||
}, 2000);
|
||||
|
||||
} catch (error: any) {
|
||||
@@ -702,35 +677,12 @@ export default function CadastroPage() {
|
||||
{currentStepData?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* BOTÃO TESTE RÁPIDO - GRANDE E VISÍVEL */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={fillTestData}
|
||||
className="px-8 py-4 text-xl font-bold text-white bg-yellow-500 hover:bg-yellow-600 rounded-lg shadow-2xl border-4 border-yellow-700 animate-pulse"
|
||||
style={{ minWidth: '250px' }}
|
||||
>
|
||||
⚡ TESTE RÁPIDO ⚡
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Formulário */}
|
||||
<div className="flex-1 overflow-y-auto bg-[#FDFDFC] px-6 sm:px-12 py-6">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Botão Teste Rápido GRANDE */}
|
||||
<div className="mb-6 p-4 bg-yellow-50 border-2 border-yellow-400 rounded-lg">
|
||||
<button
|
||||
type="button"
|
||||
onClick={fillTestData}
|
||||
className="w-full px-6 py-4 text-lg font-bold text-white bg-gradient-to-r from-[#FF3A05] to-[#FF0080] rounded-lg hover:opacity-90 transition-opacity shadow-lg"
|
||||
>
|
||||
⚡ CLIQUE AQUI - PREENCHER DADOS DE TESTE AUTOMATICAMENTE
|
||||
</button>
|
||||
<p className="text-sm text-yellow-800 mt-2 text-center">
|
||||
Preenche todos os campos e vai direto pro Step 5 para você só clicar em Finalizar
|
||||
</p>
|
||||
</div>
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleNext(e); }} className="space-y-6">
|
||||
{currentStep === 1 && (
|
||||
<div className="space-y-5">
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||
|
||||
export default function LoginLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<div className="min-h-screen bg-[#FDFDFC] dark:bg-gray-900">
|
||||
{children}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
<div className="min-h-screen bg-[#FDFDFC] dark:bg-gray-900">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@ 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 bg-linear-to-r from-[#FF3A05] to-[#FF0080]">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,10 +86,10 @@ export default function RecuperarSenhaPage() {
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[28px] font-bold text-[#000000]">
|
||||
Recuperar senha
|
||||
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white">
|
||||
Recuperar Senha
|
||||
</h2>
|
||||
<p className="text-[14px] text-[#7D7D7D] mt-2">
|
||||
<p className="text-[14px] text-zinc-600 dark:text-zinc-400 mt-2">
|
||||
Digite seu email e enviaremos um link para redefinir sua senha
|
||||
</p>
|
||||
</div>
|
||||
@@ -136,15 +136,15 @@ export default function RecuperarSenhaPage() {
|
||||
<i className="ri-mail-check-line text-4xl text-[#10B981]" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-[28px] font-bold text-[#000000] mb-4">
|
||||
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
|
||||
Email enviado!
|
||||
</h2>
|
||||
|
||||
<p className="text-[14px] text-[#7D7D7D] mb-2">
|
||||
<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-[#000000] mb-6">
|
||||
<p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
|
||||
{email}
|
||||
</p>
|
||||
|
||||
@@ -152,10 +152,10 @@ export default function RecuperarSenhaPage() {
|
||||
<div className="flex gap-4">
|
||||
<i className="ri-information-line text-[#0EA5E9] text-xl mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[#000000] mb-1">
|
||||
<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-[#7D7D7D]">
|
||||
<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>
|
||||
@@ -185,12 +185,12 @@ export default function RecuperarSenhaPage() {
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
<h1 className="text-5xl font-bold tracking-tight text-white">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export default function LayoutWrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const BACKEND_BASE_URL = 'http://aggios-backend:8080';
|
||||
|
||||
export async function GET(_request: NextRequest, context: { params: Promise<{ id: string }> }) {
|
||||
try {
|
||||
const { id } = await context.params;
|
||||
const response = await fetch(`${BACKEND_BASE_URL}/api/admin/agencies/${id}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
const contentType = response.headers.get('content-type');
|
||||
const isJSON = contentType && contentType.includes('application/json');
|
||||
const payload = isJSON ? await response.json() : await response.text();
|
||||
|
||||
if (!response.ok) {
|
||||
const errorBody = typeof payload === 'string' ? { error: payload } : payload;
|
||||
return NextResponse.json(errorBody, { status: response.status });
|
||||
}
|
||||
|
||||
return NextResponse.json(payload, { status: response.status });
|
||||
} catch (error) {
|
||||
console.error('Agency detail proxy error:', error);
|
||||
return NextResponse.json({ error: 'Erro ao buscar detalhes da agência' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(_request: NextRequest, context: { params: Promise<{ id: string }> }) {
|
||||
try {
|
||||
const { id } = await context.params;
|
||||
const response = await fetch(`${BACKEND_BASE_URL}/api/admin/agencies/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (!response.ok && response.status !== 204) {
|
||||
const payload = await response.json().catch(() => ({ error: 'Erro ao excluir agência' }));
|
||||
return NextResponse.json(payload, { status: response.status });
|
||||
}
|
||||
|
||||
return new NextResponse(null, { status: response.status });
|
||||
} catch (error) {
|
||||
console.error('Agency delete proxy error:', error);
|
||||
return NextResponse.json({ error: 'Erro ao excluir agência' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
54
front-end-dash.aggios.app/app/api/admin/agencies/route.ts
Normal file
54
front-end-dash.aggios.app/app/api/admin/agencies/route.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const response = await fetch('http://aggios-backend:8080/api/admin/agencies', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(data, { status: response.status });
|
||||
}
|
||||
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Agencies list error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Erro ao buscar agências' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
|
||||
const response = await fetch('http://aggios-backend:8080/api/admin/agencies/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(data, { status: response.status });
|
||||
}
|
||||
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Agency registration error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Erro ao registrar agência' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
29
front-end-dash.aggios.app/app/api/auth/login/route.ts
Normal file
29
front-end-dash.aggios.app/app/api/auth/login/route.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
|
||||
const response = await fetch('http://aggios-backend:8080/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(data, { status: response.status });
|
||||
}
|
||||
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Erro ao processar login' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,94 +1,165 @@
|
||||
@config "../tailwind.config.js";
|
||||
|
||||
@import "tailwindcss";
|
||||
@import "remixicon/fonts/remixicon.css";
|
||||
@import "./tokens.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
/* Cores do Design System Aggios */
|
||||
--primary: #FF3A05;
|
||||
--secondary: #FF0080;
|
||||
--background: #FDFDFC;
|
||||
--foreground: #000000;
|
||||
--text-secondary: #7D7D7D;
|
||||
--border: #E5E5E5;
|
||||
--white: #FFFFFF;
|
||||
color-scheme: light;
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
/* Gradiente */
|
||||
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
|
||||
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Espaçamentos */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
@layer base {
|
||||
* {
|
||||
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-surface-muted);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-brand-500);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.surface-card {
|
||||
background-color: var(--color-surface-card);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
box-shadow: 0 20px 80px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--color-gradient-brand);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-text-secondary: var(--text-secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--font-sans: var(--font-inter);
|
||||
--font-heading: var(--font-open-sans);
|
||||
--font-mono: var(--font-fira-code);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
|
||||
line-height: 1.5;
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
/* Estilos base dos inputs */
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Focus visible para acessibilidade */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Hero section gradient text */
|
||||
.gradient-text {
|
||||
background: var(--gradient-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Hover gradient text */
|
||||
.hover\:gradient-text:hover {
|
||||
background: var(--gradient-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Group hover para remover gradiente e usar cor sólida */
|
||||
.group:hover .group-hover\:text-white {
|
||||
background: none !important;
|
||||
-webkit-background-clip: unset !important;
|
||||
-webkit-text-fill-color: unset !important;
|
||||
background-clip: unset !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Smooth scroll */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@@ -2,17 +2,18 @@ import type { Metadata } from "next";
|
||||
import { Inter, Open_Sans, Fira_Code } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import LayoutWrapper from "./LayoutWrapper";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const openSans = Open_Sans({
|
||||
variable: "--font-open-sans",
|
||||
subsets: ["latin"],
|
||||
weight: ["700"],
|
||||
weight: ["600", "700"],
|
||||
});
|
||||
|
||||
const firaCode = Fira_Code({
|
||||
@@ -32,31 +33,16 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="pt-BR">
|
||||
<html lang="pt-BR" suppressHydrationWarning>
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
const theme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isDark = theme === 'dark' || (!theme && prefersDark);
|
||||
if (isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<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 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors`}
|
||||
>
|
||||
<LayoutWrapper>
|
||||
{children}
|
||||
</LayoutWrapper>
|
||||
<body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
||||
<LayoutWrapper>
|
||||
{children}
|
||||
</LayoutWrapper>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,27 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
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 } from '@/lib/auth';
|
||||
import { API_ENDPOINTS, apiRequest } from '@/lib/api';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
|
||||
|
||||
export default function LoginPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuperAdmin, setIsSuperAdmin] = useState(false);
|
||||
const [subdomain, setSubdomain] = useState<string>('');
|
||||
const [formData, setFormData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Detectar se é dash (SUPERADMIN) ou agência
|
||||
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();
|
||||
|
||||
// Validações básicas
|
||||
if (!formData.email) {
|
||||
toast.error('Por favor, insira seu email');
|
||||
return;
|
||||
@@ -40,9 +50,11 @@ export default function LoginPage() {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/auth/login', {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
@@ -56,20 +68,23 @@ export default function LoginPage() {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Salvar token e dados do usuário
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
|
||||
console.log('Login successful:', data.user);
|
||||
|
||||
toast.success('Login realizado com sucesso! Redirecionando...');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = '/painel';
|
||||
window.location.href = '/dashboard';
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Erro ao fazer login. Verifique suas credenciais.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
}; return (
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
@@ -107,8 +122,10 @@ export default function LoginPage() {
|
||||
<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 bg-linear-to-r from-[#FF3A05] to-[#FF0080]">
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
<div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<h1 className="text-3xl font-bold text-white">
|
||||
{isSuperAdmin ? 'aggios' : subdomain}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -120,10 +137,13 @@ export default function LoginPage() {
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[28px] font-bold text-[#000000] dark:text-white">
|
||||
Bem-vindo de volta
|
||||
{isSuperAdmin ? 'Painel Administrativo' : 'Bem-vindo de volta'}
|
||||
</h2>
|
||||
<p className="text-[14px] text-[#7D7D7D] dark:text-gray-400 mt-2">
|
||||
Entre com suas credenciais para acessar o painel
|
||||
{isSuperAdmin
|
||||
? 'Acesso exclusivo para administradores Aggios'
|
||||
: 'Entre com suas credenciais para acessar o painel'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -145,23 +165,21 @@ export default function LoginPage() {
|
||||
placeholder="Digite sua senha"
|
||||
leftIcon="ri-lock-line"
|
||||
value={formData.password}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, password: e.target.value })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Checkbox
|
||||
id="rememberMe"
|
||||
label="Lembrar de mim"
|
||||
checked={formData.rememberMe}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, rememberMe: e.target.checked })
|
||||
}
|
||||
onChange={(e) => setFormData({ ...formData, rememberMe: e.target.checked })}
|
||||
/>
|
||||
<Link
|
||||
href="/recuperar-senha"
|
||||
className="text-[14px] gradient-text hover:underline font-medium cursor-pointer"
|
||||
className="text-[14px] font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
|
||||
>
|
||||
Esqueceu a senha?
|
||||
</Link>
|
||||
@@ -170,104 +188,67 @@ export default function LoginPage() {
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
className="w-full"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Entrar
|
||||
{isLoading ? 'Entrando...' : 'Entrar'}
|
||||
</Button>
|
||||
|
||||
{/* Link para cadastro - apenas para agências */}
|
||||
{!isSuperAdmin && (
|
||||
<p className="text-center text-[14px] text-[#7D7D7D] dark:text-gray-400">
|
||||
Ainda não tem conta?{' '}
|
||||
<a
|
||||
href="http://dash.localhost/cadastro"
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ background: 'var(--gradient-primary)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
|
||||
>
|
||||
Cadastre sua agência
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-8">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-[#E5E5E5]" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-[13px]">
|
||||
<span className="px-4 bg-white text-[#7D7D7D]">
|
||||
ou continue com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Login */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Button variant="outline" leftIcon="ri-google-fill">
|
||||
Google
|
||||
</Button>
|
||||
<Button variant="outline" leftIcon="ri-microsoft-fill">
|
||||
Microsoft
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Sign up link */}
|
||||
<p className="text-center mt-8 text-[14px] text-[#7D7D7D]">
|
||||
Não tem uma conta?{" "}
|
||||
<Link href="/cadastro" className="gradient-text font-medium hover:underline cursor-pointer">
|
||||
Criar conta
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-dashboard-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Gerencie seus projetos com facilidade</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Tenha controle total sobre seus projetos, equipe e clientes em um só lugar.
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-12 text-white">
|
||||
<div className="max-w-md text-center">
|
||||
<h1 className="text-5xl font-bold mb-6">
|
||||
{isSuperAdmin ? 'aggios' : subdomain}
|
||||
</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
{isSuperAdmin
|
||||
? 'Gerencie todas as agências em um só lugar'
|
||||
: 'Gerencie seus clientes com eficiência'
|
||||
}
|
||||
</p>
|
||||
|
||||
{/* 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">Gestão Completa</h4>
|
||||
<p className="text-white/70 text-sm">Controle projetos, tarefas e prazos em tempo real</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6 text-left">
|
||||
<div>
|
||||
<i className="ri-shield-check-line text-3xl mb-2"></i>
|
||||
<h3 className="font-semibold mb-1">Seguro</h3>
|
||||
<p className="text-sm opacity-80">Proteção de dados</p>
|
||||
</div>
|
||||
<div 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-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Relatórios Detalhados</h4>
|
||||
<p className="text-white/70 text-sm">Análises e métricas para tomada de decisão</p>
|
||||
</div>
|
||||
<div>
|
||||
<i className="ri-speed-line text-3xl mb-2"></i>
|
||||
<h3 className="font-semibold mb-1">Rápido</h3>
|
||||
<p className="text-sm opacity-80">Performance otimizada</p>
|
||||
</div>
|
||||
<div 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-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Colaboração em Equipe</h4>
|
||||
<p className="text-white/70 text-sm">Trabalhe junto com sua equipe de forma eficiente</p>
|
||||
</div>
|
||||
<div>
|
||||
<i className="ri-team-line text-3xl mb-2"></i>
|
||||
<h3 className="font-semibold mb-1">Colaborativo</h3>
|
||||
<p className="text-sm opacity-80">Trabalho em equipe</p>
|
||||
</div>
|
||||
<div>
|
||||
<i className="ri-line-chart-line text-3xl mb-2"></i>
|
||||
<h3 className="font-semibold mb-1">Insights</h3>
|
||||
<p className="text-sm opacity-80">Relatórios detalhados</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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,175 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
||||
|
||||
export default function PainelPage() {
|
||||
const router = useRouter();
|
||||
const [userData, setUserData] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se usuário está logado
|
||||
if (!isAuthenticated()) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const user = getUser();
|
||||
if (user) {
|
||||
setUserData(user);
|
||||
setLoading(false);
|
||||
} else {
|
||||
router.push('/login');
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF3A05] mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Carregando...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-[#FF3A05] to-[#FF0080] rounded-lg">
|
||||
<span className="text-white font-bold text-lg">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Aggios</h1>
|
||||
<p className="text-sm text-gray-500">{userData?.company}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-gray-900">{userData?.name}</p>
|
||||
<p className="text-xs text-gray-500">{userData?.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
clearAuth();
|
||||
router.push('/login');
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Welcome Card */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-[#FF3A05] to-[#FF0080] rounded-full flex items-center justify-center">
|
||||
<span className="text-2xl">🎉</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Bem-vindo ao Aggios, {userData?.name}!
|
||||
</h2>
|
||||
<p className="text-gray-600 mt-1">
|
||||
Sua conta foi criada com sucesso. Este é o seu painel administrativo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Projetos</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">0</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Clientes</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">0</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Receita</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">R$ 0</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next Steps */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Próximos Passos</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Complete seu perfil</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">Adicione mais informações sobre sua empresa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Adicione seu primeiro cliente</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">Comece a gerenciar seus clientes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Crie seu primeiro projeto</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">Organize seu trabalho em projetos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
485
front-end-dash.aggios.app/app/superadmin/page.tsx
Normal file
485
front-end-dash.aggios.app/app/superadmin/page.tsx
Normal file
@@ -0,0 +1,485 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
||||
|
||||
interface Agency {
|
||||
id: string;
|
||||
name: string;
|
||||
subdomain: string;
|
||||
domain: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface AgencyDetails {
|
||||
access_url: string;
|
||||
tenant: {
|
||||
id: string;
|
||||
name: string;
|
||||
domain: string;
|
||||
subdomain: string;
|
||||
cnpj?: string;
|
||||
razao_social?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
website?: string;
|
||||
address?: string;
|
||||
city?: string;
|
||||
state?: string;
|
||||
zip?: string;
|
||||
description?: string;
|
||||
industry?: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
admin?: {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
role: string;
|
||||
created_at: string;
|
||||
tenant_id?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function PainelPage() {
|
||||
const router = useRouter();
|
||||
const [userData, setUserData] = useState<any>(null);
|
||||
const [agencies, setAgencies] = useState<Agency[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingAgencies, setLoadingAgencies] = useState(true);
|
||||
const [selectedAgencyId, setSelectedAgencyId] = useState<string | null>(null);
|
||||
const [selectedDetails, setSelectedDetails] = useState<AgencyDetails | null>(null);
|
||||
const [detailsLoadingId, setDetailsLoadingId] = useState<string | null>(null);
|
||||
const [detailsError, setDetailsError] = useState<string | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se usuário está logado
|
||||
if (!isAuthenticated()) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const user = getUser();
|
||||
if (user) {
|
||||
// Verificar se é SUPERADMIN
|
||||
if (user.role !== 'SUPERADMIN') {
|
||||
alert('Acesso negado. Apenas SUPERADMIN pode acessar este painel.');
|
||||
clearAuth();
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
setUserData(user);
|
||||
setLoading(false);
|
||||
loadAgencies();
|
||||
} else {
|
||||
router.push('/login');
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const loadAgencies = async () => {
|
||||
setLoadingAgencies(true);
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencies(data);
|
||||
if (selectedAgencyId && !data.some((agency: Agency) => agency.id === selectedAgencyId)) {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
}
|
||||
} else {
|
||||
console.error('Erro ao carregar agências');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar agências:', error);
|
||||
} finally {
|
||||
setLoadingAgencies(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewDetails = async (agencyId: string) => {
|
||||
setDetailsError(null);
|
||||
setDetailsLoadingId(agencyId);
|
||||
setSelectedAgencyId(agencyId);
|
||||
setSelectedDetails(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${agencyId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setDetailsError(data?.error || 'Não foi possível carregar os detalhes da agência.');
|
||||
setSelectedAgencyId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedDetails(data);
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar detalhes da agência:', error);
|
||||
setDetailsError('Erro ao carregar detalhes da agência.');
|
||||
setSelectedAgencyId(null);
|
||||
} finally {
|
||||
setDetailsLoadingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAgency = async (agencyId: string) => {
|
||||
const confirmDelete = window.confirm('Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.');
|
||||
if (!confirmDelete) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeletingId(agencyId);
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${agencyId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (!response.ok && response.status !== 204) {
|
||||
const data = await response.json().catch(() => ({ error: 'Erro ao excluir agência.' }));
|
||||
alert(data?.error || 'Erro ao excluir agência.');
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Agência excluída com sucesso!');
|
||||
if (selectedAgencyId === agencyId) {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
}
|
||||
|
||||
await loadAgencies();
|
||||
} catch (error) {
|
||||
console.error('Erro ao excluir agência:', error);
|
||||
alert('Erro ao excluir agência.');
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF3A05] mx-auto mb-4"></div>
|
||||
<p className="text-gray-600 dark:text-gray-400">Carregando...</p>
|
||||
</div>
|
||||
{detailsLoadingId && (
|
||||
<div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-dashed border-[#FF3A05] p-6 text-sm text-gray-600 dark:text-gray-300">
|
||||
Carregando detalhes da agência selecionada...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detailsError && !detailsLoadingId && (
|
||||
<div className="mt-8 bg-red-50 dark:bg-red-900/40 border border-red-200 dark:border-red-800 rounded-lg p-6 text-red-700 dark:text-red-200">
|
||||
{detailsError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDetails && !detailsLoadingId && (
|
||||
<div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Detalhes da Agência</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Informações enviadas no cadastro e dados administrativos</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href={selectedDetails.access_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-[#FF3A05] hover:text-[#FF0080]"
|
||||
>
|
||||
Abrir painel da agência
|
||||
</a>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
setDetailsError(null);
|
||||
}}
|
||||
className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-6 space-y-6">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Dados da Agência</h4>
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Nome Fantasia</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Razão Social</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.razao_social || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">CNPJ</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.cnpj || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Segmento</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.industry || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Descrição</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.description || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Status</p>
|
||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold ${selectedDetails.tenant.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200'}`}>
|
||||
{selectedDetails.tenant.is_active ? 'Ativa' : 'Inativa'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Endereço e Contato</h4>
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Endereço completo</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.address || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Cidade / Estado</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.city || '—'} {selectedDetails.tenant.state ? `- ${selectedDetails.tenant.state}` : ''}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">CEP</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.zip || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Website</p>
|
||||
{selectedDetails.tenant.website ? (
|
||||
<a href={selectedDetails.tenant.website} target="_blank" rel="noopener noreferrer" className="text-[#FF3A05] hover:text-[#FF0080]">
|
||||
{selectedDetails.tenant.website}
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-gray-900 dark:text-white">—</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">E-mail comercial</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.email || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Telefone</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.phone || '—'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Administrador da Agência</h4>
|
||||
{selectedDetails.admin ? (
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Nome</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.admin.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">E-mail</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.admin.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Perfil</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.admin.role}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Criado em</p>
|
||||
<p className="text-gray-900 dark:text-white">{new Date(selectedDetails.admin.created_at).toLocaleString('pt-BR')}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400">Nenhum administrador associado encontrado.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-400 dark:text-gray-500">
|
||||
Última atualização: {new Date(selectedDetails.tenant.updated_at).toLocaleString('pt-BR')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
{/* Header */}
|
||||
<header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-[#FF3A05] to-[#FF0080] rounded-lg">
|
||||
<span className="text-white font-bold text-lg">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white">Aggios</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Painel Administrativo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">Admin AGGIOS</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{userData?.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
clearAuth();
|
||||
router.push('/login');
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Total de Agências</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{agencies.length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Agências Ativas</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{agencies.filter(a => a.is_active).length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Agências Inativas</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{agencies.filter(a => !a.is_active).length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agencies Table */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Agências Cadastradas</h2>
|
||||
</div>
|
||||
|
||||
{loadingAgencies ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#FF3A05] mx-auto mb-4"></div>
|
||||
<p className="text-gray-600 dark:text-gray-400">Carregando agências...</p>
|
||||
</div>
|
||||
) : agencies.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400">Nenhuma agência cadastrada ainda.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-900">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Agência</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Subdomínio</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Domínio</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Data de Criação</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{agencies.map((agency) => (
|
||||
<tr
|
||||
key={agency.id}
|
||||
className={`hover:bg-gray-50 dark:hover:bg-gray-700 ${selectedAgencyId === agency.id ? 'bg-orange-50/60 dark:bg-gray-700/60' : ''}`}
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-[#FF3A05] to-[#FF0080] rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold">{agency.name.charAt(0).toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">{agency.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900 dark:text-white font-mono">{agency.subdomain}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{agency.domain || '-'}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${agency.is_active
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
|
||||
}`}>
|
||||
{agency.is_active ? 'Ativa' : 'Inativa'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{new Date(agency.created_at).toLocaleDateString('pt-BR')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
|
||||
<button
|
||||
onClick={() => handleViewDetails(agency.id)}
|
||||
className="inline-flex items-center px-3 py-1.5 rounded-md bg-[#FF3A05] text-white hover:bg-[#FF0080] transition"
|
||||
disabled={detailsLoadingId === agency.id || deletingId === agency.id}
|
||||
>
|
||||
{detailsLoadingId === agency.id ? 'Carregando...' : 'Visualizar'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteAgency(agency.id)}
|
||||
className="inline-flex items-center px-3 py-1.5 rounded-md border border-red-500 text-red-600 hover:bg-red-500 hover:text-white transition disabled:opacity-60"
|
||||
disabled={deletingId === agency.id || detailsLoadingId === agency.id}
|
||||
>
|
||||
{deletingId === agency.id ? 'Excluindo...' : 'Excluir'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
front-end-dash.aggios.app/app/tokens.css
Normal file
50
front-end-dash.aggios.app/app/tokens.css
Normal file
@@ -0,0 +1,50 @@
|
||||
@layer theme {
|
||||
:root {
|
||||
/* Gradientes */
|
||||
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
|
||||
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
--gradient-primary: linear-gradient(90deg, #FF3A05, #FF0080);
|
||||
--color-gradient-brand: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
|
||||
/* Superfícies e tipografia */
|
||||
--color-surface-light: #ffffff;
|
||||
--color-surface-dark: #0a0a0a;
|
||||
--color-surface-muted: #f5f7fb;
|
||||
--color-surface-card: #ffffff;
|
||||
--color-border-strong: rgba(15, 23, 42, 0.08);
|
||||
--color-text-primary: #0f172a;
|
||||
--color-text-secondary: #475569;
|
||||
--color-text-inverse: #f8fafc;
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
--color-gray-950: #030712;
|
||||
|
||||
/* Espaçamento */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Invertendo superfícies e texto para dark mode */
|
||||
--color-surface-light: #020617;
|
||||
--color-surface-dark: #f8fafc;
|
||||
--color-surface-muted: #0b1220;
|
||||
--color-surface-card: #0f172a;
|
||||
--color-border-strong: rgba(148, 163, 184, 0.25);
|
||||
--color-text-primary: #f8fafc;
|
||||
--color-text-secondary: #cbd5f5;
|
||||
--color-text-inverse: #0f172a;
|
||||
}
|
||||
}
|
||||
100
front-end-dash.aggios.app/components/ThemeTester.tsx
Normal file
100
front-end-dash.aggios.app/components/ThemeTester.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { SwatchIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
const themePresets = [
|
||||
{
|
||||
name: 'Laranja/Rosa (Padrão)',
|
||||
gradient: 'linear-gradient(90deg, #FF3A05, #FF0080)',
|
||||
},
|
||||
{
|
||||
name: 'Azul/Roxo',
|
||||
gradient: 'linear-gradient(90deg, #0066FF, #9333EA)',
|
||||
},
|
||||
{
|
||||
name: 'Verde/Esmeralda',
|
||||
gradient: 'linear-gradient(90deg, #10B981, #059669)',
|
||||
},
|
||||
{
|
||||
name: 'Ciano/Azul',
|
||||
gradient: 'linear-gradient(90deg, #06B6D4, #3B82F6)',
|
||||
},
|
||||
{
|
||||
name: 'Rosa/Roxo',
|
||||
gradient: 'linear-gradient(90deg, #EC4899, #A855F7)',
|
||||
},
|
||||
{
|
||||
name: 'Vermelho/Laranja',
|
||||
gradient: 'linear-gradient(90deg, #EF4444, #F97316)',
|
||||
},
|
||||
{
|
||||
name: 'Índigo/Violeta',
|
||||
gradient: 'linear-gradient(90deg, #6366F1, #8B5CF6)',
|
||||
},
|
||||
{
|
||||
name: 'Âmbar/Amarelo',
|
||||
gradient: 'linear-gradient(90deg, #F59E0B, #EAB308)',
|
||||
},
|
||||
];
|
||||
|
||||
export default function ThemeTester() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const applyTheme = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50">
|
||||
{/* Botão flutuante */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
title="Testar Temas"
|
||||
>
|
||||
<SwatchIcon className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
|
||||
{/* Painel de temas */}
|
||||
{isOpen && (
|
||||
<div className="absolute bottom-16 right-0 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Testar Gradientes</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Clique para aplicar temporariamente
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 max-h-96 overflow-y-auto space-y-2">
|
||||
{themePresets.map((theme) => (
|
||||
<button
|
||||
key={theme.name}
|
||||
onClick={() => applyTheme(theme.gradient)}
|
||||
className="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group"
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg shrink-0"
|
||||
style={{ background: theme.gradient }}
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white text-left">
|
||||
{theme.name}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
💡 Recarregue a página para voltar ao tema original
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import { useTheme } from '@/contexts/ThemeContext';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const { toggleTheme } = useTheme();
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800" />;
|
||||
}
|
||||
|
||||
const isDark = resolvedTheme === 'dark';
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-lg bg-gradient-to-r from-primary/10 to-secondary/10 hover:from-primary/20 hover:to-secondary/20 transition-all duration-300 border border-primary/20 hover:border-primary/40"
|
||||
aria-label="Alternar tema"
|
||||
type="button"
|
||||
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||
aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
|
||||
title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
|
||||
>
|
||||
{typeof window !== 'undefined' && document.documentElement.classList.contains('dark') ? (
|
||||
<i className="ri-sun-line text-lg gradient-text font-bold" />
|
||||
{isDark ? (
|
||||
<SunIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
) : (
|
||||
<i className="ri-moon-line text-lg gradient-text font-bold" />
|
||||
<MoonIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -47,7 +47,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
<button
|
||||
ref={ref}
|
||||
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||
style={variant === 'primary' ? { background: 'var(--gradient)' } : undefined}
|
||||
style={variant === 'primary' ? { background: 'var(--gradient-primary)' } : undefined}
|
||||
disabled={disabled || isLoading}
|
||||
{...props}
|
||||
>
|
||||
|
||||
@@ -36,7 +36,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
${className}
|
||||
`}
|
||||
style={{
|
||||
background: checked ? 'var(--gradient)' : undefined,
|
||||
background: checked ? 'var(--gradient-primary)' : undefined,
|
||||
}}
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
|
||||
95
front-end-dash.aggios.app/components/ui/Dialog.tsx
Normal file
95
front-end-dash.aggios.app/components/ui/Dialog.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Dialog as HeadlessDialog, Transition } from '@headlessui/react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface DialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
showClose?: boolean;
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'max-w-md',
|
||||
md: 'max-w-lg',
|
||||
lg: 'max-w-2xl',
|
||||
xl: 'max-w-4xl',
|
||||
};
|
||||
|
||||
export default function Dialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
children,
|
||||
size = 'md',
|
||||
showClose = true,
|
||||
}: DialogProps) {
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<HeadlessDialog as="div" className="relative z-50" onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<HeadlessDialog.Panel
|
||||
className={`w-full ${sizeClasses[size]} transform rounded-2xl bg-white dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all border border-gray-200 dark:border-gray-700`}
|
||||
>
|
||||
{title && (
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<HeadlessDialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-semibold text-gray-900 dark:text-white"
|
||||
>
|
||||
{title}
|
||||
</HeadlessDialog.Title>
|
||||
{showClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{children}
|
||||
</HeadlessDialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</HeadlessDialog>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
||||
// Componente auxiliar para o corpo do dialog
|
||||
Dialog.Body = function DialogBody({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={`text-sm text-gray-600 dark:text-gray-300 ${className}`}>{children}</div>;
|
||||
};
|
||||
|
||||
// Componente auxiliar para o rodapé do dialog
|
||||
Dialog.Footer = function DialogFooter({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return <div className={`mt-6 flex items-center justify-end space-x-3 ${className}`}>{children}</div>;
|
||||
};
|
||||
@@ -107,7 +107,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
</select>
|
||||
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-[#000000] mb-2">
|
||||
<label className="block text-[13px] font-semibold text-zinc-900 dark:text-white mb-2">
|
||||
{label}
|
||||
{required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
</label>
|
||||
@@ -116,7 +116,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
<div ref={containerRef} className="relative">
|
||||
{leftIcon && (
|
||||
<i
|
||||
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none z-10`}
|
||||
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-zinc-500 dark:text-zinc-400 text-[20px] pointer-events-none z-10`}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -126,41 +126,41 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white
|
||||
text-[#000000] text-left
|
||||
border rounded-md bg-white dark:bg-zinc-800
|
||||
text-zinc-900 dark:text-white text-left
|
||||
transition-all
|
||||
cursor-pointer
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
pr-11
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-[#E5E5E5] focus:border-[#FF3A05]"
|
||||
: "border-zinc-200 dark:border-zinc-700 focus:border-[#FF3A05]"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{selectedOption ? selectedOption.label : (
|
||||
<span className="text-[#7D7D7D]">{placeholder || "Selecione uma opção"}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-400">{placeholder || "Selecione uma opção"}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<i className={`ri-arrow-${isOpen ? 'up' : 'down'}-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none transition-transform`} />
|
||||
<i className={`ri-arrow-${isOpen ? 'up' : 'down'}-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-zinc-500 dark:text-zinc-400 text-[20px] pointer-events-none transition-transform`} />
|
||||
|
||||
{/* Dropdown */}
|
||||
{isOpen && (
|
||||
<div className="absolute z-50 w-full mt-2 bg-white border border-[#E5E5E5] rounded-md shadow-lg max-h-[300px] overflow-hidden">
|
||||
<div className="absolute z-50 w-full mt-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg max-h-[300px] overflow-hidden">
|
||||
{/* Search input */}
|
||||
<div className="p-2 border-b border-[#E5E5E5]">
|
||||
<div className="p-2 border-b border-zinc-200 dark:border-zinc-700">
|
||||
<div className="relative">
|
||||
<i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[16px]" />
|
||||
<i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 dark:text-zinc-400 text-[16px]" />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Buscar..."
|
||||
className="w-full pl-9 pr-3 py-2 text-[14px] border border-[#E5E5E5] rounded-md outline-none focus:border-[#FF3A05] shadow-none"
|
||||
className="w-full pl-9 pr-3 py-2 text-[14px] border border-zinc-200 dark:border-zinc-700 rounded-md outline-none focus:border-[#FF3A05] shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder:text-zinc-500 dark:placeholder:text-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,15 +175,15 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
onClick={() => handleSelect(option)}
|
||||
className={`
|
||||
w-full px-4 py-2.5 text-left text-[14px] transition-colors
|
||||
hover:bg-[#FDFDFC] cursor-pointer
|
||||
${selectedOption?.value === option.value ? 'bg-[#FF3A05]/10 text-[#FF3A05] font-medium' : 'text-[#000000]'}
|
||||
hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer
|
||||
${selectedOption?.value === option.value ? 'bg-[#FF3A05]/10 text-[#FF3A05] font-medium' : 'text-zinc-900 dark:text-white'}
|
||||
`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-8 text-center text-[#7D7D7D] text-[14px]">
|
||||
<div className="px-4 py-8 text-center text-zinc-500 dark:text-zinc-400 text-[14px]">
|
||||
Nenhum resultado encontrado
|
||||
</div>
|
||||
)}
|
||||
@@ -193,7 +193,7 @@ const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
</div>
|
||||
|
||||
{helperText && !error && (
|
||||
<p className="mt-1.5 text-[12px] text-[#7D7D7D]">{helperText}</p>
|
||||
<p className="mt-1.5 text-[12px] text-zinc-600 dark:text-zinc-400">{helperText}</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
|
||||
@@ -3,3 +3,4 @@ export { default as Input } from "./Input";
|
||||
export { default as Checkbox } from "./Checkbox";
|
||||
export { default as Select } from "./Select";
|
||||
export { default as SearchableSelect } from "./SearchableSelect";
|
||||
export { default as Dialog } from "./Dialog";
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, ReactNode } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const toggleTheme = () => {
|
||||
const html = document.documentElement;
|
||||
const isDark = html.classList.contains('dark');
|
||||
|
||||
if (isDark) {
|
||||
html.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
html.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
};
|
||||
|
||||
// Detectar tema atual
|
||||
const isDark = typeof window !== 'undefined' && document.documentElement.classList.contains('dark');
|
||||
const theme: Theme = isDark ? 'dark' : 'light';
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -6,9 +6,10 @@ export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
tenantId: string;
|
||||
company: string;
|
||||
subdomain: string;
|
||||
role: string;
|
||||
tenantId?: string;
|
||||
company?: string;
|
||||
subdomain?: string;
|
||||
}
|
||||
|
||||
const TOKEN_KEY = 'token';
|
||||
|
||||
33
front-end-dash.aggios.app/middleware.ts
Normal file
33
front-end-dash.aggios.app/middleware.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const hostname = request.headers.get('host') || '';
|
||||
const url = request.nextUrl;
|
||||
|
||||
// Extrair subdomínio
|
||||
const subdomain = hostname.split('.')[0];
|
||||
|
||||
// Se for dash.localhost - rotas administrativas (SUPERADMIN)
|
||||
if (subdomain === 'dash') {
|
||||
// Permitir acesso a /superadmin, /cadastro, /login
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
// Se for agência ({subdomain}.localhost) - rotas de tenant
|
||||
// Permitir /dashboard, /login, /clientes, etc.
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: [
|
||||
/*
|
||||
* Match all request paths except for the ones starting with:
|
||||
* - api (API routes)
|
||||
* - _next/static (static files)
|
||||
* - _next/image (image optimization files)
|
||||
* - favicon.ico (favicon file)
|
||||
*/
|
||||
'/((?!api|_next/static|_next/image|favicon.ico).*)',
|
||||
],
|
||||
};
|
||||
@@ -1,7 +1,9 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
experimental: {
|
||||
externalDir: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
936
front-end-dash.aggios.app/package-lock.json
generated
936
front-end-dash.aggios.app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,12 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^2.2.9",
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"lucide-react": "^0.556.0",
|
||||
"next": "16.0.7",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
|
||||
12
front-end-dash.aggios.app/tailwind.config.js
Normal file
12
front-end-dash.aggios.app/tailwind.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
const sharedPreset = require("./tailwind.preset.js");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const config = {
|
||||
presets: [sharedPreset],
|
||||
content: [
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
35
front-end-dash.aggios.app/tailwind.preset.js
Normal file
35
front-end-dash.aggios.app/tailwind.preset.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
mono: ['var(--font-fira-code)', 'ui-monospace', 'SFMono-Regular', 'monospace'],
|
||||
heading: ['var(--font-open-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
950: '#082f49',
|
||||
},
|
||||
surface: {
|
||||
light: '#ffffff',
|
||||
dark: '#0a0a0a',
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
glow: '0 0 20px rgba(14, 165, 233, 0.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user