feat(F-048): completed feature

project/apps/admin/src/app/(dashboard)/customers/page.tsx

@@ -1,7 +1,9 @@
 'use client';
 import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
 import type { Customer } from '@/types';
 import { customersApi } from '@/lib/api-client';
+import { RowActions } from '@/components/ui/RowActions';
 
 const PAGE_SIZE = 20;
 
@@ -84,69 +86,9 @@ function CreateForm({ onClose, onCreated }: { onClose: () => void; onCreated: ()
   );
 }
 
-// ── Formulario editar cliente ────────────────────────────────────────────────
-function EditForm({ customer, onClose, onSaved }: { customer: Customer; onClose: () => void; onSaved: () => void }) {
-  const [displayName, setDisplayName] = useState('');
-  const [phone, setPhone] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    setDisplayName(customer.displayName || '');
-    setPhone(customer.phone || '');
-  }, [customer]);
-
-  const handle = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setSaving(true); setError('');
-    try {
-      await customersApi.update(customer.id, {
-        displayName: displayName || undefined,
-        phone: phone || undefined,
-      });
-      onSaved();
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Error al guardar');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <form onSubmit={handle} className="space-y-4">
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-        <input type="email" value={customer.email} disabled
-          className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50 text-gray-400" />
-      </div>
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">Nombre / Razón social</label>
-        <input type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)}
-          className="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] outline-none" />
-      </div>
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">Teléfono</label>
-        <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="+34 600 000 000"
-          className="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] outline-none" />
-      </div>
-      {error && <p className="text-sm text-red-600 bg-red-50 rounded-xl px-4 py-2">{error}</p>}
-      <div className="flex gap-3 pt-2">
-        <button type="submit" disabled={saving}
-          className="flex-1 px-5 py-2.5 bg-[#2D6A4F] hover:bg-[#1B4332] disabled:opacity-50 text-white text-sm font-semibold rounded-xl transition-colors">
-          {saving ? 'Guardando...' : 'Guardar cambios'}
-        </button>
-        <button type="button" onClick={onClose}
-          className="px-5 py-2.5 border border-gray-300 text-gray-600 text-sm rounded-xl hover:bg-gray-50 transition-colors">
-          Cancelar
-        </button>
-      </div>
-    </form>
-  );
-}
-
 // ── Página principal ───────────────────────────────────────────────────────────
 export default function CustomersPage() {
+  const router = useRouter();
   const [customers, setCustomers] = useState<Customer[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -155,7 +97,6 @@ export default function CustomersPage() {
   const [page, setPage] = useState(0);
   const [total, setTotal] = useState(0);
   const [showCreate, setShowCreate] = useState(false);
-  const [editing, setEditing] = useState<Customer | null>(null);
   const [msg, setMsg] = useState('');
 
   useEffect(() => {
@@ -181,7 +122,6 @@ export default function CustomersPage() {
   useEffect(() => { load(); }, [load]);
 
   const handleCreated = () => { setMsg('Cliente creado correctamente'); setTimeout(() => setMsg(''), 3000); load(); };
-  const handleSaved = () => { setMsg('Cliente actualizado'); setTimeout(() => setMsg(''), 3000); load(); };
 
   return (
     <div className="p-8 space-y-6">
@@ -255,8 +195,7 @@ export default function CustomersPage() {
                       {c.createdAt ? new Date(c.createdAt).toLocaleDateString('es-ES') : '—'}
                     </td>
                     <td className="px-4 py-3.5">
-                      <button onClick={() => setEditing(c)}
-                        className="text-xs text-[#2D6A4F] hover:underline">Editar</button>
+                      <RowActions onEdit={() => router.push(`/customers/${c.id}`)} />
                     </td>
                   </tr>
                 ))}
@@ -287,12 +226,6 @@ export default function CustomersPage() {
         </Modal>
       )}
 
-      {/* Modal editar */}
-      {editing && (
-        <Modal title={`Editar: ${editing.email}`} onClose={() => setEditing(null)}>
-          <EditForm customer={editing} onClose={() => setEditing(null)} onSaved={handleSaved} />
-        </Modal>
-      )}
     </div>
   );
 }