feat: edicion de usuarios y profesionales desde el admin

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>

admin/src/app/professionals/[id]/page.tsx

@@ -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>