Feat Varios 4

frontend/admin-panel/src/pages/Clients/ClientManager.tsx

@@ -15,6 +15,10 @@ interface Client {
   email?: string;
   phone?: string;
   address?: string;
+  taxType?: string;
+  username: string;
+  isActive: boolean;
+  role: string;
   totalAds: number;
   totalSpent: number;
 }
@@ -32,12 +36,17 @@ export default function ClientManager() {
   const [showSummaryModal, setShowSummaryModal] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
 
-  useEffect(() => { loadClients(); }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      loadClients(search);
+    }, 400); // 400ms debounce
+    return () => clearTimeout(timer);
+  }, [search]);
 
-  const loadClients = async () => {
+  const loadClients = async (query?: string) => {
     setLoading(true);
     try {
-      const res = await clientService.getAll();
+      const res = await clientService.getAll(query);
       setClients(res);
     } finally {
       setLoading(false);
@@ -53,7 +62,7 @@ export default function ClientManager() {
   };
 
   const handleOpenEdit = (client: Client) => {
-    setSelectedClient({ ...client });
+    setSelectedClient({ ...client, taxType: client.taxType || "Consumidor Final" });
     setShowEditModal(true);
   };
 
@@ -63,144 +72,215 @@ export default function ClientManager() {
     setIsSaving(true);
     try {
       await clientService.update(selectedClient.id, selectedClient);
-      await loadClients();
+      await loadClients(search);
       setShowEditModal(false);
     } finally {
       setIsSaving(false);
     }
   };
 
-  const filteredClients = clients.filter(c => {
-    const name = (c.name || "").toLowerCase();
-    const dni = (c.dniOrCuit || "").toLowerCase();
-    const s = search.toLowerCase();
-    return name.includes(s) || dni.includes(s);
-  });
-
   return (
     <div className="space-y-6">
-      <header className="flex justify-between items-center">
+      <header className="flex justify-between items-center px-2">
         <div>
-          <h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
-            <User className="text-blue-600" /> Directorio de Clientes
+          <h2 className="text-3xl font-black text-slate-900 tracking-tight flex items-center gap-3">
+            <span className="w-12 h-12 bg-blue-600/10 text-blue-600 rounded-2xl flex items-center justify-center shadow-sm">
+              <User size={24} />
+            </span>
+            Directorio de Clientes
           </h2>
-          <p className="text-sm text-gray-500">Gestión de datos fiscales y analítica de anunciantes</p>
+          <p className="text-sm font-bold text-slate-400 mt-1 ml-15">Gestión de datos fiscales y analítica de anunciantes</p>
         </div>
       </header>
 
-      <div className="bg-white p-4 rounded-xl border shadow-sm relative">
-        <Search className="absolute left-7 top-7 text-gray-400" size={20} />
+      <div className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm relative group transition-all hover:shadow-md">
+        <Search className="absolute left-10 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-blue-500 transition-colors" size={20} />
         <input
           type="text"
-          placeholder="Filtrar por nombre o identificación..."
-          className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+          placeholder="Buscar anunciante por nombre, DNI o CUIT..."
+          className="w-full pl-14 pr-6 py-4 bg-slate-50 border-transparent border-2 rounded-2xl outline-none focus:border-blue-500/20 focus:bg-white text-sm font-bold text-slate-700 transition-all placeholder:text-slate-300"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
+        {search && (
+          <div className="absolute right-8 top-1/2 -translate-y-1/2 text-[10px] font-black text-blue-500 opacity-50 uppercase tracking-widest">
+            Filtrando en servidor...
+          </div>
+        )}
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {loading ? (
-          <div className="col-span-full py-20 text-center animate-pulse text-gray-400 font-bold uppercase text-xs tracking-widest">
-            Sincronizando base de datos...
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {loading && clients.length === 0 ? (
+          <div className="col-span-full py-40 text-center flex flex-col items-center gap-4">
+            <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+            <p className="font-black text-slate-300 uppercase text-[10px] tracking-widest">Sincronizando base de datos...</p>
           </div>
-        ) : filteredClients.map(client => (
-          <div key={client.id} className="bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-all overflow-hidden group">
-            <div className="p-5 border-b border-gray-50 bg-gray-50/50">
-              <div className="flex justify-between items-start">
-                <div className="w-10 h-10 bg-blue-600 text-white rounded-xl flex items-center justify-center font-bold text-lg">
+        ) : clients.length === 0 ? (
+          <div className="col-span-full py-20 text-center">
+            <div className="text-slate-300 font-black text-xs uppercase tracking-[0.3em]">No se encontraron clientes que coincidan</div>
+          </div>
+        ) : clients.map(client => (
+          <div key={client.id} className={`bg-white rounded-[1.8rem] border border-slate-100 shadow-sm hover:shadow-lg transition-all overflow-hidden flex flex-col group ${!client.isActive ? 'opacity-60 saturate-50' : ''}`}>
+            <div className="p-5 border-b border-slate-50 bg-slate-50/20 relative">
+              <button
+                onClick={() => handleOpenEdit(client)}
+                className="absolute top-4 right-4 p-2 text-slate-300 hover:text-blue-600 hover:bg-white rounded-lg transition-all shadow-sm"
+              >
+                <Edit size={16} />
+              </button>
+
+              <div className="flex items-center gap-3">
+                <div className={`w-10 h-10 bg-gradient-to-br ${!client.isActive ? 'from-slate-400 to-slate-600' : 'from-blue-600 to-indigo-700'} text-white rounded-xl flex items-center justify-center font-black text-lg shadow-md shadow-blue-500/10`}>
                   {(client.name || "?").charAt(0).toUpperCase()}
                 </div>
-                <button
-                  onClick={() => handleOpenEdit(client)}
-                  className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                >
-                  <Edit size={18} />
-                </button>
-              </div>
-              <h3 className="mt-3 font-bold text-gray-800 text-lg line-clamp-1 uppercase tracking-tight">{client.name}</h3>
-              <div className="flex items-center gap-1.5 text-xs text-gray-400 font-bold mt-1">
-                <CreditCard size={14} /> {client.dniOrCuit}
+                <div className="min-w-0 flex-1">
+                  <h3 className="font-black text-slate-900 text-[13px] line-clamp-1 uppercase tracking-tight leading-tight">{client.name}</h3>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    <span className="text-[9px] font-bold text-slate-400 font-mono tracking-tighter">@{client.username}</span>
+                    <span className="w-1 h-1 bg-slate-200 rounded-full"></span>
+                    <span className="text-[9px] font-bold text-slate-400 font-mono">{client.dniOrCuit}</span>
+                  </div>
+                </div>
               </div>
             </div>
 
-            <div className="p-5 space-y-3">
-              <div className="flex items-center gap-2 text-sm text-gray-600">
-                <Mail size={16} className="text-gray-300" /> {client.email || 'N/A'}
+            <div className="p-5 flex-1 space-y-2.5">
+              <div className="flex items-center gap-2.5 text-[11px] font-bold text-slate-500">
+                <Mail size={12} className="text-slate-300 shrink-0" />
+                <span className="truncate">{client.email || 'Sin correo'}</span>
               </div>
-              <div className="flex items-center gap-2 text-sm text-gray-600">
-                <Phone size={16} className="text-gray-300" /> {client.phone || 'N/A'}
+              <div className="flex items-center gap-2.5 text-[11px] font-bold text-slate-500">
+                <Phone size={12} className="text-slate-300 shrink-0" />
+                <span>{client.phone || 'Sin tel.'}</span>
               </div>
 
-              <div className="grid grid-cols-2 gap-2 mt-4 pt-4 border-t border-gray-50">
-                <div className="text-center border-r border-gray-50">
-                  <div className="text-[9px] text-gray-400 font-black uppercase tracking-tighter">Avisos</div>
-                  <div className="text-lg font-black text-slate-800">{client.totalAds}</div>
+              <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-slate-50">
+                <div className="text-[10px] font-black text-slate-800 flex justify-between">
+                  <span className="text-slate-400 uppercase tracking-tighter">Avisos</span>
+                  <span>{client.totalAds}</span>
                 </div>
-                <div className="text-center">
-                  <div className="text-[9px] text-gray-400 font-black uppercase tracking-tighter">Invertido</div>
-                  <div className="text-lg font-black text-emerald-600">${client.totalSpent?.toLocaleString()}</div>
+                <div className="text-[10px] font-black text-emerald-600 flex justify-between border-l pl-2 border-slate-100">
+                  <span className="text-slate-400 uppercase tracking-tighter">Invertido</span>
+                  <span>${client.totalSpent > 1000 ? Math.round(client.totalSpent / 1000) + 'k' : client.totalSpent}</span>
                 </div>
               </div>
             </div>
 
             <button
               onClick={() => handleOpenSummary(client)}
-              className="w-full py-3.5 bg-white text-blue-600 text-[10px] font-black uppercase tracking-[0.2em] hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center gap-2 border-t"
+              className="w-full py-3 bg-slate-900 text-white text-[9px] font-black uppercase tracking-[0.2em] hover:bg-blue-600 transition-all flex items-center justify-center gap-2"
             >
-              <BarChart3 size={14} /> Ficha del Anunciante
+              <BarChart3 size={13} /> Ficha del Anunciante
             </button>
           </div>
         ))}
       </div>
 
       {/* --- MODAL DE EDICIÓN / FACTURACIÓN --- */}
-      <Modal isOpen={showEditModal} onClose={() => setShowEditModal(false)} title="Datos Fiscales y de Contacto">
-        <form onSubmit={handleSaveEdit} className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="md:col-span-2">
-              <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Razón Social / Nombre</label>
-              <input
-                type="text" required
-                className="w-full border-2 border-gray-100 p-2.5 rounded-xl font-bold focus:border-blue-500 outline-none transition-all"
-                value={selectedClient?.name || ""}
-                onChange={e => setSelectedClient({ ...selectedClient!, name: e.target.value })}
-              />
-            </div>
+      <Modal isOpen={showEditModal} onClose={() => setShowEditModal(false)} title="Actualizar Perfil de Cliente">
+        <form onSubmit={handleSaveEdit} className="space-y-6">
+          <div className="bg-blue-50/50 p-4 rounded-2xl flex items-center justify-between">
             <div>
-              <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">DNI / CUIT</label>
-              <input
-                type="text" required
-                className="w-full border-2 border-gray-100 p-2.5 rounded-xl font-bold focus:border-blue-500 outline-none transition-all"
-                value={selectedClient?.dniOrCuit || ""}
-                onChange={e => setSelectedClient({ ...selectedClient!, dniOrCuit: e.target.value })}
-              />
-            </div>
-            <div>
-              <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Teléfono</label>
-              <input
-                type="text"
-                className="w-full border-2 border-gray-100 p-2.5 rounded-xl font-bold focus:border-blue-500 outline-none transition-all"
-                value={selectedClient?.phone || ""}
-                onChange={e => setSelectedClient({ ...selectedClient!, phone: e.target.value })}
-              />
+              <p className="text-[10px] font-black text-blue-400 uppercase tracking-widest leading-none mb-1">Estado de la Cuenta</p>
+              <p className="text-sm font-black text-blue-900">{selectedClient?.isActive ? 'ACTIVA Y OPERATIVA' : 'CUENTA DESACTIVADA'}</p>
             </div>
+            <button
+              type="button"
+              onClick={() => setSelectedClient({ ...selectedClient, isActive: !selectedClient.isActive })}
+              className={`w-12 h-6 rounded-full p-1 transition-all ${selectedClient?.isActive ? 'bg-blue-600' : 'bg-slate-300'}`}
+            >
+              <div className={`w-4 h-4 bg-white rounded-full transition-all ${selectedClient?.isActive ? 'translate-x-6' : 'translate-x-0'}`}></div>
+            </button>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="md:col-span-2">
-              <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Email</label>
-              <input
-                type="email"
-                className="w-full border-2 border-gray-100 p-2.5 rounded-xl font-bold focus:border-blue-500 outline-none transition-all"
-                value={selectedClient?.email || ""}
-                onChange={e => setSelectedClient({ ...selectedClient!, email: e.target.value })}
-              />
-            </div>
-            <div className="md:col-span-2">
-              <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest ml-1">Dirección de Facturación</label>
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Razón Social / Nombre</label>
               <div className="relative">
-                <MapPin className="absolute left-3 top-3 text-gray-300" size={18} />
+                <User className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
+                <input
+                  type="text" required
+                  className="w-full bg-slate-50 border-2 border-slate-50 pl-12 pr-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all"
+                  value={selectedClient?.name || ""}
+                  onChange={e => setSelectedClient({ ...selectedClient!, name: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Nombre de Usuario (@)</label>
+              <div className="relative">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 font-black text-slate-300">@</span>
+                <input
+                  type="text" required
+                  className="w-full bg-slate-50 border-2 border-slate-50 pl-10 pr-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all"
+                  value={selectedClient?.username || ""}
+                  onChange={e => setSelectedClient({ ...selectedClient!, username: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">DNI / CUIT</label>
+              <div className="relative">
+                <CreditCard className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
+                <input
+                  type="text" required
+                  className="w-full bg-slate-50 border-2 border-slate-50 pl-12 pr-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all"
+                  value={selectedClient?.dniOrCuit || ""}
+                  onChange={e => setSelectedClient({ ...selectedClient!, dniOrCuit: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Condición Fiscal</label>
+              <select
+                className="w-full bg-slate-50 border-2 border-slate-50 px-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all appearance-none cursor-pointer"
+                value={selectedClient?.taxType || ""}
+                onChange={e => setSelectedClient({ ...selectedClient!, taxType: e.target.value })}
+              >
+                <option value="Consumidor Final">Consumidor Final</option>
+                <option value="IVA Responsable Inscripto">Resp. Inscripto</option>
+                <option value="Monotributista">Monotributista</option>
+                <option value="IVA Exento">Iva Exento</option>
+                <option value="No Alcanzado">No Alcanzado</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Teléfono de Contacto</label>
+              <div className="relative">
+                <Phone className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
                 <input
                   type="text"
-                  className="w-full border-2 border-gray-100 p-2.5 pl-10 rounded-xl font-bold focus:border-blue-500 outline-none transition-all"
+                  className="w-full bg-slate-50 border-2 border-slate-50 pl-12 pr-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all"
+                  value={selectedClient?.phone || ""}
+                  onChange={e => setSelectedClient({ ...selectedClient!, phone: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div className="md:col-span-2">
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Correo Electrónico</label>
+              <div className="relative">
+                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
+                <input
+                  type="email"
+                  className="w-full bg-slate-50 border-2 border-slate-50 pl-12 pr-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all"
+                  value={selectedClient?.email || ""}
+                  onChange={e => setSelectedClient({ ...selectedClient!, email: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div className="md:col-span-2">
+              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 mb-2 block">Dirección de Facturación</label>
+              <div className="relative">
+                <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
+                <input
+                  type="text"
+                  className="w-full bg-slate-50 border-2 border-slate-50 pl-12 pr-4 py-4 rounded-2xl font-black text-slate-700 focus:border-blue-500 focus:bg-white outline-none transition-all"
                   value={selectedClient?.address || ""}
                   onChange={e => setSelectedClient({ ...selectedClient!, address: e.target.value })}
                   placeholder="Calle, Nro, Localidad..."
@@ -208,14 +288,39 @@ export default function ClientManager() {
               </div>
             </div>
           </div>
-          <div className="flex justify-end gap-3 pt-6">
-            <button type="button" onClick={() => setShowEditModal(false)} className="px-6 py-2.5 text-xs font-bold text-gray-500 uppercase tracking-widest">Cancelar</button>
+
+          <div className="flex justify-between items-center pt-8 border-t border-slate-100">
             <button
-              type="submit" disabled={isSaving}
-              className="bg-blue-600 text-white px-8 py-2.5 rounded-xl font-black text-xs uppercase tracking-widest shadow-lg shadow-blue-200 hover:bg-blue-700 disabled:opacity-50 transition-all"
+              type="button"
+              onClick={async () => {
+                if (confirm("¿Estás seguro de establecer '1234' como clave temporal para este cliente?")) {
+                  try {
+                    await clientService.resetPassword(selectedClient.id);
+                    alert("Clave restablecida a '1234' correctamente.");
+                  } catch (e) {
+                    alert("Error al restablecer la clave.");
+                  }
+                }
+              }}
+              className="p-4 bg-rose-50 text-rose-500 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-rose-500 hover:text-white transition-all shadow-sm"
             >
-              {isSaving ? "Actualizando..." : "Guardar Cambios"}
+              Blanquear Acceso
             </button>
+            <div className="flex gap-4">
+              <button
+                type="button"
+                onClick={() => setShowEditModal(false)}
+                className="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] hover:text-slate-900 transition-colors"
+              >
+                Cancelar
+              </button>
+              <button
+                type="submit" disabled={isSaving}
+                className="bg-blue-600 text-white px-10 py-5 rounded-[1.5rem] font-black text-[10px] uppercase tracking-[0.3em] shadow-xl shadow-blue-500/20 hover:bg-blue-700 disabled:opacity-50 transition-all active:scale-95"
+              >
+                {isSaving ? "Gaurdando..." : "Guardar Cambios"}
+              </button>
+            </div>
           </div>
         </form>
       </Modal>

frontend/admin-panel/src/services/clientService.ts

@@ -2,8 +2,8 @@
 import api from './api';
 
 export const clientService = {
-  getAll: async () => {
-    const res = await api.get('/clients');
+  getAll: async (q?: string) => {
+    const res = await api.get('/clients', { params: { q } });
     return res.data;
   },
   getSummary: async (id: number) => {
@@ -12,5 +12,9 @@ export const clientService = {
   },
   update: async (id: number, clientData: any) => {
     await api.put(`/clients/${id}`, clientData);
+  },
+  resetPassword: async (id: number) => {
+    const res = await api.post(`/clients/${id}/reset-password`);
+    return res.data;
   }
 };