748 lines
42 KiB
TypeScript
748 lines
42 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Tab } from '@headlessui/react';
|
|
import { Dialog } from '@/components/ui';
|
|
import {
|
|
BuildingOfficeIcon,
|
|
SwatchIcon,
|
|
PhotoIcon,
|
|
UserGroupIcon,
|
|
ShieldCheckIcon,
|
|
BellIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
const tabs = [
|
|
{ name: 'Dados da Agência', icon: BuildingOfficeIcon },
|
|
{ name: 'Personalização', icon: SwatchIcon },
|
|
{ name: 'Logo e Marca', icon: PhotoIcon },
|
|
{ name: 'Equipe', icon: UserGroupIcon },
|
|
{ name: 'Segurança', icon: ShieldCheckIcon },
|
|
{ name: 'Notificações', icon: BellIcon },
|
|
];
|
|
|
|
const themePresets = [
|
|
{ name: 'Laranja/Rosa', gradient: 'linear-gradient(90deg, #FF3A05, #FF0080)', colors: ['#FF3A05', '#FF0080'] },
|
|
{ name: 'Azul/Roxo', gradient: 'linear-gradient(90deg, #0066FF, #9333EA)', colors: ['#0066FF', '#9333EA'] },
|
|
{ name: 'Verde/Esmeralda', gradient: 'linear-gradient(90deg, #10B981, #059669)', colors: ['#10B981', '#059669'] },
|
|
{ name: 'Ciano/Azul', gradient: 'linear-gradient(90deg, #06B6D4, #3B82F6)', colors: ['#06B6D4', '#3B82F6'] },
|
|
{ name: 'Rosa/Roxo', gradient: 'linear-gradient(90deg, #EC4899, #A855F7)', colors: ['#EC4899', '#A855F7'] },
|
|
{ name: 'Vermelho/Laranja', gradient: 'linear-gradient(90deg, #EF4444, #F97316)', colors: ['#EF4444', '#F97316'] },
|
|
];
|
|
|
|
export default function ConfiguracoesPage() {
|
|
const [selectedTab, setSelectedTab] = useState(0);
|
|
const [selectedTheme, setSelectedTheme] = useState(0);
|
|
const [customColor1, setCustomColor1] = useState('#FF3A05');
|
|
const [customColor2, setCustomColor2] = useState('#FF0080');
|
|
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
|
|
const [successMessage, setSuccessMessage] = useState('');
|
|
const [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
|
|
useEffect(() => {
|
|
const fetchAgencyData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const token = localStorage.getItem('token');
|
|
const userData = localStorage.getItem('user');
|
|
|
|
if (!token || !userData) {
|
|
console.error('Usuário não autenticado');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Buscar dados da API
|
|
const response = await fetch('/api/agency/profile', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setAgencyData({
|
|
name: data.name || '',
|
|
cnpj: data.cnpj || '',
|
|
email: data.email || '',
|
|
phone: data.phone || '',
|
|
website: data.website || '',
|
|
address: data.address || '',
|
|
city: data.city || '',
|
|
state: data.state || '',
|
|
zip: data.zip || '',
|
|
razaoSocial: data.razao_social || '',
|
|
description: data.description || '',
|
|
industry: data.industry || '',
|
|
});
|
|
} else {
|
|
console.error('Erro ao buscar dados:', response.status);
|
|
// Fallback para localStorage se API falhar
|
|
const savedData = localStorage.getItem('cadastroData');
|
|
if (savedData) {
|
|
const data = JSON.parse(savedData);
|
|
const user = JSON.parse(userData);
|
|
setAgencyData({
|
|
name: data.formData?.companyName || '',
|
|
cnpj: data.formData?.cnpj || '',
|
|
email: data.formData?.email || user.email || '',
|
|
phone: data.contacts?.[0]?.phone || '',
|
|
website: data.formData?.website || '',
|
|
address: `${data.cepData?.logradouro || ''}, ${data.formData?.number || ''}`,
|
|
city: data.cepData?.localidade || '',
|
|
state: data.cepData?.uf || '',
|
|
zip: data.formData?.cep || '',
|
|
razaoSocial: data.cnpjData?.razaoSocial || '',
|
|
description: data.formData?.description || '',
|
|
industry: data.formData?.industry || '',
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao buscar dados da agência:', error);
|
|
setSuccessMessage('Erro ao carregar dados da agência.');
|
|
setShowSuccessDialog(true);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchAgencyData();
|
|
}, []);
|
|
|
|
const applyTheme = (gradient: string) => {
|
|
document.documentElement.style.setProperty('--gradient-primary', gradient);
|
|
document.documentElement.style.setProperty('--gradient', gradient);
|
|
document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right'));
|
|
document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right'));
|
|
};
|
|
|
|
const applyCustomTheme = () => {
|
|
const gradient = `linear-gradient(90deg, ${customColor1}, ${customColor2})`;
|
|
applyTheme(gradient);
|
|
};
|
|
|
|
const handleSaveAgency = async () => {
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
setSuccessMessage('Você precisa estar autenticado.');
|
|
setShowSuccessDialog(true);
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('/api/agency/profile', {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: agencyData.name,
|
|
cnpj: agencyData.cnpj,
|
|
email: agencyData.email,
|
|
phone: agencyData.phone,
|
|
website: agencyData.website,
|
|
address: agencyData.address,
|
|
city: agencyData.city,
|
|
state: agencyData.state,
|
|
zip: agencyData.zip,
|
|
razao_social: agencyData.razaoSocial,
|
|
description: agencyData.description,
|
|
industry: agencyData.industry,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setSuccessMessage('Dados da agência salvos com sucesso!');
|
|
} else {
|
|
setSuccessMessage('Erro ao salvar dados. Tente novamente.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao salvar:', error);
|
|
setSuccessMessage('Erro ao salvar dados. Verifique sua conexão.');
|
|
}
|
|
setShowSuccessDialog(true);
|
|
};
|
|
|
|
const handleSaveTheme = () => {
|
|
// TODO: Integrar com API para salvar no banco
|
|
const selectedGradient = themePresets[selectedTheme].gradient;
|
|
console.log('Salvando tema:', selectedGradient);
|
|
setSuccessMessage('Tema salvo com sucesso!');
|
|
setShowSuccessDialog(true);
|
|
};
|
|
|
|
const handleChangePassword = async () => {
|
|
// Validações
|
|
if (!passwordData.currentPassword) {
|
|
setSuccessMessage('Por favor, informe sua senha atual.');
|
|
setShowSuccessDialog(true);
|
|
return;
|
|
}
|
|
if (!passwordData.newPassword || passwordData.newPassword.length < 8) {
|
|
setSuccessMessage('A nova senha deve ter pelo menos 8 caracteres.');
|
|
setShowSuccessDialog(true);
|
|
return;
|
|
}
|
|
if (passwordData.newPassword !== passwordData.confirmPassword) {
|
|
setSuccessMessage('As senhas não coincidem.');
|
|
setShowSuccessDialog(true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
setSuccessMessage('Você precisa estar autenticado.');
|
|
setShowSuccessDialog(true);
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('/api/auth/change-password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
currentPassword: passwordData.currentPassword,
|
|
newPassword: passwordData.newPassword,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
|
setSuccessMessage('Senha alterada com sucesso!');
|
|
} else {
|
|
const error = await response.text();
|
|
setSuccessMessage(error || 'Erro ao alterar senha. Verifique sua senha atual.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao alterar senha:', error);
|
|
setSuccessMessage('Erro ao alterar senha. Verifique sua conexão.');
|
|
}
|
|
setShowSuccessDialog(true);
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
Configurações
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Gerencie as configurações da sua agência
|
|
</p>
|
|
</div>
|
|
|
|
{/* Loading State */}
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Tabs */}
|
|
<Tab.Group selectedIndex={selectedTab} onChange={setSelectedTab}>
|
|
<Tab.List className="flex space-x-1 rounded-xl bg-gray-100 dark:bg-gray-800 p-1 mb-8">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
return (
|
|
<Tab
|
|
key={tab.name}
|
|
className={({ selected }) =>
|
|
`w-full flex items-center justify-center space-x-2 rounded-lg py-2.5 text-sm font-medium leading-5 transition-all
|
|
${selected
|
|
? 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-white/[0.5] dark:hover:bg-gray-700/[0.5] hover:text-gray-900 dark:hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<Icon className="w-5 h-5" />
|
|
<span className="hidden sm:inline">{tab.name}</span>
|
|
</Tab>
|
|
);
|
|
})}
|
|
</Tab.List>
|
|
|
|
<Tab.Panels>
|
|
{/* Tab 1: Dados da Agência */}
|
|
<Tab.Panel className="rounded-xl bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
|
Informações da Agência
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Nome da Agência
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={agencyData.name}
|
|
onChange={(e) => setAgencyData({ ...agencyData, name: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 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="block 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>
|
|
);
|
|
}
|