VPS 4 Builder
86 lines
4.2 KiB
TypeScript
86 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import DashboardLayout from '@/components/layout/DashboardLayout';
|
|
import { api } from '@/lib/api';
|
|
import { useAuth } from '@/lib/auth';
|
|
|
|
export default function ProfilePage() {
|
|
const { user } = useAuth();
|
|
const [form, setForm] = useState({
|
|
name: user?.name || '',
|
|
phone: user?.phone || '',
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [msg, setMsg] = useState('');
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
setMsg('');
|
|
try {
|
|
if (user) {
|
|
await api.updateUser(user.id, form);
|
|
setMsg('Perfil atualizado com sucesso!');
|
|
}
|
|
} catch (err: any) {
|
|
setMsg(err.message || 'Erro ao salvar');
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="max-w-2xl space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">👤 <span className="gradient-text">Meu Perfil</span></h1>
|
|
<p className="text-dark-400 mt-1">Gerencie suas informações pessoais.</p>
|
|
</div>
|
|
|
|
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
|
|
className="glass rounded-2xl p-8">
|
|
{/* Avatar */}
|
|
<div className="flex items-center gap-5 mb-8">
|
|
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center text-3xl font-bold">
|
|
{user?.name?.charAt(0) || '?'}
|
|
</div>
|
|
<div>
|
|
<p className="text-xl font-bold">{user?.name}</p>
|
|
<p className="text-dark-400">{user?.email}</p>
|
|
<span className="text-xs px-2 py-1 rounded-lg bg-brand-500/15 text-brand-400 mt-1 inline-block">{user?.role}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{msg && (
|
|
<div className={`mb-6 px-4 py-3 rounded-xl text-sm ${msg.includes('sucesso') ? 'bg-green-500/10 text-green-400 border border-green-500/30' : 'bg-red-500/10 text-red-400 border border-red-500/30'
|
|
}`}>{msg}</div>
|
|
)}
|
|
|
|
<div className="space-y-5">
|
|
<div>
|
|
<label className="block text-sm font-medium text-dark-300 mb-2">Nome</label>
|
|
<input type="text" value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))}
|
|
className="w-full px-4 py-3 bg-dark-900 border border-dark-700 rounded-xl text-white focus:border-brand-500 outline-none" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-dark-300 mb-2">E-mail</label>
|
|
<input type="email" value={user?.email || ''} disabled
|
|
className="w-full px-4 py-3 bg-dark-800 border border-dark-700 rounded-xl text-dark-400 cursor-not-allowed" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-dark-300 mb-2">Telefone</label>
|
|
<input type="tel" value={form.phone} onChange={e => setForm(p => ({ ...p, phone: e.target.value }))}
|
|
className="w-full px-4 py-3 bg-dark-900 border border-dark-700 rounded-xl text-white focus:border-brand-500 outline-none"
|
|
placeholder="(67) 99999-0000" />
|
|
</div>
|
|
<button onClick={handleSave} disabled={saving}
|
|
className="px-8 py-3 bg-brand-600 hover:bg-brand-500 rounded-xl font-semibold transition-all shadow-lg shadow-brand-600/25 disabled:opacity-50">
|
|
{saving ? 'Salvando...' : 'Salvar Alterações'}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|