feat: versão 1.5 - CRM Beta com leads, funis, campanhas e portal do cliente
This commit is contained in:
Erik Silva
404
front-end-agency/app/cliente/(portal)/perfil/page.tsx
Normal file
404
front-end-agency/app/cliente/(portal)/perfil/page.tsx
Normal file
@@ -0,0 +1,404 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
UserCircleIcon,
|
||||
EnvelopeIcon,
|
||||
PhoneIcon,
|
||||
BuildingOfficeIcon,
|
||||
KeyIcon,
|
||||
CalendarIcon,
|
||||
ChartBarIcon,
|
||||
ClockIcon,
|
||||
ShieldCheckIcon,
|
||||
ArrowPathIcon,
|
||||
CameraIcon,
|
||||
PhotoIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { Button, Input } from '@/components/ui';
|
||||
import { useToast } from '@/components/layout/ToastContext';
|
||||
|
||||
interface CustomerProfile {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
company: string;
|
||||
logo_url?: string;
|
||||
portal_last_login: string | null;
|
||||
created_at: string;
|
||||
total_leads: number;
|
||||
converted_leads: number;
|
||||
}
|
||||
|
||||
export default function PerfilPage() {
|
||||
const toast = useToast();
|
||||
const [profile, setProfile] = useState<CustomerProfile | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isChangingPassword, setIsChangingPassword] = useState(false);
|
||||
const [isUploadingLogo, setIsUploadingLogo] = useState(false);
|
||||
const [passwordForm, setPasswordForm] = useState({
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
});
|
||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||
const [passwordSuccess, setPasswordSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile();
|
||||
}, []);
|
||||
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('/api/portal/profile', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('Erro ao carregar perfil');
|
||||
|
||||
const data = await res.json();
|
||||
setProfile(data.customer);
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar perfil:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// Validar tamanho (2MB)
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
toast.error('Arquivo muito grande', 'O logo deve ter no máximo 2MB.');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('logo', file);
|
||||
|
||||
setIsUploadingLogo(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('/api/portal/logo', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('Erro ao fazer upload do logo');
|
||||
|
||||
const data = await res.json();
|
||||
setProfile(prev => prev ? { ...prev, logo_url: data.logo_url } : null);
|
||||
toast.success('Logo atualizado', 'Seu logo foi atualizado com sucesso.');
|
||||
} catch (error) {
|
||||
console.error('Error uploading logo:', error);
|
||||
toast.error('Erro no upload', 'Não foi possível atualizar seu logo.');
|
||||
} finally {
|
||||
setIsUploadingLogo(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordChange = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setPasswordError(null);
|
||||
setPasswordSuccess(false);
|
||||
|
||||
if (passwordForm.new_password !== passwordForm.confirm_password) {
|
||||
setPasswordError('As senhas não coincidem');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordForm.new_password.length < 6) {
|
||||
setPasswordError('A nova senha deve ter no mínimo 6 caracteres');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsChangingPassword(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const res = await fetch('/api/portal/change-password', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
current_password: passwordForm.current_password,
|
||||
new_password: passwordForm.new_password,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || 'Erro ao alterar senha');
|
||||
|
||||
setPasswordSuccess(true);
|
||||
setPasswordForm({
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
});
|
||||
} catch (error: any) {
|
||||
setPasswordError(error.message);
|
||||
} finally {
|
||||
setIsChangingPassword(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-[60vh]">
|
||||
<div className="text-center">
|
||||
<ArrowPathIcon className="w-10 h-10 animate-spin mx-auto text-brand-500" />
|
||||
<p className="mt-4 text-gray-500 dark:text-zinc-400">Carregando seu perfil...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!profile) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-[60vh] text-center px-4">
|
||||
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-4">
|
||||
<UserCircleIcon className="w-10 h-10 text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Ops! Algo deu errado</h2>
|
||||
<p className="mt-2 text-gray-500 dark:text-zinc-400 max-w-xs">
|
||||
Não conseguimos carregar suas informações. Por favor, tente novamente mais tarde.
|
||||
</p>
|
||||
<Button onClick={fetchProfile} className="mt-6">
|
||||
Tentar Novamente
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 lg:p-8 max-w-5xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Meu Perfil</h1>
|
||||
<p className="text-gray-500 dark:text-zinc-400 mt-1">
|
||||
Gerencie suas informações pessoais e segurança da conta.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Coluna da Esquerda: Info do Usuário */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Card de Informações Básicas */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-gray-200 dark:border-zinc-800 overflow-hidden shadow-sm">
|
||||
<div className="h-32 bg-gradient-to-r from-brand-500/20 to-brand-600/20 dark:from-brand-500/10 dark:to-brand-600/10 relative">
|
||||
<div className="absolute -bottom-12 left-8">
|
||||
<div className="relative group">
|
||||
<div className="w-24 h-24 rounded-2xl bg-white dark:bg-zinc-800 border-4 border-white dark:border-zinc-900 shadow-xl flex items-center justify-center overflow-hidden">
|
||||
{profile.logo_url ? (
|
||||
<img src={profile.logo_url} alt={profile.name} className="w-full h-full object-contain p-2" />
|
||||
) : (
|
||||
<UserCircleIcon className="w-16 h-16 text-gray-300 dark:text-zinc-600" />
|
||||
)}
|
||||
|
||||
{isUploadingLogo && (
|
||||
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
|
||||
<ArrowPathIcon className="w-8 h-8 text-white animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label className="absolute -bottom-2 -right-2 w-8 h-8 bg-brand-500 hover:bg-brand-600 text-white rounded-full flex items-center justify-center cursor-pointer shadow-lg transition-all transform group-hover:scale-110">
|
||||
<CameraIcon className="w-4 h-4" />
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept="image/png,image/jpeg,image/jpg,image/svg+xml"
|
||||
onChange={handleLogoUpload}
|
||||
disabled={isUploadingLogo}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-16 pb-8 px-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{profile.name}</h2>
|
||||
<p className="text-brand-600 dark:text-brand-400 font-medium">{profile.company || 'Cliente Aggios'}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-sm font-medium self-start">
|
||||
<ShieldCheckIcon className="w-4 h-4" />
|
||||
Conta Ativa
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 text-gray-600 dark:text-zinc-400">
|
||||
<EnvelopeIcon className="w-5 h-5 text-gray-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wider">E-mail</p>
|
||||
<p className="text-gray-900 dark:text-white">{profile.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-gray-600 dark:text-zinc-400">
|
||||
<PhoneIcon className="w-5 h-5 text-gray-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wider">Telefone</p>
|
||||
<p className="text-gray-900 dark:text-white">{profile.phone || 'Não informado'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 text-gray-600 dark:text-zinc-400">
|
||||
<CalendarIcon className="w-5 h-5 text-gray-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wider">Membro desde</p>
|
||||
<p className="text-gray-900 dark:text-white">
|
||||
{new Date(profile.created_at).toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-gray-600 dark:text-zinc-400">
|
||||
<ClockIcon className="w-5 h-5 text-gray-400" />
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wider">Último Acesso</p>
|
||||
<p className="text-gray-900 dark:text-white">
|
||||
{profile.portal_last_login
|
||||
? new Date(profile.portal_last_login).toLocaleString('pt-BR')
|
||||
: 'Primeiro acesso'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card de Estatísticas Rápidas */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-gray-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-brand-100 dark:bg-brand-900/20 rounded-xl flex items-center justify-center">
|
||||
<ChartBarIcon className="w-6 h-6 text-brand-600 dark:text-brand-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 dark:text-zinc-400">Total de Leads</p>
|
||||
<p className="text-2xl font-bold text-gray-900 dark:text-white">{profile.total_leads}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-gray-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-xl flex items-center justify-center">
|
||||
<ShieldCheckIcon className="w-6 h-6 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 dark:text-zinc-400">Leads Convertidos</p>
|
||||
<p className="text-2xl font-bold text-gray-900 dark:text-white">{profile.converted_leads}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coluna da Direita: Segurança */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl border border-gray-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-amber-100 dark:bg-amber-900/20 rounded-lg flex items-center justify-center">
|
||||
<KeyIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">Segurança</h3>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handlePasswordChange} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1.5">
|
||||
Senha Atual
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={passwordForm.current_password}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, current_password: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-gray-100 dark:bg-zinc-800 my-2" />
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1.5">
|
||||
Nova Senha
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Mínimo 6 caracteres"
|
||||
value={passwordForm.new_password}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, new_password: e.target.value })}
|
||||
required
|
||||
minLength={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1.5">
|
||||
Confirmar Nova Senha
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Repita a nova senha"
|
||||
value={passwordForm.confirm_password}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, confirm_password: e.target.value })}
|
||||
required
|
||||
minLength={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{passwordError && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 rounded-xl text-red-600 dark:text-red-400 text-sm">
|
||||
{passwordError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{passwordSuccess && (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30 rounded-xl text-green-600 dark:text-green-400 text-sm">
|
||||
Senha alterada com sucesso!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
isLoading={isChangingPassword}
|
||||
>
|
||||
Atualizar Senha
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="bg-brand-50 dark:bg-brand-900/10 p-6 rounded-2xl border border-brand-100 dark:border-brand-900/20">
|
||||
<h4 className="text-brand-900 dark:text-brand-300 font-bold mb-2">Precisa de ajuda?</h4>
|
||||
<p className="text-brand-700 dark:text-brand-400 text-sm mb-4">
|
||||
Se você tiver problemas com sua conta ou precisar alterar dados cadastrais, entre em contato com o suporte da agência.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:suporte@aggios.app"
|
||||
className="text-brand-600 dark:text-brand-400 text-sm font-bold hover:underline"
|
||||
>
|
||||
suporte@aggios.app
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user