usite-sas-bic/prosapp-migration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: edicion de usuarios y profesionales desde el admin

Browse Source 
Backend: agrega PATCH /users/:id y PATCH /professionals/:id (protegidos).
Admin: pagina de usuario con edicion de nombre/telefono/ciudad/genero;
pagina de profesional con dos secciones editables independientes
(datos personales y perfil profesional).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-27 08:22:40 -05:00
co-authored by Claude Sonnet 4.6
parent e7afbf6d7b
commit abc19505ae
5 changed files with 338 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/app/professionals/[id]/page.tsx
+216 -151
View File
@@ -7,89 +7,68 @@ import { api } from '@/lib/api';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { toast } from 'sonner';
import { ArrowLeft } from 'lucide-react';
interface User {
name: string;
email?: string;
phone?: string;
city?: string;
picture?: string;
}
interface Schedule {
id: string;
day_of_week: number;
enabled: boolean;
range1_hour1?: string;
range1_hour2?: string;
range2_hour1?: string;
range2_hour2?: string;
}
interface Specialization {
id: string;
name: string;
picture?: string;
}
interface PaymentMethod {
id: string;
nequi: boolean;
datafono: boolean;
transferencia: boolean;
}
import { ArrowLeft, Pencil, X, Check } from 'lucide-react';
interface User { id: string; name: string; email?: string; phone?: string; city?: string; picture?: string; }
interface Schedule { id: string; day_of_week: number; enabled: boolean; range1_hour1?: string; range1_hour2?: string; }
interface Specialization { id: string; name: string; }
interface PaymentMethod { id: string; nequi: boolean; datafono: boolean; transferencia: boolean; }
interface Professional {
id: string;
user_id: string;
is_active: boolean;
profession?: string;
identification?: string;
address?: string;
rate?: number;
average_score?: number;
users?: User;
schedules?: Schedule[];
specializations?: Specialization[];
payment_methods?: PaymentMethod[];
}
interface Service {
id: string;
professional_id: string;
user_id: string;
description?: string;
rate?: number;
status: string;
day: string;
created_at: string;
id: string; user_id: string; is_active: boolean;
profession?: string; identification?: string; address?: string;
rate?: number; average_score?: number;
users?: User; schedules?: Schedule[];
specializations?: Specialization[]; payment_methods?: PaymentMethod[];
}
interface Service { id: string; description?: string; rate?: number; status: string; day: string; }
const DAY_NAMES = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
const PAYMENT_LABELS: Record<string, string> = { nequi: 'Nequi', datafono: 'Datáfono', transferencia: 'Transferencia' };
interface ProForm { profession: string; identification: string; address: string; rate: string; }
interface UserForm { name: string; email: string; phone: string; city: string; }
export default function ProfessionalDetailPage() {
const params = useParams<{ id: string }>();
const id = params.id;
const { id } = useParams<{ id: string }>();
const [professional, setProfessional] = useState<Professional | null>(null);
const [services, setServices] = useState<Service[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// Edit state
const [editingPro, setEditingPro] = useState(false);
const [editingUser, setEditingUser] = useState(false);
const [savingPro, setSavingPro] = useState(false);
const [savingUser, setSavingUser] = useState(false);
const [proForm, setProForm] = useState<ProForm>({ profession: '', identification: '', address: '', rate: '' });
const [userForm, setUserForm] = useState<UserForm>({ name: '', email: '', phone: '', city: '' });
const load = useCallback(() => {
if (!id) return;
setLoading(true);
setError(null);
Promise.all([
api.get<Professional>(`/professionals/${id}`),
api.get<{ data: Service[]; meta: any }>('/services?page=1&limit=50'),
api.get<{ data: Service[] }>('/services?page=1&limit=50'),
])
.then(([prof, svcRes]) => {
setProfessional(prof);
setServices(svcRes.data.filter((s) => s.professional_id === id));
setProForm({
profession: prof.profession || '',
identification: prof.identification || '',
address: prof.address || '',
rate: prof.rate != null ? String(prof.rate) : '',
});
setUserForm({
name: prof.users?.name || '',
email: prof.users?.email || '',
phone: prof.users?.phone || '',
city: prof.users?.city || '',
});
setServices(svcRes.data.filter((s: any) => s.professional_id === id));
})
.catch(() => setError('Error al cargar el profesional'))
.finally(() => setLoading(false));
@@ -97,114 +76,195 @@ export default function ProfessionalDetailPage() {
useEffect(() => { load(); }, [load]);
const approve = async () => {
if (!id) return;
const savePro = async () => {
setSavingPro(true);
try {
await api.post(`/professionals/${id}/approve`);
toast.success('Profesional aprobado');
await api.patch(`/professionals/${id}`, {
profession: proForm.profession || undefined,
identification: proForm.identification || undefined,
address: proForm.address || undefined,
rate: proForm.rate ? Number(proForm.rate) : undefined,
});
toast.success('Perfil profesional actualizado');
setEditingPro(false);
load();
} catch {
toast.error('Error al aprobar el profesional');
} catch (e: any) {
toast.error(e?.message || 'Error al guardar');
} finally {
setSavingPro(false);
}
};
const saveUser = async () => {
if (!professional?.user_id) return;
setSavingUser(true);
try {
await api.patch(`/users/${professional.user_id}`, {
name: userForm.name || undefined,
phone: userForm.phone || undefined,
city: userForm.city || undefined,
});
toast.success('Datos del usuario actualizados');
setEditingUser(false);
load();
} catch (e: any) {
toast.error(e?.message || 'Error al guardar');
} finally {
setSavingUser(false);
}
};
const approve = async () => {
try { await api.post(`/professionals/${id}/approve`); toast.success('Profesional aprobado'); load(); }
catch { toast.error('Error al aprobar'); }
};
const deny = async () => {
if (!id) return;
try {
await api.post(`/professionals/${id}/deny`);
toast.success('Solicitud rechazada');
load();
} catch {
toast.error('Error al rechazar la solicitud');
}
try { await api.post(`/professionals/${id}/deny`); toast.success('Solicitud rechazada'); load(); }
catch { toast.error('Error al rechazar'); }
};
if (loading) {
return (
<div className="space-y-4">
<div className="flex items-center gap-4">
<Link href="/professionals">
<Button variant="ghost" size="icon"><ArrowLeft className="h-4 w-4" /></Button>
</Link>
<h1 className="text-2xl font-bold">Cargando...</h1>
</div>
</div>
);
}
if (error || !professional) {
return (
<div className="space-y-4">
<div className="flex items-center gap-4">
<Link href="/professionals">
<Button variant="ghost" size="icon"><ArrowLeft className="h-4 w-4" /></Button>
</Link>
<h1 className="text-2xl font-bold">Profesional</h1>
</div>
<div className="flex flex-col items-center justify-center py-8 text-destructive">
<p>{error || 'No se encontró el profesional'}</p>
<Button variant="outline" size="sm" onClick={load} className="mt-2">
Reintentar
</Button>
</div>
</div>
);
}
if (loading) return <div className="flex items-center justify-center py-16 text-muted-foreground">Cargando...</div>;
if (error || !professional) return (
<div className="flex flex-col items-center justify-center py-16 text-destructive gap-2">
<p>{error || 'No se encontró el profesional'}</p>
<Button variant="outline" size="sm" onClick={load}>Reintentar</Button>
</div>
);
const user = professional.users;
const paymentLabel: Record<string, string> = {
nequi: 'Nequi',
datafono: 'Datáfono',
transferencia: 'Transferencia',
};
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<Link href="/professionals">
<Button variant="ghost" size="icon"><ArrowLeft className="h-4 w-4" /></Button>
</Link>
<h1 className="text-2xl font-bold">{user?.name || 'Profesional'}</h1>
<Badge variant={professional.is_active ? 'default' : 'secondary'}>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Link href="/professionals"><Button variant="ghost" size="icon"><ArrowLeft className="h-5 w-5" /></Button></Link>
<div>
<h1 className="text-2xl font-bold">{user?.name || 'Profesional'}</h1>
<p className="text-sm text-muted-foreground">ID profesional: {id}</p>
</div>
</div>
<Badge variant={professional.is_active ? 'default' : 'secondary'} className="text-sm px-3 py-1">
{professional.is_active ? 'Activo' : 'Pendiente'}
</Badge>
</div>
<div className="grid gap-6 md:grid-cols-2">
<Card>
<CardHeader><CardTitle>Información general</CardTitle></CardHeader>
<CardContent className="space-y-2 text-sm">
<div><span className="font-medium">Email:</span> {user?.email || '—'}</div>
<div><span className="font-medium">Teléfono:</span> {user?.phone || '—'}</div>
<div><span className="font-medium">Ciudad:</span> {user?.city || '—'}</div>
<div><span className="font-medium">Profesión:</span> {professional.profession || '—'}</div>
<div><span className="font-medium">Identificación:</span> {professional.identification || '—'}</div>
<div><span className="font-medium">Dirección:</span> {professional.address || '—'}</div>
</CardContent>
</Card>
{/* Datos del usuario */}
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>Datos personales</CardTitle>
{!editingUser ? (
<Button variant="outline" size="sm" onClick={() => setEditingUser(true)}>
<Pencil className="mr-1 h-4 w-4" /> Editar
</Button>
) : (
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => { setEditingUser(false); }} disabled={savingUser}>
<X className="mr-1 h-4 w-4" /> Cancelar
</Button>
<Button size="sm" onClick={saveUser} disabled={savingUser}>
<Check className="mr-1 h-4 w-4" /> {savingUser ? 'Guardando...' : 'Guardar'}
</Button>
</div>
)}
</div>
</CardHeader>
<CardContent className="grid grid-cols-2 gap-4 text-sm">
<div className="space-y-1">
<span className="text-muted-foreground">Nombre</span>
{editingUser
? <Input value={userForm.name} onChange={(e) => setUserForm({ ...userForm, name: e.target.value })} />
: <p className="font-medium">{user?.name || '—'}</p>}
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Email</span>
<p className="font-medium">{user?.email || '—'}</p>
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Teléfono</span>
{editingUser
? <Input value={userForm.phone} onChange={(e) => setUserForm({ ...userForm, phone: e.target.value })} placeholder="+57300..." />
: <p className="font-medium">{user?.phone || '—'}</p>}
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Ciudad</span>
{editingUser
? <Input value={userForm.city} onChange={(e) => setUserForm({ ...userForm, city: e.target.value })} />
: <p className="font-medium">{user?.city || '—'}</p>}
</div>
</CardContent>
</Card>
<Card>
<CardHeader><CardTitle>Tarifa y puntuación</CardTitle></CardHeader>
<CardContent className="space-y-2 text-sm">
<div><span className="font-medium">Tarifa:</span> ${professional.rate ?? '—'}</div>
<div><span className="font-medium">Puntaje promedio:</span> {professional.average_score != null ? `${professional.average_score.toFixed(1)} / 5` : '—'}</div>
</CardContent>
</Card>
</div>
{/* Perfil profesional */}
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>Perfil profesional</CardTitle>
{!editingPro ? (
<Button variant="outline" size="sm" onClick={() => setEditingPro(true)}>
<Pencil className="mr-1 h-4 w-4" /> Editar
</Button>
) : (
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => setEditingPro(false)} disabled={savingPro}>
<X className="mr-1 h-4 w-4" /> Cancelar
</Button>
<Button size="sm" onClick={savePro} disabled={savingPro}>
<Check className="mr-1 h-4 w-4" /> {savingPro ? 'Guardando...' : 'Guardar'}
</Button>
</div>
)}
</div>
</CardHeader>
<CardContent className="grid grid-cols-2 gap-4 text-sm">
<div className="space-y-1">
<span className="text-muted-foreground">Profesión</span>
{editingPro
? <Input value={proForm.profession} onChange={(e) => setProForm({ ...proForm, profession: e.target.value })} />
: <p className="font-medium">{professional.profession || '—'}</p>}
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Identificación</span>
{editingPro
? <Input value={proForm.identification} onChange={(e) => setProForm({ ...proForm, identification: e.target.value })} />
: <p className="font-medium">{professional.identification || '—'}</p>}
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Dirección</span>
{editingPro
? <Input value={proForm.address} onChange={(e) => setProForm({ ...proForm, address: e.target.value })} />
: <p className="font-medium">{professional.address || '—'}</p>}
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Tarifa ($/hora)</span>
{editingPro
? <Input type="number" value={proForm.rate} onChange={(e) => setProForm({ ...proForm, rate: e.target.value })} placeholder="0" />
: <p className="font-medium">{professional.rate != null ? `$${professional.rate}` : '—'}</p>}
</div>
<div className="space-y-1">
<span className="text-muted-foreground">Puntuación promedio</span>
<p className="font-medium">{professional.average_score != null ? `${professional.average_score.toFixed(1)} / 5` : '—'}</p>
</div>
</CardContent>
</Card>
{/* Métodos de pago */}
{professional.payment_methods && professional.payment_methods.length > 0 && (
<Card>
<CardHeader><CardTitle>Métodos de pago</CardTitle></CardHeader>
<CardHeader><CardTitle>Métodos de pago aceptados</CardTitle></CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{professional.payment_methods && ['nequi', 'datafono', 'transferencia'].filter((k) => (professional.payment_methods![0] as any)[k]).map((k) => (
<Badge key={k} variant="outline">{paymentLabel[k]}</Badge>
))}
{['nequi', 'datafono', 'transferencia']
.filter((k) => (professional.payment_methods![0] as any)[k])
.map((k) => <Badge key={k} variant="outline">{PAYMENT_LABELS[k]}</Badge>)}
</div>
</CardContent>
</Card>
)}
{/* Horarios */}
{professional.schedules && professional.schedules.length > 0 && (
<Card>
<CardHeader><CardTitle>Horarios</CardTitle></CardHeader>
@@ -213,14 +273,18 @@ export default function ProfessionalDetailPage() {
<TableHeader>
<TableRow>
<TableHead>Día</TableHead>
<TableHead>Horas</TableHead>
<TableHead>Horario</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{professional.schedules.map((s) => (
<TableRow key={s.id}>
<TableCell>{DAY_NAMES[s.day_of_week] || s.day_of_week}</TableCell>
<TableCell>{s.enabled ? [s.range1_hour1, s.range1_hour2].filter(Boolean).join(' — ') || '—' : 'Descanso'}</TableCell>
<TableCell>{DAY_NAMES[s.day_of_week] ?? s.day_of_week}</TableCell>
<TableCell>
{s.enabled
? [s.range1_hour1, s.range1_hour2].filter(Boolean).join(' – ') || '—'
: <span className="text-muted-foreground">Descanso</span>}
</TableCell>
</TableRow>
))}
</TableBody>
@@ -229,19 +293,19 @@ export default function ProfessionalDetailPage() {
</Card>
)}
{/* Especializaciones */}
{professional.specializations && professional.specializations.length > 0 && (
<Card>
<CardHeader><CardTitle>Especializaciones</CardTitle></CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{professional.specializations.map((s) => (
<Badge key={s.id} variant="secondary">{s.name}</Badge>
))}
{professional.specializations.map((s) => <Badge key={s.id} variant="secondary">{s.name}</Badge>)}
</div>
</CardContent>
</Card>
)}
{/* Servicios */}
{services.length > 0 && (
<Card>
<CardHeader><CardTitle>Servicios recientes</CardTitle></CardHeader>
@@ -258,9 +322,9 @@ export default function ProfessionalDetailPage() {
<TableBody>
{services.map((s) => (
<TableRow key={s.id}>
<TableCell className="font-medium">{new Date(s.day).toLocaleDateString()}</TableCell>
<TableCell>{new Date(s.day).toLocaleDateString()}</TableCell>
<TableCell>{s.description || '—'}</TableCell>
<TableCell>${s.rate ?? '—'}</TableCell>
<TableCell>{s.rate != null ? `$${s.rate}` : '—'}</TableCell>
<TableCell>{s.status}</TableCell>
</TableRow>
))}
@@ -270,10 +334,11 @@ export default function ProfessionalDetailPage() {
</Card>
)}
{/* Aprobar / Rechazar */}
{!professional.is_active && (
<div className="flex gap-4">
<Button onClick={approve}>Aprobar</Button>
<Button variant="destructive" onClick={deny}>Rechazar</Button>
<div className="flex gap-3 pt-2">
<Button onClick={approve}>Aprobar profesional</Button>
<Button variant="destructive" onClick={deny}>Rechazar solicitud</Button>
</div>
)}
</div>
admin/src/app/users/[id]/page.tsx
+102 -46
View File
@@ -20,7 +20,12 @@ interface UserDetail {
professionals?: Professional | null; reputations?: Reputation | null;
}
const PRO_STATE_LABELS = ['Usuario', 'Solicitó', 'Profesional', 'Rechazado'];
const PRO_STATE_LABELS = ['Usuario', 'Solicitó ser Pro', 'Profesional', 'Rechazado'];
const PRO_STATE_VARIANTS: Record<number, 'default' | 'secondary' | 'destructive' | 'outline'> = {
0: 'secondary', 1: 'outline', 2: 'default', 3: 'destructive',
};
interface Form { name: string; city: string; phone: string; gender: string; }
export default function UserDetailPage() {
const { id } = useParams<{ id: string }>();
@@ -29,14 +34,17 @@ export default function UserDetailPage() {
const [error, setError] = useState<string | null>(null);
const [editing, setEditing] = useState(false);
const [saving, setSaving] = useState(false);
const [form, setForm] = useState({ name: '', city: '', phone: '', email: '' });
const [form, setForm] = useState<Form>({ name: '', city: '', phone: '', gender: '' });
const load = useCallback(() => {
if (!id) return;
setLoading(true);
setError(null);
api.get<UserDetail>(`/users/${id}`)
.then((u) => { setUser(u); setForm({ name: u.name, city: u.city || '', phone: u.phone || '', email: u.email || '' }); })
.then((u) => {
setUser(u);
setForm({ name: u.name, city: u.city || '', phone: u.phone || '', gender: u.gender || '' });
})
.catch(() => setError('Error al cargar el usuario'))
.finally(() => setLoading(false));
}, [id]);
@@ -50,6 +58,7 @@ export default function UserDetailPage() {
name: form.name || undefined,
city: form.city || undefined,
phone: form.phone || undefined,
gender: form.gender || undefined,
});
setUser(updated);
setEditing(false);
@@ -63,18 +72,25 @@ export default function UserDetailPage() {
if (loading) return <div className="flex items-center justify-center py-16 text-muted-foreground">Cargando...</div>;
if (error) return (
<div className="flex flex-col items-center justify-center py-16 text-destructive">
<p>{error}</p><Button variant="outline" size="sm" onClick={load} className="mt-2">Reintentar</Button>
<div className="flex flex-col items-center justify-center py-16 text-destructive gap-2">
<p>{error}</p>
<Button variant="outline" size="sm" onClick={load}>Reintentar</Button>
</div>
);
if (!user) return null;
const proState = user.pro_state ?? 0;
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Link href="/users"><Button variant="ghost" size="icon"><ArrowLeft className="h-5 w-5" /></Button></Link>
<h1 className="text-2xl font-bold">{user.name}</h1>
<div>
<h1 className="text-2xl font-bold">{user.name}</h1>
<p className="text-sm text-muted-foreground">ID: {user.id}</p>
</div>
</div>
{!editing ? (
<Button variant="outline" size="sm" onClick={() => setEditing(true)}>
@@ -82,7 +98,7 @@ export default function UserDetailPage() {
</Button>
) : (
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => setEditing(false)} disabled={saving}>
<Button variant="outline" size="sm" onClick={() => { setEditing(false); setForm({ name: user.name, city: user.city || '', phone: user.phone || '', gender: user.gender || '' }); }} disabled={saving}>
<X className="mr-1 h-4 w-4" /> Cancelar
</Button>
<Button size="sm" onClick={save} disabled={saving}>
@@ -93,81 +109,121 @@ export default function UserDetailPage() {
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Info general */}
<Card>
<CardHeader><CardTitle>Información general</CardTitle></CardHeader>
<CardContent className="space-y-4">
<div>
<span className="text-sm text-muted-foreground">Nombre</span>
<CardContent className="space-y-4 text-sm">
<div className="space-y-1">
<span className="text-muted-foreground">Nombre</span>
{editing
? <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="mt-1" />
? <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
: <p className="font-medium">{user.name}</p>}
</div>
<div>
<span className="text-sm text-muted-foreground">Email</span>
<p className="flex items-center gap-2">
<div className="space-y-1">
<span className="text-muted-foreground">Email</span>
<p className="flex items-center gap-2 font-medium">
{user.email || '—'}
{user.is_email_verified && <Badge className="bg-green-600 text-white">Verificado</Badge>}
{user.is_email_verified && <Badge className="bg-green-600 text-white text-xs">Verificado</Badge>}
</p>
</div>
<div>
<span className="text-sm text-muted-foreground">Teléfono</span>
<div className="space-y-1">
<span className="text-muted-foreground">Teléfono</span>
{editing
? <Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} className="mt-1" placeholder="+57300..." />
: <p className="flex items-center gap-2">
? <Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="+57300..." />
: <p className="flex items-center gap-2 font-medium">
{user.phone || '—'}
{user.is_phone_verified && <Badge className="bg-green-600 text-white">Verificado</Badge>}
{user.is_phone_verified && <Badge className="bg-green-600 text-white text-xs">Verificado</Badge>}
</p>}
</div>
<div>
<span className="text-sm text-muted-foreground">Ciudad</span>
<div className="space-y-1">
<span className="text-muted-foreground">Ciudad</span>
{editing
? <Input value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} className="mt-1" />
: <p>{user.city || '—'}</p>}
? <Input value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} />
: <p className="font-medium">{user.city || '—'}</p>}
</div>
<div>
<span className="text-sm text-muted-foreground">Género</span>
<p>{user.gender || '—'}</p>
<div className="space-y-1">
<span className="text-muted-foreground">Género</span>
{editing
? (
<select
value={form.gender}
onChange={(e) => setForm({ ...form, gender: e.target.value })}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
>
<option value="">Sin especificar</option>
<option value="male">Masculino</option>
<option value="female">Femenino</option>
<option value="other">Otro</option>
</select>
)
: <p className="font-medium">{user.gender || '—'}</p>}
</div>
<div>
<span className="text-sm text-muted-foreground">Registro</span>
<p>{new Date(user.created_at).toLocaleDateString()}</p>
<div className="space-y-1">
<span className="text-muted-foreground">Registro</span>
<p className="font-medium">{new Date(user.created_at).toLocaleDateString('es-CO', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
</CardContent>
</Card>
{/* Estado */}
<Card>
<CardHeader><CardTitle>Estado</CardTitle></CardHeader>
<CardContent className="space-y-3">
<CardContent className="space-y-4">
<div>
<span className="text-sm text-muted-foreground">Estado profesional</span>
<p className="mt-1"><Badge>{PRO_STATE_LABELS[user.pro_state ?? 0]}</Badge></p>
<div className="mt-2">
<Badge variant={PRO_STATE_VARIANTS[proState]}>{PRO_STATE_LABELS[proState] ?? `Estado ${proState}`}</Badge>
</div>
</div>
{user.reputations && (
<div className="grid grid-cols-2 gap-4 pt-2">
<div><span className="text-xs text-muted-foreground">Puntuación prom.</span><p className="text-2xl font-bold">{user.reputations.average.toFixed(1)}</p></div>
<div><span className="text-xs text-muted-foreground">Total reseñas</span><p className="text-2xl font-bold">{user.reputations.total}</p></div>
<div><span className="text-xs text-muted-foreground">Prom. como pro</span><p className="text-2xl font-bold">{user.reputations.average_pro.toFixed(1)}</p></div>
<div><span className="text-xs text-muted-foreground">Reseñas como pro</span><p className="text-2xl font-bold">{user.reputations.total_pro}</p></div>
<div className="grid grid-cols-2 gap-4 pt-2 border-t">
<div>
<span className="text-xs text-muted-foreground">Puntuación prom.</span>
<p className="text-2xl font-bold">{user.reputations.average.toFixed(1)}</p>
</div>
<div>
<span className="text-xs text-muted-foreground">Total reseñas</span>
<p className="text-2xl font-bold">{user.reputations.total}</p>
</div>
<div>
<span className="text-xs text-muted-foreground">Prom. como pro</span>
<p className="text-2xl font-bold">{user.reputations.average_pro.toFixed(1)}</p>
</div>
<div>
<span className="text-xs text-muted-foreground">Reseñas como pro</span>
<p className="text-2xl font-bold">{user.reputations.total_pro}</p>
</div>
</div>
)}
</CardContent>
</Card>
</div>
{/* Perfil profesional (solo lectura, con link) */}
{user.professionals && (
<Card>
<CardHeader><CardTitle>Perfil profesional</CardTitle></CardHeader>
<CardContent className="space-y-2 text-sm">
<div className="grid grid-cols-2 gap-4">
<div><span className="text-muted-foreground">Profesión</span><p>{user.professionals.profession || '—'}</p></div>
<div><span className="text-muted-foreground">Tarifa</span><p>{user.professionals.rate != null ? `$${user.professionals.rate}` : '—'}</p></div>
<div><span className="text-muted-foreground">Identificación</span><p>{user.professionals.identification || '—'}</p></div>
</div>
<div className="pt-2">
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>Perfil profesional</CardTitle>
<Link href={`/professionals/${user.professionals.id}`}>
<Button variant="outline" size="sm">Ver perfil profesional completo</Button>
<Button variant="outline" size="sm">Ver y editar perfil completo →</Button>
</Link>
</div>
</CardHeader>
<CardContent className="grid grid-cols-3 gap-4 text-sm">
<div>
<span className="text-muted-foreground">Profesión</span>
<p className="font-medium">{user.professionals.profession || '—'}</p>
</div>
<div>
<span className="text-muted-foreground">Tarifa</span>
<p className="font-medium">{user.professionals.rate != null ? `$${user.professionals.rate}` : '—'}</p>
</div>
<div>
<span className="text-muted-foreground">Identificación</span>
<p className="font-medium">{user.professionals.identification || '—'}</p>
</div>
</CardContent>
</Card>
)}