feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
@@ -1,26 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@@ -1,782 +0,0 @@
|
||||
"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: 'Marca', gradient: 'linear-gradient(135deg, #ff3a05, #ff0080)', colors: ['#ff3a05', '#ff0080'] },
|
||||
{ name: 'Azul/Roxo', gradient: 'linear-gradient(135deg, #0066FF, #9333EA)', colors: ['#0066FF', '#9333EA'] },
|
||||
{ name: 'Verde/Esmeralda', gradient: 'linear-gradient(135deg, #10B981, #059669)', colors: ['#10B981', '#059669'] },
|
||||
{ name: 'Ciano/Azul', gradient: 'linear-gradient(135deg, #06B6D4, #3B82F6)', colors: ['#06B6D4', '#3B82F6'] },
|
||||
{ name: 'Rosa/Roxo', gradient: 'linear-gradient(135deg, #EC4899, #A855F7)', colors: ['#EC4899', '#A855F7'] },
|
||||
{ name: 'Vermelho/Laranja', gradient: 'linear-gradient(135deg, #EF4444, #F97316)', colors: ['#EF4444', '#F97316'] },
|
||||
];
|
||||
|
||||
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
const THEME_STORAGE_PREFIX = 'agency-theme:';
|
||||
|
||||
const setThemeVariables = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
};
|
||||
|
||||
export default function ConfiguracoesPage() {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const [selectedTheme, setSelectedTheme] = useState(0);
|
||||
const [activeGradient, setActiveGradient] = useState(DEFAULT_GRADIENT);
|
||||
const [themeKey, setThemeKey] = useState('default');
|
||||
const [customColor1, setCustomColor1] = useState('#ff3a05');
|
||||
const [customColor2, setCustomColor2] = useState('#ff0080');
|
||||
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState('');
|
||||
const [showSupportDialog, setShowSupportDialog] = useState(false);
|
||||
const [supportMessage, setSupportMessage] = useState('Para alterar estes dados, contate o suporte.');
|
||||
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 e inicializar tema salvo
|
||||
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;
|
||||
}
|
||||
|
||||
const parsedUser = JSON.parse(userData);
|
||||
const hostname = window.location.hostname;
|
||||
const hostSubdomain = hostname.split('.')[0] || 'default';
|
||||
const key = parsedUser?.subdomain || parsedUser?.tenantId || hostSubdomain;
|
||||
|
||||
setThemeKey(key);
|
||||
|
||||
const savedGradient = localStorage.getItem(`${THEME_STORAGE_PREFIX}${key}`) || DEFAULT_GRADIENT;
|
||||
setActiveGradient(savedGradient);
|
||||
setThemeVariables(savedGradient);
|
||||
|
||||
const presetIndex = themePresets.findIndex((theme) => theme.gradient === savedGradient);
|
||||
if (presetIndex >= 0) {
|
||||
setSelectedTheme(presetIndex);
|
||||
setCustomColor1(themePresets[presetIndex].colors[0]);
|
||||
setCustomColor2(themePresets[presetIndex].colors[1]);
|
||||
}
|
||||
|
||||
// Buscar dados da API
|
||||
const response = await fetch('/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) => {
|
||||
setActiveGradient(gradient);
|
||||
setThemeVariables(gradient);
|
||||
};
|
||||
|
||||
const applyCustomTheme = () => {
|
||||
const gradient = `linear-gradient(90deg, ${customColor1}, ${customColor2})`;
|
||||
setSelectedTheme(-1);
|
||||
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('/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 = () => {
|
||||
const gradientToSave = selectedTheme >= 0
|
||||
? themePresets[selectedTheme].gradient
|
||||
: activeGradient;
|
||||
|
||||
applyTheme(gradientToSave);
|
||||
if (themeKey) {
|
||||
localStorage.setItem(`${THEME_STORAGE_PREFIX}${themeKey}`, gradientToSave);
|
||||
}
|
||||
|
||||
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('/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/50 dark:hover:bg-gray-700/50 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="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
|
||||
<span>CNPJ</span>
|
||||
<span className="text-xs text-gray-500">Alteração via suporte</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={agencyData.cnpj}
|
||||
readOnly
|
||||
onClick={() => {
|
||||
setSupportMessage('Para alterar CNPJ, contate o suporte.');
|
||||
setShowSupportDialog(true);
|
||||
}}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center justify-between">
|
||||
<span>E-mail (acesso)</span>
|
||||
<span className="text-xs text-gray-500">Alteração via suporte</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={agencyData.email}
|
||||
readOnly
|
||||
onClick={() => {
|
||||
setSupportMessage('Para alterar o e-mail de acesso, contate o suporte.');
|
||||
setShowSupportDialog(true);
|
||||
}}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Telefone / WhatsApp
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={agencyData.phone}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, phone: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-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>
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Dialog de Suporte */}
|
||||
<Dialog
|
||||
isOpen={showSupportDialog}
|
||||
onClose={() => setShowSupportDialog(false)}
|
||||
title="Contatar suporte"
|
||||
>
|
||||
<Dialog.Body>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">{supportMessage}</p>
|
||||
<p className="mt-3 text-sm text-gray-500">Envie um e-mail para suporte@aggios.app ou abra um chamado para ajuste desses dados.</p>
|
||||
</Dialog.Body>
|
||||
<Dialog.Footer>
|
||||
<button
|
||||
onClick={() => setShowSupportDialog(false)}
|
||||
className="px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg font-medium hover:scale-105 transition-all"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</Dialog.Footer>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,181 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@@ -1,586 +0,0 @@
|
||||
"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 });
|
||||
|
||||
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
|
||||
const setGradientVariables = (gradient: string) => {
|
||||
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
||||
document.documentElement.style.setProperty('--gradient', gradient);
|
||||
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
||||
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
||||
};
|
||||
|
||||
export default function 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 hostSubdomain = hostname.split('.')[0] || 'default';
|
||||
const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || hostSubdomain;
|
||||
|
||||
setAgencyName(parsedUser?.subdomain || hostSubdomain);
|
||||
|
||||
const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`);
|
||||
setGradientVariables(storedGradient || DEFAULT_GRADIENT);
|
||||
|
||||
// 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);
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
};
|
||||
}, [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,7 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export default function AuthLayoutWrapper({ children }: { children: ReactNode }) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export default function LoginLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#FDFDFC] dark:bg-gray-900">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,250 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input } from "@/components/ui";
|
||||
import toast, { Toaster } from 'react-hot-toast';
|
||||
|
||||
export default function RecuperarSenhaPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [emailSent, setEmailSent] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validações básicas
|
||||
if (!email) {
|
||||
toast.error('Por favor, insira seu email');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
toast.error('Por favor, insira um email válido');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simular envio de email
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
setEmailSent(true);
|
||||
toast.success('Email de recuperação enviado com sucesso!');
|
||||
} catch (error) {
|
||||
toast.error('Erro ao enviar email. Tente novamente.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#FFFFFF',
|
||||
color: '#000000',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #E5E5E5',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ef4444',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
icon: '✓',
|
||||
style: {
|
||||
background: '#10B981',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<div className="flex min-h-screen">
|
||||
{/* Lado Esquerdo - Formulário */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo mobile */}
|
||||
<div className="lg:hidden text-center mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!emailSent ? (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white">
|
||||
Recuperar Senha
|
||||
</h2>
|
||||
<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>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
leftIcon="ri-mail-line"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Enviar link de recuperação
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Back to login */}
|
||||
<div className="mt-6 text-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Success Message */}
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
|
||||
<i className="ri-mail-check-line text-4xl text-[#10B981]" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
|
||||
Email enviado!
|
||||
</h2>
|
||||
|
||||
<p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
|
||||
Enviamos um link de recuperação para:
|
||||
</p>
|
||||
|
||||
<p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
|
||||
{email}
|
||||
</p>
|
||||
|
||||
<div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
|
||||
<div className="flex gap-4">
|
||||
<i className="ri-information-line text-[#ff3a05] text-xl mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-zinc-900 dark:text-white mb-1">
|
||||
Verifique sua caixa de entrada
|
||||
</h4>
|
||||
<p className="text-xs text-zinc-600 dark:text-zinc-400">
|
||||
Clique no link que enviamos para redefinir sua senha.
|
||||
Se não receber em alguns minutos, verifique sua pasta de spam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mb-4"
|
||||
onClick={() => setEmailSent(false)}
|
||||
>
|
||||
Enviar novamente
|
||||
</Button>
|
||||
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight text-white">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-lock-password-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Protegemos seus dados com os mais altos padrões de segurança.
|
||||
Seu link de recuperação é único e expira em 24 horas.
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-4 text-left">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-shield-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Criptografia de ponta</h4>
|
||||
<p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-time-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Link temporário</h4>
|
||||
<p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-customer-service-2-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Suporte disponível</h4>
|
||||
<p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Círculos decorativos */}
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,7 @@ export default function LayoutWrapper({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
// Em toda troca de rota, volta para o tema padrão; layouts específicos (ex.: agência) aplicam o próprio na sequência
|
||||
// Reseta tema padrão em toda troca de rota
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
}, [pathname]);
|
||||
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,13 @@ export async function POST(request: NextRequest) {
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const text = await response.text();
|
||||
let data: any;
|
||||
try {
|
||||
data = JSON.parse(text);
|
||||
} catch (e) {
|
||||
data = { error: text };
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(data, { status: response.status });
|
||||
|
||||
267
front-end-dash.aggios.app/app/cadastro/[slug]/page.tsx
Normal file
267
front-end-dash.aggios.app/app/cadastro/[slug]/page.tsx
Normal file
@@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Button from '@/components/ui/Button';
|
||||
import { CheckCircleIcon } from '@heroicons/react/24/solid';
|
||||
|
||||
interface FormField {
|
||||
name: string;
|
||||
label: string;
|
||||
type: string;
|
||||
required: boolean;
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface SignupTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
slug: string;
|
||||
form_fields: FormField[];
|
||||
enabled_modules: string[];
|
||||
redirect_url?: string;
|
||||
success_message?: string;
|
||||
custom_logo_url?: string;
|
||||
custom_primary_color?: string;
|
||||
}
|
||||
|
||||
export default function CustomSignupPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const router = useRouter();
|
||||
const [template, setTemplate] = useState<SignupTemplate | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [formData, setFormData] = useState<Record<string, string>>({});
|
||||
const [slug, setSlug] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
params.then(p => {
|
||||
setSlug(p.slug);
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
loadTemplate();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
const loadTemplate = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/signup-templates/slug/${slug}`);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setTemplate(data);
|
||||
|
||||
// Inicializar formData com campos vazios
|
||||
const initialData: Record<string, string> = {};
|
||||
data.form_fields.forEach((field: FormField) => {
|
||||
initialData[field.name] = '';
|
||||
});
|
||||
setFormData(initialData);
|
||||
} else {
|
||||
setError('Template de cadastro não encontrado');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Erro ao carregar formulário de cadastro');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// Registro público via template
|
||||
const payload = {
|
||||
template_slug: slug,
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
name: formData.company_name || formData.subdomain || 'Cliente',
|
||||
subdomain: formData.subdomain,
|
||||
company_name: formData.company_name,
|
||||
...formData, // Incluir todos os campos adicionais
|
||||
};
|
||||
|
||||
const response = await fetch('/api/signup/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSuccess(true);
|
||||
|
||||
// Redirecionar após 2 segundos
|
||||
setTimeout(() => {
|
||||
if (template?.redirect_url) {
|
||||
window.location.href = template.redirect_url;
|
||||
} else {
|
||||
router.push('/login');
|
||||
}
|
||||
}, 2000);
|
||||
} else {
|
||||
const data = await response.json();
|
||||
setError(data.error || 'Erro ao realizar cadastro');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Erro ao processar cadastro');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (fieldName: string, value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-white"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !template) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 max-w-md w-full text-center border border-gray-200 dark:border-gray-800">
|
||||
<div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-3xl">⚠️</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Link Inválido
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
{error}
|
||||
</p>
|
||||
<Button onClick={() => router.push('/')}>
|
||||
Voltar para Início
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 max-w-md w-full text-center border border-gray-200 dark:border-gray-800">
|
||||
<div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircleIcon className="w-10 h-10 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Cadastro Realizado!
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
{template?.success_message || 'Seu cadastro foi realizado com sucesso. Redirecionando...'}
|
||||
</p>
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sortedFields = [...(template?.form_fields || [])].sort((a, b) => a.order - b.order);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 max-w-md w-full border border-gray-200 dark:border-gray-800">
|
||||
{/* Logo personalizado */}
|
||||
{template?.custom_logo_url && (
|
||||
<div className="flex justify-center mb-6">
|
||||
<img
|
||||
src={template.custom_logo_url}
|
||||
alt="Logo"
|
||||
className="h-12 object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cabeçalho */}
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{template?.name}
|
||||
</h1>
|
||||
{template?.description && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Módulos incluídos */}
|
||||
{template && template.enabled_modules.length > 0 && (
|
||||
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<p className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
|
||||
Módulos incluídos:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{template.enabled_modules.map((module) => (
|
||||
<span
|
||||
key={module}
|
||||
className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-xs font-medium"
|
||||
>
|
||||
{module}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Formulário */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{sortedFields.map((field) => (
|
||||
<Input
|
||||
key={field.name}
|
||||
label={field.label}
|
||||
type={field.type}
|
||||
value={formData[field.name] || ''}
|
||||
onChange={(e) => handleInputChange(field.name, e.target.value)}
|
||||
required={field.required}
|
||||
placeholder={`Digite ${field.label.toLowerCase()}`}
|
||||
/>
|
||||
))}
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={submitting}
|
||||
style={template?.custom_primary_color ? {
|
||||
background: template.custom_primary_color
|
||||
} : undefined}
|
||||
>
|
||||
{submitting ? 'Cadastrando...' : 'Criar Conta'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Link para login */}
|
||||
<p className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
Já tem uma conta?{' '}
|
||||
<a href="/login" className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400">
|
||||
Fazer login
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -31,8 +31,8 @@ export default function CadastroPage() {
|
||||
const [subdomain, setSubdomain] = useState("");
|
||||
const [domainAvailable, setDomainAvailable] = useState<boolean | null>(null);
|
||||
const [checkingDomain, setCheckingDomain] = useState(false);
|
||||
const [primaryColor, setPrimaryColor] = useState("#ff3a05");
|
||||
const [secondaryColor, setSecondaryColor] = useState("#ff0080");
|
||||
const [primaryColor, setPrimaryColor] = useState("#FF3A05");
|
||||
const [secondaryColor, setSecondaryColor] = useState("#FF0080");
|
||||
const [logoUrl, setLogoUrl] = useState<string>("");
|
||||
const [showPreviewMobile, setShowPreviewMobile] = useState(false);
|
||||
|
||||
@@ -52,8 +52,8 @@ export default function CadastroPage() {
|
||||
setCepData(data.cepData || { state: "", city: "", neighborhood: "", street: "" });
|
||||
setSubdomain(data.subdomain || "");
|
||||
setDomainAvailable(data.domainAvailable ?? null);
|
||||
setPrimaryColor(data.primaryColor || "#ff3a05");
|
||||
setSecondaryColor(data.secondaryColor || "#ff0080");
|
||||
setPrimaryColor(data.primaryColor || "#FF3A05");
|
||||
setSecondaryColor(data.secondaryColor || "#FF0080");
|
||||
setLogoUrl(data.logoUrl || "");
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar dados:', error);
|
||||
@@ -107,12 +107,6 @@ export default function CadastroPage() {
|
||||
},
|
||||
{
|
||||
number: 4,
|
||||
title: "Domínio",
|
||||
heading: "Escolha seu Domínio",
|
||||
description: "Defina o endereço único para acessar o painel da sua empresa."
|
||||
},
|
||||
{
|
||||
number: 5,
|
||||
title: "Personalização",
|
||||
heading: "Personalize seu Painel",
|
||||
description: "Configure as cores e identidade visual da sua empresa."
|
||||
@@ -224,6 +218,26 @@ export default function CadastroPage() {
|
||||
toast.error('Por favor, selecione o tamanho da equipe da sua empresa.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!subdomain || subdomain.trim().length < 3) {
|
||||
toast.error('O subdomínio deve ter pelo menos 3 caracteres. Exemplo: minhaempresa');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!/^[a-z0-9-]+$/.test(subdomain)) {
|
||||
toast.error('O subdomínio deve conter apenas letras minúsculas, números e hífens.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (domainAvailable === false) {
|
||||
toast.error('Este subdomínio já está em uso. Escolha outro.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (domainAvailable === null) {
|
||||
toast.error('Aguarde a verificação de disponibilidade do domínio.');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentStep === 3) {
|
||||
@@ -267,27 +281,7 @@ export default function CadastroPage() {
|
||||
}
|
||||
}
|
||||
|
||||
if (currentStep === 4) {
|
||||
if (!subdomain || subdomain.trim().length < 3) {
|
||||
toast.error('O subdomínio deve ter pelo menos 3 caracteres. Exemplo: minhaempresa');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!/^[a-z0-9-]+$/.test(subdomain)) {
|
||||
toast.error('O subdomínio deve conter apenas letras minúsculas, números e hífens.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (domainAvailable === false) {
|
||||
toast.error('Este subdomínio já está em uso. Escolha outro.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (domainAvailable === null) {
|
||||
toast.error('Aguarde a verificação de disponibilidade do domínio.');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
@@ -296,55 +290,46 @@ export default function CadastroPage() {
|
||||
const handleSubmitRegistration = async () => {
|
||||
try {
|
||||
const payload = {
|
||||
// Dados da agência
|
||||
agencyName: formData.companyName,
|
||||
subdomain: subdomain,
|
||||
// Step 1 - Dados Pessoais
|
||||
email: formData.email,
|
||||
password: password,
|
||||
fullName: formData.fullName,
|
||||
newsletter: formData.newsletter || false,
|
||||
|
||||
// Step 2 - Empresa
|
||||
companyName: formData.companyName,
|
||||
cnpj: formData.cnpj,
|
||||
razaoSocial: formData.razaoSocial,
|
||||
razaoSocial: cnpjData.razaoSocial,
|
||||
description: formData.description,
|
||||
website: formData.website,
|
||||
industry: formData.industry,
|
||||
teamSize: formData.teamSize,
|
||||
subdomain: subdomain,
|
||||
|
||||
// Endereço
|
||||
// Step 3 - Localização e Contato
|
||||
cep: formData.cep,
|
||||
state: formData.state,
|
||||
city: formData.city,
|
||||
neighborhood: formData.neighborhood,
|
||||
street: formData.street,
|
||||
state: cepData.state,
|
||||
city: cepData.city,
|
||||
neighborhood: cepData.neighborhood,
|
||||
street: cepData.street,
|
||||
number: formData.number,
|
||||
complement: formData.complement,
|
||||
contacts: contacts,
|
||||
|
||||
// Admin
|
||||
adminEmail: formData.email,
|
||||
adminPassword: password,
|
||||
adminName: formData.fullName,
|
||||
// Step 4 - Personalização
|
||||
primaryColor: primaryColor,
|
||||
secondaryColor: secondaryColor,
|
||||
logoUrl: logoUrl,
|
||||
};
|
||||
|
||||
console.log('📤 Enviando cadastro completo:', payload);
|
||||
toast.loading('Criando sua conta...', { id: 'register' });
|
||||
|
||||
const response = await fetch(API_ENDPOINTS.adminAgencyRegister, {
|
||||
const data = await apiRequest(API_ENDPOINTS.register, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = 'Erro ao criar conta';
|
||||
try {
|
||||
const error = await response.json();
|
||||
errorMessage = error.message || error.error || errorMessage;
|
||||
} catch (e) {
|
||||
const text = await response.text();
|
||||
if (text) errorMessage = text;
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
console.log('📥 Resposta data:', data);
|
||||
|
||||
// Salvar autenticação
|
||||
@@ -353,7 +338,7 @@ export default function CadastroPage() {
|
||||
id: data.id,
|
||||
email: data.email,
|
||||
name: data.name,
|
||||
role: data.role || 'ADMIN_AGENCIA',
|
||||
role: data.role,
|
||||
tenantId: data.tenantId,
|
||||
company: data.company,
|
||||
subdomain: data.subdomain
|
||||
@@ -363,7 +348,7 @@ export default function CadastroPage() {
|
||||
// Sucesso - limpar localStorage do form
|
||||
localStorage.removeItem('cadastroFormData');
|
||||
|
||||
toast.success('Conta criada com sucesso! Redirecionando para seu painel...', {
|
||||
toast.success('Conta criada com sucesso! Redirecionando para o painel...', {
|
||||
id: 'register',
|
||||
duration: 2000,
|
||||
style: {
|
||||
@@ -372,11 +357,15 @@ export default function CadastroPage() {
|
||||
},
|
||||
});
|
||||
|
||||
// Redirecionar para o painel da agência no subdomínio, enviando o gradiente escolhido
|
||||
// Aguardar 2 segundos e redirecionar para o painel
|
||||
setTimeout(() => {
|
||||
const gradient = `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`;
|
||||
const agencyUrl = `http://${data.subdomain}.localhost/login?theme=${encodeURIComponent(gradient)}`;
|
||||
window.location.href = agencyUrl;
|
||||
if (data.access_url) {
|
||||
// Redirecionar para o domínio criado (com token se possível, ou pedir login lá)
|
||||
// Idealmente, passar um token de uso único ou setar cookie cross-domain
|
||||
window.location.href = data.access_url;
|
||||
} else {
|
||||
window.location.href = '/painel';
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
} catch (error: any) {
|
||||
@@ -387,44 +376,7 @@ export default function CadastroPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// MODO TESTE - Preencher dados automaticamente
|
||||
const fillTestData = () => {
|
||||
const testData = {
|
||||
fullName: "Teste Usuario",
|
||||
email: "teste@idealpages.com",
|
||||
confirmPassword: "senha12345",
|
||||
terms: true,
|
||||
newsletter: false,
|
||||
companyName: "IdealPages",
|
||||
cnpj: "12.345.678/0001-90",
|
||||
description: "Agência de desenvolvimento web e aplicativos mobile especializada em soluções digitais",
|
||||
website: "https://idealpages.com",
|
||||
industry: "agencia-digital",
|
||||
teamSize: "1-10",
|
||||
cep: "01310-100",
|
||||
number: "123",
|
||||
complement: "Sala 101",
|
||||
};
|
||||
|
||||
setFormData(testData);
|
||||
setPassword("senha12345");
|
||||
setPasswordStrength(4);
|
||||
setCnpjData({ razaoSocial: "IdealPages LTDA", endereco: "Av Paulista, 1000" });
|
||||
setCepData({ state: "SP", city: "São Paulo", neighborhood: "Bela Vista", street: "Av Paulista" });
|
||||
setContacts([{ id: 1, whatsapp: "(11) 98765-4321" }]);
|
||||
setSubdomain("idealpages");
|
||||
setDomainAvailable(true);
|
||||
setPrimaryColor("#ff3a05");
|
||||
setSecondaryColor("#ff0080");
|
||||
|
||||
// Marcar todos os steps como completos e ir pro step 5
|
||||
setCompletedSteps([1, 2, 3, 4]);
|
||||
setCurrentStep(5);
|
||||
|
||||
toast.success('Dados de teste preenchidos! Clique em Finalizar.', {
|
||||
duration: 3000,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNext = (e?: React.FormEvent) => {
|
||||
if (e) {
|
||||
@@ -435,7 +387,7 @@ export default function CadastroPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentStep < 5) {
|
||||
if (currentStep < 4) {
|
||||
setCompletedSteps([...completedSteps, currentStep]);
|
||||
setCurrentStep(currentStep + 1);
|
||||
} else {
|
||||
@@ -537,9 +489,9 @@ export default function CadastroPage() {
|
||||
const getPasswordStrengthColor = () => {
|
||||
if (passwordStrength <= 1) return "#EF4444";
|
||||
if (passwordStrength === 2) return "#F59E0B";
|
||||
if (passwordStrength === 3) return "#ff3a05";
|
||||
if (passwordStrength === 4) return "#ff3a05";
|
||||
return "#ff3a05";
|
||||
if (passwordStrength === 3) return "#3B82F6";
|
||||
if (passwordStrength === 4) return "#10B981";
|
||||
return "#059669";
|
||||
};
|
||||
|
||||
const fetchCnpjData = async (cnpj: string) => {
|
||||
@@ -615,7 +567,7 @@ export default function CadastroPage() {
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ef4444',
|
||||
background: '#ff3a05',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
@@ -662,19 +614,19 @@ export default function CadastroPage() {
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
strokeDasharray={`${2 * Math.PI * 28}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 28 * (1 - (currentStep / 5))}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 28 * (1 - (currentStep / 4))}`}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-300"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#ff3a05" />
|
||||
<stop offset="100%" stopColor="#ff0080" />
|
||||
<stop offset="0%" stopColor="#FF3A05" />
|
||||
<stop offset="100%" stopColor="#FF0080" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-sm font-bold text-[#000000]">{Math.round((currentStep / 5) * 100)}%</span>
|
||||
<span className="text-sm font-bold text-[#000000]">{Math.round((currentStep / 4) * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -685,6 +637,8 @@ export default function CadastroPage() {
|
||||
{currentStepData?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -771,11 +725,7 @@ export default function CadastroPage() {
|
||||
label={
|
||||
<span>
|
||||
Concordo com os{" "}
|
||||
<Link
|
||||
href="/termos"
|
||||
className="font-medium hover:underline cursor-pointer"
|
||||
style={{ color: 'var(--brand-color)' }}
|
||||
>
|
||||
<Link href="/termos" className="bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent hover:underline cursor-pointer font-medium">
|
||||
Termos de Uso
|
||||
</Link>
|
||||
</span>
|
||||
@@ -791,11 +741,7 @@ export default function CadastroPage() {
|
||||
{/* Link para login */}
|
||||
<p className="text-center mt-6 text-[14px] text-[#7D7D7D]">
|
||||
Já possui uma conta?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
className="font-medium hover:underline cursor-pointer"
|
||||
style={{ color: 'var(--brand-color)' }}
|
||||
>
|
||||
<Link href="/login" className="bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent font-medium hover:underline cursor-pointer">
|
||||
Fazer login
|
||||
</Link>
|
||||
</p>
|
||||
@@ -808,9 +754,60 @@ export default function CadastroPage() {
|
||||
placeholder="Ex: IdeaPages, DevStudio"
|
||||
leftIcon="ri-building-line"
|
||||
value={formData.companyName || ''}
|
||||
onChange={(e) => updateFormData('companyName', e.target.value)}
|
||||
onChange={(e) => {
|
||||
const name = e.target.value;
|
||||
updateFormData('companyName', name);
|
||||
// Auto-generate subdomain
|
||||
const slug = name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
|
||||
setSubdomain(slug);
|
||||
setDomainAvailable(null);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<div className="relative">
|
||||
<Input
|
||||
name="subdomain"
|
||||
label="Subdomínio (URL do Painel)"
|
||||
placeholder="minhaempresa"
|
||||
leftIcon="ri-global-line"
|
||||
rightIcon={
|
||||
checkingDomain ? "ri-loader-4-line animate-spin text-brand-500" :
|
||||
domainAvailable === true ? "ri-checkbox-circle-fill text-green-500" :
|
||||
domainAvailable === false ? "ri-close-circle-fill text-red-500" :
|
||||
undefined
|
||||
}
|
||||
value={subdomain}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
|
||||
setSubdomain(value);
|
||||
setDomainAvailable(null);
|
||||
}}
|
||||
onBlur={() => subdomain && checkDomainAvailability(subdomain)}
|
||||
helperText={
|
||||
<span className="flex items-center justify-between w-full">
|
||||
<span>
|
||||
Seu painel: <strong className="text-zinc-900 dark:text-white">{subdomain || '...'}</strong>.aggios.app
|
||||
</span>
|
||||
{checkingDomain && (
|
||||
<span className="flex items-center gap-1.5 text-[11px] font-semibold text-brand-600 bg-brand-50 px-2.5 py-0.5 rounded-full border border-brand-100">
|
||||
<i className="ri-loader-4-line animate-spin"></i> VERIFICANDO
|
||||
</span>
|
||||
)}
|
||||
{domainAvailable === true && (
|
||||
<span className="flex items-center gap-1.5 text-[11px] font-semibold text-emerald-700 bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-200">
|
||||
<i className="ri-check-double-line"></i> DISPONÍVEL
|
||||
</span>
|
||||
)}
|
||||
{domainAvailable === false && (
|
||||
<span className="flex items-center gap-1.5 text-[11px] font-semibold text-red-700 bg-red-50 px-2.5 py-0.5 rounded-full border border-red-200">
|
||||
<i className="ri-close-line"></i> INDISPONÍVEL
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
name="cnpj"
|
||||
label="CNPJ"
|
||||
@@ -845,13 +842,13 @@ export default function CadastroPage() {
|
||||
disabled
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-[13px] font-semibold text-zinc-900 mb-2">
|
||||
Descrição Breve<span className="ml-1" style={{ color: 'var(--brand-color)' }}>*</span>
|
||||
<label className="block text-[13px] font-semibold text-[#000000] mb-2">
|
||||
Descrição Breve<span className="text-[#FF3A05] ml-1">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
placeholder="Apresente sua empresa em poucas palavras (máx 300 caracteres)"
|
||||
className="w-full px-3.5 py-3 text-[14px] font-normal border rounded-md bg-white placeholder:text-zinc-500 border-zinc-200 outline-none ring-0 shadow-none focus:shadow-none resize-none focus:border-[var(--brand-color)]"
|
||||
className="w-full px-3.5 py-3 text-[14px] font-normal border rounded-md bg-white placeholder:text-[#7D7D7D] border-[#E5E5E5] focus:border-[#FF3A05] outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none resize-none"
|
||||
rows={4}
|
||||
maxLength={300}
|
||||
value={formData.description || ''}
|
||||
@@ -1005,19 +1002,19 @@ export default function CadastroPage() {
|
||||
</div>
|
||||
|
||||
{/* Contatos da Empresa */}
|
||||
<div className="pt-4 border-t border-zinc-200">
|
||||
<div className="pt-4 border-t border-[#E5E5E5]">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-zinc-900">Contatos da Empresa</h3>
|
||||
<h3 className="text-sm font-semibold text-[#000000]">Contatos da Empresa</h3>
|
||||
</div>
|
||||
{contacts.map((contact, index) => (
|
||||
<div key={contact.id} className="space-y-4 p-4 border border-zinc-200 rounded-md bg-white">
|
||||
<div key={contact.id} className="space-y-4 p-4 border border-[#E5E5E5] rounded-md bg-white">
|
||||
{contacts.length > 1 && (
|
||||
<div className="flex items-center justify-end -mt-2 -mr-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeContact(contact.id)}
|
||||
className="text-zinc-500 transition-colors hover:text-[var(--brand-color)]"
|
||||
className="text-[#7D7D7D] hover:text-[#FF3A05] transition-colors"
|
||||
>
|
||||
<i className="ri-close-line text-[18px]" />
|
||||
</button>
|
||||
@@ -1056,95 +1053,16 @@ export default function CadastroPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{currentStep === 4 && (
|
||||
<div className="space-y-6">
|
||||
{/* Subdomínio Aggios */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-zinc-900">
|
||||
Subdomínio Aggios <span style={{ color: 'var(--brand-color)' }}>*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<i className="ri-global-line text-[#7D7D7D] text-[18px]" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={subdomain}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
|
||||
setSubdomain(value);
|
||||
setDomainAvailable(null);
|
||||
}}
|
||||
onBlur={() => subdomain && checkDomainAvailability(subdomain)}
|
||||
placeholder="minhaempresa"
|
||||
className="w-full pl-10 pr-4 py-2 text-sm border border-zinc-200 rounded-md transition-colors focus:border-[var(--brand-color)]"
|
||||
required
|
||||
/>
|
||||
{checkingDomain && (
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<div className="w-4 h-4 border-2 border-[var(--brand-color)] border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{!checkingDomain && domainAvailable === true && (
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<i className="ri-checkbox-circle-fill text-[#10B981] text-[20px]" />
|
||||
</div>
|
||||
)}
|
||||
{!checkingDomain && domainAvailable === false && (
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<i className="ri-close-circle-fill text-red-500 text-[20px]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-zinc-600 flex items-center gap-1">
|
||||
<i className="ri-information-line" />
|
||||
Seu painel ficará em: <span className="font-medium text-zinc-900">{subdomain || 'seu-dominio'}.aggios.app</span>
|
||||
</p>
|
||||
{domainAvailable === true && (
|
||||
<p className="text-xs text-[#10B981] flex items-center gap-1">
|
||||
<i className="ri-checkbox-circle-line" />
|
||||
Disponível! Este subdomínio pode ser usado.
|
||||
</p>
|
||||
)}
|
||||
{domainAvailable === false && (
|
||||
<p className="text-xs text-red-500 flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
Indisponível. Este subdomínio já está em uso.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Informações Adicionais */}
|
||||
<div className="p-6 bg-[#F5F5F5] rounded-md space-y-3">
|
||||
<h4 className="text-sm font-semibold text-zinc-900 flex items-center gap-2">
|
||||
<i className="ri-lightbulb-line" style={{ color: 'var(--brand-color)' }} />
|
||||
Dicas para escolher seu domínio
|
||||
</h4>
|
||||
<ul className="text-xs text-zinc-600 space-y-1 ml-6">
|
||||
<li className="list-disc">Use o nome da sua empresa</li>
|
||||
<li className="list-disc">Evite números e hífens quando possível</li>
|
||||
<li className="list-disc">Escolha algo fácil de lembrar e digitar</li>
|
||||
<li className="list-disc">Mínimo de 3 caracteres</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 5 && (
|
||||
<div className="space-y-6">
|
||||
{/* Botão Toggle Preview (Mobile Only) */}
|
||||
<div className="lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPreviewMobile(!showPreviewMobile)}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 font-medium transition-colors"
|
||||
style={{
|
||||
borderColor: 'var(--brand-color)',
|
||||
color: 'var(--brand-color)',
|
||||
backgroundColor: showPreviewMobile ? 'transparent' : undefined
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--brand-color) 10%, transparent)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 border-[#FF3A05] text-[#FF3A05] font-medium hover:bg-[#FF3A05]/5 transition-colors"
|
||||
>
|
||||
<i className={`${showPreviewMobile ? 'ri-edit-line' : 'ri-eye-line'} text-xl`} />
|
||||
{showPreviewMobile ? 'Voltar ao Formulário' : 'Ver Preview do Painel'}
|
||||
@@ -1200,7 +1118,7 @@ export default function CadastroPage() {
|
||||
/>
|
||||
<label
|
||||
htmlFor="logo-upload"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 border border-zinc-200 rounded-md text-sm font-medium text-zinc-900 hover:bg-zinc-50 transition-colors cursor-pointer"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 border border-[#E5E5E5] rounded-md text-sm font-medium text-[#000000] hover:bg-[#F5F5F5] transition-colors cursor-pointer"
|
||||
>
|
||||
<i className="ri-upload-2-line" />
|
||||
Escolher arquivo
|
||||
@@ -1209,13 +1127,12 @@ export default function CadastroPage() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLogoUrl('')}
|
||||
className="ml-2 text-sm hover:underline font-medium"
|
||||
style={{ color: 'var(--brand-color)' }}
|
||||
className="ml-2 text-sm bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent hover:underline font-medium"
|
||||
>
|
||||
Remover
|
||||
</button>
|
||||
)}
|
||||
<p className="text-xs text-zinc-600 mt-2">
|
||||
<p className="text-xs text-[#7D7D7D] mt-2">
|
||||
PNG, JPG ou SVG. Tamanho recomendado: 200x200px
|
||||
</p>
|
||||
</div>
|
||||
@@ -1226,13 +1143,13 @@ export default function CadastroPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Cor Primária */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 mb-3">
|
||||
Cor Primária <span style={{ color: 'var(--brand-color)' }}>*</span>
|
||||
<label className="block text-sm font-medium text-[#000000] mb-3">
|
||||
Cor Primária <span className="text-[#FF3A05]">*</span>
|
||||
</label>
|
||||
<div className="flex gap-3">
|
||||
<div className="relative flex-1">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<i className="ri-palette-line text-zinc-500 text-[18px]" />
|
||||
<i className="ri-palette-line text-[#7D7D7D] text-[18px]" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
@@ -1243,18 +1160,18 @@ export default function CadastroPage() {
|
||||
setPrimaryColor(value);
|
||||
}
|
||||
}}
|
||||
placeholder="#ff3a05"
|
||||
className="w-full pl-10 pr-4 py-2 text-sm border border-zinc-200 rounded-md transition-colors font-mono focus:border-[var(--brand-color)]"
|
||||
placeholder="#FF3A05"
|
||||
className="w-full pl-10 pr-4 py-2 text-sm border border-[#E5E5E5] rounded-md focus:border-[#FF3A05] transition-colors font-mono"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="color"
|
||||
value={primaryColor}
|
||||
onChange={(e) => setPrimaryColor(e.target.value)}
|
||||
className="w-14 h-10 border-2 border-zinc-200 rounded-md cursor-pointer"
|
||||
className="w-14 h-10 border-2 border-[#E5E5E5] rounded-md cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-600 mt-1 flex items-center gap-1">
|
||||
<p className="text-xs text-[#7D7D7D] mt-1 flex items-center gap-1">
|
||||
<i className="ri-information-line" />
|
||||
Usada em menus, botões e destaques
|
||||
</p>
|
||||
@@ -1262,13 +1179,13 @@ export default function CadastroPage() {
|
||||
|
||||
{/* Cor Secundária */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 mb-3">
|
||||
Cor Secundária <span className="text-zinc-500">(opcional)</span>
|
||||
<label className="block text-sm font-medium text-[#000000] mb-3">
|
||||
Cor Secundária <span className="text-[#7D7D7D]">(opcional)</span>
|
||||
</label>
|
||||
<div className="flex gap-3">
|
||||
<div className="relative flex-1">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<i className="ri-brush-line text-zinc-500 text-[18px]" />
|
||||
<i className="ri-brush-line text-[#7D7D7D] text-[18px]" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
@@ -1279,18 +1196,18 @@ export default function CadastroPage() {
|
||||
setSecondaryColor(value);
|
||||
}
|
||||
}}
|
||||
placeholder="#ff0080"
|
||||
className="w-full pl-10 pr-4 py-2 text-sm border border-zinc-200 rounded-md transition-colors font-mono focus:border-[var(--brand-color)]"
|
||||
placeholder="#FF0080"
|
||||
className="w-full pl-10 pr-4 py-2 text-sm border border-[#E5E5E5] rounded-md focus:border-[#FF3A05] transition-colors font-mono"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="color"
|
||||
value={secondaryColor}
|
||||
onChange={(e) => setSecondaryColor(e.target.value)}
|
||||
className="w-14 h-10 border-2 border-zinc-200 rounded-md cursor-pointer"
|
||||
className="w-14 h-10 border-2 border-[#E5E5E5] rounded-md cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-600 mt-1 flex items-center gap-1">
|
||||
<p className="text-xs text-[#7D7D7D] mt-1 flex items-center gap-1">
|
||||
<i className="ri-information-line" />
|
||||
Usada em cards e elementos secundários
|
||||
</p>
|
||||
@@ -1299,10 +1216,10 @@ export default function CadastroPage() {
|
||||
|
||||
{/* Paletas Sugeridas */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-zinc-900 mb-4">Paletas Sugeridas</h4>
|
||||
<h4 className="text-sm font-semibold text-[#000000] mb-4">Paletas Sugeridas</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ name: 'Marca', primary: '#FF3A05', secondary: '#FF0080' },
|
||||
{ name: 'Fogo', primary: '#FF3A05', secondary: '#FF0080' },
|
||||
{ name: 'Oceano', primary: '#0EA5E9', secondary: '#3B82F6' },
|
||||
{ name: 'Natureza', primary: '#10B981', secondary: '#059669' },
|
||||
{ name: 'Elegante', primary: '#8B5CF6', secondary: '#A78BFA' },
|
||||
@@ -1318,8 +1235,7 @@ export default function CadastroPage() {
|
||||
setPrimaryColor(palette.primary);
|
||||
setSecondaryColor(palette.secondary);
|
||||
}}
|
||||
className="flex items-center gap-2 p-2 rounded-md border border-zinc-200 transition-colors group cursor-pointer"
|
||||
style={{ borderColor: palette.name === 'Marca' ? 'var(--brand-color)' : undefined }}
|
||||
className="flex items-center gap-2 p-2 rounded-md border border-[#E5E5E5] hover:border-[#FF3A05] transition-colors group cursor-pointer"
|
||||
>
|
||||
<div className="flex gap-1">
|
||||
<div
|
||||
@@ -1331,7 +1247,7 @@ export default function CadastroPage() {
|
||||
style={{ backgroundColor: palette.secondary }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-zinc-600 group-hover:text-zinc-900">
|
||||
<span className="text-xs font-medium text-[#7D7D7D] group-hover:text-[#000000]">
|
||||
{palette.name}
|
||||
</span>
|
||||
</button>
|
||||
@@ -1342,7 +1258,7 @@ export default function CadastroPage() {
|
||||
{/* Informações */}
|
||||
<div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md">
|
||||
<div className="flex gap-4">
|
||||
<i className="ri-information-line text-[#ff3a05] text-xl mt-0.5" />
|
||||
<i className="ri-information-line text-[#0EA5E9] text-xl mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[#000000] mb-1">
|
||||
Você pode alterar depois
|
||||
@@ -1362,7 +1278,7 @@ export default function CadastroPage() {
|
||||
</div>
|
||||
|
||||
{/* Rodapé - botão voltar à esquerda, etapas e botão ação à direita */}
|
||||
<div className="border-t border-zinc-200 bg-white px-4 sm:px-12 py-4">
|
||||
<div className="border-t border-[#E5E5E5] bg-white px-4 sm:px-12 py-4">
|
||||
{/* Desktop: Linha única com tudo */}
|
||||
<div className="hidden md:flex items-center justify-between">
|
||||
{/* Botão voltar à esquerda */}
|
||||
@@ -1388,21 +1304,21 @@ export default function CadastroPage() {
|
||||
? "bg-[#10B981] text-white"
|
||||
: currentStep === step.number
|
||||
? "text-white"
|
||||
: "bg-zinc-200 text-zinc-500 group-hover:bg-zinc-300"
|
||||
: "bg-[#E5E5E5] text-[#7D7D7D] group-hover:bg-[#D5D5D5]"
|
||||
}`}
|
||||
style={currentStep === step.number ? { background: 'var(--gradient-primary)' } : undefined}
|
||||
style={currentStep === step.number ? { background: 'linear-gradient(90deg, #FF3A05, #FF0080)' } : undefined}
|
||||
>
|
||||
{step.number}
|
||||
</div>
|
||||
<span className={`text-xs transition-colors ${currentStep === step.number
|
||||
? "text-zinc-900 font-semibold"
|
||||
: "text-zinc-500 group-hover:text-zinc-900"
|
||||
? "text-[#000000] font-semibold"
|
||||
: "text-[#7D7D7D] group-hover:text-[#000000]"
|
||||
}`}>
|
||||
{step.title}
|
||||
</span>
|
||||
</button>
|
||||
{index < steps.length - 1 && (
|
||||
<div className="w-12 h-0.5 bg-zinc-200 mb-5" />
|
||||
<div className="w-12 h-0.5 bg-[#E5E5E5] mb-5" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -1413,9 +1329,9 @@ export default function CadastroPage() {
|
||||
variant="primary"
|
||||
type="button"
|
||||
onClick={handleNext}
|
||||
rightIcon={currentStep === 5 ? "ri-check-line" : "ri-arrow-right-line"}
|
||||
rightIcon={currentStep === 4 ? "ri-check-line" : "ri-arrow-right-line"}
|
||||
>
|
||||
{currentStep === 5 ? "Finalizar" : "Continuar"}
|
||||
{currentStep === 4 ? "Finalizar" : "Continuar"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1432,9 +1348,9 @@ export default function CadastroPage() {
|
||||
? "w-2 bg-[#10B981]"
|
||||
: currentStep === step.number
|
||||
? "w-8"
|
||||
: "w-2 bg-zinc-200 hover:bg-zinc-300"
|
||||
: "w-2 bg-[#E5E5E5] hover:bg-[#D5D5D5]"
|
||||
}`}
|
||||
style={currentStep === step.number ? { background: 'var(--gradient-primary)' } : undefined}
|
||||
style={currentStep === step.number ? { background: 'linear-gradient(90deg, #FF3A05, #FF0080)' } : undefined}
|
||||
aria-label={`Ir para ${step.title}`}
|
||||
/>
|
||||
))}
|
||||
@@ -1456,10 +1372,10 @@ export default function CadastroPage() {
|
||||
variant="primary"
|
||||
type="button"
|
||||
onClick={handleNext}
|
||||
rightIcon={currentStep === 5 ? "ri-check-line" : "ri-arrow-right-line"}
|
||||
rightIcon={currentStep === 4 ? "ri-check-line" : "ri-arrow-right-line"}
|
||||
className="flex-1"
|
||||
>
|
||||
{currentStep === 5 ? "Finalizar" : "Continuar"}
|
||||
{currentStep === 4 ? "Finalizar" : "Continuar"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1467,7 +1383,7 @@ export default function CadastroPage() {
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding Dinâmico */}
|
||||
<div className="hidden lg:flex lg:w-[50%] relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<div className="hidden lg:flex lg:w-[50%] relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<DynamicBranding
|
||||
currentStep={currentStep}
|
||||
companyName={formData.companyName}
|
||||
@@ -3,7 +3,7 @@
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
@@ -47,7 +47,17 @@ html.dark {
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
||||
font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
[role="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
label[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter, Open_Sans, Fira_Code } from "next/font/google";
|
||||
import { Open_Sans, Fira_Code, Arimo } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import LayoutWrapper from "./LayoutWrapper";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
const arimo = Arimo({
|
||||
variable: "--font-arimo",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
@@ -24,7 +24,7 @@ const firaCode = Fira_Code({
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Aggios - Dashboard",
|
||||
description: "Plataforma SaaS para agências digitais",
|
||||
description: "Painel administrativo SuperAdmin",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -37,7 +37,7 @@ export default function RootLayout({
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
|
||||
</head>
|
||||
<body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
|
||||
<body className={`${arimo.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
||||
<LayoutWrapper>
|
||||
{children}
|
||||
|
||||
@@ -30,31 +30,20 @@ export default function LoginPage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const hostname = window.location.hostname;
|
||||
const sub = hostname.split('.')[0];
|
||||
const superAdmin = sub === 'dash';
|
||||
setSubdomain(sub);
|
||||
setIsSuperAdmin(superAdmin);
|
||||
|
||||
// Aplicar tema: dash sempre padrão; tenants aplicam o salvo ou vindo via query param
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const themeParam = searchParams.get('theme');
|
||||
|
||||
if (superAdmin) {
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
} else {
|
||||
const stored = localStorage.getItem(`agency-theme:${sub}`);
|
||||
const gradient = themeParam || stored || DEFAULT_GRADIENT;
|
||||
setGradientVariables(gradient);
|
||||
|
||||
if (themeParam) {
|
||||
localStorage.setItem(`agency-theme:${sub}`, gradient);
|
||||
}
|
||||
}
|
||||
setIsSuperAdmin(true);
|
||||
setGradientVariables(DEFAULT_GRADIENT);
|
||||
|
||||
if (isAuthenticated()) {
|
||||
const target = superAdmin ? '/superadmin' : '/dashboard';
|
||||
window.location.href = target;
|
||||
const userData = localStorage.getItem('user');
|
||||
if (userData) {
|
||||
const user = JSON.parse(userData);
|
||||
if (user.role === 'SUPERADMIN') {
|
||||
window.location.href = '/superadmin';
|
||||
} else {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
@@ -224,20 +213,6 @@ export default function LoginPage() {
|
||||
>
|
||||
{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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -247,13 +222,10 @@ export default function LoginPage() {
|
||||
<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}
|
||||
aggios
|
||||
</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'
|
||||
}
|
||||
Gerencie todas as agências em um só lugar
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-6 text-left">
|
||||
<div>
|
||||
|
||||
342
front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx
Normal file
342
front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
'use client';
|
||||
|
||||
import { BuildingOfficeIcon, ArrowLeftIcon, PaintBrushIcon, MapPinIcon } from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
interface AgencyTenant {
|
||||
id: string;
|
||||
name: string;
|
||||
subdomain: string;
|
||||
domain: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
cnpj: string;
|
||||
razao_social: string;
|
||||
description: string;
|
||||
industry: string;
|
||||
team_size: string;
|
||||
address: string;
|
||||
neighborhood: string;
|
||||
number: string;
|
||||
complement: string;
|
||||
city: string;
|
||||
state: string;
|
||||
zip: string;
|
||||
primary_color: string;
|
||||
secondary_color: string;
|
||||
logo_url: string;
|
||||
logo_horizontal_url: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface AgencyDetails {
|
||||
tenant: AgencyTenant;
|
||||
admin?: {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
};
|
||||
access_url: string;
|
||||
}
|
||||
|
||||
export default function AgencyDetailPage() {
|
||||
const params = useParams();
|
||||
const [details, setDetails] = useState<AgencyDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (params.id) {
|
||||
fetchAgency(params.id as string);
|
||||
}
|
||||
}, [params.id]);
|
||||
|
||||
const fetchAgency = async (id: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${id}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
// Handle both flat (legacy) and nested (new) responses
|
||||
if (data.tenant) {
|
||||
setDetails(data);
|
||||
} else {
|
||||
// Fallback for legacy flat response
|
||||
setDetails({
|
||||
tenant: data,
|
||||
access_url: `http://${data.subdomain}.localhost`, // Fallback URL
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching agency:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-8 flex items-center justify-center min-h-[400px]">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!details || !details.tenant) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative" role="alert">
|
||||
<strong className="font-bold">Erro!</strong>
|
||||
<span className="block sm:inline"> Agência não encontrada.</span>
|
||||
</div>
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="mt-4 inline-flex items-center gap-2 text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<ArrowLeftIcon className="w-4 h-4" />
|
||||
Voltar para Agências
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { tenant } = details;
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-7xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 mb-6 transition-colors"
|
||||
>
|
||||
<ArrowLeftIcon className="w-4 h-4" />
|
||||
Voltar para Agências
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-16 w-16 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center p-2">
|
||||
{tenant.logo_url ? (
|
||||
<img src={tenant.logo_url} alt={tenant.name} className="max-h-full max-w-full object-contain" />
|
||||
) : (
|
||||
<BuildingOfficeIcon className="w-8 h-8 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tenant.name}</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<a
|
||||
href={details.access_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
|
||||
>
|
||||
{tenant.subdomain}.aggios.app
|
||||
<ArrowLeftIcon className="w-3 h-3 rotate-135" />
|
||||
</a>
|
||||
<span className="text-gray-300 dark:text-gray-600">|</span>
|
||||
<span className={`px-2 py-0.5 inline-flex text-xs font-medium rounded-full ${tenant.is_active
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
|
||||
}`}>
|
||||
{tenant.is_active ? 'Ativa' : 'Inativa'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Link
|
||||
href={`/superadmin/agencies/${tenant.id}/edit`}
|
||||
className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
|
||||
>
|
||||
Editar Dados
|
||||
</Link>
|
||||
<button
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
|
||||
>
|
||||
Acessar Painel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Coluna Esquerda (2/3) */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Informações Básicas */}
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<BuildingOfficeIcon className="w-5 h-5 text-gray-500" />
|
||||
Dados da Empresa
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Razão Social</dt>
|
||||
<dd className="mt-1 text-sm font-medium text-gray-900 dark:text-white">{tenant.razao_social || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">CNPJ</dt>
|
||||
<dd className="mt-1 text-sm font-medium text-gray-900 dark:text-white">{tenant.cnpj || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Setor</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.industry || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tamanho da Equipe</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.team_size || '-'}</dd>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Descrição</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.description || '-'}</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Endereço */}
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<MapPinIcon className="w-5 h-5 text-gray-500" />
|
||||
Localização
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="md:col-span-2">
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Endereço</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">
|
||||
{tenant.address ? (
|
||||
<>
|
||||
{tenant.address}
|
||||
{tenant.number ? `, ${tenant.number}` : ''}
|
||||
{tenant.complement ? ` - ${tenant.complement}` : ''}
|
||||
</>
|
||||
) : '-'}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Bairro</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.neighborhood || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Cidade / UF</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">
|
||||
{tenant.city && tenant.state ? `${tenant.city} - ${tenant.state}` : '-'}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">CEP</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.zip || '-'}</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coluna Direita (1/3) */}
|
||||
<div className="space-y-6">
|
||||
{/* Branding */}
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<PaintBrushIcon className="w-5 h-5 text-gray-500" />
|
||||
Identidade Visual
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-6">
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Cores da Marca</dt>
|
||||
<div className="flex gap-4">
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
|
||||
style={{ backgroundColor: tenant.primary_color || '#000000' }}
|
||||
/>
|
||||
<span className="text-xs font-mono text-gray-500">{tenant.primary_color || '-'}</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
|
||||
style={{ backgroundColor: tenant.secondary_color || '#ffffff' }}
|
||||
/>
|
||||
<span className="text-xs font-mono text-gray-500">{tenant.secondary_color || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tenant.logo_horizontal_url && (
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Logo Horizontal</dt>
|
||||
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 flex justify-center">
|
||||
<img src={tenant.logo_horizontal_url} alt="Logo Horizontal" className="max-h-12 max-w-full object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contato */}
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white">
|
||||
Contato
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Email</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white break-all">{tenant.email || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Telefone</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.phone || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Website</dt>
|
||||
<dd className="mt-1">
|
||||
{tenant.website ? (
|
||||
<a
|
||||
href={tenant.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:underline break-all"
|
||||
>
|
||||
{tenant.website}
|
||||
</a>
|
||||
) : '-'}
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadados */}
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<dl className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-sm text-gray-500 dark:text-gray-400">Criada em</dt>
|
||||
<dd className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{new Date(tenant.created_at).toLocaleDateString('pt-BR')}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-sm text-gray-500 dark:text-gray-400">Última atualização</dt>
|
||||
<dd className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{new Date(tenant.updated_at).toLocaleDateString('pt-BR')}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
364
front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx
Normal file
364
front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function NewAgencyPage() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
// Agência
|
||||
agencyName: '',
|
||||
subdomain: '',
|
||||
cnpj: '',
|
||||
razaoSocial: '',
|
||||
description: '',
|
||||
website: '',
|
||||
industry: '',
|
||||
phone: '',
|
||||
teamSize: '',
|
||||
|
||||
// Endereço
|
||||
cep: '',
|
||||
state: '',
|
||||
city: '',
|
||||
neighborhood: '',
|
||||
street: '',
|
||||
number: '',
|
||||
complement: '',
|
||||
|
||||
// Admin
|
||||
adminEmail: '',
|
||||
adminPassword: '',
|
||||
adminName: '',
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.text();
|
||||
throw new Error(errorData || 'Erro ao criar agência');
|
||||
}
|
||||
|
||||
router.push('/superadmin/agencies');
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 h-full overflow-auto">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Nova Agência</h1>
|
||||
<p className="text-gray-600 mt-2">Cadastre uma nova agência no sistema Aggios</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Informações da Agência */}
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900">Informações da Agência</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nome da Agência *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="agencyName"
|
||||
required
|
||||
value={formData.agencyName}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Subdomínio *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
required
|
||||
value={formData.subdomain}
|
||||
onChange={handleChange}
|
||||
placeholder="exemplo"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Será usado como: exemplo.aggios.app</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">CNPJ</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cnpj"
|
||||
value={formData.cnpj}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Razão Social</label>
|
||||
<input
|
||||
type="text"
|
||||
name="razaoSocial"
|
||||
value={formData.razaoSocial}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Website</label>
|
||||
<input
|
||||
type="url"
|
||||
name="website"
|
||||
value={formData.website}
|
||||
onChange={handleChange}
|
||||
placeholder="https://"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Setor</label>
|
||||
<input
|
||||
type="text"
|
||||
name="industry"
|
||||
value={formData.industry}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: Tecnologia, Marketing"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Tamanho do Time</label>
|
||||
<select
|
||||
name="teamSize"
|
||||
value={formData.teamSize}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="1-10">1-10 pessoas</option>
|
||||
<option value="11-50">11-50 pessoas</option>
|
||||
<option value="51-200">51-200 pessoas</option>
|
||||
<option value="201+">201+ pessoas</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Endereço */}
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900">Endereço</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">CEP</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cep"
|
||||
value={formData.cep}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Estado</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.state}
|
||||
onChange={handleChange}
|
||||
maxLength={2}
|
||||
placeholder="SP"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Cidade</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Bairro</label>
|
||||
<input
|
||||
type="text"
|
||||
name="neighborhood"
|
||||
value={formData.neighborhood}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Número</label>
|
||||
<input
|
||||
type="text"
|
||||
name="number"
|
||||
value={formData.number}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Rua</label>
|
||||
<input
|
||||
type="text"
|
||||
name="street"
|
||||
value={formData.street}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Complemento</label>
|
||||
<input
|
||||
type="text"
|
||||
name="complement"
|
||||
value={formData.complement}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Administrador */}
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900">Administrador da Agência</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nome do Admin *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="adminName"
|
||||
required
|
||||
value={formData.adminName}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email do Admin *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="adminEmail"
|
||||
required
|
||||
value={formData.adminEmail}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Senha do Admin *
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="adminPassword"
|
||||
required
|
||||
minLength={8}
|
||||
value={formData.adminPassword}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Botões */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="px-6 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Criando...' : 'Criar Agência'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
533
front-end-dash.aggios.app/app/superadmin/agencies/page.tsx
Normal file
533
front-end-dash.aggios.app/app/superadmin/agencies/page.tsx
Normal file
@@ -0,0 +1,533 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Menu, Listbox, Transition } from '@headlessui/react';
|
||||
import CreateAgencyModal from '@/components/agencies/CreateAgencyModal';
|
||||
import {
|
||||
BuildingOfficeIcon,
|
||||
TrashIcon,
|
||||
EyeIcon,
|
||||
PencilIcon,
|
||||
EllipsisVerticalIcon,
|
||||
MagnifyingGlassIcon,
|
||||
FunnelIcon,
|
||||
CalendarIcon,
|
||||
CheckIcon,
|
||||
ChevronUpDownIcon,
|
||||
PlusIcon,
|
||||
XMarkIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface Agency {
|
||||
id: string;
|
||||
name: string;
|
||||
subdomain: string;
|
||||
domain: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
cnpj: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
logo_url?: string;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ id: 'all', name: 'Todos os Status' },
|
||||
{ id: 'active', name: 'Ativas' },
|
||||
{ id: 'inactive', name: 'Inativas' },
|
||||
];
|
||||
|
||||
const DATE_PRESETS = [
|
||||
{ id: 'all', name: 'Todo o período' },
|
||||
{ id: '7d', name: 'Últimos 7 dias' },
|
||||
{ id: '15d', name: 'Últimos 15 dias' },
|
||||
{ id: '30d', name: 'Últimos 30 dias' },
|
||||
{ id: 'custom', name: 'Personalizado' },
|
||||
];
|
||||
|
||||
export default function AgenciesPage() {
|
||||
const [agencies, setAgencies] = useState<Agency[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
|
||||
// Filtros
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedStatus, setSelectedStatus] = useState(STATUS_OPTIONS[0]);
|
||||
const [selectedDatePreset, setSelectedDatePreset] = useState(DATE_PRESETS[0]);
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetchAgencies();
|
||||
}, []);
|
||||
|
||||
const fetchAgencies = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencies(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching agencies:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setAgencies(agencies.filter(a => a.id !== id));
|
||||
} else {
|
||||
alert('Erro ao excluir agência');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting agency:', error);
|
||||
alert('Erro ao excluir agência');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleActive = async (id: string, currentStatus: boolean) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ is_active: !currentStatus }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setAgencies(agencies.map(a =>
|
||||
a.id === id ? { ...a, is_active: !currentStatus } : a
|
||||
));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling agency status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setSelectedStatus(STATUS_OPTIONS[0]);
|
||||
setSelectedDatePreset(DATE_PRESETS[0]);
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
};
|
||||
|
||||
// Lógica de Filtragem
|
||||
const filteredAgencies = agencies.filter((agency) => {
|
||||
// Texto
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const matchesSearch =
|
||||
(agency.name?.toLowerCase() || '').includes(searchLower) ||
|
||||
(agency.email?.toLowerCase() || '').includes(searchLower) ||
|
||||
(agency.subdomain?.toLowerCase() || '').includes(searchLower);
|
||||
|
||||
// Status
|
||||
const matchesStatus =
|
||||
selectedStatus.id === 'all' ? true :
|
||||
selectedStatus.id === 'active' ? agency.is_active :
|
||||
!agency.is_active;
|
||||
|
||||
// Data
|
||||
let matchesDate = true;
|
||||
const agencyDate = new Date(agency.created_at);
|
||||
const now = new Date();
|
||||
|
||||
if (selectedDatePreset.id === 'custom') {
|
||||
if (startDate) {
|
||||
const start = new Date(startDate);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
if (agencyDate < start) matchesDate = false;
|
||||
}
|
||||
if (endDate) {
|
||||
const end = new Date(endDate);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
if (agencyDate > end) matchesDate = false;
|
||||
}
|
||||
} else if (selectedDatePreset.id !== 'all') {
|
||||
const diffTime = Math.abs(now.getTime() - agencyDate.getTime());
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (selectedDatePreset.id === '7d') matchesDate = diffDays <= 7;
|
||||
if (selectedDatePreset.id === '15d') matchesDate = diffDays <= 15;
|
||||
if (selectedDatePreset.id === '30d') matchesDate = diffDays <= 30;
|
||||
}
|
||||
|
||||
return matchesSearch && matchesStatus && matchesDate;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-[1600px] mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">Agências</h1>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
Gerencie seus parceiros e acompanhe o desempenho.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-lg hover:opacity-90 transition-opacity"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
Nova Agência
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Toolbar de Filtros */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
|
||||
{/* Busca */}
|
||||
<div className="relative w-full lg:w-96">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 text-zinc-400" aria-hidden="true" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg leading-5 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-1 focus:ring-[var(--brand-color)] focus:border-[var(--brand-color)] sm:text-sm transition duration-150 ease-in-out"
|
||||
placeholder="Buscar por nome, email ou subdomínio..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
|
||||
{/* Filtro de Status */}
|
||||
<Listbox value={selectedStatus} onChange={setSelectedStatus}>
|
||||
<div className="relative w-full sm:w-[180px]">
|
||||
<Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-900 py-2 pl-3 pr-10 text-left text-sm border border-zinc-200 dark:border-zinc-700 focus:outline-none focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] text-zinc-700 dark:text-zinc-300">
|
||||
<span className="block truncate">{selectedStatus.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon className="h-4 w-4 text-zinc-400" aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-800 py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border border-zinc-200 dark:border-zinc-700">
|
||||
{STATUS_OPTIONS.map((status, statusIdx) => (
|
||||
<Listbox.Option
|
||||
key={statusIdx}
|
||||
className={({ active, selected }) =>
|
||||
`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-zinc-100 dark:bg-zinc-700 text-zinc-900 dark:text-white' : 'text-zinc-900 dark:text-zinc-100'
|
||||
}`
|
||||
}
|
||||
value={status}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
|
||||
{status.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[var(--brand-color)]">
|
||||
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
{/* Filtro de Data Unificado */}
|
||||
<Menu as="div" className="relative w-full sm:w-auto">
|
||||
<Menu.Button className="relative w-full sm:w-[220px] cursor-pointer rounded-lg bg-white dark:bg-zinc-900 py-2 pl-3 pr-10 text-left text-sm border border-zinc-200 dark:border-zinc-700 focus:outline-none focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] text-zinc-700 dark:text-zinc-300 flex items-center gap-2">
|
||||
<CalendarIcon className="w-4 h-4 text-zinc-400" />
|
||||
<span className="block truncate">
|
||||
{selectedDatePreset.id === 'custom'
|
||||
? (startDate && endDate ? `${new Date(startDate).toLocaleDateString()} - ${new Date(endDate).toLocaleDateString()}` : 'Selecionar período')
|
||||
: selectedDatePreset.name}
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon className="h-4 w-4 text-zinc-400" aria-hidden="true" />
|
||||
</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 z-10 mt-2 w-72 origin-top-right rounded-xl bg-white dark:bg-zinc-900 ring-1 ring-black ring-opacity-5 focus:outline-none border border-zinc-200 dark:border-zinc-700 divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
<div className="p-1">
|
||||
{DATE_PRESETS.filter(p => p.id !== 'custom').map((preset) => (
|
||||
<Menu.Item key={preset.id}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedDatePreset(preset);
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
}}
|
||||
className={`${active ? 'bg-zinc-100 dark:bg-zinc-800' : ''
|
||||
} ${selectedDatePreset.id === preset.id ? 'text-[var(--brand-color)] font-medium' : 'text-zinc-700 dark:text-zinc-300'
|
||||
} group flex w-full items-center rounded-lg px-2 py-2 text-sm`}
|
||||
>
|
||||
{preset.name}
|
||||
{selectedDatePreset.id === preset.id && (
|
||||
<CheckIcon className="ml-auto h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-3 space-y-3">
|
||||
<div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
|
||||
Personalizado
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs text-zinc-500 mb-1">Início</label>
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => {
|
||||
setStartDate(e.target.value);
|
||||
setSelectedDatePreset(DATE_PRESETS.find(p => p.id === 'custom')!);
|
||||
}}
|
||||
className="block w-full px-2 py-1 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:border-[var(--brand-color)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-zinc-500 mb-1">Fim</label>
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => {
|
||||
setEndDate(e.target.value);
|
||||
setSelectedDatePreset(DATE_PRESETS.find(p => p.id === 'custom')!);
|
||||
}}
|
||||
className="block w-full px-2 py-1 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:border-[var(--brand-color)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
||||
{/* Botão Limpar */}
|
||||
{(searchTerm || selectedStatus.id !== 'all' || selectedDatePreset.id !== 'all') && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-zinc-200 dark:border-zinc-700 text-sm font-medium rounded-lg text-zinc-700 dark:text-zinc-200 bg-white dark:bg-zinc-900 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--brand-color)]"
|
||||
title="Limpar Filtros"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabela */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--brand-color)]"></div>
|
||||
</div>
|
||||
) : filteredAgencies.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 text-center p-8">
|
||||
<div className="w-16 h-16 bg-zinc-50 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4">
|
||||
<BuildingOfficeIcon className="w-8 h-8 text-zinc-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-zinc-900 dark:text-white mb-1">
|
||||
Nenhuma agência encontrada
|
||||
</h3>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 max-w-sm mx-auto">
|
||||
Não encontramos resultados para os filtros selecionados. Tente limpar a busca ou alterar os filtros.
|
||||
</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="mt-4 text-sm text-[var(--brand-color)] hover:underline font-medium"
|
||||
>
|
||||
Limpar todos os filtros
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50/50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-800">
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Agência</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Contato</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Data Cadastro</th>
|
||||
<th className="px-6 py-4 text-right text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
{filteredAgencies.map((agency) => (
|
||||
<tr key={agency.id} className="group hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-4">
|
||||
{agency.logo_url ? (
|
||||
<img
|
||||
src={agency.logo_url}
|
||||
alt={agency.name}
|
||||
className="w-10 h-10 rounded-lg object-cover bg-white dark:bg-zinc-800"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-sm"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
{agency.name?.substring(0, 2).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{agency.name}
|
||||
</div>
|
||||
<a
|
||||
href={`http://${agency.subdomain}.localhost`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-zinc-500 hover:text-[var(--brand-color)] transition-colors flex items-center gap-1"
|
||||
>
|
||||
{agency.subdomain}.aggios.app
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-sm text-zinc-700 dark:text-zinc-300">{agency.email}</span>
|
||||
<span className="text-xs text-zinc-400">{agency.phone || 'Sem telefone'}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<button
|
||||
onClick={() => toggleActive(agency.id, agency.is_active)}
|
||||
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-all ${agency.is_active
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-900/30'
|
||||
: 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${agency.is_active ? 'bg-emerald-500' : 'bg-zinc-400'}`} />
|
||||
{agency.is_active ? 'Ativo' : 'Inativo'}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{new Date(agency.created_at).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<Menu.Button className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none">
|
||||
<EllipsisVerticalIcon className="w-5 h-5" />
|
||||
</Menu.Button>
|
||||
<Menu.Items
|
||||
transition
|
||||
portal
|
||||
anchor="bottom end"
|
||||
className="w-48 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl bg-white dark:bg-zinc-900 focus:outline-none z-50 border border-zinc-200 dark:border-zinc-800 [--anchor-gap:8px] transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href={`/superadmin/agencies/${agency.id}`}
|
||||
className={`${active ? 'bg-zinc-50 dark:bg-zinc-800' : ''
|
||||
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-zinc-700 dark:text-zinc-300`}
|
||||
>
|
||||
<EyeIcon className="mr-2 h-4 w-4 text-zinc-400" />
|
||||
Detalhes
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href={`/superadmin/agencies/${agency.id}/edit`}
|
||||
className={`${active ? 'bg-zinc-50 dark:bg-zinc-800' : ''
|
||||
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-zinc-700 dark:text-zinc-300`}
|
||||
>
|
||||
<PencilIcon className="mr-2 h-4 w-4 text-zinc-400" />
|
||||
Editar
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => handleDelete(agency.id)}
|
||||
className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''
|
||||
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-red-600 dark:text-red-400`}
|
||||
>
|
||||
<TrashIcon className="mr-2 h-4 w-4" />
|
||||
Excluir
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Menu>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Footer da Tabela (Paginação Mockada) */}
|
||||
<div className="px-6 py-4 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-800/50 flex items-center justify-between">
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||
Mostrando <span className="font-medium">{filteredAgencies.length}</span> resultados
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button disabled className="px-3 py-1 text-xs font-medium text-zinc-400 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md cursor-not-allowed opacity-50">
|
||||
Anterior
|
||||
</button>
|
||||
<button disabled className="px-3 py-1 text-xs font-medium text-zinc-400 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md cursor-not-allowed opacity-50">
|
||||
Próxima
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CreateAgencyModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
onSuccess={fetchAgencies}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { LinkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function AgencyTemplatesPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<LinkIcon className="w-6 h-6 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Templates de Agência</h1>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Gerencie templates para cadastro de novas agências
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<LinkIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white mb-1">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
A gestão de templates de agência estará disponível em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
front-end-dash.aggios.app/app/superadmin/layout.tsx
Normal file
15
front-end-dash.aggios.app/app/superadmin/layout.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout';
|
||||
|
||||
export default function SuperAdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
{children}
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -2,484 +2,288 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
BuildingOfficeIcon,
|
||||
UserGroupIcon,
|
||||
LinkIcon,
|
||||
ChartBarIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
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;
|
||||
};
|
||||
interface Stats {
|
||||
totalAgencies: number;
|
||||
activeAgencies: number;
|
||||
inactiveAgencies: number;
|
||||
totalUsers: number;
|
||||
}
|
||||
|
||||
export default function PainelPage() {
|
||||
export default function SuperAdminDashboard() {
|
||||
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);
|
||||
const [agencies, setAgencies] = useState<Agency[]>([]);
|
||||
const [stats, setStats] = useState<Stats>({
|
||||
totalAgencies: 0,
|
||||
activeAgencies: 0,
|
||||
inactiveAgencies: 0,
|
||||
totalUsers: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se usuário está logado
|
||||
if (!isAuthenticated()) {
|
||||
const token = localStorage.getItem('token');
|
||||
const userData = localStorage.getItem('user');
|
||||
|
||||
if (!token || !userData) {
|
||||
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 {
|
||||
const user = JSON.parse(userData);
|
||||
if (user.role !== 'SUPERADMIN') {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, [router]);
|
||||
|
||||
const loadAgencies = async () => {
|
||||
setLoadingAgencies(true);
|
||||
const loadData = async () => {
|
||||
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',
|
||||
const response = await fetch('/api/admin/agencies', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencies(data.slice(0, 5)); // Apenas as 5 primeiras
|
||||
|
||||
alert('Agência excluída com sucesso!');
|
||||
if (selectedAgencyId === agencyId) {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
// Calcular estatísticas
|
||||
setStats({
|
||||
totalAgencies: data.length,
|
||||
activeAgencies: data.filter((a: Agency) => a.is_active).length,
|
||||
inactiveAgencies: data.filter((a: Agency) => !a.is_active).length,
|
||||
totalUsers: data.length * 2, // Mock - implementar depois
|
||||
});
|
||||
}
|
||||
|
||||
await loadAgencies();
|
||||
} catch (error) {
|
||||
console.error('Erro ao excluir agência:', error);
|
||||
alert('Erro ao excluir agência.');
|
||||
console.error('Erro ao carregar dados:', error);
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const statCards = [
|
||||
{
|
||||
name: 'Total de Agências',
|
||||
value: stats.totalAgencies,
|
||||
icon: BuildingOfficeIcon,
|
||||
color: 'orange',
|
||||
href: '/superadmin/agencies',
|
||||
},
|
||||
{
|
||||
name: 'Agências Ativas',
|
||||
value: stats.activeAgencies,
|
||||
icon: CheckCircleIcon,
|
||||
color: 'green',
|
||||
href: '/superadmin/agencies',
|
||||
},
|
||||
{
|
||||
name: 'Links de Cadastro',
|
||||
value: '5', // Mock
|
||||
icon: LinkIcon,
|
||||
color: 'pink',
|
||||
href: '/superadmin/signup-templates',
|
||||
},
|
||||
{
|
||||
name: 'Total de Usuários',
|
||||
value: stats.totalUsers,
|
||||
icon: UserGroupIcon,
|
||||
color: 'rose',
|
||||
href: '/superadmin/users',
|
||||
},
|
||||
];
|
||||
|
||||
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-brand-500 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-brand-500 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-brand-600 hover:text-brand-700"
|
||||
>
|
||||
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-brand-600 hover:text-brand-700">
|
||||
{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 className="flex items-center justify-center h-full p-8">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></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-brand-500 to-brand-700 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 className="p-6 h-full overflow-auto">
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Visão geral da plataforma Aggios
|
||||
</p>
|
||||
</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 className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{statCards.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<Link
|
||||
key={stat.name}
|
||||
href={stat.href}
|
||||
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-4 border border-gray-200 dark:border-gray-800 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{stat.name}
|
||||
</p>
|
||||
<p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{stat.value}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-lg p-2 bg-${stat.color}-100 dark:bg-${stat.color}-900/20`}
|
||||
>
|
||||
<Icon
|
||||
className={`h-5 w-5 text-${stat.color}-600 dark:text-${stat.color}-400`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
{/* Recent Agencies */}
|
||||
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white">
|
||||
Agências Recentes
|
||||
</h2>
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="text-xs font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400"
|
||||
>
|
||||
Ver todas →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingAgencies ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500 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-brand-50/70 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-brand-500 to-brand-700 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'}
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{agencies.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center">
|
||||
<BuildingOfficeIcon className="mx-auto h-10 w-10 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Nenhuma agência
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Comece criando uma nova agência.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
agencies.map((agency) => (
|
||||
<div
|
||||
key={agency.id}
|
||||
className="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 w-8 rounded-lg flex items-center justify-center" style={{ background: 'var(--gradient)' }}>
|
||||
<span className="text-xs font-medium text-white">
|
||||
{agency.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{agency.name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{agency.subdomain}.aggios.app
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{agency.is_active ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-green-100 dark:bg-green-900/20 px-2 py-0.5 text-[10px] font-medium text-green-800 dark:text-green-400">
|
||||
<CheckCircleIcon className="h-3 w-3" />
|
||||
Ativo
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-red-100 dark:bg-red-900/20 px-2 py-0.5 text-[10px] font-medium text-red-800 dark:text-red-400">
|
||||
<XCircleIcon className="h-3 w-3" />
|
||||
Inativo
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs 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-gradient-to-r from-brand-500 to-brand-700 text-white hover:opacity-90 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>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="group relative overflow-hidden rounded-xl p-4 transition-all"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<BuildingOfficeIcon className="h-6 w-6" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Gerenciar Agências</h3>
|
||||
<p className="text-xs text-white/80">Ver e editar agências</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/superadmin/signup-templates"
|
||||
className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-orange-500 to-pink-600 p-4 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<LinkIcon className="h-6 w-6" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Links de Cadastro</h3>
|
||||
<p className="text-xs text-white/80">Criar links personalizados</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/superadmin/reports"
|
||||
className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-pink-500 to-rose-600 p-4 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<ChartBarIcon className="h-6 w-6" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Relatórios</h3>
|
||||
<p className="text-xs text-white/80">Análises e métricas</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
29
front-end-dash.aggios.app/app/superadmin/reports/page.tsx
Normal file
29
front-end-dash.aggios.app/app/superadmin/reports/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { ChartBarIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function ReportsPage() {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<ChartBarIcon className="w-8 h-8 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Relatórios</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Visualize métricas e relatórios do sistema
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-12 text-center">
|
||||
<ChartBarIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Os relatórios e analytics estarão disponíveis em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
front-end-dash.aggios.app/app/superadmin/settings/page.tsx
Normal file
29
front-end-dash.aggios.app/app/superadmin/settings/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { Cog6ToothIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Cog6ToothIcon className="w-6 h-6 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Configurações</h1>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Configure o sistema e preferências globais
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<Cog6ToothIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white mb-1">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
As configurações do sistema estarão disponíveis em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,447 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { PlusIcon, LinkIcon, PencilSquareIcon, TrashIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Dialog from '@/components/ui/Dialog';
|
||||
|
||||
interface FormField {
|
||||
name: string;
|
||||
label: string;
|
||||
type: string;
|
||||
required: boolean;
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface SignupTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
slug: string;
|
||||
form_fields: FormField[];
|
||||
enabled_modules: string[];
|
||||
redirect_url?: string;
|
||||
success_message?: string;
|
||||
custom_logo_url?: string;
|
||||
custom_primary_color?: string;
|
||||
is_active: boolean;
|
||||
usage_count: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const AVAILABLE_FIELDS = [
|
||||
{ name: 'email', label: 'E-mail', type: 'email', required: true },
|
||||
{ name: 'password', label: 'Senha', type: 'password', required: true },
|
||||
{ name: 'subdomain', label: 'Subdomínio', type: 'text', required: true },
|
||||
{ name: 'company_name', label: 'Nome da Empresa', type: 'text', required: false },
|
||||
{ name: 'cnpj', label: 'CNPJ', type: 'text', required: false },
|
||||
{ name: 'phone', label: 'Telefone', type: 'tel', required: false },
|
||||
{ name: 'address', label: 'Endereço', type: 'text', required: false },
|
||||
{ name: 'city', label: 'Cidade', type: 'text', required: false },
|
||||
{ name: 'state', label: 'Estado', type: 'text', required: false },
|
||||
{ name: 'zipcode', label: 'CEP', type: 'text', required: false },
|
||||
];
|
||||
|
||||
const AVAILABLE_MODULES = [
|
||||
'CRM',
|
||||
'ERP',
|
||||
'PROJECTS',
|
||||
'FINANCIAL',
|
||||
'INVENTORY',
|
||||
'HR',
|
||||
];
|
||||
|
||||
export default function SignupTemplatesPage() {
|
||||
const [templates, setTemplates] = useState<SignupTemplate[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [editingTemplate, setEditingTemplate] = useState<SignupTemplate | null>(null);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
slug: '',
|
||||
redirect_url: '',
|
||||
success_message: '',
|
||||
});
|
||||
const [selectedFields, setSelectedFields] = useState<FormField[]>([]);
|
||||
const [selectedModules, setSelectedModules] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTemplates();
|
||||
}, []);
|
||||
|
||||
const loadTemplates = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/admin/signup-templates', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setTemplates(data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar templates:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldToggle = (field: typeof AVAILABLE_FIELDS[0]) => {
|
||||
// Campos obrigatórios não podem ser removidos
|
||||
if (field.required) return;
|
||||
|
||||
setSelectedFields(prev => {
|
||||
const exists = prev.find(f => f.name === field.name);
|
||||
if (exists) {
|
||||
return prev.filter(f => f.name !== field.name);
|
||||
} else {
|
||||
return [...prev, { ...field, order: prev.length + 1 }];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleModuleToggle = (module: string) => {
|
||||
setSelectedModules(prev => {
|
||||
if (prev.includes(module)) {
|
||||
return prev.filter(m => m !== module);
|
||||
} else {
|
||||
return [...prev, module];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const template = {
|
||||
...formData,
|
||||
form_fields: selectedFields,
|
||||
enabled_modules: selectedModules,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const url = editingTemplate
|
||||
? `/api/admin/signup-templates/${editingTemplate.id}`
|
||||
: '/api/admin/signup-templates';
|
||||
|
||||
const method = editingTemplate ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(template),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
loadTemplates();
|
||||
handleCloseDialog();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao salvar template:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Tem certeza que deseja deletar este template?')) return;
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/admin/signup-templates/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
loadTemplates();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao deletar template:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (template: SignupTemplate) => {
|
||||
setEditingTemplate(template);
|
||||
setFormData({
|
||||
name: template.name,
|
||||
description: template.description,
|
||||
slug: template.slug,
|
||||
redirect_url: template.redirect_url || '',
|
||||
success_message: template.success_message || '',
|
||||
});
|
||||
setSelectedFields(template.form_fields);
|
||||
setSelectedModules(template.enabled_modules);
|
||||
setShowDialog(true);
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setShowDialog(false);
|
||||
setEditingTemplate(null);
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
slug: '',
|
||||
redirect_url: '',
|
||||
success_message: '',
|
||||
});
|
||||
// Sempre iniciar com os campos obrigatórios selecionados
|
||||
const requiredFields = AVAILABLE_FIELDS.filter(f => f.required).map((f, idx) => ({
|
||||
...f,
|
||||
order: idx + 1
|
||||
}));
|
||||
setSelectedFields(requiredFields);
|
||||
setSelectedModules([]);
|
||||
};
|
||||
|
||||
// Inicializar com campos obrigatórios na primeira renderização
|
||||
useEffect(() => {
|
||||
const requiredFields = AVAILABLE_FIELDS.filter(f => f.required).map((f, idx) => ({
|
||||
...f,
|
||||
order: idx + 1
|
||||
}));
|
||||
if (selectedFields.length === 0) {
|
||||
setSelectedFields(requiredFields);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const copyToClipboard = (slug: string) => {
|
||||
const url = `${window.location.origin}/cadastro/${slug}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
alert('Link copiado para a área de transferência!');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Links de Cadastro</h1>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Crie links personalizados de cadastro com campos e módulos específicos
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowDialog(true)} size="sm">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Novo Link
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-gray-900 dark:border-white mx-auto"></div>
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<div className="text-center py-8 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
|
||||
<LinkIcon className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white mb-1">
|
||||
Nenhum link criado
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Crie seu primeiro link de cadastro personalizado
|
||||
</p>
|
||||
<Button onClick={() => setShowDialog(true)} size="sm">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Criar Primeiro Link
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
{templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-4"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{template.name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
{template.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<code className="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-900 dark:text-white">
|
||||
/cadastro/{template.slug}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(template.slug)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
title="Copiar link"
|
||||
>
|
||||
<ClipboardDocumentIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
<span className="text-[10px] text-gray-600 dark:text-gray-400">Campos:</span>
|
||||
{template.form_fields.map((field) => (
|
||||
<span
|
||||
key={field.name}
|
||||
className="px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-[10px]"
|
||||
>
|
||||
{field.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="text-[10px] text-gray-600 dark:text-gray-400">Módulos:</span>
|
||||
{template.enabled_modules.map((module) => (
|
||||
<span
|
||||
key={module}
|
||||
className="px-1.5 py-0.5 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded text-[10px]"
|
||||
>
|
||||
{module}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
<div className="text-right mr-3">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{template.usage_count}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-600 dark:text-gray-400">
|
||||
cadastros
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleEdit(template)}
|
||||
className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
>
|
||||
<PencilSquareIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(template.id)}
|
||||
className="p-1.5 hover:bg-red-100 dark:hover:bg-red-900 rounded"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dialog de Criação/Edição */}
|
||||
<Dialog
|
||||
isOpen={showDialog}
|
||||
onClose={handleCloseDialog}
|
||||
title={editingTemplate ? 'Editar Link de Cadastro' : 'Novo Link de Cadastro'}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Nome do Template"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Slug (URL)"
|
||||
value={formData.slug}
|
||||
onChange={(e) => setFormData({ ...formData, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-') })}
|
||||
required
|
||||
placeholder="ex: crm-rapido"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Descrição"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Campos do Formulário
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{AVAILABLE_FIELDS.map((field) => {
|
||||
const isSelected = selectedFields.some(f => f.name === field.name);
|
||||
const isRequired = field.required;
|
||||
|
||||
return (
|
||||
<label
|
||||
key={field.name}
|
||||
className={`flex items-center gap-2 p-2 rounded border ${isRequired
|
||||
? 'border-purple-300 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
} ${isRequired
|
||||
? 'cursor-not-allowed'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer'
|
||||
}`}
|
||||
title={isRequired ? 'Campo obrigatório - não pode ser removido' : ''}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => handleFieldToggle(field)}
|
||||
disabled={isRequired}
|
||||
className={`rounded ${isRequired ? 'cursor-not-allowed opacity-60' : ''}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{field.label}</span>
|
||||
{isRequired && (
|
||||
<span className="ml-auto text-xs px-1.5 py-0.5 bg-purple-600 dark:bg-purple-500 text-white rounded font-medium">
|
||||
OBRIGATÓRIO
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
Os campos Email, Senha e Subdomínio são obrigatórios e não podem ser removidos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Módulos Habilitados
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{AVAILABLE_MODULES.map((module) => (
|
||||
<label
|
||||
key={module}
|
||||
className="flex items-center gap-2 p-2 rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedModules.includes(module)}
|
||||
onChange={() => handleModuleToggle(module)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{module}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<Button type="button" variant="outline" onClick={handleCloseDialog}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{editingTemplate ? 'Salvar Alterações' : 'Criar Link'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
front-end-dash.aggios.app/app/superadmin/users/page.tsx
Normal file
29
front-end-dash.aggios.app/app/superadmin/users/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { UserGroupIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function UsersPage() {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<UserGroupIcon className="w-8 h-8 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usuários</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Gerencie todos os usuários do sistema
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-12 text-center">
|
||||
<UserGroupIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
A gestão de usuários estará disponível em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
--color-gradient-brand: linear-gradient(135deg, #ff3a05, #ff0080);
|
||||
|
||||
/* Cores sólidas de marca (usadas em textos/bordas) */
|
||||
--brand-color: #ff3a05;
|
||||
--brand-color: #ff0080;
|
||||
--brand-color-strong: #ff0080;
|
||||
|
||||
/* Superfícies e tipografia */
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useState } from 'react';
|
||||
import { Dialog, Transition, Tab } from '@headlessui/react';
|
||||
import {
|
||||
XMarkIcon,
|
||||
BuildingOfficeIcon,
|
||||
MapPinIcon,
|
||||
UserIcon,
|
||||
CheckCircleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface CreateAgencyModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
function classNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
export default function CreateAgencyModal({ isOpen, onClose, onSuccess }: CreateAgencyModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
// Agência
|
||||
agencyName: '',
|
||||
subdomain: '',
|
||||
cnpj: '',
|
||||
razaoSocial: '',
|
||||
description: '',
|
||||
website: '',
|
||||
industry: '',
|
||||
phone: '',
|
||||
teamSize: '',
|
||||
|
||||
// Endereço
|
||||
cep: '',
|
||||
state: '',
|
||||
city: '',
|
||||
neighborhood: '',
|
||||
street: '',
|
||||
number: '',
|
||||
complement: '',
|
||||
|
||||
// Admin
|
||||
adminEmail: '',
|
||||
adminPassword: '',
|
||||
adminName: '',
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.text();
|
||||
throw new Error(errorData || 'Erro ao criar agência');
|
||||
}
|
||||
|
||||
onSuccess();
|
||||
onClose();
|
||||
// Reset form?
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ name: 'Dados Gerais', icon: BuildingOfficeIcon },
|
||||
{ name: 'Endereço', icon: MapPinIcon },
|
||||
{ name: 'Administrador', icon: UserIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog 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-zinc-900/40 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl border border-zinc-200 dark:border-zinc-800">
|
||||
<div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-white dark:bg-zinc-900 text-zinc-400 hover:text-zinc-500 focus:outline-none"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="sr-only">Fechar</span>
|
||||
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 sm:p-8">
|
||||
<div className="sm:flex sm:items-start mb-6">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<BuildingOfficeIcon className="h-6 w-6 text-[var(--brand-color)]" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-xl font-semibold leading-6 text-zinc-900 dark:text-white">
|
||||
Nova Agência
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
Preencha os dados abaixo para cadastrar uma nova agência parceira.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-800 dark:text-red-300">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 p-1 mb-6">
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={tab.name}
|
||||
className={({ selected }) =>
|
||||
classNames(
|
||||
'w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all duration-200',
|
||||
'ring-white ring-opacity-60 ring-offset-2 ring-offset-[var(--brand-color)] focus:outline-none focus:ring-2',
|
||||
selected
|
||||
? 'bg-white dark:bg-zinc-800 text-[var(--brand-color)] shadow'
|
||||
: 'text-zinc-500 hover:bg-white/[0.12] hover:text-zinc-700 dark:hover:text-zinc-300'
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<tab.icon className="w-4 h-4" />
|
||||
{tab.name}
|
||||
</div>
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{/* Dados Gerais */}
|
||||
<Tab.Panel className="space-y-4 focus:outline-none">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input label="Nome da Agência *" name="agencyName" value={formData.agencyName} onChange={handleChange} required />
|
||||
<Input label="Subdomínio *" name="subdomain" value={formData.subdomain} onChange={handleChange} required prefix="http://" suffix=".aggios.app" />
|
||||
<Input label="CNPJ" name="cnpj" value={formData.cnpj} onChange={handleChange} />
|
||||
<Input label="Razão Social" name="razaoSocial" value={formData.razaoSocial} onChange={handleChange} />
|
||||
<Input label="Telefone" name="phone" value={formData.phone} onChange={handleChange} />
|
||||
<Input label="Website" name="website" value={formData.website} onChange={handleChange} />
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Descrição</label>
|
||||
<textarea
|
||||
name="description"
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 px-3 py-2 text-sm text-zinc-900 dark:text-white focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] outline-none transition-all"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Endereço */}
|
||||
<Tab.Panel className="space-y-4 focus:outline-none">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input label="CEP" name="cep" value={formData.cep} onChange={handleChange} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input label="Estado" name="state" value={formData.state} onChange={handleChange} />
|
||||
<Input label="Cidade" name="city" value={formData.city} onChange={handleChange} />
|
||||
</div>
|
||||
<Input label="Bairro" name="neighborhood" value={formData.neighborhood} onChange={handleChange} />
|
||||
<Input label="Rua" name="street" value={formData.street} onChange={handleChange} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input label="Número" name="number" value={formData.number} onChange={handleChange} />
|
||||
<Input label="Complemento" name="complement" value={formData.complement} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Administrador */}
|
||||
<Tab.Panel className="space-y-4 focus:outline-none">
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-4 rounded-lg mb-4 border border-zinc-100 dark:border-zinc-800">
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 flex items-center gap-2">
|
||||
<UserIcon className="w-4 h-4 text-[var(--brand-color)]" />
|
||||
Este usuário será o administrador principal da agência.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Input label="Nome Completo *" name="adminName" value={formData.adminName} onChange={handleChange} required />
|
||||
<Input label="E-mail *" name="adminEmail" type="email" value={formData.adminEmail} onChange={handleChange} required />
|
||||
<Input label="Senha *" name="adminPassword" type="password" value={formData.adminPassword} onChange={handleChange} required />
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
|
||||
<div className="mt-8 flex items-center justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800 pt-6">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="inline-flex justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:ring-offset-2 disabled:opacity-50 transition-all"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
{loading ? 'Criando...' : 'Criar Agência'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
|
||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label: string;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
function Input({ label, prefix, suffix, className, ...props }: InputProps) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<div className="relative flex rounded-lg shadow-sm">
|
||||
{prefix && (
|
||||
<span className="inline-flex items-center rounded-l-lg border border-r-0 border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-3 text-zinc-500 sm:text-sm">
|
||||
{prefix}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className={classNames(
|
||||
"block w-full border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 text-zinc-900 dark:text-white focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] sm:text-sm outline-none transition-all py-2 px-3",
|
||||
prefix ? "rounded-none" : "rounded-l-lg",
|
||||
suffix ? "rounded-none" : "rounded-r-lg",
|
||||
!prefix && !suffix ? "rounded-lg" : "",
|
||||
className || ""
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
{suffix && (
|
||||
<span className="inline-flex items-center rounded-r-lg border border-l-0 border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-3 text-zinc-500 sm:text-sm">
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -74,16 +74,6 @@ export default function DynamicBranding({
|
||||
"✓ Notificações em tempo real"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-global-line",
|
||||
title: "Seu Domínio Exclusivo",
|
||||
description: "Escolha como acessar seu painel",
|
||||
benefits: [
|
||||
"✓ Subdomínio personalizado",
|
||||
"✓ SSL incluído gratuitamente",
|
||||
"✓ Domínio próprio (opcional)"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-palette-line",
|
||||
title: "Personalize as Cores",
|
||||
@@ -106,8 +96,8 @@ export default function DynamicBranding({
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
// Se for etapa 5, mostrar preview do dashboard
|
||||
if (currentStep === 5) {
|
||||
// Se for etapa 4, mostrar preview do dashboard
|
||||
if (currentStep === 4) {
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12">
|
||||
{/* Logo */}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { SidebarRail } from './SidebarRail';
|
||||
import { TopBar } from './TopBar';
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
|
||||
// Estado centralizado do layout
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('dashboard');
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
|
||||
{/* Sidebar controla seu próprio estado visual via props */}
|
||||
<SidebarRail
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
isExpanded={isExpanded}
|
||||
onToggle={() => setIsExpanded(!isExpanded)}
|
||||
/>
|
||||
|
||||
{/* Área de Conteúdo (Children) */}
|
||||
<main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white dark:bg-zinc-900 rounded-2xl shadow-lg relative transition-colors duration-300 border border-transparent dark:border-zinc-800">
|
||||
{/* TopBar com Breadcrumbs e Search */}
|
||||
<TopBar />
|
||||
|
||||
{/* Conteúdo das páginas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
235
front-end-dash.aggios.app/components/layout/SidebarRail.tsx
Normal file
235
front-end-dash.aggios.app/components/layout/SidebarRail.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { Fragment } from 'react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import {
|
||||
HomeIcon,
|
||||
BuildingOfficeIcon,
|
||||
LinkIcon,
|
||||
Cog6ToothIcon,
|
||||
DocumentTextIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
UserCircleIcon,
|
||||
ArrowRightOnRectangleIcon,
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface SidebarRailProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
activeTab,
|
||||
onTabChange,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}) => {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const menuItems = [
|
||||
{ id: 'dashboard', label: 'Dashboard', href: '/superadmin', icon: HomeIcon },
|
||||
{ id: 'agencies', label: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon },
|
||||
{ id: 'templates', label: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon },
|
||||
{ id: 'agency-templates', label: 'Templates Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon },
|
||||
{ id: 'settings', label: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon },
|
||||
];
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === 'dark' ? 'light' : 'dark');
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
relative h-full bg-white dark:bg-zinc-900 rounded-2xl flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 shadow-lg
|
||||
transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
|
||||
${isExpanded ? 'w-[240px]' : 'w-[80px]'}
|
||||
`}
|
||||
>
|
||||
{/* Toggle Button - Floating on the border */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
|
||||
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronLeftIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Header com Logo */}
|
||||
<div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
A
|
||||
</div>
|
||||
|
||||
{/* Título com animação */}
|
||||
<div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${isExpanded ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
|
||||
<span className="font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separador removido para visual mais limpo */}
|
||||
|
||||
{/* Navegação */}
|
||||
<div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
|
||||
{menuItems.map((item) => (
|
||||
<RailButton
|
||||
key={item.id}
|
||||
label={item.label}
|
||||
icon={item.icon}
|
||||
href={item.href}
|
||||
active={pathname === item.href || (item.href !== '/superadmin' && pathname?.startsWith(item.href))}
|
||||
onClick={() => onTabChange(item.id)}
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Separador antes do menu de usuário */}
|
||||
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
|
||||
|
||||
{/* User Menu - Footer */}
|
||||
<div>
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${isExpanded ? '' : 'justify-center'}`}>
|
||||
<UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
|
||||
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
|
||||
<span className="font-medium text-xs text-gray-900 dark:text-white">SuperAdmin</span>
|
||||
</div>
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden z-50`}>
|
||||
<div className="p-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<UserCircleIcon className="mr-2 h-4 w-4" />
|
||||
Ver meu perfil
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
{mounted && theme === 'dark' ? (
|
||||
<>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Tema Claro
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Tema Escuro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
|
||||
Sair
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Subcomponente do Botão (Essencial para a animação do texto)
|
||||
interface RailButtonProps {
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
href: string;
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
isExpanded: boolean;
|
||||
}
|
||||
|
||||
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded }) => (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
style={{ background: active ? 'var(--gradient)' : undefined }}
|
||||
className={`
|
||||
flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden
|
||||
${active
|
||||
? 'text-white shadow-md'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400'
|
||||
}
|
||||
${isExpanded ? '' : 'justify-center'}
|
||||
`}
|
||||
>
|
||||
{/* Ícone */}
|
||||
<Icon className="shrink-0 w-4 h-4" />
|
||||
|
||||
{/* Lógica Mágica do Texto: Max-Width Transition */}
|
||||
<div className={`
|
||||
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out
|
||||
${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}
|
||||
`}>
|
||||
<span className="font-medium text-xs">{label}</span>
|
||||
</div>
|
||||
|
||||
{/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
|
||||
{active && !isExpanded && (
|
||||
<div
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
101
front-end-dash.aggios.app/components/layout/TopBar.tsx
Normal file
101
front-end-dash.aggios.app/components/layout/TopBar.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
|
||||
import CommandPalette from '@/components/ui/CommandPalette';
|
||||
|
||||
export const TopBar: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
|
||||
|
||||
// Gerar breadcrumbs a partir do pathname
|
||||
const generateBreadcrumbs = () => {
|
||||
const paths = pathname?.split('/').filter(Boolean) || [];
|
||||
const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
|
||||
{ name: 'Home', href: '/superadmin', icon: HomeIcon }
|
||||
];
|
||||
|
||||
let currentPath = '';
|
||||
paths.forEach((path, index) => {
|
||||
currentPath += `/${path}`;
|
||||
|
||||
// Mapeamento de nomes amigáveis
|
||||
const nameMap: Record<string, string> = {
|
||||
'superadmin': 'SuperAdmin',
|
||||
'agencies': 'Agências',
|
||||
'signup-templates': 'Templates',
|
||||
'agency-templates': 'Templates Agência',
|
||||
'settings': 'Configurações',
|
||||
'new': 'Novo',
|
||||
};
|
||||
|
||||
if (index > 0) { // Pula 'superadmin' no breadcrumb
|
||||
breadcrumbs.push({
|
||||
name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1),
|
||||
href: currentPath,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
const breadcrumbs = generateBreadcrumbs();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-6 py-3 flex items-center justify-between transition-colors">
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="flex items-center gap-2 text-xs">
|
||||
{breadcrumbs.map((crumb, index) => {
|
||||
const Icon = crumb.icon;
|
||||
const isLast = index === breadcrumbs.length - 1;
|
||||
|
||||
return (
|
||||
<div key={crumb.href} className="flex items-center gap-2">
|
||||
{Icon ? (
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className="flex items-center gap-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-colors"
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
<span>{crumb.name}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className={`${isLast ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200'} transition-colors`}
|
||||
>
|
||||
{crumb.name}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!isLast && <ChevronRightIcon className="w-3 h-3 text-gray-400 dark:text-zinc-600" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Search Bar Trigger */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setIsCommandPaletteOpen(true)}
|
||||
className="group relative flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-all w-64"
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-4 h-4 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300" />
|
||||
<span>Pesquisar...</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
194
front-end-dash.aggios.app/components/ui/CommandPalette.tsx
Normal file
194
front-end-dash.aggios.app/components/ui/CommandPalette.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useState, useEffect, useRef } from 'react';
|
||||
import { Combobox, Dialog, Transition } from '@headlessui/react';
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
HomeIcon,
|
||||
BuildingOfficeIcon,
|
||||
LinkIcon,
|
||||
Cog6ToothIcon,
|
||||
PlusIcon,
|
||||
DocumentTextIcon,
|
||||
ArrowRightIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface CommandPaletteProps {
|
||||
isOpen: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
}
|
||||
|
||||
export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const router = useRouter();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Atalho de teclado (Ctrl+K ou Cmd+K)
|
||||
useEffect(() => {
|
||||
const onKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
|
||||
event.preventDefault();
|
||||
setIsOpen(true);
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', onKeydown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', onKeydown);
|
||||
};
|
||||
}, [setIsOpen]);
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '/superadmin', icon: HomeIcon, category: 'Navegação' },
|
||||
{ name: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon, category: 'Navegação' },
|
||||
{ name: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon, category: 'Navegação' },
|
||||
{ name: 'Templates de Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon, category: 'Navegação' },
|
||||
{ name: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon, category: 'Navegação' },
|
||||
{ name: 'Nova Agência', href: '/superadmin/agencies/new', icon: PlusIcon, category: 'Ações' },
|
||||
{ name: 'Novo Template', href: '/superadmin/signup-templates/new', icon: PlusIcon, category: 'Ações' },
|
||||
];
|
||||
|
||||
const filteredItems =
|
||||
query === ''
|
||||
? navigation
|
||||
: navigation.filter((item) => {
|
||||
return item.name.toLowerCase().includes(query.toLowerCase());
|
||||
});
|
||||
|
||||
// Agrupar itens por categoria
|
||||
const groups = filteredItems.reduce((acc, item) => {
|
||||
if (!acc[item.category]) {
|
||||
acc[item.category] = [];
|
||||
}
|
||||
acc[item.category].push(item);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof filteredItems>);
|
||||
|
||||
const handleSelect = (item: typeof navigation[0] | null) => {
|
||||
if (!item) return;
|
||||
setIsOpen(false);
|
||||
router.push(item.href);
|
||||
setQuery('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment} afterLeave={() => setQuery('')}>
|
||||
<Dialog as="div" className="relative z-50" onClose={setIsOpen} initialFocus={inputRef}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all">
|
||||
<Combobox onChange={handleSelect}>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
|
||||
placeholder="O que você procura?"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
displayValue={(item: any) => item?.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredItems.length > 0 && (
|
||||
<Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
{Object.entries(groups).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<Combobox.Option
|
||||
key={item.href}
|
||||
value={item}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-4 py-2.5 transition-colors ${active
|
||||
? '[background:var(--gradient)] text-white'
|
||||
: ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
|
||||
}`}>
|
||||
<item.icon
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{active && (
|
||||
<ArrowRightIcon className="h-4 w-4 text-white/70" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
|
||||
{query !== '' && filteredItems.length === 0 && (
|
||||
<div className="py-14 px-6 text-center text-sm sm:px-14">
|
||||
<MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
<p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
|
||||
<p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para "{query}". Tente buscar por páginas ou ações.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
|
||||
<div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
|
||||
Selecionar
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
|
||||
Navegar
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
|
||||
Fechar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { InputHTMLAttributes, forwardRef, useState } from "react";
|
||||
import { InputHTMLAttributes, forwardRef, useState, ReactNode } from "react";
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
helperText?: ReactNode;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
onRightIconClick?: () => void;
|
||||
|
||||
@@ -16,9 +16,6 @@ export const API_ENDPOINTS = {
|
||||
refresh: `${API_BASE_URL}/api/auth/refresh`,
|
||||
me: `${API_BASE_URL}/api/me`,
|
||||
|
||||
// Admin / Agencies
|
||||
adminAgencyRegister: `${API_BASE_URL}/api/admin/agencies/register`,
|
||||
|
||||
// Health
|
||||
health: `${API_BASE_URL}/health`,
|
||||
apiHealth: `${API_BASE_URL}/api/health`,
|
||||
|
||||
@@ -10,33 +10,7 @@ export async function middleware(request: NextRequest) {
|
||||
// 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) - validar se existe
|
||||
if (hostname.includes('.')) {
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/api/tenant/check?subdomain=${subdomain}`);
|
||||
if (!res.ok) {
|
||||
const baseHost = hostname.split('.').slice(1).join('.') || hostname;
|
||||
const redirectUrl = new URL(url.toString());
|
||||
redirectUrl.hostname = baseHost;
|
||||
redirectUrl.pathname = '/';
|
||||
return NextResponse.redirect(redirectUrl);
|
||||
}
|
||||
} catch (err) {
|
||||
const baseHost = hostname.split('.').slice(1).join('.') || hostname;
|
||||
const redirectUrl = new URL(url.toString());
|
||||
redirectUrl.hostname = baseHost;
|
||||
redirectUrl.pathname = '/';
|
||||
return NextResponse.redirect(redirectUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// Permitir /dashboard, /login, /clientes, etc.
|
||||
// Apenas SUPERADMIN (dash.localhost)
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
sans: ['var(--font-arimo)', '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'],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user