From 41930a5c23ee4e59bf6155ae86e724d43e633201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Sun, 11 May 2025 04:03:10 -0600
Subject: [PATCH 001/160] feat: add LEER_CUOTAS route to constantes for cuotas

---
 src/Utilidades/Constantes/rutas.js    | 6 +++++-
 src/Utilidades/Constantes/rutasAPI.js | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Utilidades/Constantes/rutas.js b/src/Utilidades/Constantes/rutas.js
index 8f7ba85e..5d0085ae 100644
--- a/src/Utilidades/Constantes/rutas.js
+++ b/src/Utilidades/Constantes/rutas.js
@@ -29,7 +29,11 @@ export const RUTAS = {
       CONSULTAR_CATEGORIAS: `${BASE_PRODUCTOS}/consultar-categorias`,
     },
     PEDIDOS: { BASE: `${BASE_PEDIDOS}`, CONSULTAR_PEDIDOS: `${BASE_PEDIDOS}/consultar-lista` },
-    CUOTAS: { BASE: `${BASE_CUOTAS}`, EDITAR_CUOTAS: `${BASE_CUOTAS}/editar-cuotas` },
+    CUOTAS: {
+      BASE: `${BASE_CUOTAS}`,
+      EDITAR_CUOTAS: `${BASE_CUOTAS}/editar-cuotas`,
+      LEER_CUOTAS: `${BASE_CUOTAS}/leer-set-cuotas`,
+    },
 
     EVENTOS: {
       BASE: `${BASE_EVENTOS}`,
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index 29c64135..cb846f11 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -52,6 +52,7 @@ export const RUTAS_API = {
     CREAR_CUOTA: `${BASE_CUOTAS}/crear-cuota`,
     CONSULTAR_LISTA: `${BASE_CUOTAS}/consultar-lista`,
     ELIMINAR_SET_CUOTAS: `${BASE_CUOTAS}/eliminar-set-cuotas`,
+    LEER_SET_CUOTAS: `${BASE_CUOTAS}/leer-set-cuotas`,
   },
   ROLES: {
     BASE: BASE_ROLES,

From c4a92e8bd25fed1b0545d9ddc402b7689c7ed99c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Sun, 11 May 2025 23:00:49 -0600
Subject: [PATCH 002/160] =?UTF-8?q?feat:=20modelo,=20repositorio=20y=20hoo?=
 =?UTF-8?q?k=20de=20leerCuota=20funciona=20bien=20yno=20di=C3=B3=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dominio/Modelos/Cuotas/LeerCuota.js       | 22 +++++++++
 .../Cuotas/repositorioLeerCuota.js            | 41 +++++++++++++++++
 src/hooks/Cuotas/useLeerCuota.js              | 46 +++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 src/Dominio/Modelos/Cuotas/LeerCuota.js
 create mode 100644 src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js
 create mode 100644 src/hooks/Cuotas/useLeerCuota.js

diff --git a/src/Dominio/Modelos/Cuotas/LeerCuota.js b/src/Dominio/Modelos/Cuotas/LeerCuota.js
new file mode 100644
index 00000000..c60f178f
--- /dev/null
+++ b/src/Dominio/Modelos/Cuotas/LeerCuota.js
@@ -0,0 +1,22 @@
+/*
+Modelo de dominio para la lectura de una cuota.
+RF[33] - Leer cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF33]
+*/
+
+export class LeerCuota {
+  constructor({
+    idCuota,
+    nombre,
+    descripcion,
+    periodoRenovacion,
+    renovacionHabilitada,
+    ultimaActualizacion,
+  }) {
+    this.idCuota = idCuota;
+    this.nombre = nombre;
+    this.descripcion = descripcion;
+    this.periodoRenovacion = periodoRenovacion;
+    this.renovacionHabilitada = renovacionHabilitada;
+    this.ultimaActualizacion = ultimaActualizacion;
+  }
+}
diff --git a/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js b/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js
new file mode 100644
index 00000000..4027d79e
--- /dev/null
+++ b/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js
@@ -0,0 +1,41 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+import { LeerCuota } from '@Modelos/Cuotas/LeerCuota';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioLeerCuota {
+  /**
+   * Consulta los datos de una cuota específica por ID
+   * @param {number} idCuota - ID de la cuota a consultar
+   * @returns {Promise<{cuota: LeerCuota, mensaje: string}>}
+   *
+   * @see [RF[38] Leer cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF38)]
+   */
+  static async obtenerPorId(idCuota) {
+    try {
+      const respuesta = await axios.post(
+        RUTAS_API.CUOTAS.CONSULTAR_CUOTA,
+        { idCuota },
+        {
+          headers: {
+            'x-api-key': API_KEY,
+          },
+          withCredentials: true,
+        }
+      );
+
+      const { cuota, mensaje } = respuesta.data;
+
+      const cuotaInstancia = new LeerCuota(cuota);
+
+      return {
+        cuota: cuotaInstancia,
+        mensaje,
+      };
+    } catch (error) {
+      const mensaje = error.response?.data?.mensaje || 'Error al obtener datos de la cuota.';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/hooks/Cuotas/useLeerCuota.js b/src/hooks/Cuotas/useLeerCuota.js
new file mode 100644
index 00000000..9b1f5eb9
--- /dev/null
+++ b/src/hooks/Cuotas/useLeerCuota.js
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { RepositorioLeerCuota } from '@Repositorios/Cuotas/repositorioLeerCuota';
+
+/**
+ * Hook para obtener los datos de una cuota por su ID
+ * @param {number} idCuota - ID de la cuota a consultar
+ * @returns {{
+ * cuota: CuotaLectura | null,
+ * mensaje: string,
+ * cargando: boolean,
+ * error: string | null
+ * }}
+ *
+ * @see [RF[33] Leer cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF33]
+ * */
+
+export const useCuotaId = (idCuota) => {
+  const [cuota, setCuota] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+  const [cargando, setCargando] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const obtenerCuota = async () => {
+      setCargando(true);
+      setError(null);
+
+      try {
+        const { cuota, mensaje } = await RepositorioLeerCuota.obtenerPorId(idCuota);
+
+        setCuota(cuota);
+        setMensaje(mensaje);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setCargando(false);
+      }
+    };
+
+    if (idCuota) {
+      obtenerCuota();
+    }
+  }, [idCuota]);
+
+  return { cuota, mensaje, cargando, error };
+};

From 9326c4f4bf5e542cbaf6979402ef1a81d8db0746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Sun, 11 May 2025 23:39:08 -0600
Subject: [PATCH 003/160] =?UTF-8?q?feat:=20agregar=20rutas=20y=20permisos?=
 =?UTF-8?q?=20a=20la=20p=C3=A1gina=20de=20ListaCuotas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index e8bcab15..ba2cbf32 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -13,7 +13,9 @@ import Alerta from '@Moleculas/Alerta';
 import PopUpEliminar from '@Moleculas/PopUp';
 import { RUTAS } from '@Constantes/rutas';
 import { RepositorioEliminarSetCuotas } from '@Dominio/Repositorios/Cuotas/repositorioEliminarSetCuotas';
-
+import { PERMISOS } from '@Utilidades/Constantes/permisos';
+import { useConsultarCuotas } from '@Hooks/Cuotas/useConsultarCuotas';
+import ModalFlotante from '@Organismos/ModalFlotante';
 const ListaCuotas = () => {
   const navegar = useNavigate();
   const { usuario } = useAuth();
@@ -137,7 +139,15 @@ const ListaCuotas = () => {
         descripcion='Consulta y administra los sets de cuotas registrados para cada cliente.'
         informacionBotones={botones}
       >
-        <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: '10px', mb: '20px' }}></Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '10px',
+            mb: '20px',
+          }}
+        ></Box>
 
         <Box width='100%'>
           {error && <Alerta tipo='error' mensaje={error} icono cerrable centradoInferior />}

From a48325f58e5013bc5c705813283f74754ecdf926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Mon, 12 May 2025 20:47:07 -0600
Subject: [PATCH 004/160] Restaurando el commit eliminado

---
 package-lock.json                             |  37 --
 package.json                                  |   2 -
 src/Dominio/Modelos/Cuotas/CuotaSetModelo.js  |   4 +-
 .../Empleados/GrupoEmpleadosLectura.js        |  14 +
 src/Dominio/Modelos/Pagos/ListaTipoPago.js    |  12 +
 src/Dominio/Modelos/Pagos/TipoPago.js         |   9 +
 .../Modelos/SetsProductos/SetProductos.js     |   5 +-
 .../Clientes/repositorioActualizarCliente.js  |  23 ++
 .../RepositorioLeerGrupoEmpleados.js          |  42 ++
 .../Pagos/RepositorioActualizarTipoPago.js    |  27 ++
 .../Pagos/RepositorioConsultarTipoPagos.js    |  24 ++
 .../Productos/repositorioEliminarProductos.js |   5 +-
 src/Dominio/Servicios/obtenerPermisos.js      |   5 +-
 src/Rutas/RutasSistemaAdministrativo.jsx      |   7 +-
 src/Utilidades/Constantes/rutas.js            |   3 +-
 src/Utilidades/Constantes/rutasAPI.js         |   8 +
 .../Componentes/Moleculas/ClienteInfo.jsx     | 117 ------
 .../Componentes/Moleculas/CuotasInfo.jsx      |  70 ++++
 .../Moleculas/GrupoEmpleadosInfo.jsx          |  95 +++++
 .../Componentes/Moleculas/InfoCliente.jsx     | 267 +++++++++++++
 .../{UsuarioInfo.jsx => InfoUsuario.jsx}      |   0
 .../Moleculas/SetProductosInfo.jsx            |  78 ++++
 .../Moleculas/TarjetaConImagen.jsx            |  26 +-
 .../Clientes/AgregarClienteTarjeta.jsx        |  47 +++
 .../Organismos/Clientes/ClienteTarjeta.jsx    |  26 ++
 .../Organismos/Clientes/ClientesLista.jsx     |  37 ++
 .../Clientes/DetalleClienteModal.jsx          | 103 +++++
 .../Clientes/EliminarClientesModal.jsx        |  44 +++
 .../{ => Clientes}/ModalLeerCliente.jsx       |   5 +
 .../{ => Cuotas}/FormaCrearCuotaSet.jsx       |   2 +
 .../{ => Cuotas}/ModalCrearCuotaSet.jsx       |   2 +
 .../Formularios/FormaCrearCuotaSet.jsx        |   2 +
 .../Componentes/Organismos/ModalFlotante.jsx  |   6 +-
 .../Organismos/TarjetaConfiguracionPagos.jsx  | 196 +++++++++
 src/Vistas/Paginas/Clientes/ListaClientes.jsx | 327 ++++-----------
 .../Configuracion/ConfiguracionGeneral.jsx    |  11 +-
 src/Vistas/Paginas/Cuotas/EditarCuotas.jsx    |   2 +
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx     |  30 +-
 .../Paginas/Empleados/ListaEmpleados.jsx      |   4 +-
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  65 ++-
 src/Vistas/Paginas/Pedidos/ListaPedidos.jsx   |  10 +-
 .../Paginas/Productos/ListaProductos.jsx      |   9 +-
 .../SetsProductos/ListaSetsProductos.jsx      |  65 ++-
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |   2 +-
 src/Vistas/stories/ClienteInfo.stories.js     |  10 +-
 src/Vistas/stories/ModalFlotante.stories.jsx  |   2 +-
 .../stories/SetProductosInfo.stories.js       |  29 ++
 src/Vistas/stories/UsuarioInfo.stories.js     |  24 +-
 src/hooks/Clientes/useClientes.js             | 372 ++++++++++++++++++
 src/hooks/Clientes/useLeerCliente.js          |  16 +-
 src/hooks/Cuotas/useCrearCuotaSet.js          |   3 +-
 src/hooks/Empleados/useLeerGrupoEmpleados.js  |  47 +++
 src/hooks/Pagos/useActualizarTipoPago.js      |  27 ++
 src/hooks/Pagos/useConsultarTipoPagos.js      |  63 +++
 src/hooks/Productos/useEliminarProductos.js   |   4 +-
 src/hooks/Roles/useEliminarRol.js             |   1 -
 src/theme.js                                  |   2 +
 57 files changed, 2000 insertions(+), 475 deletions(-)
 create mode 100644 src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
 create mode 100644 src/Dominio/Modelos/Pagos/ListaTipoPago.js
 create mode 100644 src/Dominio/Modelos/Pagos/TipoPago.js
 create mode 100644 src/Dominio/Repositorios/Clientes/repositorioActualizarCliente.js
 create mode 100644 src/Dominio/Repositorios/Empleados/RepositorioLeerGrupoEmpleados.js
 create mode 100644 src/Dominio/Repositorios/Pagos/RepositorioActualizarTipoPago.js
 create mode 100644 src/Dominio/Repositorios/Pagos/RepositorioConsultarTipoPagos.js
 delete mode 100644 src/Vistas/Componentes/Moleculas/ClienteInfo.jsx
 create mode 100644 src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
 create mode 100644 src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfo.jsx
 create mode 100644 src/Vistas/Componentes/Moleculas/InfoCliente.jsx
 rename src/Vistas/Componentes/Moleculas/{UsuarioInfo.jsx => InfoUsuario.jsx} (100%)
 create mode 100644 src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/Clientes/AgregarClienteTarjeta.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/Clientes/ClienteTarjeta.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/Clientes/ClientesLista.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/Clientes/EliminarClientesModal.jsx
 rename src/Vistas/Componentes/Organismos/{ => Clientes}/ModalLeerCliente.jsx (92%)
 rename src/Vistas/Componentes/Organismos/{ => Cuotas}/FormaCrearCuotaSet.jsx (94%)
 rename src/Vistas/Componentes/Organismos/{ => Cuotas}/ModalCrearCuotaSet.jsx (95%)
 create mode 100644 src/Vistas/Componentes/Organismos/TarjetaConfiguracionPagos.jsx
 create mode 100644 src/Vistas/stories/SetProductosInfo.stories.js
 create mode 100644 src/hooks/Clientes/useClientes.js
 create mode 100644 src/hooks/Empleados/useLeerGrupoEmpleados.js
 create mode 100644 src/hooks/Pagos/useActualizarTipoPago.js
 create mode 100644 src/hooks/Pagos/useConsultarTipoPagos.js

diff --git a/package-lock.json b/package-lock.json
index 8cd02843..d5b2b93e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
         "react-dom": "^19.0.0",
         "react-pro-sidebar": "^0.7.1",
         "react-router-dom": "^7.2.0",
-        "react-toastify": "^11.0.5",
         "serve": "^14.2.4",
         "styled-components": "^6.1.15",
         "tailwindcss": "^4.0.9"
@@ -36,7 +35,6 @@
         "@eslint/js": "^9.19.0",
         "@storybook/addon-a11y": "^8.6.12",
         "@storybook/addon-essentials": "^8.6.12",
-        "@storybook/addon-interactions": "^8.6.12",
         "@storybook/addon-onboarding": "^8.6.12",
         "@storybook/blocks": "^8.6.12",
         "@storybook/experimental-addon-test": "^8.6.12",
@@ -2143,27 +2141,6 @@
         "storybook": "^8.6.12"
       }
     },
-    "node_modules/@storybook/addon-interactions": {
-      "version": "8.6.12",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.6.12.tgz",
-      "integrity": "sha512-cTAJlTq6uVZBEbtwdXkXoPQ4jHOAGKQnYSezBT4pfNkdjn/FnEeaQhMBDzf14h2wr5OgBnJa6Lmd8LD9ficz4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.6.12",
-        "@storybook/test": "8.6.12",
-        "polished": "^4.2.2",
-        "ts-dedent": "^2.2.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.6.12"
-      }
-    },
     "node_modules/@storybook/addon-measure": {
       "version": "8.6.12",
       "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.6.12.tgz",
@@ -2372,7 +2349,6 @@
       "resolved": "https://registry.npmjs.org/@storybook/experimental-addon-test/-/experimental-addon-test-8.6.12.tgz",
       "integrity": "sha512-auc8Ql0buH0WeaKVuSSuabxIiBWvqvAyxtXCm1sVMkL68GwrX3cmpNMwviz3mvKvM//F8zKi/31HMl1PZ5UnIA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "@storybook/icons": "^1.2.12",
@@ -7887,19 +7863,6 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/react-toastify": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
-      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19",
-        "react-dom": "^18 || ^19"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index 30c27633..f4e9a46d 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "react-dom": "^19.0.0",
     "react-pro-sidebar": "^0.7.1",
     "react-router-dom": "^7.2.0",
-    "react-toastify": "^11.0.5",
     "serve": "^14.2.4",
     "styled-components": "^6.1.15",
     "tailwindcss": "^4.0.9"
@@ -40,7 +39,6 @@
     "@eslint/js": "^9.19.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-onboarding": "^8.6.12",
     "@storybook/blocks": "^8.6.12",
     "@storybook/experimental-addon-test": "^8.6.12",
diff --git a/src/Dominio/Modelos/Cuotas/CuotaSetModelo.js b/src/Dominio/Modelos/Cuotas/CuotaSetModelo.js
index dd8148ae..34e151a3 100644
--- a/src/Dominio/Modelos/Cuotas/CuotaSetModelo.js
+++ b/src/Dominio/Modelos/Cuotas/CuotaSetModelo.js
@@ -1,4 +1,6 @@
- export class CuotaSetModelo {
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
+export class CuotaSetModelo {
   constructor({
     nombreCuotaSet,
     descripcion,
diff --git a/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js b/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
new file mode 100644
index 00000000..95151c7d
--- /dev/null
+++ b/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
@@ -0,0 +1,14 @@
+/*
+ * Modelo de un grupo de empleados
+ * RF[23] Lee grupo de empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23
+ */
+
+export class GrupoEmpleadosLectura {
+  constructor({ idGrupo, nombre, descripcion, setsProductos = [], empleados = [] }) {
+    this.idGrupo = idGrupo;
+    this.nombre = nombre;
+    this.descripcion = descripcion;
+    this.setsProductos = setsProductos;
+    this.empleados = empleados;
+  }
+}
diff --git a/src/Dominio/Modelos/Pagos/ListaTipoPago.js b/src/Dominio/Modelos/Pagos/ListaTipoPago.js
new file mode 100644
index 00000000..f51430ae
--- /dev/null
+++ b/src/Dominio/Modelos/Pagos/ListaTipoPago.js
@@ -0,0 +1,12 @@
+import { TipoPago } from '@Modelos/Pagos/TipoPago';
+
+//RF[52] Consulta Lista de Pago - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF52]
+
+export class ListaTipoPago {
+  constructor({ mensaje, listaTipoPagos }) {
+    this.mensaje = mensaje;
+    this.listaTipoPagos = Array.isArray(listaTipoPagos)
+      ? listaTipoPagos.map((tipoPago) => new TipoPago(tipoPago))
+      : [];
+  }
+}
diff --git a/src/Dominio/Modelos/Pagos/TipoPago.js b/src/Dominio/Modelos/Pagos/TipoPago.js
new file mode 100644
index 00000000..fdc30309
--- /dev/null
+++ b/src/Dominio/Modelos/Pagos/TipoPago.js
@@ -0,0 +1,9 @@
+//RF[52] Consulta Lista de Pago - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF52]
+
+export class TipoPago {
+  constructor({ idTipoPago, metodo, habilitado }) {
+    this.idTipoPago = idTipoPago;
+    this.metodo = metodo;
+    this.habilitado = Boolean(habilitado);
+  }
+}
diff --git a/src/Dominio/Modelos/SetsProductos/SetProductos.js b/src/Dominio/Modelos/SetsProductos/SetProductos.js
index dfb09f4d..b36cd24a 100644
--- a/src/Dominio/Modelos/SetsProductos/SetProductos.js
+++ b/src/Dominio/Modelos/SetsProductos/SetProductos.js
@@ -3,13 +3,16 @@
  * Representa los datos básicos de un set de productos asociado a un cliente.
  *
  * RF42 - Super Administrador, Cliente Consulta Lista de Sets de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF42
+ * RF48 - Super Administrador, Cliente Lee Categoria de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/rf48/
  */
 
 export class SetProductos {
-  constructor({ idSetProducto, nombre, descripcion, activo }) {
+  constructor({ idSetProducto, nombre, descripcion, activo, productos, grupos }) {
     this.idSetProducto = idSetProducto;
     this.nombre = nombre;
     this.descripcion = descripcion;
     this.activo = activo;
+    this.productos = productos;
+    this.grupos = grupos;
   }
 }
diff --git a/src/Dominio/Repositorios/Clientes/repositorioActualizarCliente.js b/src/Dominio/Repositorios/Clientes/repositorioActualizarCliente.js
new file mode 100644
index 00000000..e5acf19b
--- /dev/null
+++ b/src/Dominio/Repositorios/Clientes/repositorioActualizarCliente.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+// RF14 - Actualiza Cliente - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF14
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarCliente {
+  static async actualizarClienteConImagen(formData) {
+    if (!formData) return;
+
+    try {
+      await axios.put(RUTAS_API.CLIENTES.ACTUALIZAR_CLIENTE, formData, {
+        headers: {
+          'x-api-key': API_KEY,
+        },
+        withCredentials: true,
+      });
+    } catch {
+      throw new Error('Error en el repositorio');
+    }
+  }
+}
diff --git a/src/Dominio/Repositorios/Empleados/RepositorioLeerGrupoEmpleados.js b/src/Dominio/Repositorios/Empleados/RepositorioLeerGrupoEmpleados.js
new file mode 100644
index 00000000..ff97c4b8
--- /dev/null
+++ b/src/Dominio/Repositorios/Empleados/RepositorioLeerGrupoEmpleados.js
@@ -0,0 +1,42 @@
+import axios from 'axios';
+import { GrupoEmpleadosLectura } from '@Modelos/Empleados/GrupoEmpleadosLectura';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioLeerGrupoEmpleados {
+  /**
+   * Consulta los datos de un grupo de empleados específico por ID
+   * @param {number} idGrupo - ID del grupo de empleados a consultar
+   * @returns {Promise<{grupoEmpleados: GrupoEmpleadosLectura, mensaje: string}>}
+   *
+   * @see [RF[23] Leer grupo de empleados - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23)
+   */
+  static async obtenerPorId(idGrupo) {
+    try {
+      const respuesta = await axios.post(
+        RUTAS_API.EMPLEADOS.LEER_GRUPO,
+        { idGrupo },
+        {
+          headers: {
+            'x-api-key': API_KEY,
+          },
+          withCredentials: true,
+        }
+      );
+
+      const { grupoEmpleados, mensaje } = respuesta.data;
+
+      const grupoEmpleadosInstancia = new GrupoEmpleadosLectura(grupoEmpleados);
+
+      return {
+        grupoEmpleados: grupoEmpleadosInstancia,
+        mensaje,
+      };
+    } catch (error) {
+      const mensaje
+        = error.response?.data?.mensaje || 'Error al obtener datos del grupo de empleados.';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Dominio/Repositorios/Pagos/RepositorioActualizarTipoPago.js b/src/Dominio/Repositorios/Pagos/RepositorioActualizarTipoPago.js
new file mode 100644
index 00000000..489e20ff
--- /dev/null
+++ b/src/Dominio/Repositorios/Pagos/RepositorioActualizarTipoPago.js
@@ -0,0 +1,27 @@
+//RF[54] Consulta Lista de Pagos - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF54]
+
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarTipoPago {
+  static async actualizar(cambios) {
+    try {
+      const respuesta = await axios.put(
+        RUTAS_API.PAGOS.ACTUALIZAR_LISTA,
+        { cambios },
+        {
+          withCredentials: true,
+          headers: {
+            'x-api-key': API_KEY,
+          },
+        }
+      );
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al actualizar';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Dominio/Repositorios/Pagos/RepositorioConsultarTipoPagos.js b/src/Dominio/Repositorios/Pagos/RepositorioConsultarTipoPagos.js
new file mode 100644
index 00000000..58acc124
--- /dev/null
+++ b/src/Dominio/Repositorios/Pagos/RepositorioConsultarTipoPagos.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+import { ListaTipoPago } from '@Modelos/Pagos/ListaTipoPago';
+
+//RF[52] Consulta Lista de Pago - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF52]
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioConsultarTipoPagos {
+  static async consultarPagos() {
+    try {
+      const respuesta = await axios.get(RUTAS_API.PAGOS.CONSULTAR_LISTA, {
+        withCredentials: true,
+        headers: {
+          'x-api-key': API_KEY,
+        },
+      });
+      return new ListaTipoPago(respuesta.data);
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje;
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Dominio/Repositorios/Productos/repositorioEliminarProductos.js b/src/Dominio/Repositorios/Productos/repositorioEliminarProductos.js
index d7f54121..07e31768 100644
--- a/src/Dominio/Repositorios/Productos/repositorioEliminarProductos.js
+++ b/src/Dominio/Repositorios/Productos/repositorioEliminarProductos.js
@@ -9,12 +9,13 @@ export class RepositorioEliminarProductos {
   /**
    * Elimina una o más productos desde la API
    * @param {array} idsProducto - ID de los productos a eliminar
+   * @param {array} imagenes - Array de imágenes a eliminar
    * @returns {Promise<{mensaje: string}>}
    */
-  static async eliminarProducto(idsProducto) {
+  static async eliminarProducto(idsProducto, imagenes = []) {
     try {
       const respuesta = await axios.delete(RUTAS_API.PRODUCTOS.ELIMINAR_PRODUCTO, {
-        data: { ids: idsProducto },
+        data: { ids: idsProducto, imagenes },
         headers: {
           'x-api-key': API_KEY,
         },
diff --git a/src/Dominio/Servicios/obtenerPermisos.js b/src/Dominio/Servicios/obtenerPermisos.js
index f6415e5a..11b037b4 100644
--- a/src/Dominio/Servicios/obtenerPermisos.js
+++ b/src/Dominio/Servicios/obtenerPermisos.js
@@ -7,7 +7,7 @@ const obtenerPermisos = async () => {
   try {
     const respuesta = await axios.post(
       `${API_URL}/api/roles/obtener-opciones`,
-      {}, 
+      {},
       {
         headers: {
           'x-api-key': API_KEY,
@@ -22,8 +22,7 @@ const obtenerPermisos = async () => {
     }));
 
     return permisosFormateados;
-  } catch (error) {
-    console.error('Error al obtener permisos:', error);
+  } catch {
     return [];
   }
 };
diff --git a/src/Rutas/RutasSistemaAdministrativo.jsx b/src/Rutas/RutasSistemaAdministrativo.jsx
index db49a7a9..498981fa 100644
--- a/src/Rutas/RutasSistemaAdministrativo.jsx
+++ b/src/Rutas/RutasSistemaAdministrativo.jsx
@@ -8,7 +8,6 @@ import LIstaEmpleados from '@Empleados/ListaEmpleados';
 import EditarCuotas from '@Cuotas/EditarCuotas';
 import ListaGrupoEmpleados from '@Empleados/ListaGrupoEmpleados';
 import SistemaAdministrativo from '@Paginas/SistemaAdministrativo';
-import Configuracion from '@Configuracion/ConfiguracionGeneral';
 import Error404 from '@Errores/Error404';
 import ListaRoles from '@Roles/ListaRoles';
 import ListaUsuarios from '@Usuarios/ListaUsuarios';
@@ -18,6 +17,7 @@ import ListaEventos from '@Eventos/ListaEventos';
 import RutaProtegida from '@Rutas/RutaProtegida';
 import VerificarClienteSeleccionado from '@Rutas/VerificarClienteSeleccionado';
 import ListaPedidos from '@Pedidos/ListaPedidos';
+import ConfiguracionGeneral from '@Configuracion/ConfiguracionGeneral';
 
 const RutasSistemaAdministrativo = () => {
   return (
@@ -32,7 +32,6 @@ const RutasSistemaAdministrativo = () => {
           </RutaProtegida>
         }
       />
-      <Route path={RUTAS.SISTEMA_ADMINISTRATIVO.CONFIGURACION} element={<Configuracion />} />
       {/* Rutas del tablero */}
       <Route
         path={RUTAS.SISTEMA_ADMINISTRATIVO.TABLERO}
@@ -84,6 +83,10 @@ const RutasSistemaAdministrativo = () => {
           path={RUTAS.SISTEMA_ADMINISTRATIVO.PEDIDOS.CONSULTAR_PEDIDOS}
           element={<ListaPedidos />}
         />
+        <Route
+          path={RUTAS.SISTEMA_ADMINISTRATIVO.CONFIGURACION}
+          element={<ConfiguracionGeneral />}
+        />
       </Route>
       {/* Rutas fuera del tablero */}
       <Route
diff --git a/src/Utilidades/Constantes/rutas.js b/src/Utilidades/Constantes/rutas.js
index 5d0085ae..9cc67633 100644
--- a/src/Utilidades/Constantes/rutas.js
+++ b/src/Utilidades/Constantes/rutas.js
@@ -3,6 +3,7 @@ const BASE_PRODUCTOS = 'productos';
 const BASE_PEDIDOS = 'pedidos';
 const BASE_CUOTAS = 'cuotas';
 const BASE_EVENTOS = 'eventos';
+const BASE_CONFIGURACION = 'configuracion';
 
 const BASE_ADMIN = 'admin';
 const BASE_TABLERO = 'tablero';
@@ -40,7 +41,7 @@ export const RUTAS = {
       CONSULTAR_EVENTOS: `${BASE_EVENTOS}/consultar-lista`,
       CONSULTAR_EVENTO: `${BASE_EVENTOS}/consultar-evento`,
     },
-    CONFIGURACION: '/configuracion',
+    CONFIGURACION: `${BASE_CONFIGURACION}`,
     USUARIOS: {
       BASE: '/usuarios',
       CONSULTAR_ROLES: '/consultar-roles',
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index cb846f11..c6279b3a 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -9,6 +9,7 @@ const BASE_CUOTAS = `${BASE_URL}/api/cuotas`;
 const BASE_ROLES = `${BASE_URL}/api/roles`;
 const BASE_PEDIDOS = `${BASE_URL}/api/pedidos`;
 const BASE_EVENTOS = `${BASE_URL}/api/eventos`;
+const BASE_PAGOS = `${BASE_URL}/api/pagos`;
 
 export const RUTAS_API = {
   USUARIOS: {
@@ -39,6 +40,7 @@ export const RUTAS_API = {
     CONSULTAR_SISTEMA: `${BASE_CLIENTES}/consultar-sistema`,
     ELIMINAR_CLIENTE: `${BASE_CLIENTES}/eliminar`,
     CONSULTAR_CLIENTE: `${BASE_CLIENTES}/consultar-cliente`,
+    ACTUALIZAR_CLIENTE: `${BASE_CLIENTES}/actualizar-cliente`,
   },
   EMPLEADOS: {
     BASE: BASE_EMPLEADOS,
@@ -46,6 +48,7 @@ export const RUTAS_API = {
     CONSULTAR_GRUPOS: `${BASE_EMPLEADOS}/consultar-grupo`,
     ELIMINAR_EMPLEADO: `${BASE_EMPLEADOS}/eliminar`,
     ELIMINAR_GRUPO: `${BASE_EMPLEADOS}/eliminar-grupo`,
+    LEER_GRUPO: `${BASE_EMPLEADOS}/leer-grupo`,
   },
   CUOTAS: {
     BASE: BASE_CUOTAS,
@@ -71,4 +74,9 @@ export const RUTAS_API = {
     ELIMINAR_EVENTO: `${BASE_EVENTOS}/eliminar`,
     CONSULTAR_EVENTO: `${BASE_EVENTOS}/consultar-evento`,
   },
+  PAGOS: {
+    BASE: BASE_PAGOS,
+    CONSULTAR_LISTA: `${BASE_PAGOS}/consultar-lista`,
+    ACTUALIZAR_LISTA: `${BASE_PAGOS}/actualizar`,
+  },
 };
diff --git a/src/Vistas/Componentes/Moleculas/ClienteInfo.jsx b/src/Vistas/Componentes/Moleculas/ClienteInfo.jsx
deleted file mode 100644
index b31ca6e7..00000000
--- a/src/Vistas/Componentes/Moleculas/ClienteInfo.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Grid, Box, useTheme } from '@mui/material';
-import Texto from '@Atomos/Texto';
-import Icono from '@Atomos/Icono';
-import { tokens } from '@SRC/theme';
-
-const InfoCliente = ({
-  idCliente,
-  nombreLegal,
-  nombreVisible,
-  empleados,
-  usuariosAsignados,
-  imagenURL,
-}) => {
-  const theme = useTheme();
-  const colores = tokens(theme.palette.mode);
-  return (
-    <Box>
-      <Grid container spacing={6} mb={4}>
-        {/* Información principal */}
-        <Grid item xs={12} sm={6}>
-          <Texto gutterBottom mb={2.5}>
-            <strong>INFORMACIÓN</strong>{' '}
-          </Texto>
-          <Texto gutterBottom mb={4}>
-            ID de Cliente:{' '}
-            <a style={{ color: colores.texto[4], fontWeight: 500, textDecoration: 'none' }}>
-              {idCliente}
-            </a>
-          </Texto>
-          <Texto gutterBottom mb={4}>
-            Nombre Legal:{' '}
-            <a style={{ color: colores.texto[4], textDecoration: 'none' }}>{nombreLegal}</a>
-          </Texto>
-          <Texto gutterBottom>
-            Nombre visible: <span style={{ color: colores.texto[4] }}>{nombreVisible}</span>
-          </Texto>
-        </Grid>
-
-        {/* Información adicional */}
-        <Grid item xs={12} sm={6}>
-          <Texto gutterBottom mb={2.5}>
-            <strong>INFORMACIÓN ADICIONAL</strong>{' '}
-          </Texto>
-          <Texto gutterBottom mb={4}>
-            Usuarios asignados:{' '}
-            <a style={{ color: colores.texto[4], textDecoration: 'none' }}>{usuariosAsignados}</a>
-          </Texto>
-          <Texto gutterBottom mb={4}>
-            Empleados:{' '}
-            <a style={{ color: colores.texto[4], textDecoration: 'none' }}>{empleados}</a>
-          </Texto>
-        </Grid>
-      </Grid>
-
-      {/* Previsualización imagen */}
-      <Texto variant='subtitle1' sx={{ fontWeight: 'bold', mb: 2 }}>
-        PREVISUALIZAR IMAGEN
-      </Texto>
-      <Box
-        sx={{
-          maxWidth: '240px',
-          height: '120px',
-          borderRadius: 2,
-          overflow: 'hidden',
-          border: '1px solid #ccc',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          mb: 4,
-          position: 'relative',
-        }}
-      >
-        <img
-          src={imagenURL}
-          alt='Previsualización'
-          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-        />
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: colores.acciones[3],
-          }}
-        />
-        {imagenURL && (
-          <Icono
-            nombre='ImageOutlined'
-            size='large'
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-              color: 'white',
-            }}
-          />
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-InfoCliente.propTypes = {
-  idCliente: PropTypes.string.isRequired,
-  nombreLegal: PropTypes.string.isRequired,
-  nombreVisible: PropTypes.string.isRequired,
-  empleados: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  usuariosAsignados: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  imagenURL: PropTypes.string,
-};
-
-export default InfoCliente;
diff --git a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
new file mode 100644
index 00000000..87afe07f
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Texto from '@Atomos/Texto';
+import { Grid, Box, useTheme } from '@mui/material';
+import { tokens } from '@SRC/theme';
+
+const CuotasInfo = ({
+  nombre,
+  periodoRenovacion,
+  renovacionHabilitada,
+  descripcion,
+  ultimaActualizacion,
+}) => {
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+
+  return (
+    <Box>
+      <Grid container spacing={6} mb={4}>
+        <Grid item xs={12} sm={6}>
+          <Box display='flex' alignItems='center' gap={2} mb={2}>
+            <Texto variant='h6' gutterBottom>
+              <strong>Información de la Cuota</strong>
+            </Texto>
+          </Box>
+          <Texto gutterBottom sx={{ mb: 2, pb: 1 }}>
+            <strong>Nombre:</strong>{' '}
+            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
+              {nombre || 'No especificado'}
+            </span>
+          </Texto>
+          <Texto gutterBottom sx={{ mb: 2 }}>
+            <strong>Descripción:</strong>{' '}
+            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
+              {descripcion || 'Sin descripción'}
+            </span>
+          </Texto>
+          <Texto gutterBottom sx={{ mb: 2 }}>
+            <strong>Periodo de Renovación:</strong>{' '}
+            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
+              {periodoRenovacion ?? 'No especificado'}
+            </span>
+          </Texto>
+          <Texto gutterBottom sx={{ mb: 2 }}>
+            <strong>Renovación Habilitada:</strong>{' '}
+            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
+              {renovacionHabilitada === 1 || renovacionHabilitada === true ? 'Sí' : 'No'}
+            </span>
+          </Texto>
+          <Texto gutterBottom sx={{ mb: 2 }}>
+            <strong>Última Actualización:</strong>{' '}
+            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
+              {ultimaActualizacion ? new Date(ultimaActualizacion).toLocaleString() : 'N/A'}
+            </span>
+          </Texto>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+CuotasInfo.propTypes = {
+  nombre: PropTypes.string,
+  periodoRenovacion: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renovacionHabilitada: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  descripcion: PropTypes.string,
+  ultimaActualizacion: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default CuotasInfo;
diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfo.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfo.jsx
new file mode 100644
index 00000000..d1c65ec5
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfo.jsx
@@ -0,0 +1,95 @@
+import { Box, Grid, useTheme } from '@mui/material';
+import Texto from '@Atomos/Texto';
+import Chip from '@Atomos/Chip';
+import { tokens } from '@SRC/theme';
+import Tabla from '@Organismos/Tabla';
+
+// RF[23] Lee grupo de empleados -https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23
+
+const InfoGrupoEmpleados = ({ descripcion, setsProductos, empleados }) => {
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+
+  // Columnas para la tabla
+  const columnas = [
+    { field: 'nombreCompleto', headerName: 'Nombre del Empleado', flex: 0.9 },
+    { field: 'correoElectronico', headerName: 'Correo Electrónico', flex: 1 },
+    { field: 'areaTrabajo', headerName: 'Área de Trabajo', flex: 0.85 },
+  ];
+
+  // Generación de filas desde el arreglo de empleados
+  const filas = empleados.map((empleado, index) => {
+    const [nombreCompleto, correoElectronico, areaTrabajo] = empleado.split(' | ');
+    return {
+      id: index + 1,
+      nombreCompleto,
+      correoElectronico,
+      areaTrabajo,
+    };
+  });
+
+  return (
+    <Box
+      p={3}
+      sx={{
+        borderRadius: '10px',
+        maxWidth: '600px',
+      }}
+    >
+      <Grid container spacing={2}>
+        {/* Descripción */}
+        <Grid item xs={12}>
+          <Texto variant='h6' sx={{ color: colores.texto[1] }}>
+            Descripción:
+          </Texto>
+          <Texto variant='body2' sx={{ color: 'text.secondary' }}>
+            {descripcion || 'No especificada'}
+          </Texto>
+        </Grid>
+
+        {/* Sets de Productos y Empleados */}
+        <Grid item xs={12}>
+          <Texto variant='h6' sx={{ color: colores.texto[1] }}>
+            Sets de Productos:
+          </Texto>
+          <Box display='flex' gap={1} flexWrap='wrap' mb={2}>
+            {setsProductos?.length ? (
+              setsProductos.map((set, index) => (
+                <Chip
+                  key={index}
+                  label={set}
+                  sx={{
+                    borderRadius: '16px',
+                    backgroundColor: colores.primario[2],
+                    color: colores.primario[4],
+                  }}
+                />
+              ))
+            ) : (
+              <Texto variant='body1' sx={{ color: colores.texto[4] }}>
+                No especificada
+              </Texto>
+            )}
+          </Box>
+        </Grid>
+
+        <Grid item xs={12}>
+          <Texto variant='h6' sx={{ color: colores.texto[1] }}>
+            Empleados:
+          </Texto>
+          <Box width={'700px'} mt={2}>
+            {filas.length > 0 ? (
+              <Tabla columns={columnas} rows={filas} pageSize={3} />
+            ) : (
+              <Texto variant='body1' sx={{ color: colores.texto[4] }}>
+                No especificada
+              </Texto>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default InfoGrupoEmpleados;
diff --git a/src/Vistas/Componentes/Moleculas/InfoCliente.jsx b/src/Vistas/Componentes/Moleculas/InfoCliente.jsx
new file mode 100644
index 00000000..0f745653
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/InfoCliente.jsx
@@ -0,0 +1,267 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Box, useTheme, Button, CircularProgress } from '@mui/material';
+import Texto from '@Atomos/Texto';
+import Icono from '@Atomos/Icono';
+import CampoTexto from '@Atomos/CampoTexto';
+import { tokens } from '@SRC/theme';
+
+const InfoCliente = ({
+  modoEdicion = false,
+  idCliente,
+  nombreLegal,
+  nombreVisible,
+  empleados,
+  usuariosAsignados,
+  urlImagen,
+  onChange,
+  onImageChange,
+  imagenSubiendo = false,
+}) => {
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+  const fileInputRef = useRef(null);
+  const MAX_LENGTH = 100;
+
+  const handleFileSelect = () => {
+    fileInputRef.current.click();
+  };
+  const handleFileChange = (evento) => {
+    const file = evento.target.files[0];
+    if (!file) return;
+
+    // Verificar que sea un archivo JPG o JPEG
+    const validJpgTypes = ['image/jpeg', 'image/jpg'];
+    if (!validJpgTypes.includes(file.type.toLowerCase())) {
+      if (onImageChange) {
+        onImageChange({
+          error: 'Solo se permiten imágenes en formato JPG o JPEG.',
+        });
+      }
+      evento.target.value = ''; // Limpiar el input para permitir seleccionar el mismo archivo nuevamente
+      return;
+    }
+
+    // Verificar el tamaño del archivo
+    const maxSize = 4 * 1024 * 1024;
+    if (file.size > maxSize) {
+      if (onImageChange) {
+        onImageChange({
+          error: 'La imagen es demasiado grande. El tamaño máximo permitido es 4MB.',
+        });
+      }
+      evento.target.value = ''; // Limpiar el input para permitir seleccionar el mismo archivo nuevamente
+      return;
+    }
+
+    if (onImageChange) {
+      const preview = URL.createObjectURL(file);
+
+      onImageChange({
+        file,
+        preview,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+      });
+    }
+  };
+  return (
+    <Box>
+      <Grid container spacing={6} mb={4}>
+        {/* Información principal */}
+        <Grid>
+          <Texto gutterBottom mb={2.5}>
+            <strong>INFORMACIÓN</strong>{' '}
+          </Texto>
+
+          {modoEdicion ? (
+            <Box sx={{ maxWidth: 325 }}>
+              <CampoTexto
+                label='ID de Cliente'
+                name='idCliente'
+                value={idCliente}
+                onChange={onChange}
+                type='text'
+                fullWidth
+                required
+                disabled={true}
+                sx={{ mb: 4 }}
+              />
+              <CampoTexto
+                label='Nombre Legal'
+                name='nombreLegal'
+                value={nombreLegal || ''}
+                onChange={onChange}
+                type='text'
+                fullWidth
+                required
+                inputProps={{ maxLength: MAX_LENGTH }}
+                helperText={`${(nombreLegal || '').length}/${MAX_LENGTH} caracteres`}
+                sx={{ mb: 4 }}
+              />
+              <CampoTexto
+                label='Nombre Visible'
+                name='nombreVisible'
+                value={nombreVisible || ''}
+                onChange={onChange}
+                type='text'
+                fullWidth
+                required
+                inputProps={{ maxLength: MAX_LENGTH }}
+                helperText={`${(nombreVisible || '').length}/${MAX_LENGTH} caracteres`}
+                sx={{ mb: 4 }}
+              />
+            </Box>
+          ) : (
+            <>
+              <Texto gutterBottom mb={4}>
+                ID de Cliente:{' '}
+                <a style={{ color: colores.texto[4], fontWeight: 500, textDecoration: 'none' }}>
+                  {idCliente}
+                </a>
+              </Texto>
+              <Texto gutterBottom mb={4}>
+                Nombre Legal:{' '}
+                <a style={{ color: colores.texto[4], textDecoration: 'none' }}>{nombreLegal}</a>
+              </Texto>
+              <Texto gutterBottom>
+                Nombre visible: <span style={{ color: colores.texto[4] }}>{nombreVisible}</span>
+              </Texto>
+            </>
+          )}
+        </Grid>
+
+        {/* Información adicional (siempre no editable) */}
+        <Grid>
+          <Texto gutterBottom mb={2.5}>
+            <strong>INFORMACIÓN ADICIONAL</strong>{' '}
+          </Texto>
+
+          <Texto gutterBottom mb={4}>
+            Usuarios asignados:{' '}
+            <a style={{ color: colores.texto[4], textDecoration: 'none' }}>{usuariosAsignados}</a>
+          </Texto>
+          <Texto gutterBottom mb={4}>
+            Empleados:{' '}
+            <a style={{ color: colores.texto[4], textDecoration: 'none' }}>{empleados}</a>
+          </Texto>
+        </Grid>
+      </Grid>
+
+      {/* Previsualización imagen */}
+      <Texto variant='subtitle1' sx={{ fontWeight: 'bold', mb: 2 }}>
+        PREVISUALIZAR IMAGEN
+      </Texto>
+      <Box
+        sx={{
+          maxWidth: '240px',
+          height: '120px',
+          borderRadius: 2,
+          overflow: 'hidden',
+          border: '1px solid #ccc',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          mb: 1,
+          position: 'relative',
+        }}
+      >
+        <img
+          src={urlImagen}
+          alt='Previsualización'
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: urlImagen ? 'block' : 'none',
+          }}
+        />
+        {imagenSubiendo && (
+          <CircularProgress
+            size={40}
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              zIndex: 2,
+            }}
+          />
+        )}
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: !urlImagen ? colores.acciones[3] : 'transparent',
+          }}
+        />
+        {!urlImagen && (
+          <Icono
+            nombre='ImageOutlined'
+            size='large'
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              color: 'white',
+            }}
+          />
+        )}
+      </Box>
+
+      {modoEdicion && (
+        <>
+          <input
+            type='file'
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept='image/jpeg,image/jpg'
+            style={{ display: 'none' }}
+          />
+          <Button
+            variant='outlined'
+            size='small'
+            onClick={handleFileSelect}
+            startIcon={<Icono nombre='Upload' />}
+            disabled={imagenSubiendo}
+            sx={{ mb: 4 }}
+          >
+            {imagenSubiendo ? 'Subiendo...' : 'Subir imagen JPG'}
+          </Button>
+          <Texto
+            variant='caption'
+            display='block'
+            sx={{ mb: 4, color: theme.palette.text.secondary }}
+          >
+            Solo se permiten imágenes en formato JPG/JPEG, máximo 5MB.
+          </Texto>
+        </>
+      )}
+
+      {/* {imagenError && (
+        <Alerta tipo='error' mensaje={imagenError} cerrable sx={{ mb: 2 }} duracion={2500}></Alerta>
+      )} */}
+    </Box>
+  );
+};
+
+InfoCliente.propTypes = {
+  modoEdicion: PropTypes.bool,
+  idCliente: PropTypes.string.isRequired,
+  nombreLegal: PropTypes.string.isRequired,
+  nombreVisible: PropTypes.string.isRequired,
+  empleados: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  usuariosAsignados: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  urlImagen: PropTypes.string,
+  onChange: PropTypes.func,
+  onImageChange: PropTypes.func,
+  imagenSubiendo: PropTypes.bool,
+  imagenError: PropTypes.string,
+};
+
+export default InfoCliente;
diff --git a/src/Vistas/Componentes/Moleculas/UsuarioInfo.jsx b/src/Vistas/Componentes/Moleculas/InfoUsuario.jsx
similarity index 100%
rename from src/Vistas/Componentes/Moleculas/UsuarioInfo.jsx
rename to src/Vistas/Componentes/Moleculas/InfoUsuario.jsx
diff --git a/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx b/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
new file mode 100644
index 00000000..18aa7a06
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
@@ -0,0 +1,78 @@
+// RF48 - Super Administrador, Cliente Lee Categoria de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/rf48/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Divider } from '@mui/material';
+import Texto from '@Atomos/Texto';
+
+/**
+ * Componente para mostrar información de un set de productos
+ */
+const InfoSetProductos = ({ nombre, descripcion, productos, grupos }) => {
+  // Normaliza a arreglo si vienen como string
+  const productosList
+    = typeof productos === 'string'
+      ? productos.split(',').map((prod) => prod.trim())
+      : productos || [];
+
+  const gruposList
+    = typeof grupos === 'string' ? grupos.split(',').map((grp) => grp.trim()) : grupos || [];
+
+  return (
+    <Box>
+      <Texto variant='h6' sx={{ fontWeight: 'bold', mb: 1 }}>
+        {nombre || ''}
+      </Texto>
+
+      {descripcion && (
+        <Texto variant='body2' sx={{ mb: 4, color: 'text.secondary' }}>
+          {descripcion}
+        </Texto>
+      )}
+
+      <Box sx={{ mb: 4 }}>
+        <Texto variant='h6' gutterBottom sx={{ mb: 2 }}>
+          <strong>Productos</strong>
+        </Texto>
+
+        {productosList.map((producto, idx) => (
+          <Box key={idx}>
+            <Texto variant='body2' sx={{ py: 1 }}>
+              {producto}
+            </Texto>
+            <Divider />
+          </Box>
+        ))}
+      </Box>
+
+      <Box sx={{ mb: 6 }}>
+        <Texto variant='h6' gutterBottom sx={{ mb: 2 }}>
+          <strong>Grupos de empleados asignados</strong>
+        </Texto>
+        {gruposList.map((grupo, idx) => (
+          <Box key={idx}>
+            <Texto variant='body2' sx={{ py: 1 }}>
+              {grupo}
+            </Texto>
+            <Divider />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+InfoSetProductos.propTypes = {
+  nombre: PropTypes.string,
+  descripcion: PropTypes.string,
+  productos: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+  grupos: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+};
+
+InfoSetProductos.defaultProps = {
+  nombre: '',
+  descripcion: '',
+  productos: [],
+  grupos: [],
+};
+
+export default InfoSetProductos;
diff --git a/src/Vistas/Componentes/Moleculas/TarjetaConImagen.jsx b/src/Vistas/Componentes/Moleculas/TarjetaConImagen.jsx
index 4616b5ee..737ff7b9 100644
--- a/src/Vistas/Componentes/Moleculas/TarjetaConImagen.jsx
+++ b/src/Vistas/Componentes/Moleculas/TarjetaConImagen.jsx
@@ -27,6 +27,8 @@ const TarjetaConImagen = ({
   bordeRedondeado = '10px',
   alClicImagen,
   alClicIcono,
+  truncarTitulo = true,
+  maxLineasTitulo = 2,
 }) => (
   <Contenedor
     elevation={elevacion}
@@ -65,9 +67,24 @@ const TarjetaConImagen = ({
     </Box>
 
     <Box sx={{ padding: 2 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
         {titulo && (
-          <Texto variant='h6' gutterBottom sx={{ flexGrow: 1 }}>
+          <Texto
+            variant='h6'
+            gutterBottom
+            sx={{
+              flexGrow: 1,
+              overflow: 'hidden',
+              textOverflow: truncarTitulo ? 'ellipsis' : 'clip',
+              display: '-webkit-box',
+              WebkitLineClamp: maxLineasTitulo,
+              WebkitBoxOrient: 'vertical',
+              wordBreak: 'break-word',
+              lineHeight: '1.2em',
+              maxHeight: `${1.2 * maxLineasTitulo}em`,
+            }}
+            tooltip={titulo} // Para mostrar el título completo al hacer hover
+          >
             {titulo}
           </Texto>
         )}
@@ -80,6 +97,7 @@ const TarjetaConImagen = ({
             clickable={iconoClickeable}
             tooltip={tooltipIcono}
             onClick={alClicIcono}
+            sx={{ flexShrink: 0, ml: 1 }}
           />
         )}
       </Box>
@@ -109,6 +127,8 @@ TarjetaConImagen.propTypes = {
   bordeRedondeado: PropTypes.string,
   alClicImagen: PropTypes.func,
   alClicIcono: PropTypes.func,
+  truncarTitulo: PropTypes.bool,
+  maxLineasTitulo: PropTypes.number,
 };
 
 TarjetaConImagen.defaultProps = {
@@ -120,6 +140,8 @@ TarjetaConImagen.defaultProps = {
   ajuste: 'cover',
   clickeableImagen: false,
   estiloImagen: {},
+  truncarTitulo: true,
+  maxLineasTitulo: 2,
 };
 
 export default TarjetaConImagen;
diff --git a/src/Vistas/Componentes/Organismos/Clientes/AgregarClienteTarjeta.jsx b/src/Vistas/Componentes/Organismos/Clientes/AgregarClienteTarjeta.jsx
new file mode 100644
index 00000000..b92b2621
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Clientes/AgregarClienteTarjeta.jsx
@@ -0,0 +1,47 @@
+import { Box } from '@mui/material';
+import Icono from '@Atomos/Icono';
+import Texto from '@Atomos/Texto';
+
+const estiloTarjeta = {
+  minWidth: { xs: '100%', sm: '250px', md: '300px' },
+  maxWidth: '100%',
+  flexGrow: 1,
+};
+
+const estiloTarjetaAgregar = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: '2px dashed rgba(15, 140, 241, 0.18)',
+  backgroundColor: 'rgba(15, 140, 241, 0.18)',
+  color: '#1976D2',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease-in-out',
+  '&:hover': {
+    backgroundColor: 'rgba(15, 139, 241, 0.38)',
+    transform: 'scale(1.03)',
+  },
+};
+
+export const AgregarClienteTarjeta = () => {
+  const handleAgregarCliente = () => {
+    console.log('Agregar cliente');
+    // Aquí iría la lógica para agregar un cliente
+  };
+
+  return (
+    <Box
+      onClick={handleAgregarCliente}
+      sx={{ ...estiloTarjeta, ...estiloTarjetaAgregar }}
+      role='button'
+      tabIndex={0}
+    >
+      <Icono nombre='Add' size='large' />
+      <Texto variant='button' sx={{ mt: 1 }}>
+        Agregar cliente
+      </Texto>
+    </Box>
+  );
+};
diff --git a/src/Vistas/Componentes/Organismos/Clientes/ClienteTarjeta.jsx b/src/Vistas/Componentes/Organismos/Clientes/ClienteTarjeta.jsx
new file mode 100644
index 00000000..f31bb2b9
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Clientes/ClienteTarjeta.jsx
@@ -0,0 +1,26 @@
+import TarjetaConImagen from '@Moleculas/TarjetaConImagen';
+
+export const ClienteTarjeta = ({ cliente, modoEliminacion, onClienteClick, onIconoClick }) => {
+  const nombreCliente = cliente.nombreComercial || cliente.nombreVisible || 'Cliente sin nombre';
+
+  return (
+    <TarjetaConImagen
+      src={cliente.urlImagen}
+      alt={nombreCliente}
+      titulo={nombreCliente}
+      nombreIcono={modoEliminacion ? 'Delete' : 'Info'}
+      varianteIcono='outlined'
+      tamanoIcono='large'
+      colorIcono={modoEliminacion ? 'error' : 'action'}
+      iconoClickeable={true}
+      ajuste='contain'
+      anchoImagen='100%'
+      alturaImagen='250px'
+      tooltipIcono={modoEliminacion ? 'Eliminar cliente' : `Ver información de ${nombreCliente}`}
+      clickeableImagen={true}
+      elevacion={3}
+      alClicImagen={() => onClienteClick(cliente.idCliente, cliente.urlImagen, nombreCliente)}
+      alClicIcono={() => onIconoClick(cliente, modoEliminacion)}
+    />
+  );
+};
diff --git a/src/Vistas/Componentes/Organismos/Clientes/ClientesLista.jsx b/src/Vistas/Componentes/Organismos/Clientes/ClientesLista.jsx
new file mode 100644
index 00000000..59f13fff
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Clientes/ClientesLista.jsx
@@ -0,0 +1,37 @@
+import { Box } from '@mui/material';
+import { ClienteTarjeta } from '@Organismos/Clientes/ClienteTarjeta';
+
+const estiloTarjeta = {
+  minWidth: { xs: '100%', sm: '250px', md: '300px' },
+  maxWidth: '100%',
+  flexGrow: 1,
+};
+
+export const ClientesLista = ({
+  clientes,
+  modoEliminacion,
+  onClienteClick,
+  onIconoClick,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
+}) => {
+  return clientes.map((cliente) => (
+    <Box
+      key={cliente.idCliente}
+      sx={estiloTarjeta}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+    >
+      <ClienteTarjeta
+        cliente={cliente}
+        modoEliminacion={modoEliminacion}
+        onClienteClick={onClienteClick}
+        onIconoClick={onIconoClick}
+      />
+    </Box>
+  ));
+};
diff --git a/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx b/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx
new file mode 100644
index 00000000..a72a6597
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx
@@ -0,0 +1,103 @@
+import ModalCliente from '@Organismos/Clientes/ModalLeerCliente';
+import InfoCliente from '@Moleculas/InfoCliente';
+import Texto from '@Atomos/Texto';
+import PropTypes from 'prop-types';
+import { useAuth } from '@Hooks/AuthProvider';
+import { PERMISOS } from '@Constantes/permisos';
+import { Alert, Box } from '@mui/material'; // Añadir Box
+
+export const DetalleClienteModal = ({
+  open,
+  cliente,
+  modoEdicion,
+  cargando,
+  colores,
+  onClose,
+  onToggleEdicion,
+  onChange,
+  onImageChange,
+  imagenSubiendo,
+  imagenError,
+}) => {
+  const { usuario } = useAuth();
+
+  // Verificar si hay campos vacíos para deshabilitar el botón
+  const camposInvalidos
+    = modoEdicion && cliente ? !cliente.nombreLegal?.trim() || !cliente.nombreVisible?.trim() : false;
+
+  return (
+    open && (
+      <ModalCliente
+        open={open}
+        onClose={onClose}
+        onConfirm={onClose}
+        titulo={cliente?.nombreVisible || 'Cargando...'}
+        tituloVariant='h4'
+        botones={[
+          {
+            label: modoEdicion ? 'GUARDAR' : 'EDITAR',
+            variant: 'contained',
+            color: 'error',
+            backgroundColor: colores.altertex[1],
+            onClick: onToggleEdicion,
+            // Deshabilitar botón si campos vacíos, hay error o no se tienen permisos
+            disabled:
+              !cliente
+              || !usuario?.permisos?.includes(PERMISOS.ACTUALIZAR_CLIENTE)
+              || !!imagenError
+              || camposInvalidos,
+          },
+          {
+            label: 'SALIR',
+            variant: 'outlined',
+            outlineColor: colores.primario[10],
+            onClick: onClose,
+          },
+        ]}
+        errorPanel={
+          imagenError && (
+            <Alert severity='error' sx={{ mt: 3, mb: 2 }}>
+              {imagenError}
+            </Alert>
+          )
+        }
+      >
+        {cargando ? (
+          <Texto>Cargando cliente...</Texto>
+        ) : cliente ? (
+          <InfoCliente
+            modoEdicion={modoEdicion}
+            idCliente={cliente?.idCliente}
+            nombreLegal={cliente?.nombreLegal}
+            nombreVisible={cliente?.nombreVisible}
+            empleados={cliente?.numeroEmpleados}
+            usuariosAsignados={cliente?.usuariosAsignados}
+            urlImagen={cliente?.urlImagen}
+            onChange={onChange}
+            onImageChange={onImageChange}
+            imagenSubiendo={imagenSubiendo}
+            imagenError={imagenError}
+          />
+        ) : (
+          <Texto>No se encontró información del cliente.</Texto>
+        )}
+      </ModalCliente>
+    )
+  );
+};
+
+DetalleClienteModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  cliente: PropTypes.object,
+  modoEdicion: PropTypes.bool.isRequired,
+  cargando: PropTypes.bool.isRequired,
+  colores: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onToggleEdicion: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onImageChange: PropTypes.func,
+  imagenSubiendo: PropTypes.bool,
+  imagenError: PropTypes.string,
+};
+
+export default DetalleClienteModal;
diff --git a/src/Vistas/Componentes/Organismos/Clientes/EliminarClientesModal.jsx b/src/Vistas/Componentes/Organismos/Clientes/EliminarClientesModal.jsx
new file mode 100644
index 00000000..a733b8f0
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Clientes/EliminarClientesModal.jsx
@@ -0,0 +1,44 @@
+import ModalFlotante from '@Organismos/ModalFlotante';
+import Alerta from '@Moleculas/Alerta';
+import Texto from '@Atomos/Texto';
+
+export const EliminarClienteModal = ({
+  open,
+  cliente,
+  onConfirm,
+  onCancel,
+  eliminacionExitosa,
+  errorEliminacion,
+  onCloseAlert,
+}) => {
+  return (
+    <>
+      <ModalFlotante
+        open={open}
+        onClose={onCancel}
+        onConfirm={onConfirm}
+        titulo={`¿Estás seguro de que deseas eliminar a ${cliente?.nombreComercial}?`}
+        confirmLabel='Confirmar'
+        cancelLabel='Cancelar'
+      >
+        <Texto>Esta acción no se puede deshacer.</Texto>
+      </ModalFlotante>
+
+      {errorEliminacion && (
+        <Alerta tipo='error' mensaje={errorEliminacion} icono cerrable centradoInferior />
+      )}
+
+      {eliminacionExitosa && (
+        <Alerta
+          tipo='success'
+          mensaje='Cliente eliminado exitosamente.'
+          icono
+          cerrable
+          centradoInferior
+          duracion={3000}
+          onClose={onCloseAlert}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/Vistas/Componentes/Organismos/ModalLeerCliente.jsx b/src/Vistas/Componentes/Organismos/Clientes/ModalLeerCliente.jsx
similarity index 92%
rename from src/Vistas/Componentes/Organismos/ModalLeerCliente.jsx
rename to src/Vistas/Componentes/Organismos/Clientes/ModalLeerCliente.jsx
index 1b5448ac..50cbcebe 100644
--- a/src/Vistas/Componentes/Organismos/ModalLeerCliente.jsx
+++ b/src/Vistas/Componentes/Organismos/Clientes/ModalLeerCliente.jsx
@@ -15,6 +15,7 @@ const ModalLeerCliente = ({
   cancelLabel = 'Cancelar',
   botones = null,
   children,
+  errorPanel = null, // Nuevo prop para el panel de error
 }) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
@@ -77,6 +78,9 @@ const ModalLeerCliente = ({
 
         {children}
 
+        {/* Panel de error arriba de los botones */}
+        {errorPanel}
+
         <GrupoBotones buttons={botones ?? defaultBotones} spacing={1} direction='row' align='end' />
       </Paper>
     </Modal>
@@ -93,6 +97,7 @@ ModalLeerCliente.propTypes = {
   cancelLabel: PropTypes.string,
   botones: PropTypes.array,
   children: PropTypes.node.isRequired,
+  errorPanel: PropTypes.node, // Nuevo prop
 };
 
 export default ModalLeerCliente;
diff --git a/src/Vistas/Componentes/Organismos/FormaCrearCuotaSet.jsx b/src/Vistas/Componentes/Organismos/Cuotas/FormaCrearCuotaSet.jsx
similarity index 94%
rename from src/Vistas/Componentes/Organismos/FormaCrearCuotaSet.jsx
rename to src/Vistas/Componentes/Organismos/Cuotas/FormaCrearCuotaSet.jsx
index febbce43..c8dd6226 100644
--- a/src/Vistas/Componentes/Organismos/FormaCrearCuotaSet.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/FormaCrearCuotaSet.jsx
@@ -4,6 +4,8 @@ import { useState, useEffect } from 'react';
 import obtenerProductos from '@Servicios/obtenerProductos';
 import ProductosModal from '@Organismos/ProductosModal';
 
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
 const columns = [
   { field: 'id', headerName: 'Id', width: 100 },
   { field: 'nombreProducto', headerName: 'Nombre', width: 220 },
diff --git a/src/Vistas/Componentes/Organismos/ModalCrearCuotaSet.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalCrearCuotaSet.jsx
similarity index 95%
rename from src/Vistas/Componentes/Organismos/ModalCrearCuotaSet.jsx
rename to src/Vistas/Componentes/Organismos/Cuotas/ModalCrearCuotaSet.jsx
index 96688e32..52254ec8 100644
--- a/src/Vistas/Componentes/Organismos/ModalCrearCuotaSet.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalCrearCuotaSet.jsx
@@ -4,6 +4,8 @@ import FormaCrearCuotaSet from '@Organismos/Formularios/FormaCrearCuotaSet';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import { RUTAS } from '@Constantes/rutas';
 
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
 /**
  * Modal para crear un nuevo set de cuotas.
  *
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCuotaSet.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCuotaSet.jsx
index f8529852..78982875 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCuotaSet.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCuotaSet.jsx
@@ -5,6 +5,8 @@ import obtenerProductos from '@Servicios/obtenerProductos';
 import ProductosModal from '@Organismos/ProductosModal';
 import { useAuth } from '@Hooks/AuthProvider';
 
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
 const columns = [
   { field: 'id', headerName: 'Id', width: 100 },
   { field: 'nombreProducto', headerName: 'Nombre', width: 220 },
diff --git a/src/Vistas/Componentes/Organismos/ModalFlotante.jsx b/src/Vistas/Componentes/Organismos/ModalFlotante.jsx
index 30a50223..be03191a 100644
--- a/src/Vistas/Componentes/Organismos/ModalFlotante.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalFlotante.jsx
@@ -15,6 +15,7 @@ const ModalFlotante = ({
   cancelLabel = 'Cancelar',
   botones = null,
   children,
+  customWidth,
 }) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
@@ -31,7 +32,7 @@ const ModalFlotante = ({
       variant: 'contained',
       onClick: onConfirm,
       color: 'error',
-      backgroundColor: colores.altertex[4],
+      backgroundColor: colores.altertex[1],
     },
   ];
 
@@ -60,7 +61,7 @@ const ModalFlotante = ({
           borderRadius: 2,
           padding: 3,
           outline: 'none',
-          width: 620,
+          width: customWidth || 620,
         }}
       >
         {titulo && (
@@ -87,6 +88,7 @@ ModalFlotante.propTypes = {
   cancelLabel: PropTypes.string,
   botones: PropTypes.array,
   children: PropTypes.node.isRequired,
+  customWidth: PropTypes.number,
 };
 
 export default ModalFlotante;
diff --git a/src/Vistas/Componentes/Organismos/TarjetaConfiguracionPagos.jsx b/src/Vistas/Componentes/Organismos/TarjetaConfiguracionPagos.jsx
new file mode 100644
index 00000000..404044f9
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/TarjetaConfiguracionPagos.jsx
@@ -0,0 +1,196 @@
+//RF[54] Actualiza Lista de Pagos - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF54]
+//RF[52] Consulta Lista de Pago - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF52]
+
+import Contenedor from '@Atomos/Contenedor';
+import Switch from '@Atomos/Switch';
+import Boton from '@Atomos/Boton';
+import { useEffect, useState } from 'react';
+import { useConsultarTipoPagos } from '@Hooks/Pagos/useConsultarTipoPagos';
+import { useActualizarTipoPago } from '@Hooks/Pagos/useActualizarTipoPago';
+import Alerta from '@Moleculas/Alerta';
+import { tokens } from '@SRC/theme';
+import { useTheme } from '@mui/material';
+
+const TarjetaConfiguracionPagos = () => {
+  const tema = useTheme();
+  const colores = tokens(tema.palette.mode);
+  const { tipoPagos, tipoPagosMapeado, cargando: cargandoConsulta } = useConsultarTipoPagos();
+  const { actualizar, cargando: cargandoActualizacion, error, mensaje } = useActualizarTipoPago();
+
+  const [creditoHabilitado, setCreditoHabilitado] = useState(false);
+  const [debitoHabilitado, setDebitoHabilitado] = useState(false);
+  const [puntosHabilitado, setPuntosHabilitado] = useState(false);
+
+  const [estadoInicial, setEstadoInicial] = useState({
+    credito: false,
+    debito: false,
+    puntos: false,
+  });
+
+  const [mostrarConfirmacion, setMostrarConfirmacion] = useState(false);
+  const [alerta, setAlerta] = useState(null);
+
+  // Objeto para mapear los tipos de pago internos a los nombres de la API
+  const tiposPagoMap = {
+    credito: 'Tarjeta de Crédito',
+    debito: 'Tarjeta de Débito',
+    puntos: 'Puntos',
+  };
+
+  useEffect(() => {
+    if (!cargandoConsulta && tipoPagos.length > 0) {
+      let credito = false;
+      let debito = false;
+      let puntos = false;
+
+      tipoPagos.forEach(({ metodo, habilitado }) => {
+        switch (metodo) {
+          case 'Tarjeta de Crédito':
+            setCreditoHabilitado(habilitado);
+            credito = habilitado;
+            break;
+          case 'Tarjeta de Débito':
+            setDebitoHabilitado(habilitado);
+            debito = habilitado;
+            break;
+          case 'Puntos':
+            setPuntosHabilitado(habilitado);
+            puntos = habilitado;
+            break;
+        }
+      });
+
+      setEstadoInicial({ credito, debito, puntos });
+    }
+  }, [tipoPagos, cargandoConsulta]);
+
+  // Monitor changes in mensaje or error from the hook to show alerts
+  useEffect(() => {
+    if (mensaje) {
+      setAlerta({ tipo: 'success', mensaje });
+    } else if (error) {
+      setAlerta({ tipo: 'error', mensaje: error });
+    }
+  }, [mensaje, error]);
+
+  const handleCambioSwitch = (tipo, nuevoEstado) => {
+    switch (tipo) {
+      case 'credito':
+        setCreditoHabilitado(nuevoEstado);
+        break;
+      case 'debito':
+        setDebitoHabilitado(nuevoEstado);
+        break;
+      case 'puntos':
+        setPuntosHabilitado(nuevoEstado);
+        break;
+    }
+    setMostrarConfirmacion(true);
+  };
+
+  const confirmarCambios = async () => {
+    // Clear any existing alert first
+    setAlerta(null);
+
+    // Obtener estado actual
+    const estadoActual = {
+      credito: creditoHabilitado,
+      debito: debitoHabilitado,
+      puntos: puntosHabilitado,
+    };
+
+    // Filtrar solo los métodos que cambiaron
+    const cambios = Object.keys(estadoActual)
+      .filter((tipo) => estadoActual[tipo] !== estadoInicial[tipo])
+      .map((tipo) => ({
+        id: tipoPagosMapeado[tiposPagoMap[tipo]]?.id,
+        metodo: tiposPagoMap[tipo],
+        habilitado: estadoActual[tipo],
+      }));
+
+    // Solo enviar si hay cambios
+    if (cambios.length > 0) {
+      await actualizar(cambios);
+
+      // Actualizar el estado inicial con los nuevos valores
+      setEstadoInicial({
+        credito: creditoHabilitado,
+        debito: debitoHabilitado,
+        puntos: puntosHabilitado,
+      });
+
+      // The alert will be shown via the useEffect that monitors mensaje and error
+    }
+
+    setMostrarConfirmacion(false);
+  };
+
+  const cancelarCambios = () => {
+    setCreditoHabilitado(estadoInicial.credito);
+    setDebitoHabilitado(estadoInicial.debito);
+    setPuntosHabilitado(estadoInicial.puntos);
+    setMostrarConfirmacion(false);
+  };
+
+  return (
+    <>
+      <Contenedor
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-evenly',
+          height: '100px',
+        }}
+      >
+        <Switch
+          label='Tarjeta de Crédito'
+          checked={creditoHabilitado}
+          onChange={(evento) => handleCambioSwitch('credito', evento.target.checked)}
+        />
+        <Switch
+          label='Tarjeta de Débito'
+          checked={debitoHabilitado}
+          onChange={(evento) => handleCambioSwitch('debito', evento.target.checked)}
+        />
+        <Switch
+          label='Puntos'
+          checked={puntosHabilitado}
+          onChange={(evento) => handleCambioSwitch('puntos', evento.target.checked)}
+        />
+      </Contenedor>
+
+      {mostrarConfirmacion && (
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '12px', marginTop: '15px' }}>
+          <Boton
+            variant='contained'
+            color='error'
+            backgroundColor={colores.altertex[1]}
+            label={cargandoActualizacion ? 'Guardando...' : 'Confirmar cambios'}
+            onClick={confirmarCambios}
+            disabled={cargandoActualizacion}
+          />
+          <Boton
+            variant='outlined'
+            label='Cancelar'
+            onClick={cancelarCambios}
+            disabled={cargandoActualizacion}
+            outlineColor={colores.primario[10]}
+          />
+        </div>
+      )}
+
+      {alerta && (
+        <Alerta
+          tipo={alerta.tipo}
+          mensaje={alerta.mensaje}
+          cerrable
+          duracion={2500}
+          centradoInferior
+          onClose={() => setAlerta(null)}
+        />
+      )}
+    </>
+  );
+};
+
+export default TarjetaConfiguracionPagos;
diff --git a/src/Vistas/Paginas/Clientes/ListaClientes.jsx b/src/Vistas/Paginas/Clientes/ListaClientes.jsx
index c1b77e10..01071606 100644
--- a/src/Vistas/Paginas/Clientes/ListaClientes.jsx
+++ b/src/Vistas/Paginas/Clientes/ListaClientes.jsx
@@ -1,128 +1,66 @@
+// ListaClientes.jsx
+// RF14 - Actualiza Cliente - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF14
+
 import { useNavigate } from 'react-router-dom';
 import { Box, useTheme } from '@mui/material';
 import { useAuth } from '@Hooks/AuthProvider';
-import Icono from '@Atomos/Icono';
-import Cargador from '@Atomos/Cargador';
 import Texto from '@Atomos/Texto';
-import Alerta from '@Moleculas/Alerta';
+import Cargador from '@Atomos/Cargador';
 import NavegadorAdministrador from '@Organismos/NavegadorAdministrador';
-import TarjetaConImagen from '@Moleculas/TarjetaConImagen';
-import ModalFlotante from '@Organismos/ModalFlotante';
-import ModalCliente from '@Organismos/ModalLeerCliente';
-import InfoCliente from '@Moleculas/ClienteInfo';
-import Cookies from 'js-cookie';
 import { tokens } from '@SRC/theme';
 import { RUTAS } from '@Utilidades/Constantes/rutas';
-import { useConsultarClientes } from '@Hooks/Clientes/useConsultarClientes';
-import { useSeleccionarCliente } from '@Hooks/Clientes/useSeleccionarCliente';
-import { useEliminarCliente } from '@Hooks/Clientes/useEliminarCliente';
-import { useClientePorId } from '@Hooks/Clientes/useLeerCliente';
-import { useState, useEffect, useRef } from 'react';
+import { useClientes } from '@Hooks/Clientes/useClientes';
+import { ClientesLista } from '@Organismos/Clientes/ClientesLista';
+import { AgregarClienteTarjeta } from '@Organismos/Clientes/AgregarClienteTarjeta';
+import { EliminarClienteModal } from '@Organismos/Clientes/EliminarClientesModal';
+import { DetalleClienteModal } from '@Organismos/Clientes/DetalleClienteModal';
 
+// Estilos
 const estiloImagenLogo = { marginRight: '1rem' };
-const estiloTarjeta = {
-  minWidth: { xs: '100%', sm: '250px', md: '300px' },
-  maxWidth: '100%',
-  flexGrow: 1,
-};
-
 const estiloTitulo = {
   marginTop: { xs: '2rem', sm: '4rem', md: '6rem' },
   fontSize: { xs: '2rem', sm: '2.5rem', md: '3rem', lg: '3.5rem' },
   textTransform: 'uppercase',
 };
-
 const estiloSubtitulo = {
   marginBottom: { xs: '1.5rem', sm: '2rem', md: '2.5rem' },
   fontSize: { xs: '1.2rem', sm: '1.5rem', md: '1.8rem' },
   fontWeight: 500,
 };
 
-const estiloTarjetaAgregar = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  border: '2px dashed rgba(15, 140, 241, 0.18)',
-  backgroundColor: 'rgba(15, 140, 241, 0.18)',
-  color: '#1976D2',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  transition: 'all 0.2s ease-in-out',
-  '&:hover': {
-    backgroundColor: 'rgba(15, 139, 241, 0.38)',
-    transform: 'scale(1.03)',
-  },
-};
-
 const ListaClientes = () => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
   const navigate = useNavigate();
   const { cerrarSesion } = useAuth();
-  const { clientes: clientesOriginales, cargando, error } = useConsultarClientes();
-  const [clientes, setClientes] = useState([]);
-  const { seleccionarCliente } = useSeleccionarCliente();
-  const [idEliminar, setIdEliminar] = useState(null);
-  const [eliminacionExitosa, setEliminacionExitosa] = useState(false);
-  const { error: errorEliminacion } = useEliminarCliente(
-    idEliminar,
-    setEliminacionExitosa,
-    (idClienteEliminado) => {
-      setClientes((prev) => prev.filter((cliente) => cliente.idCliente !== idClienteEliminado));
-      Cookies.remove('imagenClienteSeleccionado');
-      Cookies.remove('nombreClienteSeleccionado');
-      seleccionarCliente(null);
-      setIdEliminar(null);
-    }
-  );
-
-  const [modoEliminacion, setModoEliminacion] = useState(false);
-  const tiempoPresionado = useRef(null);
-  const ignorarPrimerClick = useRef(false);
-  const [clienteEliminar, setClienteEliminar] = useState(null);
-  const [modalAbierto, setModalAbierto] = useState(false);
 
-  const manejarInicioPresionado = () => {
-    tiempoPresionado.current = setTimeout(() => {
-      setModoEliminacion(true);
-      ignorarPrimerClick.current = true;
-    }, 800);
-  };
-
-  const manejarFinPresionado = () => {
-    if (!modoEliminacion) {
-      clearTimeout(tiempoPresionado.current);
-    }
-  };
-
-  useEffect(() => {
-    const manejarClickFuera = () => {
-      if (ignorarPrimerClick.current) {
-        ignorarPrimerClick.current = false;
-        return;
-      }
-      if (modoEliminacion) {
-        setModoEliminacion(false);
-      }
-    };
-    document.addEventListener('click', manejarClickFuera);
-    return () => document.removeEventListener('click', manejarClickFuera);
-  }, [modoEliminacion]);
-
-  useEffect(() => {
-    if (clientesOriginales) {
-      setClientes(clientesOriginales);
-    }
-  }, [clientesOriginales]);
-
-  const [idClienteDetalle, setIdClienteDetalle] = useState(null);
-  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
   const {
-    cliente,
-    cargando: cargandoDetalle,
-    error: errorDetalle,
-  } = useClientePorId(modalDetalleAbierto ? idClienteDetalle : null);
+    clientes,
+    cargando,
+    error,
+    modoEliminacion,
+    clienteEliminar,
+    modalEliminacionAbierto,
+    idClienteDetalle,
+    modalDetalleAbierto,
+    clienteEditado,
+    modoEdicion,
+    eliminacionExitosa,
+    errorEliminacion,
+    handleClienteClick,
+    handleIconoClick,
+    handleInicioPresionado,
+    handleFinPresionado,
+    confirmarEliminacion,
+    cancelarEliminacion,
+    cerrarModalDetalle,
+    toggleModoEdicion,
+    handleClienteChange,
+    cerrarAlertaExito,
+    handleImagenChange,
+    imagenSubiendo,
+    imagenError,
+  } = useClientes();
 
   const manejarCerrarSesion = async () => {
     await cerrarSesion();
@@ -154,89 +92,10 @@ const ListaClientes = () => {
       variant: 'contained',
       color: 'error',
       size: 'large',
-      onClick: () => manejarCerrarSesion(),
+      onClick: manejarCerrarSesion,
     },
   ];
 
-  const handleClickCliente = (clienteId, urlImagen, nombreComercial) => {
-    const idCliente = parseInt(clienteId, 10);
-    seleccionarCliente(idCliente);
-    Cookies.set('imagenClienteSeleccionado', urlImagen, { expires: 1 });
-    Cookies.set('nombreClienteSeleccionado', nombreComercial, { expires: 1 });
-  };
-
-  const abrirModalEliminar = (cliente) => {
-    setClienteEliminar(cliente);
-    setModalAbierto(true);
-  };
-
-  const confirmarEliminacion = () => {
-    if (!clienteEliminar) return;
-    setIdEliminar(clienteEliminar.idCliente);
-    setModalAbierto(false);
-    setClienteEliminar(null);
-  };
-
-  const cancelarEliminacion = () => {
-    setModalAbierto(false);
-    setClienteEliminar(null);
-  };
-
-  const renderTarjetaCliente = (cliente) => (
-    <Box
-      key={cliente.idCliente}
-      sx={estiloTarjeta}
-      onMouseDown={manejarInicioPresionado}
-      onMouseUp={manejarFinPresionado}
-      onTouchStart={manejarInicioPresionado}
-      onTouchEnd={manejarFinPresionado}
-    >
-      <TarjetaConImagen
-        src={cliente.urlImagen}
-        alt={cliente.nombreComercial}
-        titulo={cliente.nombreComercial}
-        nombreIcono={modoEliminacion ? 'Delete' : 'Info'} // nuevo
-        varianteIcono='outlined'
-        tamanoIcono='large'
-        colorIcono={modoEliminacion ? 'error' : 'action'} //nuevo
-        iconoClickeable={true}
-        ajuste='contain'
-        anchoImagen='100%'
-        alturaImagen='250px'
-        tooltipIcono={
-          modoEliminacion ? 'Eliminar cliente' : `Ver información de ${cliente.nombreComercial}`
-        } // nuevo
-        clickeableImagen={true}
-        elevacion={3}
-        alClicImagen={() =>
-          handleClickCliente(cliente.idCliente, cliente.urlImagen, cliente.nombreComercial)
-        }
-        alClicIcono={() => {
-          if (modoEliminacion) {
-            abrirModalEliminar(cliente);
-          } else {
-            setIdClienteDetalle(cliente.idCliente);
-            setModalDetalleAbierto(true);
-          }
-        }}
-      />
-    </Box>
-  );
-
-  const renderTarjetaAgregarCliente = () => (
-    <Box
-      onClick={() => console.log('Agregar cliente')}
-      sx={{ ...estiloTarjeta, ...estiloTarjetaAgregar }}
-      role='button'
-      tabIndex={0}
-    >
-      <Icono nombre='Add' size='large' />
-      <Texto variant='button' sx={{ mt: 1 }}>
-        Agregar cliente
-      </Texto>
-    </Box>
-  );
-
   return (
     <>
       <NavegadorAdministrador
@@ -252,18 +111,18 @@ const ListaClientes = () => {
       />
 
       <Box
-        width={'100%'}
+        width='100%'
         maxWidth='1200px'
         component='main'
         display='flex'
         flexDirection='column'
         alignItems='center'
-        margin={'auto'}
+        margin='auto'
         p={2}
         pb={6}
       >
         <Texto variant='h1' align='center' sx={estiloTitulo}>
-          Bienvenid⭐
+          Bienvenid@
         </Texto>
         <Texto variant='h4' align='center' color='text.secondary' sx={estiloSubtitulo}>
           Selecciona un cliente para gestionar su sistema o crea uno nuevo
@@ -284,86 +143,44 @@ const ListaClientes = () => {
             gap={2}
             width='100%'
           >
-            {clientes.map(renderTarjetaCliente)}
-            {renderTarjetaAgregarCliente()}
+            <ClientesLista
+              clientes={clientes}
+              modoEliminacion={modoEliminacion}
+              onClienteClick={handleClienteClick}
+              onIconoClick={handleIconoClick}
+              onMouseDown={handleInicioPresionado}
+              onMouseUp={handleFinPresionado}
+              onTouchStart={handleInicioPresionado}
+              onTouchEnd={handleFinPresionado}
+            />
+            <AgregarClienteTarjeta />
           </Box>
         )}
       </Box>
 
-      <ModalFlotante
-        open={modalAbierto}
-        onClose={cancelarEliminacion}
+      <EliminarClienteModal
+        open={modalEliminacionAbierto}
+        cliente={clienteEliminar}
         onConfirm={confirmarEliminacion}
-        titulo={`¿Estás seguro de que deseas eliminar a ${clienteEliminar?.nombreComercial}?`}
-        confirmLabel='Confirmar'
-        cancelLabel='Cancelar'
-      >
-        <Texto>Esta acción no se puede deshacer.</Texto>
-      </ModalFlotante>
-
-      {errorEliminacion && (
-        <Alerta tipo='error' mensaje={errorEliminacion} icono cerrable centradoInferior />
-      )}
-
-      {eliminacionExitosa && (
-        <Alerta
-          tipo='success'
-          mensaje='Cliente eliminado exitosamente.'
-          icono
-          cerrable
-          centradoInferior
-          duracion={3000}
-          onClose={() => setEliminacionExitosa(false)}
-        />
-      )}
-
-      {modalDetalleAbierto && (
-        <ModalCliente
-          open={modalDetalleAbierto}
-          onClose={() => setModalDetalleAbierto(false)}
-          onConfirm={() => setModalDetalleAbierto(false)}
-          titulo={cliente?.nombreVisible || 'Cargando...'}
-          tituloVariant='h4'
-          botones={[
-            {
-              label: 'EDITAR',
-              variant: 'contained',
-              color: 'primary',
-              backgroundColor: colores.altertex[1],
-              onClick: () => console.log('Editar cliente'),
-              disabled: !!errorDetalle,
-            },
-            {
-              label: 'SALIR',
-              variant: 'outlined',
-              color: 'primary',
-              outlineColor: colores.altertex[1],
-              onClick: () => setModalDetalleAbierto(false),
-            },
-          ]}
-        >
-          {cargandoDetalle ? (
-            <Texto>Cargando cliente...</Texto>
-          ) : cliente ? (
-            <InfoCliente
-              idCliente={cliente.idCliente}
-              nombreLegal={cliente.nombreLegal}
-              nombreVisible={cliente.nombreVisible}
-              empleados={cliente.numeroEmpleados}
-              usuariosAsignados={cliente.usuariosAsignados}
-              imagenURL={cliente.imagenCliente}
-            />
-          ) : (
-            <Texto>No se encontró información del cliente.</Texto>
-          )}
-        </ModalCliente>
-      )}
+        onCancel={cancelarEliminacion}
+        eliminacionExitosa={eliminacionExitosa}
+        errorEliminacion={errorEliminacion}
+        onCloseAlert={cerrarAlertaExito}
+      />
 
-      {errorDetalle && (
-        <div style={{ marginTop: '2rem' }}>
-          <Alerta tipo='error' mensaje={errorDetalle} icono cerrable centradoInferior />
-        </div>
-      )}
+      <DetalleClienteModal
+        open={modalDetalleAbierto}
+        cliente={clienteEditado}
+        modoEdicion={modoEdicion}
+        cargando={idClienteDetalle && !clienteEditado}
+        colores={colores}
+        onClose={cerrarModalDetalle}
+        onToggleEdicion={toggleModoEdicion}
+        onChange={handleClienteChange}
+        onImageChange={handleImagenChange}
+        imagenSubiendo={imagenSubiendo}
+        imagenError={imagenError}
+      />
     </>
   );
 };
diff --git a/src/Vistas/Paginas/Configuracion/ConfiguracionGeneral.jsx b/src/Vistas/Paginas/Configuracion/ConfiguracionGeneral.jsx
index 3754c190..738e4dcb 100644
--- a/src/Vistas/Paginas/Configuracion/ConfiguracionGeneral.jsx
+++ b/src/Vistas/Paginas/Configuracion/ConfiguracionGeneral.jsx
@@ -1,5 +1,14 @@
+import ContenedorLista from '@Organismos/ContenedorLista';
+import TarjetaConfiguracionPagos from '@Organismos/TarjetaConfiguracionPagos';
+
+//RF[52] Consulta Lista de Pago - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF52]
+
 const ConfiguracionGeneral = () => {
-  return <h1>Configuracion</h1>;
+  return (
+    <ContenedorLista titulo='Configuracion' descripcion='Metodos de pago habilitados.'>
+      <TarjetaConfiguracionPagos />
+    </ContenedorLista>
+  );
 };
 
 export default ConfiguracionGeneral;
diff --git a/src/Vistas/Paginas/Cuotas/EditarCuotas.jsx b/src/Vistas/Paginas/Cuotas/EditarCuotas.jsx
index e70d8117..97f62953 100644
--- a/src/Vistas/Paginas/Cuotas/EditarCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/EditarCuotas.jsx
@@ -7,6 +7,8 @@ import CuerpoPrincipal from '@Organismos/Cuotas/CuerpoPrincipal';
 import { useAuth } from '@Hooks/AuthProvider';
 import { RUTAS } from '@Constantes/rutas';
 
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
 const EditarCuotas = () => {
   const ubicacion = useLocation();
   const navegar = useNavigate();
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index ba2cbf32..aec11867 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -1,14 +1,15 @@
 // RF[32] - Consulta Lista de Cuotas - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF32
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme, Box } from '@mui/material';
 import { tokens } from '@SRC/theme';
-import { useConsultarCuotas } from '@Hooks/Cuotas/useConsultarCuotas';
 import { useAuth } from '@Hooks/AuthProvider';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import Tabla from '@Organismos/Tabla';
 import Chip from '@Atomos/Chip';
-import ModalCrearCuotaSet from '@Organismos/ModalCrearCuotaSet';
+import ModalCrearCuotaSet from '@Organismos/Cuotas/ModalCrearCuotaSet';
 import Alerta from '@Moleculas/Alerta';
 import PopUpEliminar from '@Moleculas/PopUp';
 import { RUTAS } from '@Constantes/rutas';
@@ -16,6 +17,7 @@ import { RepositorioEliminarSetCuotas } from '@Dominio/Repositorios/Cuotas/repos
 import { PERMISOS } from '@Utilidades/Constantes/permisos';
 import { useConsultarCuotas } from '@Hooks/Cuotas/useConsultarCuotas';
 import ModalFlotante from '@Organismos/ModalFlotante';
+import CuotasInfo from '@Moleculas/CuotasInfo';
 const ListaCuotas = () => {
   const navegar = useNavigate();
   const { usuario } = useAuth();
@@ -69,12 +71,15 @@ const ListaCuotas = () => {
         nombre: cuota.nombre,
         periodoRenovacion: cuota.periodoRenovacion,
         renovacionHabilitada: cuota.renovacionHabilitada === 1,
+        descripcion: cuota.descripcion,
+        ultimaActualizacion: cuota.ultimaActualizacion,
       }))
     : [];
 
   const handleAbrirModalCrear = () => setModalCrearAbierto(true);
   const handleCerrarModalCrear = () => setModalCrearAbierto(false);
-
+  const [cuotaSeleccionada, setCuotaSeleccionada] = useState(null);
+  const [modalAbierto, setModalAbierto] = useState(false);
   const manejarCancelarEliminar = () => setAbrirPopUpEliminar(false);
 
   const manejarConfirmarEliminar = async () => {
@@ -160,6 +165,10 @@ const ListaCuotas = () => {
               const ids = Array.isArray(nuevosIds) ? nuevosIds : Array.from(nuevosIds?.ids || []);
               setSeleccionados(ids);
             }}
+            onRowClick={(params) => {
+              setCuotaSeleccionada(params.row);
+              setModalAbierto(true);
+            }}
           />
         </Box>
       </ContenedorLista>
@@ -172,6 +181,21 @@ const ListaCuotas = () => {
         confirmar={manejarConfirmarEliminar}
         dialogo='¿Estás seguro de que deseas eliminar los sets de cuotas seleccionados? Esta acción no se puede deshacer.'
       />
+      {modalAbierto && cuotaSeleccionada && (
+        <ModalFlotante
+          open={modalAbierto}
+          onClose={() => setModalAbierto(false)}
+          titulo='Detalles del Set de Cuotas'
+        >
+          <CuotasInfo
+            nombre={cuotaSeleccionada.nombre}
+            periodoRenovacion={cuotaSeleccionada.periodoRenovacion}
+            renovacionHabilitada={cuotaSeleccionada.renovacionHabilitada}
+            descripcion={cuotaSeleccionada.descripcion}
+            ultimaActualizacion={cuotaSeleccionada.ultimaActualizacion}
+          />
+        </ModalFlotante>
+      )}
 
       {alerta && (
         <Alerta
diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index e1cee8cd..0292367e 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -27,8 +27,8 @@ const ListaGrupoEmpleados = () => {
   const [empleadoSeleccionado, setEmpleadoSeleccionado] = useState(null);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
 
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los empleados seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los empleados seleccionados? Esta acción no se puede deshacer.';
 
   const manejarCancelarEliminar = () => {
     setAbrirPopUpEliminar(false);
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 2008fb37..02f3de0d 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -1,6 +1,6 @@
-//RF22 - Consulta Lista de Grupo Empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF22
-//RF25 Eliminar Grupo de empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF25
-
+// RF22 - Consulta Lista de Grupo Empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF22
+// RF23 Lee grupo de empleados -https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23
+import React, { useState } from 'react';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import { useConsultarGrupos } from '@Hooks/Empleados/useConsultarGrupos';
@@ -8,13 +8,16 @@ import { tokens } from '@SRC/theme';
 import { Box, useTheme } from '@mui/material';
 import Alerta from '@Moleculas/Alerta';
 import { useEliminarGrupoEmpleados } from '@Hooks/Empleados/useEliminarGrupoEmpleados';
-import { useState, React } from 'react';
 import PopUpEliminar from '@Moleculas/PopUp';
 import { useAuth } from '@Hooks/AuthProvider';
 import { PERMISOS } from '@Constantes/permisos';
+import InfoGrupoEmpleados from '@Moleculas/GrupoEmpleadosInfo';
+import { useGrupoEmpleadosId } from '@Hooks/Empleados/useLeerGrupoEmpleados';
+import ModalFlotante from '@Organismos/ModalFlotante';
 
-const ListaEmpleados = () => {
+const ListaGrupoEmpleados = () => {
   const { grupos, cargando, error, refetch } = useConsultarGrupos();
+  const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
   const MENSAJE_POPUP_ELIMINAR
@@ -24,10 +27,18 @@ const ListaEmpleados = () => {
   const [alerta, setAlerta] = useState(null);
   const { eliminar } = useEliminarGrupoEmpleados();
   const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
+  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [idGrupoSeleccionado, setIdGrupoSeleccionado] = useState(null);
+
+  const {
+    grupoEmpleados,
+    cargando: cargandoDetalle,
+    error: errorDetalle,
+  } = useGrupoEmpleadosId(modalDetalleAbierto ? idGrupoSeleccionado : null);
   const manejarCancelarEliminar = () => {
     setAbrirPopUpEliminar(false);
   };
-  const { usuario } = useAuth();
+
   const manejarConfirmarEliminar = async () => {
     try {
       await eliminar(gruposSeleccionados);
@@ -100,7 +111,6 @@ const ListaEmpleados = () => {
       size: 'large',
       backgroundColor: colores.altertex[1],
     },
-
     {
       variant: 'outlined',
       label: 'Editar',
@@ -131,6 +141,7 @@ const ListaEmpleados = () => {
       backgroundColor: colores.altertex[1],
     },
   ];
+
   return (
     <>
       <ContenedorLista
@@ -138,7 +149,7 @@ const ListaEmpleados = () => {
         descripcion='Gestiona y organiza los grupos de empleados registrados en el sistema.'
         informacionBotones={botones}
       >
-        <Box width={'100%'}>
+        <Box width='100%'>
           {error && <p style={{ color: 'red' }}>Error: {error}</p>}
           <Tabla
             columns={columnas}
@@ -151,6 +162,10 @@ const ListaEmpleados = () => {
                 : Array.from(selectionModel?.ids || []);
               setGruposSeleccionados(ids);
             }}
+            onRowClick={(params) => {
+              setIdGrupoSeleccionado(params.row.id);
+              setModalDetalleAbierto(true);
+            }}
           />
         </Box>
       </ContenedorLista>
@@ -171,8 +186,40 @@ const ListaEmpleados = () => {
         confirmar={manejarConfirmarEliminar}
         dialogo={MENSAJE_POPUP_ELIMINAR}
       />
+      {modalDetalleAbierto && (
+        <ModalFlotante
+          open={modalDetalleAbierto}
+          onClose={() => setModalDetalleAbierto(false)}
+          titulo={grupoEmpleados?.nombre || 'Cargando...'}
+          tituloVariant='h4'
+          customWidth={800}
+          botones={[
+            {
+              label: 'Salir',
+              variant: 'outlined',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: () => setModalDetalleAbierto(false),
+            },
+          ]}
+        >
+          {cargandoDetalle ? (
+            <p>Cargando información del grupo de empleados...</p>
+          ) : errorDetalle ? (
+            <p>Error al cargar la información del grupo de empleados: {errorDetalle}</p>
+          ) : (
+            <InfoGrupoEmpleados
+              modoEdicion={false}
+              nombre={grupoEmpleados?.nombre || ''}
+              descripcion={grupoEmpleados?.descripcion || ''}
+              setsProductos={grupoEmpleados?.setsProductos || []}
+              empleados={grupoEmpleados?.empleados || []}
+            />
+          )}
+        </ModalFlotante>
+      )}
     </>
   );
 };
 
-export default ListaEmpleados;
+export default ListaGrupoEmpleados;
diff --git a/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx b/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
index 7b6369ac..3bbe8502 100644
--- a/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
+++ b/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
@@ -112,7 +112,7 @@ const ListaPedidos = () => {
     {
       label: 'Eliminar',
       onClick: () => {
-        if (seleccionados.length === 0) {
+        if (seleccionados.length === 0 || seleccionados.size === 0) {
           setAlerta({
             tipo: 'error',
             mensaje: 'Selecciona al menos un pedido para eliminar.',
@@ -124,7 +124,7 @@ const ListaPedidos = () => {
           setAbrirPopUpEliminar(true);
         }
       },
-      disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_GRUPO_EMPLEADOS),
+      disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_PEDIDO),
       size: 'large',
       color: 'error',
       backgroundColor: colores.altertex[1],
@@ -163,10 +163,8 @@ const ListaPedidos = () => {
               columns={columnas}
               rows={filas}
               checkboxSelection
-              onRowSelectionModelChange={(seleccionados) => {
-                const ids = Array.isArray(seleccionados)
-                  ? seleccionados
-                  : Array.from(seleccionados?.ids || []);
+              onRowSelectionModelChange={(seleccion) => {
+                const ids = Array.isArray(seleccion) ? seleccion : Array.from(seleccion?.ids || []);
                 setSeleccionados(ids);
               }}
             />
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index da5c7dd3..87a1d7cb 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -31,8 +31,13 @@ const ListaProductos = () => {
 
   const manejarConfirmarEliminar = async () => {
     try {
-      await eliminar(productosSeleccionados);
-      await recargar();
+      const urlsImagenes = productos
+      .filter((pro) => productosSeleccionados.includes(pro.idProducto))
+      .map((pro) => pro.urlImagen);
+      
+      
+      await eliminar(productosSeleccionados, urlsImagenes);
+      recargar();
       setAlerta({
         tipo: 'success',
         mensaje: 'Productos eliminados correctamente.',
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index d6d04bf0..9ab256ba 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -1,5 +1,6 @@
 // RF42 - Super Administrador, Cliente Consulta Lista de Sets de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF42
 // RF45 - Eliminar set de productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF45
+// RF48 - Super Administrador, Cliente Lee Categoria de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/rf48/
 
 import React, { useState } from 'react';
 import Tabla from '@Organismos/Tabla';
@@ -8,6 +9,8 @@ import Alerta from '@Moleculas/Alerta';
 import Chip from '@Atomos/Chip';
 import { useEliminarSetProductos } from '@Hooks/SetsProductos/useEliminarSetProductos';
 import PopUp from '@Moleculas/PopUp';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import InfoSetProductos from '@Moleculas/SetProductosInfo';
 import { Box, useTheme } from '@mui/material';
 import { useConsultarSetsProductos } from '@Hooks/SetsProductos/useConsultarSetsProductos';
 import { tokens } from '@SRC/theme';
@@ -23,13 +26,16 @@ const ListaSetsProductos = () => {
 
   const [seleccionados, setSeleccionados] = useState([]);
   const [alerta, setAlerta] = useState(null);
-  const { eliminar } = useEliminarSetProductos();
-  // Estado para controlar la visualización del modal eliminar
   const [abrirEliminar, setAbrirPopUpEliminar] = useState(false);
+  const [setSeleccionado, setSetSeleccionado] = useState(null);
+  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const { eliminar } = useEliminarSetProductos();
+  const { usuario } = useAuth();
+
   const manejarCancelarEliminar = () => {
     setAbrirPopUpEliminar(false);
   };
-  const { usuario } = useAuth();
+
   const manejarConfirmarEliminar = async () => {
     try {
       await eliminar(seleccionados);
@@ -93,6 +99,17 @@ const ListaSetsProductos = () => {
     nombre: setProducto.nombre,
     descripcion: setProducto.descripcion,
     activo: setProducto.activo,
+    datosCompletos: {
+      ...setProducto,
+      productos:
+        typeof setProducto.productos === 'string'
+          ? setProducto.productos.split(',').map((prod) => prod.trim())
+          : setProducto.productos || [],
+      grupos:
+        typeof setProducto.grupos === 'string'
+          ? setProducto.grupos.split(',').map((grp) => grp.trim())
+          : setProducto.grupos || [],
+    },
   }));
 
   const botones = [
@@ -152,6 +169,10 @@ const ListaSetsProductos = () => {
             rows={rows}
             loading={cargando}
             checkboxSelection
+            onRowClick={(params) => {
+              setSetSeleccionado(params.row.datosCompletos);
+              setModalDetalleAbierto(true);
+            }}
             onRowSelectionModelChange={(selectionModel) => {
               const ids = Array.isArray(selectionModel)
                 ? selectionModel
@@ -161,6 +182,7 @@ const ListaSetsProductos = () => {
           />
         </Box>
       </ContenedorLista>
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
@@ -172,12 +194,49 @@ const ListaSetsProductos = () => {
           onClose={() => setAlerta(null)}
         />
       )}
+
       <PopUp
         abrir={abrirEliminar}
         cerrar={manejarCancelarEliminar}
         confirmar={manejarConfirmarEliminar}
         dialogo={MENSAJE_POPUP_ELIMINAR}
       />
+
+      {/* MODAL DETALLE */}
+      {modalDetalleAbierto && setSeleccionado && (
+        <ModalFlotante
+          open={modalDetalleAbierto}
+          onClose={() => {
+            setModalDetalleAbierto(false);
+            setSetSeleccionado(null);
+          }}
+          onConfirm={() => setModalDetalleAbierto(false)}
+          titulo={setSeleccionado.nombre || 'Detalles del Set'}
+          tituloVariant='h4'
+          botones={[
+            {
+              label: 'EDITAR',
+              variant: 'contained',
+              color: 'error',
+              backgroundColor: colores.altertex[1],
+            },
+            {
+              label: 'SALIR',
+              variant: 'outlined',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: () => setModalDetalleAbierto(false),
+            },
+          ]}
+        >
+          <InfoSetProductos
+            nombre={''}
+            descripcion={setSeleccionado.descripcion}
+            productos={setSeleccionado.productos || []}
+            grupos={setSeleccionado.grupos || []}
+          />
+        </ModalFlotante>
+      )}
     </>
   );
 };
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 0510dd32..22b470ff 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -15,7 +15,7 @@ import { RUTAS } from '@Constantes/rutas';
 import { useMode, tokens } from '@SRC/theme';
 import NavegadorAdministrador from '@Organismos/NavegadorAdministrador';
 import { useUsuarioId } from '@Hooks/Usuarios/useLeerUsuario';
-import InfoUsuario from '@Moleculas/UsuarioInfo';
+import InfoUsuario from '@Moleculas/InfoUsuario';
 import PopUp from '@Moleculas/PopUp';
 import { useAuth } from '@Hooks/AuthProvider';
 import { PERMISOS } from '@Constantes/permisos';
diff --git a/src/Vistas/stories/ClienteInfo.stories.js b/src/Vistas/stories/ClienteInfo.stories.js
index a25a26b2..87561039 100644
--- a/src/Vistas/stories/ClienteInfo.stories.js
+++ b/src/Vistas/stories/ClienteInfo.stories.js
@@ -1,4 +1,4 @@
-import InfoCliente from '../componentes/moleculas/ClienteInfo';
+import InfoCliente from '../Componentes/Moleculas/InfoCliente';
 
 export default {
   title: 'Componentes/Moléculas/InfoCliente',
@@ -28,7 +28,7 @@ const baseArgs = {
 };
 
 export const InformacionCliente = {
-    args: {
-      ...baseArgs,
-    },
-  };
\ No newline at end of file
+  args: {
+    ...baseArgs,
+  },
+};
diff --git a/src/Vistas/stories/ModalFlotante.stories.jsx b/src/Vistas/stories/ModalFlotante.stories.jsx
index 249d6793..897c71db 100644
--- a/src/Vistas/stories/ModalFlotante.stories.jsx
+++ b/src/Vistas/stories/ModalFlotante.stories.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { fn } from '@storybook/test';
 import ModalFlotante from '../componentes/organismos/ModalFlotante';
 import Texto from '../componentes/atomos/Texto';
-import InfoUsuario from '../componentes/moleculas/UsuarioInfo';
+import InfoUsuario from '../Componentes/Moleculas/InfoUsuario';
 
 export default {
   title: '@Organismos/ModalFlotante',
diff --git a/src/Vistas/stories/SetProductosInfo.stories.js b/src/Vistas/stories/SetProductosInfo.stories.js
new file mode 100644
index 00000000..53bae44a
--- /dev/null
+++ b/src/Vistas/stories/SetProductosInfo.stories.js
@@ -0,0 +1,29 @@
+import SetProductosInfo from '../componentes/moleculas/SetProductosInfo';
+
+export default {
+  title: 'Componentes/Moléculas/SetProductosInfo',
+  component: SetProductosInfo,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    nombre: { control: 'text' },
+    descripcion: { control: 'text' },
+    productos: { control: 'array' },
+    grupos: { control: 'array' },
+  },
+};
+
+const baseArgs = {
+  nombre: 'Nombre del set de productos',
+  descripcion: 'Uniforme que permite comodidad y movilidad...',
+  productos: ['Botas', 'Chaleco', 'Playera'],
+  grupos: ['Atención al Cliente', 'Recursos humanos'],
+};
+
+export const InformacionSetProductos = {
+  args: {
+    ...baseArgs,
+  },
+};
diff --git a/src/Vistas/stories/UsuarioInfo.stories.js b/src/Vistas/stories/UsuarioInfo.stories.js
index 7b3a0a3a..321811de 100644
--- a/src/Vistas/stories/UsuarioInfo.stories.js
+++ b/src/Vistas/stories/UsuarioInfo.stories.js
@@ -1,4 +1,4 @@
-import InfoUsuario from '../componentes/moleculas/UsuarioInfo';
+import InfoUsuario from '../Componentes/Moleculas/InfoUsuario';
 
 export default {
   title: 'Componentes/Moléculas/InfoUsuario',
@@ -49,11 +49,11 @@ export const Lectura = {
     ...baseArgs,
     modoEdicion: false,
     estadoUsuario: {
-        label: 'Activo',
-        color: 'primary',
-        shape: 'circular',
-        backgroundColor: 'rgba(24, 50, 165, 1)',
-      },
+      label: 'Activo',
+      color: 'primary',
+      shape: 'circular',
+      backgroundColor: 'rgba(24, 50, 165, 1)',
+    },
   },
 };
 
@@ -62,10 +62,10 @@ export const Edicion = {
     ...baseArgs,
     modoEdicion: true,
     estadoUsuario: {
-        label: 'Activo',
-        color: 'primary',
-        shape: 'circular',
-        backgroundColor: 'rgba(24, 50, 165, 1)',
-      },
+      label: 'Activo',
+      color: 'primary',
+      shape: 'circular',
+      backgroundColor: 'rgba(24, 50, 165, 1)',
+    },
   },
-};
\ No newline at end of file
+};
diff --git a/src/hooks/Clientes/useClientes.js b/src/hooks/Clientes/useClientes.js
new file mode 100644
index 00000000..00948532
--- /dev/null
+++ b/src/hooks/Clientes/useClientes.js
@@ -0,0 +1,372 @@
+import { useState, useEffect, useRef } from 'react';
+import Cookies from 'js-cookie';
+import { useConsultarClientes } from '@Hooks/Clientes/useConsultarClientes';
+import { useSeleccionarCliente } from '@Hooks/Clientes/useSeleccionarCliente';
+import { useEliminarCliente } from '@Hooks/Clientes/useEliminarCliente';
+import { useClientePorId } from '@Hooks/Clientes/useLeerCliente';
+import { RepositorioActualizarCliente } from '@Repositorios/Clientes/repositorioActualizarCliente';
+
+// RF14 - Actualiza Cliente - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF14
+
+export const useClientes = () => {
+  // Clientes data
+  const { clientes: clientesOriginales, cargando, error } = useConsultarClientes();
+  const [clientes, setClientes] = useState([]);
+  const { seleccionarCliente } = useSeleccionarCliente();
+
+  // Eliminación state
+  const [idEliminar, setIdEliminar] = useState(null);
+  const [eliminacionExitosa, setEliminacionExitosa] = useState(false);
+  const [modoEliminacion, setModoEliminacion] = useState(false);
+  const [clienteEliminar, setClienteEliminar] = useState(null);
+  const [modalEliminacionAbierto, setModalEliminacionAbierto] = useState(false);
+
+  // Referencias para manejo de gestos
+  const tiempoPresionado = useRef(null);
+  const ignorarPrimerClick = useRef(false);
+
+  // Modal de detalle state
+  const [idClienteDetalle, setIdClienteDetalle] = useState(null);
+  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [modoEdicion, setModoEdicion] = useState(false);
+  const [clienteEditado, setClienteEditado] = useState(null);
+
+  // Estado para manejo de imágenes
+  const [imagenSubiendo, setImagenSubiendo] = useState(false);
+  const [imagenError, setImagenError] = useState(null);
+  const [imagenPreview, setImagenPreview] = useState(null);
+  const [imagenFile, setImagenFile] = useState(null);
+
+  // Hooks para eliminar y obtener detalles
+  const { error: errorEliminacion } = useEliminarCliente(
+    idEliminar,
+    setEliminacionExitosa,
+    (idClienteEliminado) => {
+      setClientes((prev) => prev.filter((cliente) => cliente.idCliente !== idClienteEliminado));
+      Cookies.remove('imagenClienteSeleccionado');
+      Cookies.remove('nombreClienteSeleccionado');
+      seleccionarCliente(null);
+      setIdEliminar(null);
+    }
+  );
+
+  const {
+    cliente,
+    cargando: cargandoDetalle,
+    error: errorDetalle,
+  } = useClientePorId(modalDetalleAbierto ? idClienteDetalle : null);
+
+  // Cargar clientes originales cuando cambien
+  useEffect(() => {
+    if (clientesOriginales) {
+      setClientes(clientesOriginales);
+    }
+  }, [clientesOriginales]);
+
+  // Actualizar clienteEditado cuando se cargue el detalle del cliente
+  useEffect(() => {
+    if (cliente) {
+      setClienteEditado(cliente);
+      setImagenPreview(cliente.urlImagen || null);
+      setImagenFile(null);
+      setImagenError(null);
+    }
+  }, [cliente]);
+
+  useEffect(() => {
+    return () => {
+      if (imagenPreview && imagenPreview.startsWith('blob:')) {
+        URL.revokeObjectURL(imagenPreview);
+      }
+    };
+  }, [imagenPreview]);
+
+  // Manejar click fuera para desactivar modo eliminación
+  useEffect(() => {
+    const manejarClickFuera = () => {
+      if (ignorarPrimerClick.current) {
+        ignorarPrimerClick.current = false;
+        return;
+      }
+      if (modoEliminacion) {
+        setModoEliminacion(false);
+      }
+    };
+    document.addEventListener('click', manejarClickFuera);
+    return () => document.removeEventListener('click', manejarClickFuera);
+  }, [modoEliminacion]);
+
+  // Handlers para presionado largo
+  const handleInicioPresionado = () => {
+    tiempoPresionado.current = setTimeout(() => {
+      setModoEliminacion(true);
+      ignorarPrimerClick.current = true;
+    }, 800);
+  };
+
+  const handleFinPresionado = () => {
+    if (!modoEliminacion) {
+      clearTimeout(tiempoPresionado.current);
+    }
+  };
+
+  // Handlers para clientes
+  const handleClienteClick = (clienteId, urlImagen, nombreComercial) => {
+    const idCliente = parseInt(clienteId, 10);
+    seleccionarCliente(idCliente);
+    Cookies.set('imagenClienteSeleccionado', urlImagen, { expires: 1 });
+    Cookies.set('nombreClienteSeleccionado', nombreComercial, { expires: 1 });
+  };
+
+  const handleIconoClick = (cliente, enModoEliminacion) => {
+    if (enModoEliminacion) {
+      abrirModalEliminar(cliente);
+    } else {
+      abrirModalDetalle(cliente.idCliente);
+    }
+  };
+
+  // Handlers para modal de eliminación
+  const abrirModalEliminar = (cliente) => {
+    setClienteEliminar(cliente);
+    setModalEliminacionAbierto(true);
+  };
+
+  const confirmarEliminacion = () => {
+    if (!clienteEliminar) return;
+    setIdEliminar(clienteEliminar.idCliente);
+    setModalEliminacionAbierto(false);
+    setClienteEliminar(null);
+  };
+
+  const cancelarEliminacion = () => {
+    setModalEliminacionAbierto(false);
+    setClienteEliminar(null);
+  };
+
+  // Handlers para modal de detalle
+  const abrirModalDetalle = (clienteId) => {
+    setIdClienteDetalle(clienteId);
+    setModalDetalleAbierto(true);
+  };
+
+  const cerrarModalDetalle = () => {
+    setModoEdicion(false);
+    setModalDetalleAbierto(false);
+    // Limpiar estados de imagen al cerrar
+    setImagenPreview(null);
+    setImagenFile(null);
+    setImagenError(null);
+  };
+
+  const toggleModoEdicion = async () => {
+    if (modoEdicion) {
+      try {
+        if (!cliente) return;
+
+        // Validar campos antes de enviar
+        const camposObligatorios = ['nombreLegal', 'nombreVisible'];
+        const MAX_LENGTH = 100;
+
+        for (const campo of camposObligatorios) {
+          if (!clienteEditado[campo]) {
+            setImagenError(`El campo ${campo} es obligatorio`);
+            return;
+          }
+
+          if (clienteEditado[campo].trim() === '') {
+            setImagenError(`El campo ${campo} no puede contener solo espacios en blanco`);
+            return;
+          }
+
+          if (clienteEditado[campo].length > MAX_LENGTH) {
+            setImagenError(`El campo ${campo} no puede exceder los ${MAX_LENGTH} caracteres`);
+            return;
+          }
+        }
+
+        // Validar formato y tamaño de imagen antes de enviar
+        if (imagenFile) {
+          const validJpgTypes = ['image/jpeg', 'image/jpg'];
+          if (!validJpgTypes.includes(imagenFile.type.toLowerCase())) {
+            setImagenError('Solo se permiten imágenes en formato JPG o JPEG.');
+            return;
+          }
+
+          const MAX_SIZE = 5 * 1024 * 1024; // 5MB en bytes
+          if (imagenFile.size > MAX_SIZE) {
+            setImagenError('La imagen no debe exceder 5MB de tamaño');
+            return;
+          }
+        }
+
+        const cambios = {};
+        let tieneOtrosCambios = false;
+
+        Object.keys(clienteEditado).forEach((key) => {
+          if (key === 'urlImagen' || key === 'createdAt' || key === 'updatedAt') {
+            return;
+          }
+          if (clienteEditado[key] !== cliente[key]) {
+            cambios[key] = clienteEditado[key];
+            tieneOtrosCambios = true;
+          }
+        });
+
+        if (clienteEditado.nombreVisible !== cliente.nombreVisible) {
+          cambios.nombreComercial = clienteEditado.nombreVisible;
+        }
+
+        if (tieneOtrosCambios || imagenFile) {
+          setImagenSubiendo(true);
+          setImagenError(null);
+
+          const formData = new FormData();
+          formData.append('idCliente', clienteEditado.idCliente);
+
+          // Agregar campos modificados al FormData
+          Object.entries(cambios).forEach(([key, value]) => {
+            formData.append(key, value);
+          });
+
+          // Agregar imagen al FormData
+          if (imagenFile) {
+            formData.append('imagen', imagenFile); // clave debe coincidir con el backend
+          }
+
+          await RepositorioActualizarCliente.actualizarClienteConImagen(formData);
+
+          setClientes((prevClientes) =>
+            prevClientes.map((cliente) => {
+              if (cliente.idCliente === clienteEditado.idCliente) {
+                return {
+                  ...cliente,
+                  ...cambios,
+                  ...(imagenFile ? { urlImagen: imagenPreview } : {}),
+                };
+              }
+              return cliente;
+            }));
+        }
+
+        setModoEdicion(false);
+      } catch {
+        setImagenError('Error al guardar los cambios. Intente nuevamente.');
+      } finally {
+        setImagenSubiendo(false);
+      }
+    } else {
+      setModoEdicion(true);
+    }
+  };
+
+  const handleClienteChange = (event) => {
+    const { name, value } = event.target;
+    const MAX_LENGTH = 100;
+
+    // Validar longitud máxima de texto sin prohibir texto vacío
+    if (value.length > MAX_LENGTH) {
+      setImagenError(`El campo ${name} no puede exceder los ${MAX_LENGTH} caracteres`);
+      return;
+    }
+
+    // Actualizar el valor del campo sin importar si está vacío
+    setClienteEditado((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+
+    // Limpiar error si existe y se ha corregido
+    if (imagenError) {
+      // Si el error era sobre caracteres y ahora cumplimos el requisito
+      if (imagenError.includes('caracteres') && value.length <= MAX_LENGTH) {
+        setImagenError(null);
+      } else if (imagenError.includes('espacios en blanco') && value.trim() !== '') {
+        setImagenError(null);
+      } else if (imagenError.includes(name)) {
+        setImagenError(null);
+      }
+    }
+  };
+
+  const handleImagenChange = (imageData) => {
+    if (imageData.error) {
+      setImagenError(imageData.error);
+      return;
+    }
+
+    // Si no hay archivo, solo limpiamos error
+    if (!imageData.file) {
+      setImagenError(null);
+      return;
+    }
+
+    // Validar que sea un archivo JPG o JPEG
+    const validJpgTypes = ['image/jpeg', 'image/jpg'];
+    if (!validJpgTypes.includes(imageData.file.type.toLowerCase())) {
+      setImagenError('Solo se permiten imágenes en formato JPG o JPEG.');
+      return;
+    }
+
+    // Validar tamaño de la imagen (5MB)
+    const MAX_SIZE = 5 * 1024 * 1024;
+    if (imageData.file.size > MAX_SIZE) {
+      setImagenError('La imagen no debe exceder 5MB de tamaño');
+      return;
+    }
+
+    // Si llegamos hasta aquí, eliminar cualquier error previo
+    setImagenError(null);
+
+    setImagenFile(imageData.file);
+    const preview = imageData.preview || URL.createObjectURL(imageData.file);
+    setImagenPreview(preview);
+
+    setClienteEditado((prev) => ({
+      ...prev,
+      urlImagen: preview,
+    }));
+  };
+
+  const cerrarAlertaExito = () => {
+    setEliminacionExitosa(false);
+  };
+
+  return {
+    // Estado
+    clientes,
+    cargando,
+    error,
+    modoEliminacion,
+    clienteEliminar,
+    modalEliminacionAbierto,
+    idClienteDetalle,
+    modalDetalleAbierto,
+    clienteEditado,
+    modoEdicion,
+    cargandoDetalle,
+    errorDetalle,
+    eliminacionExitosa,
+    errorEliminacion,
+
+    // Estados de imagen
+    imagenSubiendo,
+    imagenError,
+    imagenPreview,
+
+    // Handlers
+    handleClienteClick,
+    handleIconoClick,
+    handleInicioPresionado,
+    handleFinPresionado,
+    confirmarEliminacion,
+    cancelarEliminacion,
+    cerrarModalDetalle,
+    toggleModoEdicion,
+    handleClienteChange,
+    cerrarAlertaExito,
+
+    // Handlers de imagen
+    handleImagenChange,
+  };
+};
diff --git a/src/hooks/Clientes/useLeerCliente.js b/src/hooks/Clientes/useLeerCliente.js
index 884c628f..42458697 100644
--- a/src/hooks/Clientes/useLeerCliente.js
+++ b/src/hooks/Clientes/useLeerCliente.js
@@ -26,10 +26,19 @@ export const useClientePorId = (idCliente) => {
 
       try {
         const { cliente, mensaje } = await RepositorioClientes.obtenerPorId(idCliente);
-        setCliente(cliente);
+
+        const clienteNormalizado = cliente
+          ? {
+              ...cliente,
+              urlImagen: cliente.urlImagen || cliente.imagenURL || cliente.imagenCliente || null,
+            }
+          : null;
+
+        setCliente(clienteNormalizado);
         setMensaje(mensaje);
       } catch (err) {
         setError(err.message);
+        setCliente(null);
       } finally {
         setCargando(false);
       }
@@ -37,6 +46,11 @@ export const useClientePorId = (idCliente) => {
 
     if (idCliente) {
       obtenerCliente();
+    } else {
+      setCliente(null);
+      setMensaje('');
+      setCargando(false);
+      setError(null);
     }
   }, [idCliente]);
 
diff --git a/src/hooks/Cuotas/useCrearCuotaSet.js b/src/hooks/Cuotas/useCrearCuotaSet.js
index a13e4b60..2914f979 100644
--- a/src/hooks/Cuotas/useCrearCuotaSet.js
+++ b/src/hooks/Cuotas/useCrearCuotaSet.js
@@ -4,7 +4,8 @@ import axios from 'axios';
 import CuotaSetModelo from '@Modelos/Cuotas/CuotaSetModelo';
 import { RUTAS_API } from '@Constantes/rutasAPI';
 
-const API_URL = import.meta.env.VITE_API_URL;
+//RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+
 const API_KEY = import.meta.env.VITE_API_KEY;
 
 export const useCrearCuotaSet = ({
diff --git a/src/hooks/Empleados/useLeerGrupoEmpleados.js b/src/hooks/Empleados/useLeerGrupoEmpleados.js
new file mode 100644
index 00000000..984e0e23
--- /dev/null
+++ b/src/hooks/Empleados/useLeerGrupoEmpleados.js
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { RepositorioLeerGrupoEmpleados } from '@Repositorios/Empleados/RepositorioLeerGrupoEmpleados';
+
+/**
+ * * Hook para obtener los datos de un grupo de empleados por su ID
+ * @param {number} idGrupo - ID del grupo de empleados a consultar
+ * @returns {{
+ *    grupoEmpleados: GrupoEmpleadosLectura | null,
+ *    mensaje: string,
+ *    cargando: boolean,
+ *    error: string | null
+ *  }}
+ *  @see [RF[23] Leer grupo de empleados - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23)
+ */
+
+export const useGrupoEmpleadosId = (idGrupo) => {
+  const [grupoEmpleados, setGrupoEmpleados] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+  const [cargando, setCargando] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const obtenerGrupoEmpleados = async () => {
+      setCargando(true);
+      setError(null);
+
+      try {
+        const { grupoEmpleados, mensaje } = await RepositorioLeerGrupoEmpleados.obtenerPorId(
+          idGrupo
+        );
+
+        setGrupoEmpleados(grupoEmpleados);
+        setMensaje(mensaje);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setCargando(false);
+      }
+    };
+
+    if (idGrupo) {
+      obtenerGrupoEmpleados();
+    }
+  }, [idGrupo]);
+
+  return { grupoEmpleados, mensaje, cargando, error };
+};
diff --git a/src/hooks/Pagos/useActualizarTipoPago.js b/src/hooks/Pagos/useActualizarTipoPago.js
new file mode 100644
index 00000000..b0275de1
--- /dev/null
+++ b/src/hooks/Pagos/useActualizarTipoPago.js
@@ -0,0 +1,27 @@
+//RF[54] Consulta Lista de Pagos - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF54]
+
+import { useState } from 'react';
+import { RepositorioActualizarTipoPago } from '@Repositorios/Pagos/RepositorioActualizarTipoPago';
+
+export function useActualizarTipoPago() {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+
+  const actualizar = async (cambios) => {
+    setCargando(true);
+    setError(null);
+    setMensaje('');
+
+    try {
+      const respuesta = await RepositorioActualizarTipoPago.actualizar(cambios);
+      setMensaje(respuesta.mensaje || 'Actualización exitosa');
+    } catch (err) {
+      setError(err.message || 'Ocurrió un error');
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { actualizar, cargando, error, mensaje };
+}
diff --git a/src/hooks/Pagos/useConsultarTipoPagos.js b/src/hooks/Pagos/useConsultarTipoPagos.js
new file mode 100644
index 00000000..4ab5a0d3
--- /dev/null
+++ b/src/hooks/Pagos/useConsultarTipoPagos.js
@@ -0,0 +1,63 @@
+//RF[52] Consulta Lista de Pago - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF52]
+
+import { useState, useEffect, useMemo } from 'react';
+import { useAuth } from '@Hooks/AuthProvider';
+import { RepositorioConsultarTipoPagos } from '@Repositorios/Pagos/RepositorioConsultarTipoPagos';
+import { PERMISOS } from '@Constantes/permisos';
+
+export function useConsultarTipoPagos() {
+  const [tipoPagos, setTipoPagos] = useState([]);
+  const [mensaje, setMensaje] = useState('');
+  const [cargando, setCargando] = useState(true);
+  const [error, setError] = useState(null);
+  const { usuario } = useAuth();
+  const [recargarToken, setRecargarToken] = useState(1);
+
+  useEffect(() => {
+    const cargar = async () => {
+      setCargando(true);
+      setError(null);
+
+      if (!usuario?.permisos?.includes(PERMISOS.CONSULTAR_TIPOS_PAGO)) {
+        setCargando(false);
+        return;
+      }
+
+      try {
+        const resultado = await RepositorioConsultarTipoPagos.consultarPagos();
+        setTipoPagos(resultado.listaTipoPagos);
+        setMensaje(resultado.mensaje || 'Consulta exitosa');
+      } catch (err) {
+        setTipoPagos([]);
+        setMensaje('');
+        setError(err.message);
+      } finally {
+        setCargando(false);
+      }
+    };
+
+    cargar();
+  }, [recargarToken, usuario?.permisos]);
+
+  const recargar = () => setRecargarToken((prev) => prev + 1);
+
+  // ✅ Objeto con los métodos como claves e id/habilitado como valores
+  const tipoPagosMapeado = useMemo(() => {
+    return tipoPagos.reduce((acc, tipo) => {
+      acc[tipo.metodo] = {
+        id: tipo.idTipoPago,
+        habilitado: tipo.habilitado,
+      };
+      return acc;
+    }, {});
+  }, [tipoPagos]);
+
+  return {
+    tipoPagos, // arreglo original con idTipoPago, metodo, habilitado
+    tipoPagosMapeado, // objeto: { credito: { id, habilitado }, ... }
+    mensaje,
+    cargando,
+    error,
+    recargar,
+  };
+}
diff --git a/src/hooks/Productos/useEliminarProductos.js b/src/hooks/Productos/useEliminarProductos.js
index 23c6931b..534cd218 100644
--- a/src/hooks/Productos/useEliminarProductos.js
+++ b/src/hooks/Productos/useEliminarProductos.js
@@ -17,12 +17,12 @@ export function useEliminarProductos() {
   const [cargando, setCargando] = useState(false);
   const [error, setError] = useState(null);
 
-  const eliminar = async (idsProductos) => {
+  const eliminar = async (idsProductos, urlsImagenes) => {
     setCargando(true);
     setError(null);
 
     try {
-      const { mensaje } = await RepositorioEliminarProductos.eliminarProducto(idsProductos);
+      const { mensaje } = await RepositorioEliminarProductos.eliminarProducto(idsProductos, urlsImagenes);
       setMensaje(mensaje);
     } catch (err) {
       setMensaje('');
diff --git a/src/hooks/Roles/useEliminarRol.js b/src/hooks/Roles/useEliminarRol.js
index 018edd58..96b6a7ed 100644
--- a/src/hooks/Roles/useEliminarRol.js
+++ b/src/hooks/Roles/useEliminarRol.js
@@ -24,7 +24,6 @@ export function useEliminarRol() {
 
     try {
       const { mensaje } = await RepositorioEliminarRol.eliminarRol(idsRol);
-      console.log(mensaje);
       setMensaje(mensaje);
     } catch (err) {
       setMensaje('');
diff --git a/src/theme.js b/src/theme.js
index 6ccf4fb4..e86ffa87 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -50,6 +50,7 @@ export const tokens = (mode) => ({
           1: 'rgba(255, 255, 255, 0.08)',
           2: 'rgba(255, 255, 255, 0.10)',
           3: 'rgba(0, 0, 0, 0.5)',
+          4: 'rgba(136, 136, 136, 0.62)',
         },
       }
     : {
@@ -97,6 +98,7 @@ export const tokens = (mode) => ({
           1: 'rgba(0, 0, 0, 0.08)',
           2: 'rgba(0, 0, 0, 0.10)',
           3: 'rgba(0, 0, 0, 0.5)',
+          4: 'rgba(0, 0, 0, 0.4)',
         },
       }),
 });

From be615d3e7e825ea65930a8ca7d85c6bf4d1e378a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Mon, 12 May 2025 21:21:00 -0600
Subject: [PATCH 005/160] =?UTF-8?q?feat:=20update=20correg=C3=AD=20el=20er?=
 =?UTF-8?q?ror=20que=20me=20daba=20cargando...=20y=20ya=20funciona,=20pues?=
 =?UTF-8?q?=20al=20modal=20de=20ListaCuotas=20se=20le=20cmabio=20las=20pro?=
 =?UTF-8?q?ps=20de=20Cuotasinfo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Cuotas/repositorioLeerCuota.js            | 13 ++++------
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx     | 24 +++++++++----------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js b/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js
index 4027d79e..dd5e9121 100644
--- a/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js
+++ b/src/Dominio/Repositorios/Cuotas/repositorioLeerCuota.js
@@ -12,11 +12,11 @@ export class RepositorioLeerCuota {
    *
    * @see [RF[38] Leer cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF38)]
    */
-  static async obtenerPorId(idCuota) {
+  static async obtenerPorId(idSetCuota) {
     try {
       const respuesta = await axios.post(
-        RUTAS_API.CUOTAS.CONSULTAR_CUOTA,
-        { idCuota },
+        RUTAS_API.CUOTAS.LEER_SET_CUOTAS,
+        { idSetCuota },
         {
           headers: {
             'x-api-key': API_KEY,
@@ -24,13 +24,10 @@ export class RepositorioLeerCuota {
           withCredentials: true,
         }
       );
-
-      const { cuota, mensaje } = respuesta.data;
-
-      const cuotaInstancia = new LeerCuota(cuota);
+      const { setCuota, mensaje } = respuesta.data;
 
       return {
-        cuota: cuotaInstancia,
+        cuota: setCuota,
         mensaje,
       };
     } catch (error) {
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index aec11867..fde4e5ce 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -1,5 +1,6 @@
 // RF[32] - Consulta Lista de Cuotas - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF32
 //RF[31] Consulta crear set de cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF31]
+//RF[33] Leer cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF33]
 
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -11,6 +12,7 @@ import Tabla from '@Organismos/Tabla';
 import Chip from '@Atomos/Chip';
 import ModalCrearCuotaSet from '@Organismos/Cuotas/ModalCrearCuotaSet';
 import Alerta from '@Moleculas/Alerta';
+import { useCuotaId } from '@Hooks/Cuotas/useLeerCuota';
 import PopUpEliminar from '@Moleculas/PopUp';
 import { RUTAS } from '@Constantes/rutas';
 import { RepositorioEliminarSetCuotas } from '@Dominio/Repositorios/Cuotas/repositorioEliminarSetCuotas';
@@ -18,10 +20,12 @@ import { PERMISOS } from '@Utilidades/Constantes/permisos';
 import { useConsultarCuotas } from '@Hooks/Cuotas/useConsultarCuotas';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import CuotasInfo from '@Moleculas/CuotasInfo';
+
 const ListaCuotas = () => {
   const navegar = useNavigate();
   const { usuario } = useAuth();
   const { cuotas, cargando, error } = useConsultarCuotas();
+  const [idCuotaDetalle, setIdCuotaDetalle] = useState(null);
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
@@ -30,6 +34,9 @@ const ListaCuotas = () => {
   const [idsSetCuotas, setIdsSetCuotas] = useState([]);
   const [alerta, setAlerta] = useState(null);
   const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
+  const [modalAbierto, setModalAbierto] = useState(false);
+
+  const { cuota, cargando: cargandoDetalle } = useCuotaId(idCuotaDetalle);
 
   useEffect(() => {
     if (!usuario?.clienteSeleccionado) {
@@ -68,6 +75,7 @@ const ListaCuotas = () => {
   const filas = Array.isArray(cuotas)
     ? cuotas.map((cuota) => ({
         id: cuota.idCuotaSet,
+        idCuotaSet: cuota.idCuotaSet,
         nombre: cuota.nombre,
         periodoRenovacion: cuota.periodoRenovacion,
         renovacionHabilitada: cuota.renovacionHabilitada === 1,
@@ -78,8 +86,6 @@ const ListaCuotas = () => {
 
   const handleAbrirModalCrear = () => setModalCrearAbierto(true);
   const handleCerrarModalCrear = () => setModalCrearAbierto(false);
-  const [cuotaSeleccionada, setCuotaSeleccionada] = useState(null);
-  const [modalAbierto, setModalAbierto] = useState(false);
   const manejarCancelarEliminar = () => setAbrirPopUpEliminar(false);
 
   const manejarConfirmarEliminar = async () => {
@@ -136,7 +142,6 @@ const ListaCuotas = () => {
       backgroundColor: colores.altertex[1],
     },
   ];
-
   return (
     <>
       <ContenedorLista
@@ -166,7 +171,7 @@ const ListaCuotas = () => {
               setSeleccionados(ids);
             }}
             onRowClick={(params) => {
-              setCuotaSeleccionada(params.row);
+              setIdCuotaDetalle(params.row.idCuotaSet);
               setModalAbierto(true);
             }}
           />
@@ -181,19 +186,14 @@ const ListaCuotas = () => {
         confirmar={manejarConfirmarEliminar}
         dialogo='¿Estás seguro de que deseas eliminar los sets de cuotas seleccionados? Esta acción no se puede deshacer.'
       />
-      {modalAbierto && cuotaSeleccionada && (
+
+      {modalAbierto && (
         <ModalFlotante
           open={modalAbierto}
           onClose={() => setModalAbierto(false)}
           titulo='Detalles del Set de Cuotas'
         >
-          <CuotasInfo
-            nombre={cuotaSeleccionada.nombre}
-            periodoRenovacion={cuotaSeleccionada.periodoRenovacion}
-            renovacionHabilitada={cuotaSeleccionada.renovacionHabilitada}
-            descripcion={cuotaSeleccionada.descripcion}
-            ultimaActualizacion={cuotaSeleccionada.ultimaActualizacion}
-          />
+          {cargandoDetalle || !cuota ? <span>Cargando...</span> : <CuotasInfo {...cuota} />}
         </ModalFlotante>
       )}
 

From a3352016c858b3b8ffe1bca3abdbfd0efb1d6a1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Mon, 12 May 2025 22:14:15 -0600
Subject: [PATCH 006/160] =?UTF-8?q?fix:elimine=20un=20bot=C3=B3n=20del=20m?=
 =?UTF-8?q?odal=20flotante?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index fde4e5ce..3ccd57d1 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -193,6 +193,15 @@ const ListaCuotas = () => {
           onClose={() => setModalAbierto(false)}
           titulo='Detalles del Set de Cuotas'
         >
+          botones ={' '}
+          {[
+            {
+              label: 'Cerrar',
+              variant: 'contained',
+              onClick: () => setModalAbierto(false),
+              color: 'error',
+            },
+          ]}
           {cargandoDetalle || !cuota ? <span>Cargando...</span> : <CuotasInfo {...cuota} />}
         </ModalFlotante>
       )}

From f6f685705368c107baadceb99cac423483834b23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Mon, 12 May 2025 22:16:27 -0600
Subject: [PATCH 007/160] =?UTF-8?q?fix:=20se=20removi=C3=B3=20boton=20sin?=
 =?UTF-8?q?=20uso?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index 3ccd57d1..fde4e5ce 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -193,15 +193,6 @@ const ListaCuotas = () => {
           onClose={() => setModalAbierto(false)}
           titulo='Detalles del Set de Cuotas'
         >
-          botones ={' '}
-          {[
-            {
-              label: 'Cerrar',
-              variant: 'contained',
-              onClick: () => setModalAbierto(false),
-              color: 'error',
-            },
-          ]}
           {cargandoDetalle || !cuota ? <span>Cargando...</span> : <CuotasInfo {...cuota} />}
         </ModalFlotante>
       )}

From 4ca508420269c7cecad0214b65dd806a13f23dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Mon, 12 May 2025 22:17:15 -0600
Subject: [PATCH 008/160] =?UTF-8?q?fix:=20ajustar=20formato=20de=20declara?=
 =?UTF-8?q?ci=C3=B3n=20de=20constante=20MENSAJE=5FPOPUP=5FELIMINAR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 43e8cc16..24cb93a3 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -20,8 +20,8 @@ const ListaGrupoEmpleados = () => {
   const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
 
   const [gruposSeleccionados, setGruposSeleccionados] = useState([]);
   const [alerta, setAlerta] = useState(null);

From 2644e13ec6d156a4258d5a8c25b9d95c7d067395 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Tue, 13 May 2025 02:44:21 -0600
Subject: [PATCH 009/160] =?UTF-8?q?Feat:=20L=C3=B3gica=20implementada=20pa?=
 =?UTF-8?q?ra=20actualizar=20grupo=20de=20empleados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RepositorioActualizarGrupoEmpleados.js    |  45 ++++
 src/Dominio/Servicios/obtenerEmpleados.js     |  28 +++
 src/Dominio/Servicios/obtenerSetsProductos.js |  31 +++
 src/Utilidades/Constantes/rutasAPI.js         |   3 +
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 210 ++++++++++++++++++
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  61 ++++-
 .../Empleados/useActualizarGrupoEmpleados.js  |  58 +++++
 7 files changed, 428 insertions(+), 8 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js
 create mode 100644 src/Dominio/Servicios/obtenerEmpleados.js
 create mode 100644 src/Dominio/Servicios/obtenerSetsProductos.js
 create mode 100644 src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
 create mode 100644 src/hooks/Empleados/useActualizarGrupoEmpleados.js

diff --git a/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js b/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js
new file mode 100644
index 00000000..72de1e5b
--- /dev/null
+++ b/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js
@@ -0,0 +1,45 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarGrupoEmpleados {
+  /**
+   * * Actualiza los datos de un grupo de empleados específico
+   * @param {number} idGrupo - ID del grupo de empleados a actualizar
+   * @param {string} nombre - Nuevo nombre del grupo de empleados
+   * @param {string} descripcion - Nueva descripción del grupo de empleados
+   * @param {array} empleados - Lista de IDs de empleados a agregar al grupo
+   * @param {array} setsDeProductos - Lista de IDs de sets de productos a agregar al grupo
+   * @returns {Promise<{mensaje: string}>}
+   *
+   * @see [RF[24] Actualizar grupo de empleados - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF24)
+   */
+  static async actualizarGrupoEmpleados(idGrupo, nombre, descripcion, empleados, setsDeProductos) {
+    try {
+      const respuesta = await axios.put(
+        RUTAS_API.EMPLEADOS.ACTUALIZAR_GRUPO,
+        {
+          idGrupoEmpleado: idGrupo,
+          nombre: nombre,
+          descripcion: descripcion,
+          empleados: empleados,
+          setsDeProductos: setsDeProductos,
+        },
+        {
+          headers: {
+            'x-api-key': API_KEY,
+          },
+          withCredentials: true,
+        }
+      );
+
+      const { mensaje } = respuesta.data;
+
+      return { mensaje };
+    } catch (error) {
+      const mensaje = error.response?.data?.mensaje || 'Error al actualizar el grupo de empleados.';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Dominio/Servicios/obtenerEmpleados.js b/src/Dominio/Servicios/obtenerEmpleados.js
new file mode 100644
index 00000000..babaca66
--- /dev/null
+++ b/src/Dominio/Servicios/obtenerEmpleados.js
@@ -0,0 +1,28 @@
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL;
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+const obtenerEmpleados = async (clienteSeleccionado) => {
+  try {
+    const respuesta = await axios.post(
+      `${API_URL}/api/empleados/consultar-lista`,
+      { clienteSeleccionado },
+      {
+        headers: {
+          'x-api-key': API_KEY,
+        },
+        withCredentials: true,
+      }
+    );
+    const filasFormateadas = respuesta.data.empleados.map((empleado) => ({
+      id: empleado.idEmpleado,
+      nombre: empleado.nombreCompleto,
+      area: empleado.areaTrabajo,
+    }));
+    return filasFormateadas;
+  } catch {
+    return [];
+  }
+};
+export default obtenerEmpleados;
diff --git a/src/Dominio/Servicios/obtenerSetsProductos.js b/src/Dominio/Servicios/obtenerSetsProductos.js
new file mode 100644
index 00000000..18fdc4ab
--- /dev/null
+++ b/src/Dominio/Servicios/obtenerSetsProductos.js
@@ -0,0 +1,31 @@
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL;
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+const obtenerSetsProductos = async (clienteSeleccionado) => {
+  try {
+    const respuesta = await axios.post(
+      `${API_URL}/api/sets-productos/consultar-lista`,
+      { clienteSeleccionado },
+      {
+        headers: {
+          'x-api-key': API_KEY,
+        },
+        withCredentials: true,
+      }
+    );
+
+    const filasFormateadas = respuesta.data.setsProductos.map((producto) => ({
+      id: producto.idSetProducto,
+      nombreProducto: producto.nombre,
+      activo: producto.activo,
+    }));
+
+    return filasFormateadas;
+  } catch {
+    return [];
+  }
+};
+
+export default obtenerSetsProductos;
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index 2c49378c..7bcba54c 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -1,3 +1,5 @@
+import { A } from 'storybook/internal/components';
+
 const BASE_URL = import.meta.env.VITE_API_URL;
 const BASE_USUARIOS = `${BASE_URL}/api/usuarios`;
 const BASE_CATEGORIAS = `${BASE_URL}/api/categorias`;
@@ -49,6 +51,7 @@ export const RUTAS_API = {
     ELIMINAR_EMPLEADO: `${BASE_EMPLEADOS}/eliminar`,
     ELIMINAR_GRUPO: `${BASE_EMPLEADOS}/eliminar-grupo`,
     LEER_GRUPO: `${BASE_EMPLEADOS}/leer-grupo`,
+    ACTUALIZAR_GRUPO: `${BASE_EMPLEADOS}/actualizar-grupo`,
   },
   CUOTAS: {
     BASE: BASE_CUOTAS,
diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
new file mode 100644
index 00000000..2d5cb4bc
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -0,0 +1,210 @@
+import Alerta from '@Moleculas/Alerta';
+import CampoTexto from '@Atomos/CampoTexto';
+import { useState, useEffect } from 'react';
+import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
+import obtenerEmpleados from '@Servicios/obtenerEmpleados';
+import ProductosModal from '@Organismos/ProductosModal';
+import { useAuth } from '@Hooks/AuthProvider';
+import Tabla from '@Organismos/Tabla';
+import { Box, Button, Chip, Grid } from '@mui/material';
+import Texto from '@Atomos/Texto';
+
+const InfoGrupoEmpleadosEditable = ({
+  nombre: nombreInicial,
+  descripcion: descripcionInicial,
+  setsProductos: setsProductosInicial,
+  empleados: empleadosInicial,
+}) => {
+  const [productosDisponibles, setProductosDisponibles] = useState([]);
+  const [empleadosDisponibles, setEmpleadosDisponibles] = useState([]); // Lista de empleados disponibles
+  const { usuario } = useAuth();
+  const clienteSeleccionado = usuario.clienteSeleccionado;
+
+  // Estados locales
+  const [nombre, setNombre] = useState(nombreInicial || '');
+  const [descripcion, setDescripcion] = useState(descripcionInicial || '');
+  const [setsProductos, setSetsProductos] = useState(setsProductosInicial || []);
+  const [empleados, setEmpleados] = useState(empleadosInicial || []);
+  const [mostrarAlerta, setMostrarAlerta] = useState(false);
+
+  useEffect(() => {
+    const obtenerDatos = async () => {
+      const productos = await obtenerSetsProductos(clienteSeleccionado);
+      setProductosDisponibles(productos);
+
+      const empleados = await obtenerEmpleados(clienteSeleccionado); // Obtener empleados disponibles
+      setEmpleadosDisponibles(empleados);
+    };
+
+    obtenerDatos();
+  }, [clienteSeleccionado]);
+
+  const handleAgregarProducto = (evento) => {
+    const productoSeleccionado = evento.row;
+
+    const yaExiste = setsProductos.some((producto) => producto.id === productoSeleccionado.id);
+    if (!yaExiste) {
+      setSetsProductos((prev) => [...prev, productoSeleccionado]);
+    }
+  };
+
+  const handleAgregarEmpleado = (evento) => {
+    const empleadoSeleccionado = evento.row;
+
+    const yaExiste = empleados.some((empleado) => empleado.id === empleadoSeleccionado.id);
+    if (!yaExiste) {
+      setEmpleados((prev) => [...prev, empleadoSeleccionado]);
+    }
+  };
+
+  const filasEmpleados = empleados.map((empleado, index) => {
+    const [nombreCompleto, correoElectronico, areaTrabajo] = empleado.split(' | ');
+    return {
+      id: index + 1,
+      nombreCompleto,
+      correoElectronico,
+      areaTrabajo,
+    };
+  });
+
+  const handleGuardar = () => {
+    if (!nombre || !descripcion || setsProductos.length === 0 || empleados.length === 0) {
+      setMostrarAlerta(true); // Mostrar alerta si faltan datos
+      return;
+    }
+
+    console.log('Nombre:', nombre);
+    console.log('Descripción:', descripcion);
+    console.log('Sets de Productos:', setsProductos);
+    console.log('Empleados:', empleados);
+    // Aquí puedes implementar la lógica para guardar los cambios
+  };
+
+  return (
+    <Box p={3}>
+      <Grid container spacing={2}>
+        {/* Nombre */}
+        <Grid item xs={12}>
+          <Texto variant='h6'>Nombre:</Texto>
+          <CampoTexto
+            fullWidth
+            variant='outlined'
+            value={nombre}
+            placeholder='Nombre del grupo'
+            onChange={(e) => setNombre(e.target.value)}
+            sx={{ mt: 1 }}
+          />
+        </Grid>
+
+        {/* Descripción */}
+        <Grid item xs={12}>
+          <Texto variant='h6'>Descripción:</Texto>
+          <CampoTexto
+            fullWidth
+            variant='outlined'
+            value={descripcion}
+            placeholder='Escribe una descripción'
+            onChange={(e) => setDescripcion(e.target.value)}
+            sx={{ mt: 1 }}
+          />
+        </Grid>
+
+        {/* Sets de Productos */}
+        <Grid item xs={12}>
+          <Texto variant='h6'>Sets de Productos:</Texto>
+          <Box display='flex' gap={1} flexWrap='wrap' mb={2}>
+            {setsProductos?.length > 0 ? (
+              setsProductos.map((set, index) => (
+                <Chip
+                  key={index}
+                  label={set.nombreProducto || set}
+                  onDelete={() => setSetsProductos(setsProductos.filter((_, i) => i !== index))}
+                  sx={{
+                    borderRadius: '16px',
+                    backgroundColor: '#e0f7fa',
+                    color: '#006064',
+                  }}
+                />
+              ))
+            ) : (
+              <Texto variant='body1' sx={{ color: '#9e9e9e' }}>
+                No especificada
+              </Texto>
+            )}
+          </Box>
+          <ProductosModal
+            elevacion={1}
+            sx={{ width: '100%', height: '350px' }}
+            columnas={[
+              { field: 'id', headerName: 'Id', width: 100 },
+              { field: 'nombreProducto', headerName: 'Nombre', width: 220 },
+              { field: 'tipo', headerName: 'Tipo', width: 100 },
+            ]}
+            filas={productosDisponibles}
+            paginacion={4}
+            checkBox={true}
+            onRowClick={handleAgregarProducto}
+          />
+        </Grid>
+
+        {/* Empleados */}
+        <Grid item xs={12}>
+          <Texto variant='h6'>Empleados:</Texto>
+          <Box display='flex' gap={1} flexWrap='wrap' mb={2}>
+            {empleados?.length > 0 ? (
+              empleados.map((empleado, index) => (
+                <Chip
+                  key={index}
+                  label={empleado.nombreCompleto || empleado}
+                  onDelete={() => setEmpleados(empleados.filter((_, i) => i !== index))}
+                  sx={{
+                    borderRadius: '16px',
+                    backgroundColor: '#e0f7fa',
+                    color: '#006064',
+                  }}
+                />
+              ))
+            ) : (
+              <Texto variant='body1' sx={{ color: '#9e9e9e' }}>
+                No especificada
+              </Texto>
+            )}
+          </Box>
+          <ProductosModal
+            elevacion={1}
+            sx={{ width: '100%', height: '350px' }}
+            columnas={[
+              { field: 'id', headerName: 'Id', width: 100 },
+              { field: 'nombre', headerName: 'Nombre', width: 220 },
+              { field: 'area', headerName: 'Área de Trabajo', width: 200 },
+            ]}
+            filas={empleadosDisponibles}
+            paginacion={4}
+            checkBox={true}
+            onRowClick={handleAgregarEmpleado}
+          />
+        </Grid>
+
+        {/* Botón Guardar */}
+        <Grid item xs={12}>
+          <Button variant='contained' color='primary' onClick={handleGuardar} sx={{ mt: 2 }}>
+            Guardar Cambios
+          </Button>
+        </Grid>
+      </Grid>
+
+      {mostrarAlerta && (
+        <Alerta
+          tipo='warning'
+          mensaje='Completa todos los campos y selecciona al menos un producto.'
+          cerrable
+          duracion={10000}
+          onClose={() => setMostrarAlerta(false)}
+          sx={{ mb: 2, mt: 2 }}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default InfoGrupoEmpleadosEditable;
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 43e8cc16..0d25b163 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -14,6 +14,7 @@ import { PERMISOS } from '@Constantes/permisos';
 import InfoGrupoEmpleados from '@Moleculas/GrupoEmpleadosInfo';
 import { useGrupoEmpleadosId } from '@Hooks/Empleados/useLeerGrupoEmpleados';
 import ModalFlotante from '@Organismos/ModalFlotante';
+import InfoGrupoEmpleadosEditable from '@Moleculas/GrupoEmpleadosInfoEditable';
 
 const ListaGrupoEmpleados = () => {
   const { grupos, cargando, error, refetch } = useConsultarGrupos();
@@ -29,6 +30,7 @@ const ListaGrupoEmpleados = () => {
   const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
   const [idGrupoSeleccionado, setIdGrupoSeleccionado] = useState(null);
+  const [abrirModalEditar, setAbrirModalEditar] = useState(false);
 
   const {
     grupoEmpleados,
@@ -98,14 +100,6 @@ const ListaGrupoEmpleados = () => {
       size: 'large',
       backgroundColor: colores.altertex[1],
     },
-    {
-      variant: 'outlined',
-      label: 'Editar',
-      onClick: () => console.log('Editar'),
-      color: 'primary',
-      size: 'large',
-      outlineColor: colores.primario[10],
-    },
     {
       label: 'Eliminar',
       onClick: () => {
@@ -180,6 +174,16 @@ const ListaGrupoEmpleados = () => {
           tituloVariant='h4'
           customWidth={800}
           botones={[
+            {
+              label: 'Editar',
+              variant: 'contained',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: () => {
+                setModalDetalleAbierto(false);
+                setAbrirModalEditar(true);
+              },
+            },
             {
               label: 'Salir',
               variant: 'outlined',
@@ -204,6 +208,47 @@ const ListaGrupoEmpleados = () => {
           )}
         </ModalFlotante>
       )}
+      {abrirModalEditar && (
+        <ModalFlotante
+          open={abrirModalEditar}
+          onClose={() => setAbrirModalEditar(false)}
+          titulo='Editar Grupo de Empleados'
+          tituloVariant='h4'
+          customWidth={700}
+          botones={[
+            {
+              label: 'Guardar',
+              variant: 'contained',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: () => {
+                setAbrirModalEditar(false);
+                refetch();
+              },
+            },
+            {
+              label: 'Cancelar',
+              variant: 'outlined',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: () => setAbrirModalEditar(false),
+            },
+          ]}
+        >
+          {cargandoDetalle ? (
+            <p>Cargando información del grupo de empleados...</p>
+          ) : errorDetalle ? (
+            <p>Error al cargar la información del grupo de empleados: {errorDetalle}</p>
+          ) : (
+            <InfoGrupoEmpleadosEditable
+              nombre={grupoEmpleados?.nombre || ''}
+              descripcion={grupoEmpleados?.descripcion || ''}
+              setsProductos={grupoEmpleados?.setsProductos || []}
+              empleados={grupoEmpleados?.empleados || []}
+            />
+          )}
+        </ModalFlotante>
+      )}
     </>
   );
 };
diff --git a/src/hooks/Empleados/useActualizarGrupoEmpleados.js b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
new file mode 100644
index 00000000..f67b327e
--- /dev/null
+++ b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { RepositorioActualizarGrupoEmpleados } from '@Repositorios/Empleados/RepositorioActualizarGrupoEmpleados';
+
+/**
+ * * Hook para actualizar los datos de un grupo de empleados
+ * @param {number} idGrupo - ID del grupo de empleados a actualizar
+ * @param {string} nombre - Nuevo nombre del grupo de empleados
+ * @param {string} descripcion - Nueva descripción del grupo de empleados
+ * @param {array} empleados - Lista de IDs de empleados a agregar al grupo
+ * @param {array} setsDeProductos - Lista de IDs de sets de productos a agregar al grupo
+ * @returns {{
+ *    mensaje: string,
+ * *    cargando: boolean,
+ * *    error: string | null
+ * *  }}
+ * * @see [RF[24] Actualizar grupo de empleados - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF24)
+ */
+
+export const useActualizarGrupoEmpleados = (
+  idGrupo,
+  nombre,
+  descripcion,
+  empleados,
+  setsDeProductos
+) => {
+  const [mensaje, setMensaje] = useState('');
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const actualizarGrupoEmpleados = async () => {
+      setCargando(true);
+      setError(null);
+
+      try {
+        const { mensaje } = await RepositorioActualizarGrupoEmpleados.actualizarGrupoEmpleados(
+          idGrupo,
+          nombre,
+          descripcion,
+          empleados,
+          setsDeProductos
+        );
+
+        setMensaje(mensaje);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setCargando(false);
+      }
+    };
+
+    if (idGrupo) {
+      actualizarGrupoEmpleados();
+    }
+  }, [idGrupo, nombre, descripcion, empleados, setsDeProductos]);
+
+  return { mensaje, cargando, error };
+};

From 41ef2a9c375fba18332cc81ad22cc47b98842795 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Tue, 13 May 2025 08:50:13 -0600
Subject: [PATCH 010/160] =?UTF-8?q?fix:=20correg=C3=AD=20los=20botones=20y?=
 =?UTF-8?q?=20al=20modal=20flotante=20lo=20puse=20en=20negritas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Componentes/Moleculas/CuotasInfo.jsx     |  5 -----
 src/Vistas/Componentes/Organismos/ModalFlotante.jsx |  7 ++++++-
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx           | 11 ++++++++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
index 87afe07f..33a2ef76 100644
--- a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
@@ -18,11 +18,6 @@ const CuotasInfo = ({
     <Box>
       <Grid container spacing={6} mb={4}>
         <Grid item xs={12} sm={6}>
-          <Box display='flex' alignItems='center' gap={2} mb={2}>
-            <Texto variant='h6' gutterBottom>
-              <strong>Información de la Cuota</strong>
-            </Texto>
-          </Box>
           <Texto gutterBottom sx={{ mb: 2, pb: 1 }}>
             <strong>Nombre:</strong>{' '}
             <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
diff --git a/src/Vistas/Componentes/Organismos/ModalFlotante.jsx b/src/Vistas/Componentes/Organismos/ModalFlotante.jsx
index be03191a..f2868bbb 100644
--- a/src/Vistas/Componentes/Organismos/ModalFlotante.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalFlotante.jsx
@@ -65,7 +65,12 @@ const ModalFlotante = ({
         }}
       >
         {titulo && (
-          <Texto variant={tituloVariant} gutterBottom sx={{ color: colores.texto[1] }} mb={3}>
+          <Texto
+            variant={tituloVariant}
+            gutterBottom
+            sx={{ color: colores.texto[1], fontWeight: 'bold' }}
+            mb={3}
+          >
             {titulo}
           </Texto>
         )}
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index fde4e5ce..1e6e69a1 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -191,7 +191,16 @@ const ListaCuotas = () => {
         <ModalFlotante
           open={modalAbierto}
           onClose={() => setModalAbierto(false)}
-          titulo='Detalles del Set de Cuotas'
+          titulo='Detalles de la Cuota'
+          botones={[
+            {
+              label: 'Cerrar',
+              variant: 'contained',
+              color: 'error',
+              backgroundColor: colores.altertex[1],
+              onClick: () => setModalAbierto(false),
+            },
+          ]}
         >
           {cargandoDetalle || !cuota ? <span>Cargando...</span> : <CuotasInfo {...cuota} />}
         </ModalFlotante>

From eddd7778e314a9f3966c472fce9a65bbb39e7115 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 22 May 2025 16:23:12 -0600
Subject: [PATCH 011/160] feature: Modal para importar productos

---
 .../Organismos/ModalImportarProductos.jsx     | 195 ++++++++++++++++++
 .../Paginas/Productos/ListaProductos.jsx      |  23 ++-
 2 files changed, 214 insertions(+), 4 deletions(-)
 create mode 100644 src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx

diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
new file mode 100644
index 00000000..c2e98ebb
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -0,0 +1,195 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Box, List, ListItem, ListItemIcon, ListItemText, CircularProgress, useTheme } from '@mui/material';
+import Icono from '@Atomos/Icono';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import ContenedorImportar from '@Organismos/ContenedorImportar';
+import Alerta from '@Moleculas/Alerta';
+import { tokens } from '@SRC/theme';
+import InfoImportar from '@Organismos/InfoImportar';
+import CajaDesplazable from '@Organismos/CajaDesplazable';
+
+const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errores, exito, recargar }) => {
+  const [archivo, setFile] = useState(null);
+  const [estado, setEstado] = useState('idle'); 
+  const [infoJson, setInfoJson] = useState([]);
+  const [alerta, setAlerta] = useState(null); 
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+  const [abririnfo, setAbrirInfo] = useState(false);
+  const [mensajeErrores, setMensajeErrores] = useState('');
+
+  // Manejo de errores en la importación
+  useEffect(() => {
+    if (errores && errores.length > 0) {
+      const mensaje = errores
+        .map(elemento => `Fila ${elemento.fila}: ${elemento.error}`)
+        .join('\n');
+      setMensajeErrores(mensaje);
+    } else {
+      setMensajeErrores('');
+    }
+  }, [errores]);
+
+  // Manejo de éxito en la importación
+  useEffect(() => {
+    if (exito) {
+      setAlerta({
+        tipo: 'success',
+        mensaje: 'Importación completada con éxito.',
+        icono: true,
+        cerrable: true,
+        duracion: 2500,
+        centradoInferior: true,
+      });
+      recargar();
+      setInfoJson([]);
+      setFile(null);
+      setEstado('idle');
+      onCerrar(false);
+      setMensajeErrores('');
+    }
+  }, [exito, onCerrar, recargar]);
+
+  // Manejo de cierre del modal de importar
+  const handleCerrar = useCallback(() => {
+    onCerrar(false);
+    setInfoJson([]);
+    setFile(null);
+    setEstado('idle');
+    setAlerta(null);
+    setMensajeErrores('');
+  }, [onCerrar]);
+
+  // Manejo de archivo aceptados
+  const handleFileAccepted = (archivo, data) => {
+    setFile(archivo);
+    setEstado('loading');
+    setInfoJson(data);
+    setEstado('complete');
+  };
+
+  // Manejo de eliminación de archivo
+  const handleEliminar = () => {
+    setFile(null);
+    setEstado('idle');
+    setInfoJson([]);
+  };
+
+  // Manejo de confirmación de importación
+  const handleConfirmar = () => {
+    if (!infoJson.length) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Agrega un archivo CSV válido.',
+        duracion: 2500,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+    onConfirm(infoJson);
+    setFile(null);
+    setEstado('idle');
+    setAlerta(null);
+    setInfoJson([]);
+
+  };
+
+  return (
+    <>
+    <ModalFlotante
+      open={abierto}
+      titulo="Importar Empleados con CSV"
+      onClose={handleCerrar}
+      botones={[
+    {
+      label: 'Cancelar',
+      variant: 'outlined',
+      onClick: handleCerrar,
+      disabled: cargando,    
+      outlineColor: colores.altertex[1],       
+    },
+    {
+      label: 'Guardar',
+      variant: 'contained',
+      onClick: handleConfirmar,
+      disabled: cargando,   
+      backgroundColor: colores.altertex[1],        
+    },
+  ]}
+    >
+
+      <ContenedorImportar onFileAccepted={handleFileAccepted} cargando={cargando} />
+
+      {archivo && (
+        <List disablePadding>
+          <ListItem
+            secondaryAction={
+
+              <Icono nombre="Delete" color='grey' clickable={true} onClick={handleEliminar}/>
+            }
+          >
+            <ListItemIcon>
+              {estado === 'Cargando...' ? (
+                <CircularProgress size={24} />
+              ) : (
+                <Icono nombre="CheckCircle" color='success'/>
+              )}
+            </ListItemIcon>
+            <ListItemText
+              primary={archivo.name}
+                secondary={`${(archivo.size / 1024).toFixed(1)} KB · ${
+                  estado === 'complete' ? 'Cargado' : 'Cargando…'
+              }`}
+            />
+          </ListItem>
+        </List>
+      )}
+
+      <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
+        <a href="/plantilla_importar_empleados.csv" download="plantilla_importar_empleados.csv">
+          Descargar CSV de ejemplo 
+        </a>
+        <InfoImportar 
+          open={abririnfo}
+          onClose={() => setAbrirInfo(false)}> 
+              Consideraciones para tu CSV:<br/>
+              Campos obligatorios: no dejes celdas vacías en ninguna columna.<br/>
+              Correo electrónico: formato válido (usuario@dominio.com).<br/>
+              {`Contraseñas: mínimo 8 caracteres, al menos una mayúscula y un carácter especial (!@#$%^&*(),.?":{}|<>)`}<br/>
+              Teléfonos: exactamente 10 dígitos, sin espacios ni guiones.<br/>
+              Textos largos: máximo 75 caracteres por campo.<br/>
+              Fecha Nacimiento: formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
+              Estado: 1 → activo, 0 → inactivo.<br/>
+              Antiguedad: formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
+           </InfoImportar>
+            </Box><br/>
+                {mensajeErrores && (
+                <Box mb={2} width="100%">
+                  <CajaDesplazable maxHeight={150}>
+                    <Box sx={{ whiteSpace: 'pre-line' }}>
+                      {mensajeErrores}
+                    </Box>
+                  </CajaDesplazable>
+                </Box>
+              )}
+    </ModalFlotante>
+    
+
+    {alerta && (
+            <Alerta
+              tipo={alerta.tipo}
+              mensaje={alerta.mensaje}
+              icono={alerta.icono}
+              cerrable={alerta.cerrable}
+              duracion={alerta.duracion}
+              centradoInferior={alerta.centradoInferior}
+              onClose={() => setAlerta(null)}
+            />
+          )}
+      
+    </>
+  );
+};
+
+export default ModalImportarProductos;
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index c65ed8ed..2dd807fc 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -14,6 +14,8 @@ import { useEliminarProductos } from '@Hooks/Productos/useEliminarProductos';
 import { tokens } from '@SRC/theme';
 import { useAuth } from '@Hooks/AuthProvider';
 import { PERMISOS } from '@Constantes/permisos';
+import ModalImportarProdctos from '@Organismos/ModalImportarProductos';
+
 const ListaProductos = () => {
   const { productos, cargando, error, recargar } = useConsultarProductos();
   const { eliminar } = useEliminarProductos();
@@ -29,6 +31,8 @@ const ListaProductos = () => {
   const [mostrarModalProducto, setMostrarModalProducto] = useState(false);
   const [alerta, setAlerta] = useState(null);
   const [openModalEliminar, setAbrirPopUp] = useState(false);
+  const [modalImportarAbierto, setModalImportarAbierto] = useState(false);
+  
 
   const mostrarFormularioProducto = useCallback(() => {
     setMostrarModalProducto(true);
@@ -83,6 +87,8 @@ const ListaProductos = () => {
     }
   };
 
+  const handleAbrirImportar = () => setModalImportarAbierto(true);
+
   const columnas = [
     {
       field: 'imagen',
@@ -145,13 +151,13 @@ const ListaProductos = () => {
       backgroundColor: colores.altertex[1],
     },
     {
-      //variant: 'outlined',
+      variant: 'outlined',
       label: 'Importar',
-      onClick: () => console.log('Importar'),
+      onClick: handleAbrirImportar,
       color: 'primary',
       size: 'large',
-      outlineColor: colores.primario[10],
-      construccion: true,
+      outlineColor: colores.altertex[1],
+
     },
     {
       //variant: 'outlined',
@@ -239,6 +245,15 @@ const ListaProductos = () => {
         confirmar={manejarConfirmarEliminar}
         dialogo={MENSAJE_POPUP_ELIMINAR}
       />
+        <ModalImportarProdctos
+        abierto={modalImportarAbierto}
+        onCerrar={() => setModalImportarAbierto(false)}
+        // onConfirm={importar}
+        // cargando={cargandoImportacion}
+        // errores={errores}
+        // exito={exito}
+        recargar={recargar}
+      ></ModalImportarProdctos>
     </>
   );
 };

From 91490fd3c5cabba2ada9ddf68bf9cf516f4ba703 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 10:26:16 -0600
Subject: [PATCH 012/160] feat: modal para crear un evento

---
 src/Vistas/Componentes/Atomos/CampoSelect.jsx |   2 +
 .../Organismos/Eventos/ModalCrearEvento.jsx   | 101 +++++++++++++
 .../Formularios/FormularioCrearEvento.jsx     | 133 ++++++++++++++++++
 src/Vistas/Paginas/Eventos/ListaEventos.jsx   |  40 +++++-
 4 files changed, 269 insertions(+), 7 deletions(-)
 create mode 100644 src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx

diff --git a/src/Vistas/Componentes/Atomos/CampoSelect.jsx b/src/Vistas/Componentes/Atomos/CampoSelect.jsx
index 8b693824..330b19be 100644
--- a/src/Vistas/Componentes/Atomos/CampoSelect.jsx
+++ b/src/Vistas/Componentes/Atomos/CampoSelect.jsx
@@ -18,6 +18,7 @@ const CampoSelect = ({
   helperText = '',
   disabled = false,
   size = 'small',
+  margin = 'normal',
   ...props
 }) => {
   return (
@@ -27,6 +28,7 @@ const CampoSelect = ({
       error={error}
       size={size}
       disabled={disabled}
+      margin={margin}
     >
       <InputLabel id={`${name}-label`}>{label}</InputLabel>
       <Select
diff --git a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
new file mode 100644
index 00000000..679edcbc
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
@@ -0,0 +1,101 @@
+// RF36 - Crear Evento - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF36]
+
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import FormularioCrearEvento from '@Organismos/Formularios/FormularioCrearEvento';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import { RUTAS } from '@Constantes/rutas';
+
+/**
+ * Modal para crear un nuevo set de cuotas.
+ *
+ * @param {boolean} abierto - Controla si el modal está abierto o cerrado
+ * @param {function} onCerrar - Función callback que se ejecuta al cerrar el modal
+ * @param {function} onCreado - Función callback que se ejecuta cuando se crea exitosamente el evento
+ */
+const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
+  const navegar = useNavigate();
+  const [nombreEvento, setNombreEvento] = useState('');
+  const [descripcionEvento, setDescripcionEvento] = useState('');
+  const [puntosEvento, setPuntosEvento] = useState(0);
+  const [multiplicadorEvento, setMultiplicadorEvento] = useState(0);
+  const [periodoEvento, setPeriodoEvento] = useState('');
+  const [renovacionEvento, setRenovacionEvento] = useState(false);
+  const [mostrarAlerta, setMostrarAlerta] = useState(false);
+
+  // Limpiar los campos cuando se cierra el modal
+  useEffect(() => {
+    if (!abierto) {
+      setNombreEvento('');
+      setDescripcionEvento('');
+      setPuntosEvento(0);
+      setMultiplicadorEvento(0);
+      setPeriodoEvento('');
+      setRenovacionEvento(false);
+      setMostrarAlerta(false);
+    }
+  }, [abierto]);
+
+  const handleConfirmar = () => {
+    // Validar que el nombre y descripción no estén vacíos después de eliminar espacios
+    // y que haya al menos un producto seleccionado
+    if (!nombreEvento.trim() || puntosEvento <= 0 || multiplicadorEvento <= 0) {
+      setMostrarAlerta(true);
+      return;
+    }
+
+    // Navegar a la siguiente página con datos limpios (sin espacios innecesarios)
+    navegar(
+      `${RUTAS.SISTEMA_ADMINISTRATIVO.BASE_TABLERO}${RUTAS.SISTEMA_ADMINISTRATIVO.CUOTAS.EDITAR_CUOTAS}`,
+      {
+        state: {
+          nombreEvento: nombreEvento.trim(),
+          descripcion: descripcionEvento.trim(),
+        },
+      }
+    );
+
+    // Notificar que se ha creado exitosamente
+    if (onCreado) {
+      onCreado();
+    }
+  };
+
+  // Manejar el cierre del modal
+  const handleCerrar = () => {
+    if (onCerrar) {
+      onCerrar();
+    }
+  };
+
+  // Si el componente se usa como modal controlado externamente
+  return (
+    <ModalFlotante
+      open={abierto}
+      onClose={handleCerrar}
+      onConfirm={handleConfirmar}
+      titulo='Agregar Evento'
+      cancelLabel='Cancelar'
+      confirmLabel='Crear'
+    >
+      <FormularioCrearEvento
+        nombreEvento={nombreEvento}
+        setNombreEvento={setNombreEvento}
+        descripcionEvento={descripcionEvento}
+        setDescripcionEvento={setDescripcionEvento}
+        puntosEvento={puntosEvento}
+        setPuntosEvento={setPuntosEvento}
+        multiplicadorEvento={multiplicadorEvento}
+        setMultiplicadorEvento={setMultiplicadorEvento}
+        periodoEvento={periodoEvento}
+        setPeriodoEvento={setPeriodoEvento}
+        renovacionEvento={renovacionEvento}
+        setRenovacionEvento={setRenovacionEvento}
+        mostrarAlerta={mostrarAlerta}
+        setMostrarAlerta={setMostrarAlerta}
+      />
+    </ModalFlotante>
+  );
+};
+
+export default ModalCrearEvento;
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
new file mode 100644
index 00000000..21488830
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
@@ -0,0 +1,133 @@
+// RF36 - Crear Evento - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF36]
+
+import Alerta from '@Moleculas/Alerta';
+import CampoTexto from '@Atomos/CampoTexto';
+import { useState, useEffect } from 'react';
+import { useAuth } from '@Hooks/AuthProvider';
+import { Box, Switch } from '@mui/material';
+import CampoSelect from '../../Atomos/CampoSelect';
+
+// Constantes para mensajes y límites
+const LIMITE_NOMBRE = 100;
+const LIMITE_DESCRIPCION = 300;
+const LIMITE_PERIODO = 50;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+
+const FormularioCrearEvento = ({
+  nombreEvento,
+  setNombreEvento,
+  descripcionEvento,
+  setDescripcionEvento,
+  puntosEvento,
+  setPuntosEvento,
+  multiplicadorEvento,
+  setMultiplicadorEvento,
+  periodoEvento,
+  setPeriodoEvento,
+  renovacionEvento,
+  setRenovacionEvento,
+  mostrarAlerta,
+  setMostrarAlerta,
+}) => {
+  const { usuario } = useAuth();
+  const clienteSeleccionado = usuario.clienteSeleccionado;
+
+  const esNumeroValido = (valor) => {
+    const regex = /^[0-9]+(\.[0-9]+)?$/;
+    return regex.test(valor);
+  };
+
+  const esTextoValido = (input) => {
+    return typeof input === 'string' && input.trim() !== '';
+  };
+
+  return (
+    <>
+      <CampoTexto
+        label={'Nombre del Evento'}
+        fullWidth
+        type={'text'}
+        value={nombreEvento}
+        onChange={(evento) => setNombreEvento(evento.target.value.slice(0, LIMITE_NOMBRE))}
+        inputProps={{ maxLength: LIMITE_NOMBRE }}
+        helperText={`${nombreEvento.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`}
+        sx={{ mb: 2 }}
+      />
+      <CampoTexto
+        label={'Descripción'}
+        fullWidth
+        type={'text'}
+        value={descripcionEvento}
+        onChange={(evento) =>
+          setDescripcionEvento(evento.target.value.slice(0, LIMITE_DESCRIPCION))
+        }
+        inputProps={{ maxLength: LIMITE_DESCRIPCION }}
+        helperText={`${descripcionEvento.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`}
+        sx={{ mb: 2 }}
+        multiline
+        rows={3}
+      />
+      <Box display={'grid'} gridTemplateColumns={'repeat(2, 1fr)'} gap={2}>
+        <CampoTexto
+          label={'Puntos'}
+          fullWidth
+          type={'number'}
+          value={puntosEvento}
+          onChange={(evento) =>
+            esNumeroValido(evento.target.value) && setPuntosEvento(evento.target.value)
+          }
+          inputProps={{ min: 0 }}
+          sx={{ mb: 2 }}
+        />
+        <CampoTexto
+          label={'Multiplicador'}
+          fullWidth
+          type={'number'}
+          value={multiplicadorEvento}
+          onChange={(evento) =>
+            esNumeroValido(evento.target.value) && setMultiplicadorEvento(evento.target.value)
+          }
+          inputProps={{ min: 0 }}
+          sx={{ mb: 2 }}
+        />
+      </Box>
+      <Box display={'grid'} gridTemplateColumns={'repeat(2, 1fr)'} gap={2}>
+        <CampoTexto
+          label={'Periodo de Renovación'}
+          fullWidth
+          type={'text'}
+          value={periodoEvento}
+          onChange={(evento) => setPeriodoEvento(evento.target.value)}
+          inputProps={{ maxLength: LIMITE_PERIODO }}
+          helperText={`${periodoEvento.length}/${LIMITE_PERIODO} - ${MENSAJE_LIMITE}`}
+          sx={{ mb: 2 }}
+        />
+        <CampoSelect
+          label={'Renovación Automática'}
+          fullWidth
+          value={renovacionEvento}
+          onChange={(evento) => setRenovacionEvento(evento.target.value)}
+          options={[
+            { value: true, label: 'Sí' },
+            { value: false, label: 'No' },
+          ]}
+          placeholder={'Selecciona una opción'}
+          sx={{ mb: 2 }}
+        />
+      </Box>
+
+      {mostrarAlerta && (
+        <Alerta
+          tipo='warning'
+          mensaje={'Completa todos los campos.'}
+          cerrable
+          duracion={10000}
+          onClose={() => setMostrarAlerta(false)}
+          sx={{ mb: 2, mt: 2 }}
+        />
+      )}
+    </>
+  );
+};
+
+export default FormularioCrearEvento;
diff --git a/src/Vistas/Paginas/Eventos/ListaEventos.jsx b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
index f495afaf..5af65e81 100644
--- a/src/Vistas/Paginas/Eventos/ListaEventos.jsx
+++ b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
@@ -1,5 +1,6 @@
+// RF36 - Crear Evento - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF36]
 // RF37 - Consulta Lista de Eventos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF37
-//RF38 - Leer Evento - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF38
+// RF38 - Leer Evento - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF38
 
 import React, { useState } from 'react';
 import Tabla from '@Organismos/Tabla';
@@ -8,6 +9,7 @@ import Alerta from '@Moleculas/Alerta';
 import PopUp from '@Moleculas/PopUp';
 import { Box, useTheme } from '@mui/material';
 import ModalFlotante from '@Organismos/ModalFlotante';
+import ModalCrearEvento from '@Organismos/Eventos/ModalCrearEvento';
 import { useEventoId } from '@Hooks/Eventos/useLeerEvento';
 import { useConsultarEventos } from '@Hooks/Eventos/useConsultarEventos';
 import InfoEvento from '@Moleculas/EventoInfo';
@@ -25,15 +27,35 @@ const ListaEventos = () => {
   const [seleccionados, setSeleccionados] = useState([]);
   const [alerta, setAlerta] = useState(null);
   const { eliminar } = useEliminarEvento();
-  const [abrirEliminar, setAbrirPopUpEliminar] = useState(false);
+  const [abrirCrear, setAbrirCrear] = useState(false);
+  const [abrirEliminar, setAbrirEliminar] = useState(false);
   const { usuario } = useAuth();
 
   const [eventoSeleccionado, setEventoSeleccionado] = useState(null);
   const [modalAbierto, setModalAbierto] = useState(false);
   const { evento } = useEventoId(eventoSeleccionado ? eventoSeleccionado.id : null);
 
+  const manejarAbrirCrear = () => {
+    setAbrirCrear(true);
+  };
+  const manejarCancelarCrear = () => {
+    setAbrirCrear(false);
+  };
+
+  const manejarConfirmarCrear = async () => {
+    console.log('Crear Evento');
+    setAbrirCrear(false);
+    setAlerta({
+      tipo: 'success',
+      mensaje: 'Evento creado correctamente.',
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
+  };
+
   const manejarCancelarEliminar = () => {
-    setAbrirPopUpEliminar(false);
+    setAbrirEliminar(false);
   };
 
   const manejarConfirmarEliminar = async () => {
@@ -57,7 +79,7 @@ const ListaEventos = () => {
         centradoInferior: true,
       });
     } finally {
-      setAbrirPopUpEliminar(false);
+      setAbrirEliminar(false);
     }
   };
 
@@ -85,8 +107,7 @@ const ListaEventos = () => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: () => console.log('Añadir'),
-      construccion: true,
+      onClick: manejarAbrirCrear,
     },
     {
       label: 'Eliminar',
@@ -100,7 +121,7 @@ const ListaEventos = () => {
             centradoInferior: true,
           });
         } else {
-          setAbrirPopUpEliminar(true);
+          setAbrirEliminar(true);
         }
       },
       disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_EVENTO),
@@ -197,6 +218,11 @@ const ListaEventos = () => {
         confirmar={manejarConfirmarEliminar}
         dialogo={MENSAJE_POPUP_ELIMINAR}
       />
+      <ModalCrearEvento
+        abierto={abrirCrear}
+        onCerrar={manejarCancelarCrear}
+        onCreado={manejarConfirmarCrear}
+      />
     </>
   );
 };

From cf21cf13db3102f474cb6e138979707ec569caa3 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 10:37:51 -0600
Subject: [PATCH 013/160] fix: arreglar errores

---
 src/Vistas/Componentes/Atomos/Boton.jsx                  | 3 +++
 .../Organismos/Formularios/FormularioCrearEvento.jsx     | 9 ++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/Vistas/Componentes/Atomos/Boton.jsx b/src/Vistas/Componentes/Atomos/Boton.jsx
index 6a49b67e..40af2962 100644
--- a/src/Vistas/Componentes/Atomos/Boton.jsx
+++ b/src/Vistas/Componentes/Atomos/Boton.jsx
@@ -15,6 +15,7 @@ const Boton = ({
   label,
   onClick,
   construccion = false,
+  deshabilitado = false,
   ...props
 }) => {
   const theme = useTheme();
@@ -64,6 +65,7 @@ const Boton = ({
       }}
       onClick={onClick}
       construccion={estiloDeshabilitado}
+      disabled={deshabilitado}
       {...props}
     >
       {label}
@@ -83,6 +85,7 @@ Boton.propTypes = {
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   construccion: PropTypes.bool,
+  deshabilitado: PropTypes.bool,
 };
 
 export default Boton;
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
index 21488830..beebc525 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
@@ -2,9 +2,8 @@
 
 import Alerta from '@Moleculas/Alerta';
 import CampoTexto from '@Atomos/CampoTexto';
-import { useState, useEffect } from 'react';
 import { useAuth } from '@Hooks/AuthProvider';
-import { Box, Switch } from '@mui/material';
+import { Box } from '@mui/material';
 import CampoSelect from '../../Atomos/CampoSelect';
 
 // Constantes para mensajes y límites
@@ -36,11 +35,7 @@ const FormularioCrearEvento = ({
     const regex = /^[0-9]+(\.[0-9]+)?$/;
     return regex.test(valor);
   };
-
-  const esTextoValido = (input) => {
-    return typeof input === 'string' && input.trim() !== '';
-  };
-
+  
   return (
     <>
       <CampoTexto

From 33e7554137a706f8c5fb6c115099eb62e5db23b9 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 11:03:00 -0600
Subject: [PATCH 014/160] fix: validar campos

---
 .../Organismos/Eventos/ModalCrearEvento.jsx   | 34 ++++-------
 .../Formularios/FormularioCrearEvento.jsx     | 57 +++++++++++++------
 2 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
index 679edcbc..2cc4be91 100644
--- a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
@@ -1,10 +1,8 @@
 // RF36 - Crear Evento - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF36]
 
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import FormularioCrearEvento from '@Organismos/Formularios/FormularioCrearEvento';
 import ModalFlotante from '@Organismos/ModalFlotante';
-import { RUTAS } from '@Constantes/rutas';
 
 /**
  * Modal para crear un nuevo set de cuotas.
@@ -14,47 +12,35 @@ import { RUTAS } from '@Constantes/rutas';
  * @param {function} onCreado - Función callback que se ejecuta cuando se crea exitosamente el evento
  */
 const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
-  const navegar = useNavigate();
   const [nombreEvento, setNombreEvento] = useState('');
   const [descripcionEvento, setDescripcionEvento] = useState('');
-  const [puntosEvento, setPuntosEvento] = useState(0);
-  const [multiplicadorEvento, setMultiplicadorEvento] = useState(0);
+  const [puntosEvento, setPuntosEvento] = useState('');
+  const [multiplicadorEvento, setMultiplicadorEvento] = useState('');
   const [periodoEvento, setPeriodoEvento] = useState('');
-  const [renovacionEvento, setRenovacionEvento] = useState(false);
-  const [mostrarAlerta, setMostrarAlerta] = useState(false);
+  const [renovacionEvento, setRenovacionEvento] = useState('');
+  const [mostrarAlerta, setMostrarAlerta] = useState(null);
 
   // Limpiar los campos cuando se cierra el modal
   useEffect(() => {
     if (!abierto) {
       setNombreEvento('');
       setDescripcionEvento('');
-      setPuntosEvento(0);
-      setMultiplicadorEvento(0);
+      setPuntosEvento('');
+      setMultiplicadorEvento('');
       setPeriodoEvento('');
-      setRenovacionEvento(false);
+      setRenovacionEvento('');
       setMostrarAlerta(false);
     }
   }, [abierto]);
 
   const handleConfirmar = () => {
-    // Validar que el nombre y descripción no estén vacíos después de eliminar espacios
-    // y que haya al menos un producto seleccionado
-    if (!nombreEvento.trim() || puntosEvento <= 0 || multiplicadorEvento <= 0) {
+    // Validar que el nombre y los puntos sean válidos
+    // y que los puntos y multiplicador sean mayores a 0
+    if (!nombreEvento.trim() || !puntosEvento.trim() || !multiplicadorEvento.trim() || !renovacionEvento) {
       setMostrarAlerta(true);
       return;
     }
 
-    // Navegar a la siguiente página con datos limpios (sin espacios innecesarios)
-    navegar(
-      `${RUTAS.SISTEMA_ADMINISTRATIVO.BASE_TABLERO}${RUTAS.SISTEMA_ADMINISTRATIVO.CUOTAS.EDITAR_CUOTAS}`,
-      {
-        state: {
-          nombreEvento: nombreEvento.trim(),
-          descripcion: descripcionEvento.trim(),
-        },
-      }
-    );
-
     // Notificar que se ha creado exitosamente
     if (onCreado) {
       onCreado();
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
index beebc525..366f1255 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
@@ -2,7 +2,6 @@
 
 import Alerta from '@Moleculas/Alerta';
 import CampoTexto from '@Atomos/CampoTexto';
-import { useAuth } from '@Hooks/AuthProvider';
 import { Box } from '@mui/material';
 import CampoSelect from '../../Atomos/CampoSelect';
 
@@ -28,22 +27,49 @@ const FormularioCrearEvento = ({
   mostrarAlerta,
   setMostrarAlerta,
 }) => {
-  const { usuario } = useAuth();
-  const clienteSeleccionado = usuario.clienteSeleccionado;
-
+  // Validar si el valor es un número válido
   const esNumeroValido = (valor) => {
     const regex = /^[0-9]+(\.[0-9]+)?$/;
-    return regex.test(valor);
+    return regex.test(valor) || valor === '';
+  };
+
+  // Manejar el cambio de nombre
+  const manejarCambioNombre = (evento) => setNombreEvento(evento.target.value);
+
+  // Manejar el cambio de descripción
+  const manejarCambioDescripcion = (evento) => setDescripcionEvento(evento.target.value);
+
+  // Manejar el cambio de puntos
+  const manejarCambioPuntos = (evento) => {
+    const valor = evento.target.value;
+    if (esNumeroValido(valor) || valor === null) {
+      setPuntosEvento(valor);
+    }
+  };
+
+  // Manejar el cambio de multiplicador
+  const manejarCambioMultiplicador = (evento) => {
+    const valor = evento.target.value;
+    if (esNumeroValido(valor) || valor === null) {
+      setMultiplicadorEvento(valor);
+    }
   };
   
+  // Manejar el cambio de periodo
+  const manejarCambioPeriodo = (evento) => setPeriodoEvento(evento.target.value);
+
+  // Manejar el cambio de renovación
+  const manejarCambioRenovacion = (evento) => setRenovacionEvento(evento.target.value);
+
   return (
     <>
       <CampoTexto
         label={'Nombre del Evento'}
         fullWidth
+        required
         type={'text'}
         value={nombreEvento}
-        onChange={(evento) => setNombreEvento(evento.target.value.slice(0, LIMITE_NOMBRE))}
+        onChange={manejarCambioNombre}
         inputProps={{ maxLength: LIMITE_NOMBRE }}
         helperText={`${nombreEvento.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`}
         sx={{ mb: 2 }}
@@ -53,9 +79,7 @@ const FormularioCrearEvento = ({
         fullWidth
         type={'text'}
         value={descripcionEvento}
-        onChange={(evento) =>
-          setDescripcionEvento(evento.target.value.slice(0, LIMITE_DESCRIPCION))
-        }
+        onChange={manejarCambioDescripcion}
         inputProps={{ maxLength: LIMITE_DESCRIPCION }}
         helperText={`${descripcionEvento.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`}
         sx={{ mb: 2 }}
@@ -66,22 +90,20 @@ const FormularioCrearEvento = ({
         <CampoTexto
           label={'Puntos'}
           fullWidth
+          required
           type={'number'}
           value={puntosEvento}
-          onChange={(evento) =>
-            esNumeroValido(evento.target.value) && setPuntosEvento(evento.target.value)
-          }
+          onChange={manejarCambioPuntos}
           inputProps={{ min: 0 }}
           sx={{ mb: 2 }}
         />
         <CampoTexto
           label={'Multiplicador'}
           fullWidth
+          required
           type={'number'}
           value={multiplicadorEvento}
-          onChange={(evento) =>
-            esNumeroValido(evento.target.value) && setMultiplicadorEvento(evento.target.value)
-          }
+          onChange={manejarCambioMultiplicador}
           inputProps={{ min: 0 }}
           sx={{ mb: 2 }}
         />
@@ -92,7 +114,7 @@ const FormularioCrearEvento = ({
           fullWidth
           type={'text'}
           value={periodoEvento}
-          onChange={(evento) => setPeriodoEvento(evento.target.value)}
+          onChange={manejarCambioPeriodo}
           inputProps={{ maxLength: LIMITE_PERIODO }}
           helperText={`${periodoEvento.length}/${LIMITE_PERIODO} - ${MENSAJE_LIMITE}`}
           sx={{ mb: 2 }}
@@ -100,8 +122,9 @@ const FormularioCrearEvento = ({
         <CampoSelect
           label={'Renovación Automática'}
           fullWidth
+          required
           value={renovacionEvento}
-          onChange={(evento) => setRenovacionEvento(evento.target.value)}
+          onChange={manejarCambioRenovacion}
           options={[
             { value: true, label: 'Sí' },
             { value: false, label: 'No' },

From b9ffa63bb427f02885a5b74be4821bdc13909b3d Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 11:14:36 -0600
Subject: [PATCH 015/160] fix: actualizar modelo de Evento

---
 src/Dominio/Modelos/Eventos/Eventos.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Dominio/Modelos/Eventos/Eventos.js b/src/Dominio/Modelos/Eventos/Eventos.js
index 49527eb7..d76cd87b 100644
--- a/src/Dominio/Modelos/Eventos/Eventos.js
+++ b/src/Dominio/Modelos/Eventos/Eventos.js
@@ -1,9 +1,24 @@
 export class Evento {
-  constructor({ idEvento, nombre, descripcion, puntos, periodoRenovacion, renovacion }) {
-    this.idEvento = idEvento;
+
+  /**
+   * Clase que representa un evento.
+   * 
+   * @constructor
+   * @param {Object} params - Parámetros del evento.
+   * @param {int} params.idCliente - ID del cliente asociado al evento.
+   * @param {string} params.nombre - Nombre del evento.
+   * @param {string} params.descripcion - Descripción del evento.
+   * @param {float} params.puntos - Puntos asociados al evento.
+   * @param {float} params.multiplicador - Multiplicador de puntos del evento.
+   * @param {string} params.periodoRenovacion - Periodo de renovación del evento.
+   * @param {bool} params.renovacion - Indica si el evento es renovable.
+   */
+  constructor({ idCliente, nombre, descripcion, puntos, multiplicador, periodoRenovacion, renovacion }) {
+    this.idCliente = idCliente;
     this.nombre = nombre;
     this.descripcion = descripcion;
     this.puntos = puntos;
+    this.multiplicador = multiplicador;
     this.periodo = periodoRenovacion;
     this.renovacion = renovacion;
   }

From 00ddb5d76f1a834aca55e51e0f7a7e098b9aa407 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 11:31:42 -0600
Subject: [PATCH 016/160] feat: crear evento

---
 src/Dominio/Modelos/Eventos/Eventos.js        |  4 +-
 .../Eventos/RepositorioCrearEvento.js         | 42 ++++++++++++++++++
 src/Utilidades/Constantes/rutasAPI.js         |  1 +
 .../Organismos/Eventos/ModalCrearEvento.jsx   | 19 +++++++-
 src/Vistas/Paginas/Eventos/ListaEventos.jsx   | 40 +++++++++++------
 src/hooks/Eventos/useCrearEvento.js           | 43 +++++++++++++++++++
 6 files changed, 135 insertions(+), 14 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
 create mode 100644 src/hooks/Eventos/useCrearEvento.js

diff --git a/src/Dominio/Modelos/Eventos/Eventos.js b/src/Dominio/Modelos/Eventos/Eventos.js
index d76cd87b..748c96ae 100644
--- a/src/Dominio/Modelos/Eventos/Eventos.js
+++ b/src/Dominio/Modelos/Eventos/Eventos.js
@@ -5,6 +5,7 @@ export class Evento {
    * 
    * @constructor
    * @param {Object} params - Parámetros del evento.
+   * @param {int} params.idEvento - ID del evento.
    * @param {int} params.idCliente - ID del cliente asociado al evento.
    * @param {string} params.nombre - Nombre del evento.
    * @param {string} params.descripcion - Descripción del evento.
@@ -13,7 +14,8 @@ export class Evento {
    * @param {string} params.periodoRenovacion - Periodo de renovación del evento.
    * @param {bool} params.renovacion - Indica si el evento es renovable.
    */
-  constructor({ idCliente, nombre, descripcion, puntos, multiplicador, periodoRenovacion, renovacion }) {
+  constructor({ idEvento = 0, idCliente = 0, nombre = '', descripcion = '', puntos = 0, multiplicador = 0, periodoRenovacion = '', renovacion = false }) {
+    this.idEvento = idEvento;
     this.idCliente = idCliente;
     this.nombre = nombre;
     this.descripcion = descripcion;
diff --git a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
new file mode 100644
index 00000000..69a66bbd
--- /dev/null
+++ b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
@@ -0,0 +1,42 @@
+// RF36 - Crear Evento - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF36]
+
+import axios from 'axios';
+import { RUTAS_API } from '@Utilidades/Constantes/rutasAPI';
+import { Evento } from '@Dominio/Modelos/Eventos/Eventos';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioCrearEvento {
+  /**
+   * Crea un nuevo evento en la API
+   * @param {Evento} evento - El evento a crear
+   * @returns {Promise<{evento: Evento, mensaje: string}>}
+   */
+  static async crearEvento(evento) {
+
+    const body = {
+      idCliente: evento.idCliente,
+      nombre: evento.nombre,
+      descripcion: evento.descripcion,
+      puntos: evento.puntos,
+      multiplicador: evento.multiplicador,
+      periodoRenovacion: evento.periodoRenovacion,
+      renovacion: evento.renovacion,
+    }
+
+    console.log('Cuerpo de la solicitud:', body);
+
+    try {
+      const respuesta = await axios.post(RUTAS_API.EVENTOS.CREAR_EVENTO, body, {
+        withCredentials: true,
+        headers: {
+          'x-api-key': API_KEY,
+        },
+      });
+      return new Evento(respuesta.data);
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al crear el evento';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..fc52c0f1 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -89,6 +89,7 @@ export const RUTAS_API = {
   },
   EVENTOS: {
     BASE: BASE_EVENTOS,
+    CREAR_EVENTO: `${BASE_EVENTOS}/crear`,
     CONSULTAR_LISTA: `${BASE_EVENTOS}/consultar-lista-eventos`,
     ELIMINAR_EVENTO: `${BASE_EVENTOS}/eliminar`,
     CONSULTAR_EVENTO: `${BASE_EVENTOS}/consultar-evento`,
diff --git a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
index 2cc4be91..e7e0381b 100644
--- a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
@@ -3,6 +3,9 @@
 import { useState, useEffect } from 'react';
 import FormularioCrearEvento from '@Organismos/Formularios/FormularioCrearEvento';
 import ModalFlotante from '@Organismos/ModalFlotante';
+import { Evento } from '@SRC/Dominio/Modelos/Eventos/Eventos';
+import { useAuth } from '@SRC/hooks/AuthProvider';
+import { useCrearEvento } from '@SRC/hooks/Eventos/useCrearEvento';
 
 /**
  * Modal para crear un nuevo set de cuotas.
@@ -12,6 +15,9 @@ import ModalFlotante from '@Organismos/ModalFlotante';
  * @param {function} onCreado - Función callback que se ejecuta cuando se crea exitosamente el evento
  */
 const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
+  const { usuario } = useAuth();
+  const clienteSeleccionado = usuario.clienteSeleccionado;
+
   const [nombreEvento, setNombreEvento] = useState('');
   const [descripcionEvento, setDescripcionEvento] = useState('');
   const [puntosEvento, setPuntosEvento] = useState('');
@@ -41,9 +47,20 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
       return;
     }
 
+    // Crear el evento con los datos limpios (sin espacios innecesarios)
+    const nuevoEvento = new Evento({
+      idCliente: clienteSeleccionado,
+      nombre: nombreEvento.trim(),
+      descripcion: descripcionEvento.trim(),
+      puntos: parseFloat(puntosEvento),
+      multiplicador: parseFloat(multiplicadorEvento),
+      periodoRenovacion: periodoEvento.trim(),
+      renovacion: renovacionEvento,
+    });
+
     // Notificar que se ha creado exitosamente
     if (onCreado) {
-      onCreado();
+      onCreado(nuevoEvento);
     }
   };
 
diff --git a/src/Vistas/Paginas/Eventos/ListaEventos.jsx b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
index 5af65e81..f07a9835 100644
--- a/src/Vistas/Paginas/Eventos/ListaEventos.jsx
+++ b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
@@ -17,19 +17,23 @@ import { tokens } from '@SRC/theme';
 import { PERMISOS } from '@Utilidades/Constantes/permisos';
 import { useAuth } from '@Hooks/AuthProvider';
 import { useEliminarEvento } from '@Hooks/Eventos/useEliminarEvento';
+import { useCrearEvento } from '@SRC/hooks/Eventos/useCrearEvento';
 
 const ListaEventos = () => {
   const { eventos, cargando, error, recargar } = useConsultarEventos();
+  const { crear } = useCrearEvento();
+  const { eliminar } = useEliminarEvento();
+  const { usuario } = useAuth();
+
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
+
   const MENSAJE_POPUP_ELIMINAR = '¿Estás seguro de que deseas eliminar los eventos seleccionados?';
 
   const [seleccionados, setSeleccionados] = useState([]);
   const [alerta, setAlerta] = useState(null);
-  const { eliminar } = useEliminarEvento();
   const [abrirCrear, setAbrirCrear] = useState(false);
   const [abrirEliminar, setAbrirEliminar] = useState(false);
-  const { usuario } = useAuth();
 
   const [eventoSeleccionado, setEventoSeleccionado] = useState(null);
   const [modalAbierto, setModalAbierto] = useState(false);
@@ -42,16 +46,28 @@ const ListaEventos = () => {
     setAbrirCrear(false);
   };
 
-  const manejarConfirmarCrear = async () => {
-    console.log('Crear Evento');
-    setAbrirCrear(false);
-    setAlerta({
-      tipo: 'success',
-      mensaje: 'Evento creado correctamente.',
-      icono: true,
-      cerrable: true,
-      centradoInferior: true,
-    });
+  const manejarConfirmarCrear = async (evento) => {
+    try {
+      await crear(evento);
+      if (typeof recargar === 'function') await recargar();
+      setAlerta({
+        tipo: 'success',
+        mensaje: 'Evento creado correctamente.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      setAbrirCrear(false);
+    } catch {
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Ocurrió un error al crear el evento.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      
+    }
   };
 
   const manejarCancelarEliminar = () => {
diff --git a/src/hooks/Eventos/useCrearEvento.js b/src/hooks/Eventos/useCrearEvento.js
new file mode 100644
index 00000000..d4da5625
--- /dev/null
+++ b/src/hooks/Eventos/useCrearEvento.js
@@ -0,0 +1,43 @@
+// RF36 - Crear Evento - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF36]
+
+import { useState } from 'react';
+import { RepositorioCrearEvento } from '@Dominio/Repositorios/Eventos/RepositorioCrearEvento';
+import { Evento } from '@Dominio/Modelos/Eventos/Eventos';
+
+/**
+ * * Hook para crear eventos.
+ * * @return {{
+ * *  crear: function,
+ * *  mensaje: string,
+ *  *  cargando: boolean,
+ * *  error: string | null,
+ * * }}
+ */
+export function useCrearEvento() {
+  const [mensaje, setMensaje] = useState('');
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+
+  /**
+   * Crea un nuevo evento.
+   * 
+   * @param {Evento} evento - Objeto evento a crear.
+   * @returns {Promise<void>}
+   */
+  const crear = async (evento) => {
+    setCargando(true);
+    setError(null);
+
+    try {
+      const { mensaje } = await RepositorioCrearEvento.crearEvento(evento);
+      setMensaje(mensaje);
+    } catch (err) {
+      setMensaje('');
+      setError(err.message);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { crear, mensaje, cargando, error };
+}

From 9f7c2fbbe3282ea08e49cb9699a65aa7791e5eba Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 11:45:16 -0600
Subject: [PATCH 017/160] style: validar campos

---
 .../Organismos/Eventos/ModalCrearEvento.jsx   | 84 ++++++++++++++++---
 .../Formularios/FormularioCrearEvento.jsx     | 16 +++-
 2 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
index e7e0381b..2377f8c1 100644
--- a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
@@ -5,7 +5,6 @@ import FormularioCrearEvento from '@Organismos/Formularios/FormularioCrearEvento
 import ModalFlotante from '@Organismos/ModalFlotante';
 import { Evento } from '@SRC/Dominio/Modelos/Eventos/Eventos';
 import { useAuth } from '@SRC/hooks/AuthProvider';
-import { useCrearEvento } from '@SRC/hooks/Eventos/useCrearEvento';
 
 /**
  * Modal para crear un nuevo set de cuotas.
@@ -24,26 +23,79 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
   const [multiplicadorEvento, setMultiplicadorEvento] = useState('');
   const [periodoEvento, setPeriodoEvento] = useState('');
   const [renovacionEvento, setRenovacionEvento] = useState('');
-  const [mostrarAlerta, setMostrarAlerta] = useState(null);
+  const [mostrarAlerta, setMostrarAlerta] = useState(false);
+
+  const [nombreError, setNombreError] = useState(false);
+  const [descripcionError, setDescripcionError] = useState(false);
+  const [puntosError, setPuntosError] = useState(false);
+  const [multiplicadorError, setMultiplicadorError] = useState(false);
+  const [periodoError, setPeriodoError] = useState(false);
+  const [renovacionError, setRenovacionError] = useState(false);
+
+  const resetearCampos = () => {
+    setNombreEvento('');
+    setDescripcionEvento('');
+    setPuntosEvento('');
+    setMultiplicadorEvento('');
+    setPeriodoEvento('');
+    setRenovacionEvento('');
+    setMostrarAlerta(false);
+  };
+
+  const limpiarErrores = () => {
+    setNombreError(false);
+    setDescripcionError(false);
+    setPuntosError(false);
+    setMultiplicadorError(false);
+    setPeriodoError(false);
+    setRenovacionError(false);
+  };
+
+  const validarCampos = () => {
+    let errores = false;
+
+    if (!nombreEvento.trim()) {
+      setNombreError(true);
+      setMostrarAlerta(true);
+      errores = true;
+    }
+
+    if (puntosEvento === '' || puntosEvento < 0) {
+      setPuntosError(true);
+      setMostrarAlerta(true);
+      errores = true;
+    }
+
+    if (multiplicadorEvento === '' || multiplicadorEvento < 0) {
+      setMultiplicadorError(true);
+      setMostrarAlerta(true);
+      errores = true;
+    }
+
+    if (renovacionEvento === '') {
+      setRenovacionError(true);
+      setMostrarAlerta(true);
+      errores = true;
+    }
+
+    return errores;
+  }
 
   // Limpiar los campos cuando se cierra el modal
   useEffect(() => {
     if (!abierto) {
-      setNombreEvento('');
-      setDescripcionEvento('');
-      setPuntosEvento('');
-      setMultiplicadorEvento('');
-      setPeriodoEvento('');
-      setRenovacionEvento('');
-      setMostrarAlerta(false);
+      resetearCampos();
+      limpiarErrores();
     }
   }, [abierto]);
 
   const handleConfirmar = () => {
-    // Validar que el nombre y los puntos sean válidos
-    // y que los puntos y multiplicador sean mayores a 0
-    if (!nombreEvento.trim() || !puntosEvento.trim() || !multiplicadorEvento.trim() || !renovacionEvento) {
-      setMostrarAlerta(true);
+    // Limpiar errores
+    limpiarErrores();
+    setMostrarAlerta(false);
+
+    // Validar campos
+    if (validarCampos()) {
       return;
     }
 
@@ -84,16 +136,22 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
       <FormularioCrearEvento
         nombreEvento={nombreEvento}
         setNombreEvento={setNombreEvento}
+        nombreError={nombreError}
         descripcionEvento={descripcionEvento}
         setDescripcionEvento={setDescripcionEvento}
+        descripcionError={descripcionError}
         puntosEvento={puntosEvento}
         setPuntosEvento={setPuntosEvento}
+        puntosError={puntosError}
         multiplicadorEvento={multiplicadorEvento}
         setMultiplicadorEvento={setMultiplicadorEvento}
+        multiplicadorError={multiplicadorError}
         periodoEvento={periodoEvento}
         setPeriodoEvento={setPeriodoEvento}
+        periodoError={periodoError}
         renovacionEvento={renovacionEvento}
         setRenovacionEvento={setRenovacionEvento}
+        renovacionError={renovacionError}
         mostrarAlerta={mostrarAlerta}
         setMostrarAlerta={setMostrarAlerta}
       />
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
index 366f1255..192bd70c 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
@@ -14,16 +14,22 @@ const MENSAJE_LIMITE = 'Máximo caracteres';
 const FormularioCrearEvento = ({
   nombreEvento,
   setNombreEvento,
+  nombreError = false,
   descripcionEvento,
   setDescripcionEvento,
+  descripcionError = false,
   puntosEvento,
   setPuntosEvento,
+  puntosError = false,
   multiplicadorEvento,
   setMultiplicadorEvento,
+  multiplicadorError = false,
   periodoEvento,
   setPeriodoEvento,
+  periodoError = false,
   renovacionEvento,
   setRenovacionEvento,
+  renovacionError = false,
   mostrarAlerta,
   setMostrarAlerta,
 }) => {
@@ -73,19 +79,21 @@ const FormularioCrearEvento = ({
         inputProps={{ maxLength: LIMITE_NOMBRE }}
         helperText={`${nombreEvento.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`}
         sx={{ mb: 2 }}
+        error={nombreError}
       />
       <CampoTexto
         label={'Descripción'}
         fullWidth
+        multiline
         type={'text'}
         value={descripcionEvento}
         onChange={manejarCambioDescripcion}
         inputProps={{ maxLength: LIMITE_DESCRIPCION }}
         helperText={`${descripcionEvento.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`}
         sx={{ mb: 2 }}
-        multiline
         rows={3}
-      />
+        error={descripcionError}
+        />
       <Box display={'grid'} gridTemplateColumns={'repeat(2, 1fr)'} gap={2}>
         <CampoTexto
           label={'Puntos'}
@@ -96,6 +104,7 @@ const FormularioCrearEvento = ({
           onChange={manejarCambioPuntos}
           inputProps={{ min: 0 }}
           sx={{ mb: 2 }}
+          error={puntosError}
         />
         <CampoTexto
           label={'Multiplicador'}
@@ -106,6 +115,7 @@ const FormularioCrearEvento = ({
           onChange={manejarCambioMultiplicador}
           inputProps={{ min: 0 }}
           sx={{ mb: 2 }}
+          error={multiplicadorError}
         />
       </Box>
       <Box display={'grid'} gridTemplateColumns={'repeat(2, 1fr)'} gap={2}>
@@ -118,6 +128,7 @@ const FormularioCrearEvento = ({
           inputProps={{ maxLength: LIMITE_PERIODO }}
           helperText={`${periodoEvento.length}/${LIMITE_PERIODO} - ${MENSAJE_LIMITE}`}
           sx={{ mb: 2 }}
+          error={periodoError}
         />
         <CampoSelect
           label={'Renovación Automática'}
@@ -131,6 +142,7 @@ const FormularioCrearEvento = ({
           ]}
           placeholder={'Selecciona una opción'}
           sx={{ mb: 2 }}
+          error={renovacionError}
         />
       </Box>
 

From c375f89814839734e290e581e6195086ad225212 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 15:13:09 -0600
Subject: [PATCH 018/160] fix: quitar console log

---
 src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
index 69a66bbd..77100282 100644
--- a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
+++ b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
@@ -24,8 +24,6 @@ export class RepositorioCrearEvento {
       renovacion: evento.renovacion,
     }
 
-    console.log('Cuerpo de la solicitud:', body);
-
     try {
       const respuesta = await axios.post(RUTAS_API.EVENTOS.CREAR_EVENTO, body, {
         withCredentials: true,

From db58291171cfe6d7e321ba0b173e3c98ab807559 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Sun, 25 May 2025 16:41:17 -0600
Subject: [PATCH 019/160] =?UTF-8?q?feat:=20validaci=C3=B3n=20extra=20de=20?=
 =?UTF-8?q?campos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Eventos/RepositorioCrearEvento.js            | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
index 77100282..d2562fca 100644
--- a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
+++ b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
@@ -15,15 +15,17 @@ export class RepositorioCrearEvento {
   static async crearEvento(evento) {
 
     const body = {
-      idCliente: evento.idCliente,
-      nombre: evento.nombre,
-      descripcion: evento.descripcion,
-      puntos: evento.puntos,
-      multiplicador: evento.multiplicador,
-      periodoRenovacion: evento.periodoRenovacion,
-      renovacion: evento.renovacion,
+      idCliente: evento.idCliente || "",
+      nombre: evento.nombre || "",
+      descripcion: evento.descripcion || "",
+      puntos: evento.puntos || 0,
+      multiplicador: evento.multiplicador || 1,
+      periodoRenovacion: evento.periodoRenovacion || "",
+      renovacion: evento.renovacion || false,
     }
 
+    console.log('Cuerpo de la solicitud:', body);
+
     try {
       const respuesta = await axios.post(RUTAS_API.EVENTOS.CREAR_EVENTO, body, {
         withCredentials: true,

From 27a27fc5e802dfda6a10fc50bc9febdbce81d0fa Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Mon, 26 May 2025 01:09:13 -0600
Subject: [PATCH 020/160] feat: agregar funcionalidad para leer productos

---
 src/Dominio/Modelos/Productos/InfoProducto.js |  61 ++++++
 .../Productos/RepositorioLeerProducto.js      |  32 +++
 src/Utilidades/Constantes/rutasAPI.js         |   1 +
 .../Componentes/Moleculas/InfoProducto.jsx    | 205 ++++++++++++++++++
 .../Paginas/Productos/ListaProductos.jsx      |  91 ++++++--
 src/hooks/Productos/useLeerProducto.js        |  30 +++
 6 files changed, 401 insertions(+), 19 deletions(-)
 create mode 100644 src/Dominio/Modelos/Productos/InfoProducto.js
 create mode 100644 src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js
 create mode 100644 src/Vistas/Componentes/Moleculas/InfoProducto.jsx
 create mode 100644 src/hooks/Productos/useLeerProducto.js

diff --git a/src/Dominio/Modelos/Productos/InfoProducto.js b/src/Dominio/Modelos/Productos/InfoProducto.js
new file mode 100644
index 00000000..c9252873
--- /dev/null
+++ b/src/Dominio/Modelos/Productos/InfoProducto.js
@@ -0,0 +1,61 @@
+/*
+ * Modelo de información de un producto
+ * RF[??] Lee información del producto - Documentación pendiente
+ */
+
+export class InfoProducto {
+  constructor({ producto = {} }) {
+    this.idProducto = producto.idProducto ?? null;
+    this.nombreComun = producto.nombreComun ?? '';
+    this.nombreComercial = producto.nombreComercial ?? '';
+    this.tipoProducto = producto.tipoProducto ?? '';
+    this.marca = producto.marca ?? '';
+    this.modelo = producto.modelo ?? '';
+    this.estado = producto.estado ?? null;
+    this.idProveedor = producto.idProveedor ?? null;
+    this.nombreProveedor = producto.nombreProveedor ?? '';
+    this.precioVenta = producto.precioVenta ?? 0;
+    this.precioCliente = producto.precioCliente ?? 0;
+    this.precioPuntos = producto.precioPuntos ?? 0;
+    this.costo = producto.costo ?? 0;
+    this.envio = producto.envio ?? 0;
+    this.impuesto = producto.impuesto ?? 0;
+    this.descuento = producto.descuento ?? 0;
+
+    // Variantes del producto (puede ser un arreglo vacío)
+    this.variantes = Array.isArray(producto.variantes)
+      ? producto.variantes.map((v) => new VarianteProducto(v))
+      : [];
+  }
+}
+
+class VarianteProducto {
+  constructor({ idVariante, nombreVariante, descripcion, opciones = [] }) {
+    this.idVariante = idVariante ?? null;
+    this.nombreVariante = nombreVariante ?? '';
+    this.descripcion = descripcion ?? '';
+    this.opciones = Array.isArray(opciones)
+      ? opciones.map((o) => new OpcionVariante(o))
+      : [];
+  }
+}
+
+class OpcionVariante {
+  constructor({
+                estado,
+                cantidad,
+                descuento,
+                valorOpcion,
+                SKUcomercial,
+                SKUautomatico,
+                costoAdicional,
+              }) {
+    this.estado = estado ?? null;
+    this.cantidad = cantidad ?? 0;
+    this.descuento = descuento ?? 0;
+    this.valorOpcion = valorOpcion ?? '';
+    this.SKUcomercial = SKUcomercial ?? '';
+    this.SKUautomatico = SKUautomatico ?? '';
+    this.costoAdicional = costoAdicional ?? 0;
+  }
+}
diff --git a/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js b/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js
new file mode 100644
index 00000000..7c7aa68c
--- /dev/null
+++ b/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js
@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI.js';
+import { InfoProducto } from '@Modelos/Productos/InfoProducto.js'; // Asegúrate de importar el modelo
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioLeerProducto {
+  static async obtenerPorId(idProducto) {
+    try {
+      const respuesta = await axios.get(RUTAS_API.PRODUCTOS.LEER_PRODCUTO, {
+        headers: {
+          'x-api-key': API_KEY
+        },
+        withCredentials: true,
+        params: {
+          idProducto
+        }
+      });
+
+      const { infoProducto } = respuesta.data;
+
+      // Asegurarse de que existe y tiene al menos un elemento
+      if (!infoProducto || !Array.isArray(infoProducto) || infoProducto.length === 0) {
+        throw new Error('No se encontró información del producto.');
+      }
+
+      return new InfoProducto(infoProducto[0]);
+    } catch (error) {
+      throw new Error(error.response?.data?.mensaje || 'Error al obtener datos del producto.');
+    }
+  }
+}
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..d528a481 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -39,6 +39,7 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_PRODUCTOS}/consultar-lista`,
     CREAR: `${BASE_PRODUCTOS}/crear`,
     ELIMINAR_PRODUCTO: `${BASE_PRODUCTOS}/eliminar`,
+    LEER_PRODCUTO: `${BASE_PRODUCTOS}/leer-producto`
   },
   PROVEEDORES: {
     BASE: BASE_PROVEEDORES,
diff --git a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
new file mode 100644
index 00000000..24213a22
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
@@ -0,0 +1,205 @@
+import {useState} from 'react'
+import {tokens} from '@SRC/theme'
+import { Box, Grid, useTheme } from '@mui/material';
+import Texto from '@Atomos/Texto.jsx';
+import Chip from '@Atomos/Chip';
+import Tabla from '@Organismos/Tabla';
+
+const InfoProducto = ({detalleProducto}) => {
+
+  const tema = useTheme()
+  const colores = tokens(tema.palette.mode)
+  const [varianteSeleccionada, setVarianteSeleccionada] = useState(null);
+
+  const chipClick = (variante) => {
+    if (varianteSeleccionada?.idVariante === variante.idVariante) {
+      setVarianteSeleccionada(null);
+      return;
+    }
+    setVarianteSeleccionada(variante);
+  };
+
+  return <>
+    <Grid container spacing={6} wrap='nowrap'>
+      {/*Información General*/}
+      <Grid >
+        <Box sx={{maxWidth: '100%'}}>
+          <Texto variant='subtitle1' sx={{fontWeight: 'bold', mb: 3}}>
+            INFORMACIÓN GENERAL
+          </Texto>
+          {/*ID producto*/}
+          <Texto gutterBottom sx={{mb: 1.5}} >
+            ID Producto:{' '}
+            <span style={{color: colores.altertex[3]}}>
+              {detalleProducto?.idProducto || 'No disponible'}
+            </span>
+          </Texto>
+
+          {/*Tipo de producto*/}
+          <Texto gutterBottom sx={{mb:1.5}}>
+            Tipo:{' '}
+            <span style={{color: colores.altertex[3]}}>
+              {detalleProducto?.tipoProducto || 'No disponible'}
+            </span>
+          </Texto>
+
+          {/*Proveedor*/}
+          <Texto gutterBottom sx={{mb: 1.5}}>
+            Proveedor:{' '}
+            <span style={{color:colores.altertex[3]}}>
+              {detalleProducto?.nombreProveedor || 'No disponible'}
+            </span>
+          </Texto>
+
+        </Box>
+      </Grid>
+
+      {/*Precios y costos*/}
+      <Grid >
+        <Box sx={{maxWidth: '100%'}}>
+          <Texto variant='subtitle1' sx={{ fontWeight: 'bold', mb: 3 }}>
+            PRECIOS Y COSTOS
+          </Texto>
+          {/*Costo*/}
+          <Texto gutterBottom sx={{mb: 1.5}}>
+            Costo:{' '}
+            <span style={{color: colores.altertex[3]}}>
+              ${detalleProducto?.costo || 'No disponible'}
+            </span>
+          </Texto>
+
+          {/*Precio de venta*/}
+          <Texto gutterBottom sx={{mb: 1.5}}>
+            Precio de Venta:{' '}
+            <span style={{color:colores.altertex[3]}}>
+              ${detalleProducto?.precioVenta || 'No disponible'}
+            </span>
+          </Texto>
+
+          {/*Precio cliente*/}
+          <Texto gutterBottom sx={{mb: 1.5}}>
+            Precio Cliente:{' '}
+            <span style={{color:colores.altertex[3]}}>
+              ${detalleProducto?.precioCliente || 'No disponible'}
+            </span>
+          </Texto>
+
+          {/*Precio en puntos*/}
+          <Texto gutterBottom sx={{mb: 1.5}}>
+            Precio en puntos:{' '}
+            <span style={{color:colores.altertex[3]}}>
+              {detalleProducto?.precioPuntos || 'No disponible'}
+            </span>
+          </Texto>
+
+        </Box>
+
+      </Grid>
+    </Grid>
+
+    <Texto variant='subtitle1' sx={{fontWeight: 'bold', mb: 3}}>
+      VARIANTES
+    </Texto>
+
+    <Box display='flex' gap={1} flexWrap='wrap' mb={4}>
+      {detalleProducto?.variantes && detalleProducto.variantes.length > 0 ? (
+        detalleProducto.variantes.map((variante) => {
+          const esSeleccionada = varianteSeleccionada?.idVariante === variante.idVariante;
+
+          return (
+            <Chip
+              key={variante.idVariante}
+              label={variante.nombreVariante}
+              sx={{
+                borderRadius: '16px',
+                backgroundColor: esSeleccionada
+                  ? colores.altertex[1]
+                  : colores.altertex[1],
+                color: colores.primario[4],
+                cursor: 'pointer',
+                boxShadow: esSeleccionada ? '0 0 5px rgba(0,0,0,0.2)' : 'none',
+                fontWeight: esSeleccionada ? 'bold' : 'normal',
+                '&:hover': {
+                  backgroundColor: colores.primario[3],
+                },
+              }}
+              onClick={() => chipClick(variante)}
+            />
+          );
+        })
+      ) : (
+        <Texto variant='body1' sx={{ color: colores.texto[4] }}>
+          Sin variantes disponibles
+        </Texto>
+      )}
+    </Box>
+
+    {/* Información detallada de la variante seleccionada */}
+    {varianteSeleccionada && (
+      <Box mt={2} mb={2} p={3} sx={{
+        borderRadius: '8px',
+      }}>
+
+        {varianteSeleccionada.opciones && varianteSeleccionada.opciones.length > 0 ? (
+          <Box>
+            <Texto variant='subtitle1' sx={{ mb: 2, fontWeight: 'bold' }}>
+              Opciones Disponibles:
+            </Texto>
+            <Tabla
+              columns={[
+                { field: 'opcion', headerName: 'Opción', flex: 0.8 },
+                { field: 'skuComercial', headerName: 'SKU Comercial', flex: 1 },
+                { field: 'skuAutomatico', headerName: 'SKU Auto', flex: 1 },
+                { field: 'costo', headerName: 'Costo', flex: 0.6 },
+                { field: 'cantidad', headerName: 'Cantidad', flex: 0.7 },
+                { field: 'estado', headerName: 'Estado', flex: 0.7 }
+              ]}
+              rows={varianteSeleccionada.opciones.map((opcion, index) => ({
+                id: index + 1,
+                opcion: `Opción ${index + 1}`,
+                skuComercial: opcion.SKUcomercial || 'No disponible',
+                skuAutomatico: opcion.SKUautomatico || 'No disponible',
+                costo: opcion.costoAdicional ? `${opcion.costoAdicional}` : '$0',
+                cantidad: opcion.cantidad || 0,
+                estado: opcion.estado === 1 ? 'Activo' : 'Inactivo'
+              }))}
+              pageSize={5}
+              disableRowSelectionOnClick
+              sx={{
+                '& .MuiDataGrid-columnHeaders': {
+                  fontSize: '0.55rem', // Smaller font size for headers
+                },
+                '& .MuiDataGrid-columnHeaderTitle': {
+                  fontSize: '0.55rem', // Smaller font size for header titles
+                  fontWeight: 500,
+                }
+              }}
+            />
+          </Box>
+        ) : (
+          <Texto variant='body1' sx={{color: colores.texto[1]}}>
+            Sin opciones disponibles
+          </Texto>
+        )}
+
+        <Box display="flex" justifyContent="flex-end" mt={2}>
+          <Texto
+            variant="body2"
+            sx={{
+              cursor: 'pointer',
+              color: colores.primario[3],
+              fontWeight: 'bold',
+              '&:hover': { textDecoration: 'underline' },
+            }}
+            onClick={() => setVarianteSeleccionada(null)}
+          >
+            CERRAR
+          </Texto>
+        </Box>
+      </Box>
+    )}
+
+  </>
+}
+
+export default InfoProducto
\ No newline at end of file
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index c65ed8ed..3010d125 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -1,8 +1,5 @@
-//RF[26] Crea Producto - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF26]
-//RF[27] Consulta Lista de Productos - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF27]
-//RF[30] Elimina Producto - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF30]
 import { Box, useTheme, Chip } from '@mui/material';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import Alerta from '@Moleculas/Alerta';
@@ -14,21 +11,37 @@ import { useEliminarProductos } from '@Hooks/Productos/useEliminarProductos';
 import { tokens } from '@SRC/theme';
 import { useAuth } from '@Hooks/AuthProvider';
 import { PERMISOS } from '@Constantes/permisos';
+import ModalFlotante from '@Organismos/ModalFlotante.jsx';
+import InfoProducto from '@Moleculas/InfoProducto.jsx';
+import { useLeerProducto } from '@Hooks/Productos/useLeerProducto.js';
+
 const ListaProductos = () => {
   const { productos, cargando, error, recargar } = useConsultarProductos();
   const { eliminar } = useEliminarProductos();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
   const { usuario } = useAuth();
-  // prettier-ignore
-  const MENSAJE_POPUP_ELIMINAR 
-  = '¿Estás seguro de que deseas eliminar los productos seleccionados? Esta acción no se puede deshacer.';
 
   const [productosSeleccionados, setProductosSeleccionados] = useState([]);
+  const [productoDetalleSeleccionado, setProductoDetalleSeleccionado] = useState(null);
   const [mostrarModalProveedor, setMostrarModalProveedor] = useState(false);
   const [mostrarModalProducto, setMostrarModalProducto] = useState(false);
   const [alerta, setAlerta] = useState(null);
   const [openModalEliminar, setAbrirPopUp] = useState(false);
+  const [abrirModalDetalle, setAbrirModalDetalle] = useState(false);
+
+  const {
+    detalleProducto,
+    cargando: cargandoDetalle,
+    error: errorDetalle,
+  } = useLeerProducto(productoDetalleSeleccionado);
+
+  // Efecto: cuando se cierre el modal, se limpia el producto seleccionado
+  useEffect(() => {
+    if (!abrirModalDetalle) {
+      setProductoDetalleSeleccionado(null);
+    }
+  }, [abrirModalDetalle]);
 
   const mostrarFormularioProducto = useCallback(() => {
     setMostrarModalProducto(true);
@@ -91,7 +104,7 @@ const ListaProductos = () => {
       renderCell: (params) => (
         <img
           src={params.row.urlImagen}
-          alt='Producto'
+          alt="Producto"
           style={{ width: 50, height: 50, objectFit: 'cover' }}
         />
       ),
@@ -118,10 +131,10 @@ const ListaProductos = () => {
       renderCell: ({ row: { estado } }) => (
         <Chip
           label={estado === 1 ? 'Disponible' : 'No disponible'}
-          variant='filled'
+          variant="filled"
           color={estado === 1 ? 'primary' : undefined}
-          size='medium'
-          shape='cuadrada'
+          size="medium"
+          shape="cuadrada"
           backgroundColor={estado === 1 ? undefined : '#f0f0f0'}
           textColor={estado === 1 ? undefined : '#000000'}
         />
@@ -145,7 +158,6 @@ const ListaProductos = () => {
       backgroundColor: colores.altertex[1],
     },
     {
-      //variant: 'outlined',
       label: 'Importar',
       onClick: () => console.log('Importar'),
       color: 'primary',
@@ -154,7 +166,6 @@ const ListaProductos = () => {
       construccion: true,
     },
     {
-      //variant: 'outlined',
       label: 'Exportar',
       onClick: () => console.log('Exportar'),
       color: 'primary',
@@ -187,8 +198,8 @@ const ListaProductos = () => {
   return (
     <>
       <ContenedorLista
-        titulo='Lista de Productos'
-        descripcion='Gestiona y organiza los productos registrados en el sistema.'
+        titulo="Lista de Productos"
+        descripcion="Gestiona y organiza los productos registrados en el sistema."
         informacionBotones={botones}
       >
         {mostrarModalProducto && (
@@ -204,8 +215,10 @@ const ListaProductos = () => {
             alCerrarFormularioProveedor={cerrarFormularioProveedor}
           />
         )}
-        <Box width='100%'>
-          {error && <Alerta tipo='error' mensaje={error} icono cerrable centradoInferior />}
+        <Box width="100%">
+          {error && (
+            <Alerta tipo="error" mensaje={error} icono cerrable centradoInferior />
+          )}
           <Tabla
             columns={columnas}
             rows={filas}
@@ -214,9 +227,15 @@ const ListaProductos = () => {
             checkboxSelection
             rowHeight={80}
             onRowSelectionModelChange={(nuevosIds) => {
-              const ids = Array.isArray(nuevosIds) ? nuevosIds : Array.from(nuevosIds?.ids || []);
+              const ids = Array.isArray(nuevosIds)
+                ? nuevosIds
+                : Array.from(nuevosIds?.ids || []);
               setProductosSeleccionados(ids);
             }}
+            onRowClick={(parametros) => {
+              setProductoDetalleSeleccionado(parametros.row.id);
+              setAbrirModalDetalle(true);
+            }}
           />
         </Box>
       </ContenedorLista>
@@ -237,8 +256,42 @@ const ListaProductos = () => {
         abrir={openModalEliminar}
         cerrar={manejarCancelarEliminar}
         confirmar={manejarConfirmarEliminar}
-        dialogo={MENSAJE_POPUP_ELIMINAR}
+        dialogo="¿Estás seguro de que deseas eliminar los productos seleccionados? Esta acción no se puede deshacer."
       />
+
+      {abrirModalDetalle && (
+        <ModalFlotante
+          open={abrirModalDetalle}
+          onClose={() => setAbrirModalDetalle(false)}
+          titulo={detalleProducto?.nombreComun || 'Cargando...'}
+          tituloVariant='h4'
+          botones={[
+            {
+              label: 'Editar',
+              variant: 'contained',
+              color: 'primary',
+              backgroundColor: colores.altertex[1],
+              onClick: () => console.log('Editar producto'),
+              construccion: true,
+            },
+            {
+              label: 'Salir',
+              variant: 'outlined',
+              color: 'primary',
+              outlineColor: colores.primario[1],
+              onClick: () => setAbrirModalDetalle(false),
+            },
+          ]}
+        >
+          {cargandoDetalle ? (
+            <p>Cargando información del producto...</p>
+          ) : errorDetalle ? (
+            <p>Error al cargar la información del producto: {errorDetalle}</p>
+          ) : (
+            <InfoProducto detalleProducto={detalleProducto} />
+          )}
+        </ModalFlotante>
+      )}
     </>
   );
 };
diff --git a/src/hooks/Productos/useLeerProducto.js b/src/hooks/Productos/useLeerProducto.js
new file mode 100644
index 00000000..f3b146d2
--- /dev/null
+++ b/src/hooks/Productos/useLeerProducto.js
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { RepositorioLeerProducto } from '@Repositorios/Productos/RepositorioLeerProducto.js';
+
+export const useLeerProducto = (idProducto) => {
+  const [detalleProducto, setDetalleProducto] = useState(null)
+  const [cargando, setCargando] =useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    const obtenerInfoProducto = async () => {
+      setCargando(true)
+      setError(null)
+
+      try{
+        const productoInfo = await RepositorioLeerProducto.obtenerPorId(idProducto);
+        setDetalleProducto(productoInfo)
+      }catch (err) {
+        setError(err.message)
+      }finally {
+        setCargando(false)
+      }
+    }
+
+    if(idProducto) {
+      obtenerInfoProducto()
+    }
+  }, [idProducto]);
+
+  return {detalleProducto, cargando, error}
+}
\ No newline at end of file

From 24b439f6a5e396fca66c01d284fb5adf9a8fd946 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Mon, 26 May 2025 12:19:37 -0600
Subject: [PATCH 021/160] fix: arreglar manejo de errores

---
 .../Eventos/RepositorioCrearEvento.js         |  1 -
 src/Vistas/Paginas/Eventos/ListaEventos.jsx   |  5 ++--
 src/hooks/Eventos/useCrearEvento.js           | 30 ++++++++++++-------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
index d2562fca..b11625da 100644
--- a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
+++ b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
@@ -24,7 +24,6 @@ export class RepositorioCrearEvento {
       renovacion: evento.renovacion || false,
     }
 
-    console.log('Cuerpo de la solicitud:', body);
 
     try {
       const respuesta = await axios.post(RUTAS_API.EVENTOS.CREAR_EVENTO, body, {
diff --git a/src/Vistas/Paginas/Eventos/ListaEventos.jsx b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
index f07a9835..bb0b0487 100644
--- a/src/Vistas/Paginas/Eventos/ListaEventos.jsx
+++ b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
@@ -58,15 +58,14 @@ const ListaEventos = () => {
         centradoInferior: true,
       });
       setAbrirCrear(false);
-    } catch {
+    } catch (error) {
       setAlerta({
         tipo: 'error',
-        mensaje: 'Ocurrió un error al crear el evento.',
+        mensaje: `Error al crear el evento: ${error.message || 'Ocurrió un error desconocido'}`,
         icono: true,
         cerrable: true,
         centradoInferior: true,
       });
-      
     }
   };
 
diff --git a/src/hooks/Eventos/useCrearEvento.js b/src/hooks/Eventos/useCrearEvento.js
index d4da5625..68f155a5 100644
--- a/src/hooks/Eventos/useCrearEvento.js
+++ b/src/hooks/Eventos/useCrearEvento.js
@@ -5,24 +5,30 @@ import { RepositorioCrearEvento } from '@Dominio/Repositorios/Eventos/Repositori
 import { Evento } from '@Dominio/Modelos/Eventos/Eventos';
 
 /**
- * * Hook para crear eventos.
- * * @return {{
- * *  crear: function,
- * *  mensaje: string,
- *  *  cargando: boolean,
- * *  error: string | null,
- * * }}
+ * Hook para crear eventos.
+ * @return {{
+ *  crear: function,
+ *  mensaje: string,
+ *  cargando: boolean,
+ *  error: string | null,
+ *  resetError: function,
+ * }}
  */
 export function useCrearEvento() {
   const [mensaje, setMensaje] = useState('');
   const [cargando, setCargando] = useState(false);
   const [error, setError] = useState(null);
 
+  /**
+   * Resetea el estado de error
+   */
+  const resetError = () => setError(null);
+
   /**
    * Crea un nuevo evento.
-   * 
+   *
    * @param {Evento} evento - Objeto evento a crear.
-   * @returns {Promise<void>}
+   * @returns {Promise<boolean>} - true si se creó correctamente, false si ocurrió un error
    */
   const crear = async (evento) => {
     setCargando(true);
@@ -31,13 +37,15 @@ export function useCrearEvento() {
     try {
       const { mensaje } = await RepositorioCrearEvento.crearEvento(evento);
       setMensaje(mensaje);
+      return true; // Indica éxito
     } catch (err) {
       setMensaje('');
       setError(err.message);
+      throw err; // Propaga el error para que el componente pueda manejarlo
     } finally {
       setCargando(false);
     }
   };
 
-  return { crear, mensaje, cargando, error };
-}
+  return { crear, mensaje, cargando, error, resetError };
+}
\ No newline at end of file

From aa3fb8ec4f9f6de5498c917111bd7357fa0fe6a2 Mon Sep 17 00:00:00 2001
From: DiegoGarciaPadilla <gpdiego370@outlook.com>
Date: Mon, 26 May 2025 12:56:33 -0600
Subject: [PATCH 022/160] =?UTF-8?q?fix:=20quitar=20campos=20de=20periodo?=
 =?UTF-8?q?=20y=20renovaci=C3=B3n=20del=20formulario?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Eventos/RepositorioCrearEvento.js         |  2 +-
 .../Organismos/Eventos/ModalCrearEvento.jsx   | 24 +----------
 .../Formularios/FormularioCrearEvento.jsx     | 41 -------------------
 3 files changed, 3 insertions(+), 64 deletions(-)

diff --git a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
index b11625da..5b4970ce 100644
--- a/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
+++ b/src/Dominio/Repositorios/Eventos/RepositorioCrearEvento.js
@@ -20,7 +20,7 @@ export class RepositorioCrearEvento {
       descripcion: evento.descripcion || "",
       puntos: evento.puntos || 0,
       multiplicador: evento.multiplicador || 1,
-      periodoRenovacion: evento.periodoRenovacion || "",
+      periodoRenovacion: evento.periodo || "",
       renovacion: evento.renovacion || false,
     }
 
diff --git a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
index 2377f8c1..acc6b2d6 100644
--- a/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Eventos/ModalCrearEvento.jsx
@@ -21,24 +21,18 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
   const [descripcionEvento, setDescripcionEvento] = useState('');
   const [puntosEvento, setPuntosEvento] = useState('');
   const [multiplicadorEvento, setMultiplicadorEvento] = useState('');
-  const [periodoEvento, setPeriodoEvento] = useState('');
-  const [renovacionEvento, setRenovacionEvento] = useState('');
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
 
   const [nombreError, setNombreError] = useState(false);
   const [descripcionError, setDescripcionError] = useState(false);
   const [puntosError, setPuntosError] = useState(false);
   const [multiplicadorError, setMultiplicadorError] = useState(false);
-  const [periodoError, setPeriodoError] = useState(false);
-  const [renovacionError, setRenovacionError] = useState(false);
 
   const resetearCampos = () => {
     setNombreEvento('');
     setDescripcionEvento('');
     setPuntosEvento('');
     setMultiplicadorEvento('');
-    setPeriodoEvento('');
-    setRenovacionEvento('');
     setMostrarAlerta(false);
   };
 
@@ -47,8 +41,6 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
     setDescripcionError(false);
     setPuntosError(false);
     setMultiplicadorError(false);
-    setPeriodoError(false);
-    setRenovacionError(false);
   };
 
   const validarCampos = () => {
@@ -72,12 +64,6 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
       errores = true;
     }
 
-    if (renovacionEvento === '') {
-      setRenovacionError(true);
-      setMostrarAlerta(true);
-      errores = true;
-    }
-
     return errores;
   }
 
@@ -106,8 +92,8 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
       descripcion: descripcionEvento.trim(),
       puntos: parseFloat(puntosEvento),
       multiplicador: parseFloat(multiplicadorEvento),
-      periodoRenovacion: periodoEvento.trim(),
-      renovacion: renovacionEvento,
+      periodoRenovacion: "Mensual",
+      renovacion: false
     });
 
     // Notificar que se ha creado exitosamente
@@ -146,12 +132,6 @@ const ModalCrearEvento = ({ abierto = false, onCerrar, onCreado }) => {
         multiplicadorEvento={multiplicadorEvento}
         setMultiplicadorEvento={setMultiplicadorEvento}
         multiplicadorError={multiplicadorError}
-        periodoEvento={periodoEvento}
-        setPeriodoEvento={setPeriodoEvento}
-        periodoError={periodoError}
-        renovacionEvento={renovacionEvento}
-        setRenovacionEvento={setRenovacionEvento}
-        renovacionError={renovacionError}
         mostrarAlerta={mostrarAlerta}
         setMostrarAlerta={setMostrarAlerta}
       />
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
index 192bd70c..b15534e6 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearEvento.jsx
@@ -8,7 +8,6 @@ import CampoSelect from '../../Atomos/CampoSelect';
 // Constantes para mensajes y límites
 const LIMITE_NOMBRE = 100;
 const LIMITE_DESCRIPCION = 300;
-const LIMITE_PERIODO = 50;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 const FormularioCrearEvento = ({
@@ -24,12 +23,6 @@ const FormularioCrearEvento = ({
   multiplicadorEvento,
   setMultiplicadorEvento,
   multiplicadorError = false,
-  periodoEvento,
-  setPeriodoEvento,
-  periodoError = false,
-  renovacionEvento,
-  setRenovacionEvento,
-  renovacionError = false,
   mostrarAlerta,
   setMostrarAlerta,
 }) => {
@@ -60,12 +53,6 @@ const FormularioCrearEvento = ({
       setMultiplicadorEvento(valor);
     }
   };
-  
-  // Manejar el cambio de periodo
-  const manejarCambioPeriodo = (evento) => setPeriodoEvento(evento.target.value);
-
-  // Manejar el cambio de renovación
-  const manejarCambioRenovacion = (evento) => setRenovacionEvento(evento.target.value);
 
   return (
     <>
@@ -118,34 +105,6 @@ const FormularioCrearEvento = ({
           error={multiplicadorError}
         />
       </Box>
-      <Box display={'grid'} gridTemplateColumns={'repeat(2, 1fr)'} gap={2}>
-        <CampoTexto
-          label={'Periodo de Renovación'}
-          fullWidth
-          type={'text'}
-          value={periodoEvento}
-          onChange={manejarCambioPeriodo}
-          inputProps={{ maxLength: LIMITE_PERIODO }}
-          helperText={`${periodoEvento.length}/${LIMITE_PERIODO} - ${MENSAJE_LIMITE}`}
-          sx={{ mb: 2 }}
-          error={periodoError}
-        />
-        <CampoSelect
-          label={'Renovación Automática'}
-          fullWidth
-          required
-          value={renovacionEvento}
-          onChange={manejarCambioRenovacion}
-          options={[
-            { value: true, label: 'Sí' },
-            { value: false, label: 'No' },
-          ]}
-          placeholder={'Selecciona una opción'}
-          sx={{ mb: 2 }}
-          error={renovacionError}
-        />
-      </Box>
-
       {mostrarAlerta && (
         <Alerta
           tipo='warning'

From 17129736aa6aee77749c68f2d2f3e88640acae54 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Mon, 26 May 2025 15:41:20 -0600
Subject: [PATCH 023/160] feat: agregar imagen al modal

---
 src/Vistas/Componentes/Moleculas/InfoProducto.jsx | 14 ++++++++++++--
 src/Vistas/Paginas/Productos/ListaProductos.jsx   |  5 ++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
index 24213a22..8cf0050e 100644
--- a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
+++ b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
@@ -5,7 +5,7 @@ import Texto from '@Atomos/Texto.jsx';
 import Chip from '@Atomos/Chip';
 import Tabla from '@Organismos/Tabla';
 
-const InfoProducto = ({detalleProducto}) => {
+const InfoProducto = ({detalleProducto, imagenProducto}) => {
 
   const tema = useTheme()
   const colores = tokens(tema.palette.mode)
@@ -20,7 +20,7 @@ const InfoProducto = ({detalleProducto}) => {
   };
 
   return <>
-    <Grid container spacing={6} wrap='nowrap'>
+    <Grid container spacing={9} wrap='nowrap'>
       {/*Información General*/}
       <Grid >
         <Box sx={{maxWidth: '100%'}}>
@@ -95,6 +95,16 @@ const InfoProducto = ({detalleProducto}) => {
         </Box>
 
       </Grid>
+
+      <Grid>
+        <Box sx={{maxWidth: '100%'}} >
+          <Texto variant={'subtitle1'} sx={{fontWeight: 'bold', mb: 3}} >
+            IMAGEN DEL PRODUCTO
+          </Texto>
+          <img src={imagenProducto} width={200} height={200}/>
+        </Box>
+      </Grid>
+
     </Grid>
 
     <Texto variant='subtitle1' sx={{fontWeight: 'bold', mb: 3}}>
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 3010d125..56d46452 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -29,6 +29,7 @@ const ListaProductos = () => {
   const [alerta, setAlerta] = useState(null);
   const [openModalEliminar, setAbrirPopUp] = useState(false);
   const [abrirModalDetalle, setAbrirModalDetalle] = useState(false);
+  const [imagenProducto, setImagenProducto] = useState('')
 
   const {
     detalleProducto,
@@ -234,6 +235,7 @@ const ListaProductos = () => {
             }}
             onRowClick={(parametros) => {
               setProductoDetalleSeleccionado(parametros.row.id);
+              setImagenProducto(parametros.row.urlImagen)
               setAbrirModalDetalle(true);
             }}
           />
@@ -265,6 +267,7 @@ const ListaProductos = () => {
           onClose={() => setAbrirModalDetalle(false)}
           titulo={detalleProducto?.nombreComun || 'Cargando...'}
           tituloVariant='h4'
+          customWidth={750}
           botones={[
             {
               label: 'Editar',
@@ -288,7 +291,7 @@ const ListaProductos = () => {
           ) : errorDetalle ? (
             <p>Error al cargar la información del producto: {errorDetalle}</p>
           ) : (
-            <InfoProducto detalleProducto={detalleProducto} />
+            <InfoProducto detalleProducto={detalleProducto} imagenProducto={imagenProducto}/>
           )}
         </ModalFlotante>
       )}

From 1c4fdcbb7ee9448c934eb44710e75193581e8039 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 26 May 2025 16:29:58 -0600
Subject: [PATCH 024/160] Feat: Chips dinamicos cuando se selecciona

---
 src/App.css                                   |  4 ++
 src/Dominio/Servicios/obtenerEmpleados.js     |  1 +
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 54 +++++++++----------
 src/Vistas/Componentes/Organismos/Tabla.jsx   | 17 +++---
 .../Organismos/TablaSetsEmpleados.jsx         | 25 +++++++++
 5 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 src/Vistas/Componentes/Organismos/TablaSetsEmpleados.jsx

diff --git a/src/App.css b/src/App.css
index b74d403b..7b0f5769 100644
--- a/src/App.css
+++ b/src/App.css
@@ -38,3 +38,7 @@
 */ #root {
   text-align: center;
 }
+
+.css-1sf6n0n-MuiDataGrid-root {
+  height: auto !important;
+}
diff --git a/src/Dominio/Servicios/obtenerEmpleados.js b/src/Dominio/Servicios/obtenerEmpleados.js
index babaca66..df4b5803 100644
--- a/src/Dominio/Servicios/obtenerEmpleados.js
+++ b/src/Dominio/Servicios/obtenerEmpleados.js
@@ -17,6 +17,7 @@ const obtenerEmpleados = async (clienteSeleccionado) => {
     );
     const filasFormateadas = respuesta.data.empleados.map((empleado) => ({
       id: empleado.idEmpleado,
+      correo: empleado.correoElectronico,
       nombre: empleado.nombreCompleto,
       area: empleado.areaTrabajo,
     }));
diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 2d5cb4bc..1f716fbc 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -3,7 +3,7 @@ import CampoTexto from '@Atomos/CampoTexto';
 import { useState, useEffect } from 'react';
 import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
 import obtenerEmpleados from '@Servicios/obtenerEmpleados';
-import ProductosModal from '@Organismos/ProductosModal';
+import TablaSetsEmpleados from '@Organismos/TablaSetsEmpleados';
 import { useAuth } from '@Hooks/AuthProvider';
 import Tabla from '@Organismos/Tabla';
 import { Box, Button, Chip, Grid } from '@mui/material';
@@ -16,7 +16,7 @@ const InfoGrupoEmpleadosEditable = ({
   empleados: empleadosInicial,
 }) => {
   const [productosDisponibles, setProductosDisponibles] = useState([]);
-  const [empleadosDisponibles, setEmpleadosDisponibles] = useState([]); // Lista de empleados disponibles
+  const [empleadosDisponibles, setEmpleadosDisponibles] = useState([]);
   const { usuario } = useAuth();
   const clienteSeleccionado = usuario.clienteSeleccionado;
 
@@ -32,8 +32,8 @@ const InfoGrupoEmpleadosEditable = ({
       const productos = await obtenerSetsProductos(clienteSeleccionado);
       setProductosDisponibles(productos);
 
-      const empleados = await obtenerEmpleados(clienteSeleccionado); // Obtener empleados disponibles
-      setEmpleadosDisponibles(empleados);
+      const empleadosData = await obtenerEmpleados(clienteSeleccionado);
+      setEmpleadosDisponibles(empleadosData);
     };
 
     obtenerDatos();
@@ -41,7 +41,6 @@ const InfoGrupoEmpleadosEditable = ({
 
   const handleAgregarProducto = (evento) => {
     const productoSeleccionado = evento.row;
-
     const yaExiste = setsProductos.some((producto) => producto.id === productoSeleccionado.id);
     if (!yaExiste) {
       setSetsProductos((prev) => [...prev, productoSeleccionado]);
@@ -50,26 +49,25 @@ const InfoGrupoEmpleadosEditable = ({
 
   const handleAgregarEmpleado = (evento) => {
     const empleadoSeleccionado = evento.row;
-
-    const yaExiste = empleados.some((empleado) => empleado.id === empleadoSeleccionado.id);
+    const yaExiste = empleados.some(
+      (empleado) =>
+        empleado.id === empleadoSeleccionado.id || empleado.idEmpleado === empleadoSeleccionado.id
+    );
     if (!yaExiste) {
       setEmpleados((prev) => [...prev, empleadoSeleccionado]);
     }
   };
 
-  const filasEmpleados = empleados.map((empleado, index) => {
-    const [nombreCompleto, correoElectronico, areaTrabajo] = empleado.split(' | ');
-    return {
-      id: index + 1,
-      nombreCompleto,
-      correoElectronico,
-      areaTrabajo,
-    };
-  });
+  const filas = empleadosDisponibles.map((empleado) => ({
+    id: empleado.id || empleado.idEmpleado,
+    nombreCompleto: empleado.nombreCompleto || empleado.nombre,
+    correo: empleado.correo,
+    areaTrabajo: empleado.areaTrabajo || empleado.area,
+  }));
 
   const handleGuardar = () => {
     if (!nombre || !descripcion || setsProductos.length === 0 || empleados.length === 0) {
-      setMostrarAlerta(true); // Mostrar alerta si faltan datos
+      setMostrarAlerta(true);
       return;
     }
 
@@ -77,7 +75,6 @@ const InfoGrupoEmpleadosEditable = ({
     console.log('Descripción:', descripcion);
     console.log('Sets de Productos:', setsProductos);
     console.log('Empleados:', empleados);
-    // Aquí puedes implementar la lógica para guardar los cambios
   };
 
   return (
@@ -132,7 +129,7 @@ const InfoGrupoEmpleadosEditable = ({
               </Texto>
             )}
           </Box>
-          <ProductosModal
+          <TablaSetsEmpleados
             elevacion={1}
             sx={{ width: '100%', height: '350px' }}
             columnas={[
@@ -155,7 +152,11 @@ const InfoGrupoEmpleadosEditable = ({
               empleados.map((empleado, index) => (
                 <Chip
                   key={index}
-                  label={empleado.nombreCompleto || empleado}
+                  label={
+                    empleado.nombreCompleto && empleado.correo && empleado.areaTrabajo
+                      ? `${empleado.nombreCompleto} | ${empleado.correo} | ${empleado.areaTrabajo}`
+                      : empleado.toString()
+                  }
                   onDelete={() => setEmpleados(empleados.filter((_, i) => i !== index))}
                   sx={{
                     borderRadius: '16px',
@@ -170,21 +171,20 @@ const InfoGrupoEmpleadosEditable = ({
               </Texto>
             )}
           </Box>
-          <ProductosModal
+          <TablaSetsEmpleados
             elevacion={1}
-            sx={{ width: '100%', height: '350px' }}
+            sx={{}}
             columnas={[
-              { field: 'id', headerName: 'Id', width: 100 },
-              { field: 'nombre', headerName: 'Nombre', width: 220 },
-              { field: 'area', headerName: 'Área de Trabajo', width: 200 },
+              { field: 'nombreCompleto', headerName: 'Nombre del Empleado', flex: 0.9 },
+              { field: 'correo', headerName: 'Correo Electrónico', flex: 1 },
+              { field: 'areaTrabajo', headerName: 'Área de Trabajo', flex: 0.85 },
             ]}
-            filas={empleadosDisponibles}
+            filas={filas}
             paginacion={4}
             checkBox={true}
             onRowClick={handleAgregarEmpleado}
           />
         </Grid>
-
         {/* Botón Guardar */}
         <Grid item xs={12}>
           <Button variant='contained' color='primary' onClick={handleGuardar} sx={{ mt: 2 }}>
diff --git a/src/Vistas/Componentes/Organismos/Tabla.jsx b/src/Vistas/Componentes/Organismos/Tabla.jsx
index 56b2c7e9..f6935939 100644
--- a/src/Vistas/Componentes/Organismos/Tabla.jsx
+++ b/src/Vistas/Componentes/Organismos/Tabla.jsx
@@ -132,6 +132,12 @@ const Tabla = ({
     pageSize: pageSize || 5,
   });
 
+  const handleSelectionModelChange = (newSelection) => {
+    if (typeof onRowSelectionModelChange === 'function') {
+      onRowSelectionModelChange(newSelection);
+    }
+  };
+
   return (
     <StyledDataGrid
       rows={rows}
@@ -141,12 +147,10 @@ const Tabla = ({
       onRowClick={onRowClick}
       checkboxSelection={checkboxSelection}
       disableRowSelectionOnClick={disableRowSelectionOnClick}
-      onRowSelectionModelChange={(seleccion) => {
-        onRowSelectionModelChange(seleccion);
-      }}
+      onRowSelectionModelChange={handleSelectionModelChange}
       paginationModel={paginationModel}
       onPaginationModelChange={setPaginationModel}
-      pageSizeOptions={[5, 10]}
+      pageSizeOptions={[5]}
       pagination
       localeText={spanishLocaleText}
       rowHeight={70}
@@ -179,8 +183,9 @@ Tabla.defaultProps = {
   loading: false,
   pageSize: 5,
   onRowClick: () => {},
-  onRowSelectionModelChange: () => {},
-  disableRowSelectionOnClick: true,
+  onRowSelectionModelChange: undefined,
+  checkboxSelection: false,
+  disableRowSelectionOnClick: false,
 };
 
 export default Tabla;
diff --git a/src/Vistas/Componentes/Organismos/TablaSetsEmpleados.jsx b/src/Vistas/Componentes/Organismos/TablaSetsEmpleados.jsx
new file mode 100644
index 00000000..717b7c4b
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/TablaSetsEmpleados.jsx
@@ -0,0 +1,25 @@
+import Tabla from '@Organismos/Tabla';
+
+const TablaSetsEmpleados = ({
+  columnas,
+  filas,
+  paginacion,
+  checkBox,
+  onRowClick,
+  onRowSelectionModelChange,
+  selectionModel,
+}) => {
+  return (
+    <Tabla
+      columns={columnas}
+      rows={filas}
+      pageSize={paginacion}
+      checkboxSelection={checkBox}
+      onRowClick={onRowClick}
+      onRowSelectionModelChange={onRowSelectionModelChange}
+      selectionModel={selectionModel}
+    />
+  );
+};
+
+export default TablaSetsEmpleados;

From 6304c6b107600fcb07dfe4e9089c1ca8734f219a Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Mon, 26 May 2025 17:12:19 -0600
Subject: [PATCH 025/160] feat: agregar leer rol

---
 src/Dominio/Modelos/Roles/DetalleRol.js       |  23 ++++
 .../Repositorios/Roles/RepositorioLeerRol.js  |  23 ++++
 src/Utilidades/Constantes/rutasAPI.js         |   1 +
 .../Moleculas/Verificar2FAModal.jsx           |  85 +++++++------
 .../Organismos/ModalDetalleRol.jsx            | 113 ++++++++++++++++++
 src/Vistas/Paginas/Roles/ListaRoles.jsx       |  23 +++-
 src/hooks/Roles/useLeerRol.js                 |  27 +++++
 7 files changed, 253 insertions(+), 42 deletions(-)
 create mode 100644 src/Dominio/Modelos/Roles/DetalleRol.js
 create mode 100644 src/Dominio/Repositorios/Roles/RepositorioLeerRol.js
 create mode 100644 src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
 create mode 100644 src/hooks/Roles/useLeerRol.js

diff --git a/src/Dominio/Modelos/Roles/DetalleRol.js b/src/Dominio/Modelos/Roles/DetalleRol.js
new file mode 100644
index 00000000..f9d7c9cc
--- /dev/null
+++ b/src/Dominio/Modelos/Roles/DetalleRol.js
@@ -0,0 +1,23 @@
+/**
+ * @class DetalleRol
+ * Representa el detalle completo de un rol en el sistema.
+ */
+export class DetalleRol {
+  constructor({ idRol, nombre, descripcion, totalUsuarios, permisos }) {
+    this.idRol = idRol ?? null;
+    this.nombre = nombre ?? '';
+    this.descripcion = descripcion ?? '';
+    this.totalUsuarios = totalUsuarios ?? 0;
+    this.permisos = permisos ?? [];
+  }
+}
+
+/**
+ * Convierte una respuesta JSON del backend en una instancia de DetalleRol.
+ * @param {object} respuestaJson
+ * @returns {DetalleRol}
+ */
+export function modeloDetalleRol(respuestaJson) {
+  const { rol } = respuestaJson;
+  return new DetalleRol(rol);
+}
\ No newline at end of file
diff --git a/src/Dominio/Repositorios/Roles/RepositorioLeerRol.js b/src/Dominio/Repositorios/Roles/RepositorioLeerRol.js
new file mode 100644
index 00000000..d162dc32
--- /dev/null
+++ b/src/Dominio/Repositorios/Roles/RepositorioLeerRol.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { modeloDetalleRol } from '@Modelos/Roles/DetalleRol';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioLeerRol {
+  static async obtenerDetalle(idRol) {
+    try {
+      const { data } = await axios.get(`${RUTAS_API.ROLES.LEER_ROL}?idRol=${idRol}`, {
+        withCredentials: true,
+        headers: {
+          'x-api-key': API_KEY,
+        },
+      });
+
+      return modeloDetalleRol(data);
+    } catch (error) {
+      const mensaje = error.response?.data?.mensaje || 'Error al consultar detalle del rol';
+      throw new Error(mensaje);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..32494ca2 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -81,6 +81,7 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_ROLES}/consultar-lista`,
     CREAR_ROL: `${BASE_ROLES}/crear-rol`,
     ELIMINAR_ROL: `${BASE_ROLES}/eliminar`,
+    LEER_ROL: `${BASE_ROLES}/leer`
   },
   PEDIDOS: {
     BASE: BASE_PEDIDOS,
diff --git a/src/Vistas/Componentes/Moleculas/Verificar2FAModal.jsx b/src/Vistas/Componentes/Moleculas/Verificar2FAModal.jsx
index a3f2a31c..ffb992cb 100644
--- a/src/Vistas/Componentes/Moleculas/Verificar2FAModal.jsx
+++ b/src/Vistas/Componentes/Moleculas/Verificar2FAModal.jsx
@@ -17,14 +17,14 @@ const estiloModal = {
 };
 
 const Verificar2FAModal = ({
-  abierto,
-  onCerrar,
-  onConfirmar,
-  cargando,
-  error,
-  codigo,
-  setCodigo,
-}) => {
+                             abierto,
+                             onCerrar,
+                             onConfirmar,
+                             cargando,
+                             error,
+                             codigo,
+                             setCodigo,
+                           }) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
   const manejarConfirmar = () => {
@@ -32,7 +32,18 @@ const Verificar2FAModal = ({
   };
 
   return (
-    <Modal open={abierto} onClose={onCerrar}>
+    <Modal
+      open={abierto}
+      onClose={onCerrar}
+      slotProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: 'blur(4px)',
+            backgroundColor: colores.acciones[2],
+          },
+        },
+      }}
+    >
       <Box sx={estiloModal}>
         <Typography variant="h6">Verificar en tu app de autenticación</Typography>
 
@@ -51,35 +62,35 @@ const Verificar2FAModal = ({
 
         {error && <Typography color="error">{error}</Typography>}
 
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          gap: 2, 
-          mt: 2,
-        }}
-      >
-        <Boton
-          label="Cancelar"
-          variant="outlined"
-          onClick={onCerrar}
-          outlineColor={colores.altertex[1]}
-        />
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 2,
+            mt: 2,
+          }}
+        >
+          <Boton
+            label="Cancelar"
+            variant="outlined"
+            onClick={onCerrar}
+            outlineColor={colores.altertex[1]}
+          />
 
-        <Boton
-          label={cargando ? (
-            <>
-              Verificando... <CircularProgress size={16} sx={{ ml: 1 }} />
-            </>
-          ) : (
-            'Verificar'
-          )}
-          variant="contained"
-          onClick={manejarConfirmar}
-          backgroundColor={colores.altertex[1]}
-          disabled={cargando || String(codigo).length !== 6}
-        />
-      </Box>
+          <Boton
+            label={cargando ? (
+              <>
+                Verificando... <CircularProgress size={16} sx={{ ml: 1 }} />
+              </>
+            ) : (
+              'Verificar'
+            )}
+            variant="contained"
+            onClick={manejarConfirmar}
+            backgroundColor={colores.altertex[1]}
+            disabled={cargando || String(codigo).length !== 6}
+          />
+        </Box>
       </Box>
     </Modal>
   );
diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
new file mode 100644
index 00000000..d4652f68
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -0,0 +1,113 @@
+// RF[8] Leer Rol - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF8
+
+import { useEffect } from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import { useLeerRol } from '@Hooks/Roles/useLeerRol';
+import Alerta from '@Moleculas/Alerta';
+import Tabla from '@Organismos/Tabla';
+import { tokens } from '@SRC/theme';
+
+const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
+  const { detalle, cargando, error, leerRol } = useLeerRol();
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+
+  useEffect(() => {
+    if (abierto && idRol) leerRol(idRol);
+  }, [abierto, idRol, leerRol]);
+
+  const columnas = [
+    {
+      field: 'nombre',
+      headerName: 'Permisos',
+      flex: 1,
+    },
+    {
+      field: 'descripcion',
+      headerName: 'Descripción',
+      flex: 2,
+    },
+  ];
+
+  const filas = (detalle?.permisos || []).map((permiso) => ({
+    id: permiso.id,
+    nombre: permiso.nombre,
+    descripcion: permiso.descripcion,
+  }));
+
+  return (
+    <>
+      {error && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: '24px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1500,
+            width: 'calc(100% - 32px)',
+            maxWidth: 600,
+          }}
+        >
+          <Alerta
+            tipo="error"
+            mensaje={error}
+            duracion={4000}
+            cerrable
+            onClose={() => {}}
+          />
+        </Box>
+      )}
+
+      <ModalFlotante
+        open={abierto}
+        onClose={onCerrar}
+        onConfirm={onCerrar}
+        titulo="Detalles del Rol"
+        tituloVariant="h4"
+        customWidth={800}
+        botones={[
+          {
+            label: 'Salir',
+            variant: 'outlined',
+            size: 'large',
+            outlineColor: colores.altertex[1],
+            onClick: onCerrar,
+          },
+        ]}
+      >
+        {cargando && (
+          <Typography variant="body1" sx={{ mb: 2 }}>
+            Cargando...
+          </Typography>
+        )}
+
+        {!cargando && detalle && (
+          <>
+            <Typography variant="body1" sx={{ mb: 2 }}>
+              <strong>Rol:</strong> {detalle.nombre}
+            </Typography>
+            <Typography variant="body1" sx={{ mb: 2 }}>
+              <strong>Descripción:</strong> {detalle.descripcion}
+            </Typography>
+            <Typography variant="body1" sx={{ mb: 3 }}>
+              <strong>Número de usuarios asociados a este rol:</strong> {detalle.totalUsuarios}
+            </Typography>
+
+            <Box sx={{ mb: 4 }}>
+              <Tabla
+                columns={columnas}
+                rows={filas}
+                loading={cargando}
+                disableRowSelectionOnClick
+              />
+            </Box>
+          </>
+        )}
+      </ModalFlotante>
+    </>
+  );
+};
+
+export default ModalDetalleRol;
\ No newline at end of file
diff --git a/src/Vistas/Paginas/Roles/ListaRoles.jsx b/src/Vistas/Paginas/Roles/ListaRoles.jsx
index 36f4c286..1c155bd0 100644
--- a/src/Vistas/Paginas/Roles/ListaRoles.jsx
+++ b/src/Vistas/Paginas/Roles/ListaRoles.jsx
@@ -14,6 +14,7 @@ import Alerta from '@Moleculas/Alerta';
 import PopUp from '@Moleculas/PopUp';
 import { useEliminarRol } from '@Hooks/Roles/useEliminarRol';
 import NavegadorAdministrador from '@Organismos/NavegadorAdministrador';
+import ModalDetalleRol from '@Organismos/ModalDetalleRol';
 
 const estiloImagenLogo = { marginRight: '1rem' };
 // ID del superusuario que no debe ser eliminado
@@ -29,6 +30,8 @@ const ListaRoles = () => {
 
   const MENSAJE_POPUP_ELIMINAR = '¿Estás seguro de que deseas eliminar los roles seleccionados?';
 
+  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [rolSeleccionado, setRolSeleccionado] = useState(null);
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const [alerta, setAlerta] = useState(null);
   const { eliminar } = useEliminarRol();
@@ -57,7 +60,7 @@ const ListaRoles = () => {
   };
 
   const verificarSeleccion = (seleccion) => {
-      const IDS_PROTEGIDOS = [SUPERUSER_ID, SUPERVISOR_ID, EMPLEADO_ID];
+    const IDS_PROTEGIDOS = [SUPERUSER_ID, SUPERVISOR_ID, EMPLEADO_ID];
     const seleccionSinSuperuser = seleccion.filter((id) => !IDS_PROTEGIDOS.includes(Number(id)));
 
     if (seleccion.length !== seleccionSinSuperuser.length) {
@@ -117,7 +120,7 @@ const ListaRoles = () => {
       console.error('Error al eliminar roles:', error);
       setAlerta({
         tipo: 'error',
-         mensaje: error.message || 'Ocurrió un error al eliminar los roles. Puedes intentarlo de nuevo.',
+        mensaje: error.message || 'Ocurrió un error al eliminar los roles. Puedes intentarlo de nuevo.',
         icono: true,
         cerrable: true,
         centradoInferior: true,
@@ -191,8 +194,8 @@ const ListaRoles = () => {
           if (seleccionFiltrada.length > 0) {
             setAbrirPopupEliminar(true);
           } else if (
-            seleccionFiltrada.length === 0 
-              && seleccionados.some(id => IDS_PROTEGIDOS.includes(Number(id)))
+            seleccionFiltrada.length === 0
+            && seleccionados.some(id => IDS_PROTEGIDOS.includes(Number(id)))
           ) {
             setAlerta({
               tipo: 'warning',
@@ -277,6 +280,10 @@ const ListaRoles = () => {
             loading={cargando}
             disableRowSelectionOnClick={true}
             checkboxSelection
+            onRowClick={(params) => {
+              setRolSeleccionado(params.id);
+              setModalDetalleAbierto(true);
+            }}
             onRowSelectionModelChange={(seleccion) => {
               const ids = Array.isArray(seleccion) ? seleccion : Array.from(seleccion?.ids || []);
               setSeleccionados(ids);
@@ -296,6 +303,12 @@ const ListaRoles = () => {
         </Box>
       </ContenedorLista>
 
+      <ModalDetalleRol
+        abierto={modalDetalleAbierto}
+        onCerrar={() => setModalDetalleAbierto(false)}
+        idRol={rolSeleccionado}
+      />
+
       <ModalCrearRol
         abierto={modalCrearAbierto}
         onCerrar={handleCerrarModalCrear}
@@ -324,4 +337,4 @@ const ListaRoles = () => {
   );
 };
 
-export default ListaRoles;
+export default ListaRoles;
\ No newline at end of file
diff --git a/src/hooks/Roles/useLeerRol.js b/src/hooks/Roles/useLeerRol.js
new file mode 100644
index 00000000..e7f2ec0e
--- /dev/null
+++ b/src/hooks/Roles/useLeerRol.js
@@ -0,0 +1,27 @@
+import { useState, useCallback } from 'react';
+import { RepositorioLeerRol } from '@Repositorios/Roles/RepositorioLeerRol';
+
+/**
+ * Hook para leer el detalle de un rol.
+ */
+export function useLeerRol() {
+  const [detalle, setDetalle] = useState(null);
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+
+  const leerRol = useCallback(async (idRol) => {
+    setCargando(true);
+    setError(null);
+
+    try {
+      const detalleRol = await RepositorioLeerRol.obtenerDetalle(idRol);
+      setDetalle(detalleRol);
+    } catch (err) {
+      setError(err.message || 'Error al leer el rol');
+    } finally {
+      setCargando(false);
+    }
+  }, []);
+
+  return { detalle, cargando, error, leerRol };
+}
\ No newline at end of file

From 78fffaaa6e4fac3e8c31a6a58c2d031585c14e9d Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 26 May 2025 19:01:41 -0600
Subject: [PATCH 026/160] Feat: selecciones dinamicas con tabla

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 85 ++++++++++++++-----
 1 file changed, 62 insertions(+), 23 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 1f716fbc..8bced0a0 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -5,7 +5,6 @@ import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
 import obtenerEmpleados from '@Servicios/obtenerEmpleados';
 import TablaSetsEmpleados from '@Organismos/TablaSetsEmpleados';
 import { useAuth } from '@Hooks/AuthProvider';
-import Tabla from '@Organismos/Tabla';
 import { Box, Button, Chip, Grid } from '@mui/material';
 import Texto from '@Atomos/Texto';
 
@@ -27,6 +26,10 @@ const InfoGrupoEmpleadosEditable = ({
   const [empleados, setEmpleados] = useState(empleadosInicial || []);
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
 
+  // Estados para manejar las selecciones en las tablas
+  const [productosSeleccionados, setProductosSeleccionados] = useState([]);
+  const [empleadosSeleccionados, setEmpleadosSeleccionados] = useState([]);
+
   useEffect(() => {
     const obtenerDatos = async () => {
       const productos = await obtenerSetsProductos(clienteSeleccionado);
@@ -39,30 +42,65 @@ const InfoGrupoEmpleadosEditable = ({
     obtenerDatos();
   }, [clienteSeleccionado]);
 
-  const handleAgregarProducto = (evento) => {
-    const productoSeleccionado = evento.row;
-    const yaExiste = setsProductos.some((producto) => producto.id === productoSeleccionado.id);
-    if (!yaExiste) {
-      setSetsProductos((prev) => [...prev, productoSeleccionado]);
+  // Sincronizar selecciones con los chips cuando cambian los datos
+  useEffect(() => {
+    const idsProductosSeleccionados = setsProductos.map((producto) => producto.id);
+    setProductosSeleccionados(idsProductosSeleccionados);
+  }, [setsProductos]);
+
+  useEffect(() => {
+    const idsEmpleadosSeleccionados = empleados.map((empleado) => empleado.id);
+    setEmpleadosSeleccionados(idsEmpleadosSeleccionados);
+  }, [empleados]);
+
+  // Manejar cambios en la selección de productos
+  const handleSeleccionProductos = (selectionData) => {
+    console.log('Selecciones productos recibidas:', selectionData);
+
+    // Extraer IDs del Set y convertir a array
+    let seleccionesArray = [];
+    if (selectionData && selectionData.ids && selectionData.ids instanceof Set) {
+      seleccionesArray = Array.from(selectionData.ids);
+    } else if (Array.isArray(selectionData)) {
+      seleccionesArray = selectionData;
     }
-  };
 
-  const handleAgregarEmpleado = (evento) => {
-    const empleadoSeleccionado = evento.row;
-    const yaExiste = empleados.some(
-      (empleado) =>
-        empleado.id === empleadoSeleccionado.id || empleado.idEmpleado === empleadoSeleccionado.id
+    setProductosSeleccionados(seleccionesArray);
+
+    // Actualizar los chips basándose en las selecciones
+    const productosActualizados = productosDisponibles.filter((producto) =>
+      seleccionesArray.includes(producto.id)
     );
-    if (!yaExiste) {
-      setEmpleados((prev) => [...prev, empleadoSeleccionado]);
+    setSetsProductos(productosActualizados);
+  };
+
+  // Manejar cambios en la selección de empleados
+  const handleSeleccionEmpleados = (selectionData) => {
+    console.log('Selecciones empleados recibidas:', selectionData);
+
+    // Extraer IDs del Set y convertir a array
+    let seleccionesArray = [];
+    if (selectionData && selectionData.ids && selectionData.ids instanceof Set) {
+      seleccionesArray = Array.from(selectionData.ids);
+    } else if (Array.isArray(selectionData)) {
+      seleccionesArray = selectionData;
     }
+
+    setEmpleadosSeleccionados(seleccionesArray);
+
+    // Actualizar los chips basándose en las selecciones
+    const empleadosActualizados = empleadosDisponibles.filter((empleado) =>
+      seleccionesArray.includes(empleado.id)
+    );
+    setEmpleados(empleadosActualizados);
   };
 
+  // Preparar filas para la tabla de empleados
   const filas = empleadosDisponibles.map((empleado) => ({
-    id: empleado.id || empleado.idEmpleado,
-    nombreCompleto: empleado.nombreCompleto || empleado.nombre,
+    id: empleado.id,
+    nombreCompleto: empleado.nombre,
     correo: empleado.correo,
-    areaTrabajo: empleado.areaTrabajo || empleado.area,
+    areaTrabajo: empleado.area,
   }));
 
   const handleGuardar = () => {
@@ -115,7 +153,6 @@ const InfoGrupoEmpleadosEditable = ({
                 <Chip
                   key={index}
                   label={set.nombreProducto || set}
-                  onDelete={() => setSetsProductos(setsProductos.filter((_, i) => i !== index))}
                   sx={{
                     borderRadius: '16px',
                     backgroundColor: '#e0f7fa',
@@ -140,7 +177,8 @@ const InfoGrupoEmpleadosEditable = ({
             filas={productosDisponibles}
             paginacion={4}
             checkBox={true}
-            onRowClick={handleAgregarProducto}
+            selectionModel={productosSeleccionados}
+            onRowSelectionModelChange={handleSeleccionProductos}
           />
         </Grid>
 
@@ -153,11 +191,10 @@ const InfoGrupoEmpleadosEditable = ({
                 <Chip
                   key={index}
                   label={
-                    empleado.nombreCompleto && empleado.correo && empleado.areaTrabajo
-                      ? `${empleado.nombreCompleto} | ${empleado.correo} | ${empleado.areaTrabajo}`
+                    empleado.nombre && empleado.correo && empleado.area
+                      ? `${empleado.nombre} | ${empleado.correo} | ${empleado.area}`
                       : empleado.toString()
                   }
-                  onDelete={() => setEmpleados(empleados.filter((_, i) => i !== index))}
                   sx={{
                     borderRadius: '16px',
                     backgroundColor: '#e0f7fa',
@@ -182,9 +219,11 @@ const InfoGrupoEmpleadosEditable = ({
             filas={filas}
             paginacion={4}
             checkBox={true}
-            onRowClick={handleAgregarEmpleado}
+            selectionModel={empleadosSeleccionados}
+            onRowSelectionModelChange={handleSeleccionEmpleados}
           />
         </Grid>
+
         {/* Botón Guardar */}
         <Grid item xs={12}>
           <Button variant='contained' color='primary' onClick={handleGuardar} sx={{ mt: 2 }}>

From b9fc5890d3cc39946da5d80d4f9803f7bc4a2385 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Tue, 27 May 2025 10:48:36 -0600
Subject: [PATCH 027/160] feature/HIML_RF48_leer-categoria

---
 src/Utilidades/Constantes/rutasAPI.js         |  1 +
 .../Moleculas/SetProductosInfo.jsx            | 32 ++++---
 .../Componentes/Organismos/CategoriaInfo.jsx  | 69 +++++++++++++
 .../Paginas/Categorias/ListaCategorias.jsx    | 96 +++++++++++++++----
 src/hooks/Categorias/useLeerCategoria.js      | 33 +++++++
 5 files changed, 197 insertions(+), 34 deletions(-)
 create mode 100644 src/Vistas/Componentes/Organismos/CategoriaInfo.jsx
 create mode 100644 src/hooks/Categorias/useLeerCategoria.js

diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index 32494ca2..c56930d9 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -33,6 +33,7 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_CATEGORIAS}/consultar-lista-categorias`,
     CREAR: `${BASE_CATEGORIAS}/crear-categoria`,
     ELIMINAR_CATEGORIA: `${BASE_CATEGORIAS}/eliminar`,
+    LEER: `${BASE_CATEGORIAS}/leer`,
   },
   PRODUCTOS: {
     BASE: BASE_PRODUCTOS,
diff --git a/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx b/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
index 7ef461e9..8b146213 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
@@ -1,4 +1,3 @@
-// RF48 - Super Administrador, Cliente Lee Categoria de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/rf48/
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Divider } from '@mui/material';
@@ -7,7 +6,7 @@ import Texto from '@Atomos/Texto';
 /**
  * Componente para mostrar información de un set de productos
  */
-const InfoSetProductos = ({ nombre, descripcion, productos, grupos, mostrarGrupos = true}) => {
+const InfoSetProductos = ({ nombre, descripcion, productos, grupos, mostrarGrupos = true }) => {
   const productosList
     = typeof productos === 'string'
       ? productos.split(',').map((prod) => prod.trim())
@@ -33,14 +32,22 @@ const InfoSetProductos = ({ nombre, descripcion, productos, grupos, mostrarGrupo
           <strong>Productos</strong>
         </Texto>
 
-        {productosList.map((producto, idx) => (
-          <Box key={idx}>
-            <Texto variant='body2' sx={{ py: 1 }}>
-              {producto}
-            </Texto>
-            <Divider />
-          </Box>
-        ))}
+        <Box
+          sx={{
+            maxHeight: '300px',
+            overflowY: 'auto',
+            pr: 1,
+          }}
+        >
+          {productosList.map((producto, idx) => (
+            <Box key={idx}>
+              <Texto variant='body2' sx={{ py: 1 }}>
+                {producto}
+              </Texto>
+              <Divider />
+            </Box>
+          ))}
+        </Box>
       </Box>
 
       {mostrarGrupos && (
@@ -50,7 +57,7 @@ const InfoSetProductos = ({ nombre, descripcion, productos, grupos, mostrarGrupo
           </Texto>
           {gruposList.map((grupo, idx) => (
             <Box key={idx}>
-              <Texto variant='body2' sx={{py: 1 }}>
+              <Texto variant='body2' sx={{ py: 1 }}>
                 {grupo}
               </Texto>
               <Divider />
@@ -77,5 +84,4 @@ InfoSetProductos.defaultProps = {
   grupos: [],
 };
 
-export default InfoSetProductos;
-
+export default InfoSetProductos;
\ No newline at end of file
diff --git a/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx b/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx
new file mode 100644
index 00000000..fe1329c4
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx
@@ -0,0 +1,69 @@
+// RF48 - Leer Categoría de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF48
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Divider } from '@mui/material';
+import Texto from '@Atomos/Texto';
+
+/**
+ * Componente para mostrar la información detallada de una categoría.
+ */
+const CategoriaInfo = ({ descripcion, productos = [] }) => {
+  const productosList = Array.isArray(productos)
+    ? productos
+    : typeof productos === 'string'
+      ? productos.split(',').map((produc) => produc.trim())
+      : [];
+
+  return (
+    <Box>
+      {descripcion && (
+        <Texto variant='body2' sx={{ mb: 4, color: 'text.secondary' }}>
+          {descripcion}
+        </Texto>
+      )}
+
+      <Box sx={{ mb: 4 }}>
+        <Texto variant='h6' gutterBottom sx={{ mb: 2 }}>
+          <strong>Productos</strong>
+        </Texto>
+
+        {productosList.length > 0 ? (
+          <Box
+            sx={{
+              maxHeight: '300px',
+              overflowY: 'auto',
+              pr: 1 
+            }}
+          >
+            {productosList.map((producto, idx) => (
+              <Box key={idx}>
+                <Texto variant='body2' sx={{ py: 1 }}>
+                  {producto}
+                </Texto>
+                <Divider />
+              </Box>
+            ))}
+          </Box>
+        ) : (
+          <Texto variant='body2' sx={{ color: 'text.secondary' }}>
+            Sin productos asociados
+          </Texto>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+CategoriaInfo.propTypes = {
+  nombre: PropTypes.string,
+  descripcion: PropTypes.string,
+  productos: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+};
+
+CategoriaInfo.defaultProps = {
+  nombre: '',
+  descripcion: '',
+  productos: [],
+};
+
+export default CategoriaInfo;
\ No newline at end of file
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 62a8eeca..a24033ec 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -7,6 +7,9 @@ import { useConsultarCategorias } from '@Hooks/Categorias/useConsultarCategorias
 import { Box, useTheme } from '@mui/material';
 import { tokens } from '@SRC/theme';
 import ModalCrearCategoria from '@Organismos/ModalCrearCategoria';
+import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
+import CategoriaInfo from '@Organismos/CategoriaInfo';
+import ModalFlotante from '@Organismos/ModalFlotante';
 
 /**
  * Página para consultar y mostrar la lista de categorías en una tabla.
@@ -25,13 +28,15 @@ const ListaCategorias = () => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
-  // Estado para controlar la visualización del modal crear
+
+  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [, setCategoriaSeleccionada] = useState(null);
+  const [categoriaDetalle, setCategoriaDetalle] = useState(null);
+
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
 
-  // Estado para controlar la visualización del modal eliminar
   const [openModalEliminar, setOpenModalEliminar] = useState(false);
 
-  // Columnas para el DataGrid
   const columns = [
     { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
     { field: 'descripcion', headerName: 'Descripción', flex: 2 },
@@ -42,7 +47,6 @@ const ListaCategorias = () => {
       flex: 1,
     },
   ];
-  // Las filas deben tener un campo `id`, usamos `idCategoria`
   const rows = categorias.map((cat) => ({
     id: cat.idCategoria,
     nombreCategoria: cat.nombreCategoria,
@@ -51,23 +55,36 @@ const ListaCategorias = () => {
     idCliente: cat.idCliente,
   }));
 
-  // Manejador para abrir el modal
   const handleAbrirModalCrear = () => {
     setModalCrearAbierto(true);
   };
 
-  // Manejador para cerrar el modal
   const handleCerrarModalCrear = () => {
     setModalCrearAbierto(false);
   };
 
-  // Manejador para cuando se crea una nueva categoría
   const handleCategoriaCreadaExitosamente = () => {
     handleCerrarModalCrear();
-    // Recarga la lista de categorías
     recargar();
   };
 
+
+const mostrarDetalleCategoria = async (idCategoria) => {
+  try {
+    const detalle = await leerCategoria(idCategoria);
+    setCategoriaDetalle(detalle);
+    setModalDetalleAbierto(true);
+  } catch (err) {
+    setAlerta({
+      tipo: 'error',
+      mensaje: err.message,
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
+  }
+};
+
   const botones = [
     {
       label: 'Añadir',
@@ -75,7 +92,7 @@ const ListaCategorias = () => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: handleAbrirModalCrear, // Ahora abre el modal para crear
+      onClick: handleAbrirModalCrear, 
     },
     {
       label: 'Eliminar',
@@ -108,25 +125,27 @@ const ListaCategorias = () => {
       >
         <Box style={{ height: 400, width: '100%' }}>
           {error && <Alerta tipo='error' mensaje={error} icono cerrable centradoInferior />}
-          <Tabla
-            columns={columns}
-            rows={rows}
-            loading={cargando}
-            disableRowSelectionOnClick={true}
-            checkboxSelection
-            onRowSelectionModelChange={(newSelection) => {
-              setSeleccionados(newSelection);
-            }}
-          />
+        <Tabla
+          columns={columns}
+          rows={rows}
+          loading={cargando}
+          disableRowSelectionOnClick={true}
+          checkboxSelection
+          onRowSelectionModelChange={(newSelection) => {
+            setSeleccionados(newSelection);
+          }}
+          onRowClick={(params) => {
+            setCategoriaSeleccionada(params.row);
+            mostrarDetalleCategoria(params.row.id);
+          }}
+        />
         </Box>
       </ContenedorLista>
-      {/* Modal para crear categoria */}
       <ModalCrearCategoria
         abierto={modalCrearAbierto}
         onCerrar={handleCerrarModalCrear}
         onCreado={handleCategoriaCreadaExitosamente}
       />
-      {/* Modal para eliminar categoria */}
       <ModalEliminarCategoria
         open={openModalEliminar}
         onClose={() => setOpenModalEliminar(false)}
@@ -134,6 +153,41 @@ const ListaCategorias = () => {
         setAlerta={setAlerta}
         refrescarPagina={recargar}
       />
+
+      {modalDetalleAbierto && categoriaDetalle && (
+      <ModalFlotante
+        open={modalDetalleAbierto}
+        onClose={() => {
+          setModalDetalleAbierto(false);
+          setCategoriaDetalle(null);
+        }}
+        onConfirm={() => setModalDetalleAbierto(false)}
+        titulo={categoriaDetalle.nombreCategoria || 'Detalles de la categoría'}
+        tituloVariant='h4'
+        botones={[
+          {
+            label: 'EDITAR',
+            variant: 'contained',
+            color: 'error',
+            backgroundColor: colores.altertex[1],
+            construccion: true,
+          },
+          {
+            label: 'SALIR',
+            variant: 'outlined',
+            color: 'primary',
+            outlineColor: colores.primario[1],
+            onClick: () => setModalDetalleAbierto(false),
+          },
+        ]}
+      >
+        <CategoriaInfo
+          nombre={categoriaDetalle.nombreCategoria}
+          descripcion={categoriaDetalle.descripcion}
+          productos={categoriaDetalle.productos}
+        />
+      </ModalFlotante>
+    )}
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
diff --git a/src/hooks/Categorias/useLeerCategoria.js b/src/hooks/Categorias/useLeerCategoria.js
new file mode 100644
index 00000000..64f8bd1e
--- /dev/null
+++ b/src/hooks/Categorias/useLeerCategoria.js
@@ -0,0 +1,33 @@
+// RF48 - Leer Categoría de Productos
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+/**
+ * Consulta el detalle de una categoría por su ID
+ * @param {number} idCategoria
+ * @returns {Promise<object>}
+ */
+export const leerCategoria = async (idCategoria) => {
+  try {
+    const { data } = await axios.get(
+      `${RUTAS_API.CATEGORIAS.LEER}/${idCategoria}`,
+      {
+        headers: { 'x-api-key': API_KEY },
+        withCredentials: true,
+      }
+    );
+
+    const productos = data.categoria.productos?.map((produc) => produc.nombreComun) || [];
+
+    return {
+      nombreCategoria: data.categoria.nombreCategoria,
+      descripcion: data.categoria.descripcion,
+      productos,
+    };
+  } catch (error) {
+    const mensaje = error.response?.data?.mensaje || 'Error al obtener categoría';
+    throw new Error(mensaje);
+  }
+};
\ No newline at end of file

From c9ad50116b4a21a66e1990e34ae3fb7ae435b454 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Tue, 27 May 2025 11:53:29 -0600
Subject: [PATCH 028/160] Fix(categorias): manejar el error de bd

---
 .../Paginas/Categorias/ListaCategorias.jsx    | 185 ++++++++++--------
 1 file changed, 100 insertions(+), 85 deletions(-)

diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index a24033ec..37f5e544 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -3,39 +3,28 @@ import Tabla from '@Organismos/Tabla';
 import Alerta from '@Moleculas/Alerta';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import ModalEliminarCategoria from '@Organismos/ModalEliminarCategoria';
-import { useConsultarCategorias } from '@Hooks/Categorias/useConsultarCategorias';
-import { Box, useTheme } from '@mui/material';
-import { tokens } from '@SRC/theme';
 import ModalCrearCategoria from '@Organismos/ModalCrearCategoria';
-import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
 import CategoriaInfo from '@Organismos/CategoriaInfo';
 import ModalFlotante from '@Organismos/ModalFlotante';
-
-/**
- * Página para consultar y mostrar la lista de categorías en una tabla.
- *
- * Muestra los resultados en un CustomDataGrid, incluyendo
- * nombre, descripción y número de productos de cada categoría.
- *
- * @see [RF[47] Consulta lista de categorías](https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF47)
- */
+import { useConsultarCategorias } from '@Hooks/Categorias/useConsultarCategorias';
+import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
+import { Box, useTheme } from '@mui/material';
+import Texto from '@Atomos/Texto';
+import { tokens } from '@SRC/theme';
 
 const ListaCategorias = () => {
   const { categorias, cargando, error, recargar } = useConsultarCategorias();
   const [seleccionados, setSeleccionados] = useState(new Set());
   const [alerta, setAlerta] = useState(null);
   const [idsCategoria, setIdsCategoria] = useState([]);
-  const theme = useTheme();
-  const colores = tokens(theme.palette.mode);
-
-
+  const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
+  const [openModalEliminar, setOpenModalEliminar] = useState(false);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
-  const [, setCategoriaSeleccionada] = useState(null);
   const [categoriaDetalle, setCategoriaDetalle] = useState(null);
+  const [errorDetalle, setErrorDetalle] = useState(false);
 
-  const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
-
-  const [openModalEliminar, setOpenModalEliminar] = useState(false);
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
 
   const columns = [
     { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
@@ -47,6 +36,7 @@ const ListaCategorias = () => {
       flex: 1,
     },
   ];
+
   const rows = categorias.map((cat) => ({
     id: cat.idCategoria,
     nombreCategoria: cat.nombreCategoria,
@@ -68,22 +58,23 @@ const ListaCategorias = () => {
     recargar();
   };
 
-
-const mostrarDetalleCategoria = async (idCategoria) => {
-  try {
-    const detalle = await leerCategoria(idCategoria);
-    setCategoriaDetalle(detalle);
+  const mostrarDetalleCategoria = async (idCategoria) => {
     setModalDetalleAbierto(true);
-  } catch (err) {
-    setAlerta({
-      tipo: 'error',
-      mensaje: err.message,
-      icono: true,
-      cerrable: true,
-      centradoInferior: true,
-    });
-  }
-};
+    setCategoriaDetalle(null);
+    setErrorDetalle(false);
+
+    try {
+      const detalle = await leerCategoria(idCategoria);
+      setCategoriaDetalle(detalle);
+    } catch (err) {
+      setErrorDetalle(true);
+      setCategoriaDetalle({
+        nombreCategoria: 'Sin datos',
+        descripcion: '',
+        productos: [],
+      });
+    }
+  };
 
   const botones = [
     {
@@ -92,7 +83,7 @@ const mostrarDetalleCategoria = async (idCategoria) => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: handleAbrirModalCrear, 
+      onClick: handleAbrirModalCrear,
     },
     {
       label: 'Eliminar',
@@ -125,27 +116,28 @@ const mostrarDetalleCategoria = async (idCategoria) => {
       >
         <Box style={{ height: 400, width: '100%' }}>
           {error && <Alerta tipo='error' mensaje={error} icono cerrable centradoInferior />}
-        <Tabla
-          columns={columns}
-          rows={rows}
-          loading={cargando}
-          disableRowSelectionOnClick={true}
-          checkboxSelection
-          onRowSelectionModelChange={(newSelection) => {
-            setSeleccionados(newSelection);
-          }}
-          onRowClick={(params) => {
-            setCategoriaSeleccionada(params.row);
-            mostrarDetalleCategoria(params.row.id);
-          }}
-        />
+          <Tabla
+            columns={columns}
+            rows={rows}
+            loading={cargando}
+            disableRowSelectionOnClick={true}
+            checkboxSelection
+            onRowSelectionModelChange={(newSelection) => {
+              setSeleccionados(newSelection);
+            }}
+            onRowClick={(params) => {
+              mostrarDetalleCategoria(params.row.id);
+            }}
+          />
         </Box>
       </ContenedorLista>
+
       <ModalCrearCategoria
         abierto={modalCrearAbierto}
         onCerrar={handleCerrarModalCrear}
         onCreado={handleCategoriaCreadaExitosamente}
       />
+
       <ModalEliminarCategoria
         open={openModalEliminar}
         onClose={() => setOpenModalEliminar(false)}
@@ -155,39 +147,62 @@ const mostrarDetalleCategoria = async (idCategoria) => {
       />
 
       {modalDetalleAbierto && categoriaDetalle && (
-      <ModalFlotante
-        open={modalDetalleAbierto}
-        onClose={() => {
-          setModalDetalleAbierto(false);
-          setCategoriaDetalle(null);
-        }}
-        onConfirm={() => setModalDetalleAbierto(false)}
-        titulo={categoriaDetalle.nombreCategoria || 'Detalles de la categoría'}
-        tituloVariant='h4'
-        botones={[
-          {
-            label: 'EDITAR',
-            variant: 'contained',
-            color: 'error',
-            backgroundColor: colores.altertex[1],
-            construccion: true,
-          },
-          {
-            label: 'SALIR',
-            variant: 'outlined',
-            color: 'primary',
-            outlineColor: colores.primario[1],
-            onClick: () => setModalDetalleAbierto(false),
-          },
-        ]}
-      >
-        <CategoriaInfo
-          nombre={categoriaDetalle.nombreCategoria}
-          descripcion={categoriaDetalle.descripcion}
-          productos={categoriaDetalle.productos}
-        />
-      </ModalFlotante>
-    )}
+        <ModalFlotante
+          open={modalDetalleAbierto}
+          onClose={() => {
+            setModalDetalleAbierto(false);
+            setCategoriaDetalle(null);
+            setErrorDetalle(false);
+          }}
+          onConfirm={() => setModalDetalleAbierto(false)}
+          titulo={
+            errorDetalle
+              ? 'Error al cargar categoría'
+              : categoriaDetalle.nombreCategoria || 'Detalles de la categoría'
+          }
+          tituloVariant='h4'
+          botones={
+            errorDetalle
+              ? [
+                  {
+                    label: 'SALIR',
+                    variant: 'outlined',
+                    color: 'primary',
+                    outlineColor: colores.primario[1],
+                    onClick: () => setModalDetalleAbierto(false),
+                  },
+                ]
+              : [
+                  {
+                    label: 'EDITAR',
+                    variant: 'contained',
+                    color: 'error',
+                    backgroundColor: colores.altertex[1],
+                    construccion: true,
+                  },
+                  {
+                    label: 'SALIR',
+                    variant: 'outlined',
+                    color: 'primary',
+                    outlineColor: colores.primario[1],
+                    onClick: () => setModalDetalleAbierto(false),
+                  },
+                ]
+          }
+        >
+          {errorDetalle ? (
+            <Texto variant='body2' sx={{ color: 'text.secondary' }}>
+              No se pudieron obtener los datos de esta categoría.
+            </Texto>
+          ) : (
+            <CategoriaInfo
+              descripcion={categoriaDetalle.descripcion}
+              productos={categoriaDetalle.productos}
+            />
+          )}
+        </ModalFlotante>
+      )}
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
@@ -203,4 +218,4 @@ const mostrarDetalleCategoria = async (idCategoria) => {
   );
 };
 
-export default ListaCategorias;
+export default ListaCategorias;
\ No newline at end of file

From 0e367e8d9681f2531f4a3439ea4c26cea0d2979c Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Tue, 27 May 2025 12:14:04 -0600
Subject: [PATCH 029/160] =?UTF-8?q?fix(categor=C3=ADa):=20manejar=20mejor?=
 =?UTF-8?q?=20los=20errores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Paginas/Categorias/ListaCategorias.jsx    | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 37f5e544..bbc50f58 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -22,6 +22,7 @@ const ListaCategorias = () => {
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
   const [categoriaDetalle, setCategoriaDetalle] = useState(null);
   const [errorDetalle, setErrorDetalle] = useState(false);
+  const [cargandoDetalle, setCargandoDetalle] = useState(false);
 
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
@@ -59,7 +60,7 @@ const ListaCategorias = () => {
   };
 
   const mostrarDetalleCategoria = async (idCategoria) => {
-    setModalDetalleAbierto(true);
+    setCargandoDetalle(true);
     setCategoriaDetalle(null);
     setErrorDetalle(false);
 
@@ -69,10 +70,20 @@ const ListaCategorias = () => {
     } catch (err) {
       setErrorDetalle(true);
       setCategoriaDetalle({
-        nombreCategoria: 'Sin datos',
+        nombreCategoria: '',
         descripcion: '',
         productos: [],
       });
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Error al obtener los datos de la categoría.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    } finally {
+      setCargandoDetalle(false);
+      setModalDetalleAbierto(true);
     }
   };
 
@@ -146,7 +157,7 @@ const ListaCategorias = () => {
         refrescarPagina={recargar}
       />
 
-      {modalDetalleAbierto && categoriaDetalle && (
+      {modalDetalleAbierto && !cargandoDetalle && (
         <ModalFlotante
           open={modalDetalleAbierto}
           onClose={() => {
@@ -157,8 +168,8 @@ const ListaCategorias = () => {
           onConfirm={() => setModalDetalleAbierto(false)}
           titulo={
             errorDetalle
-              ? 'Error al cargar categoría'
-              : categoriaDetalle.nombreCategoria || 'Detalles de la categoría'
+              ? 'Cargando...'
+              : categoriaDetalle?.nombreCategoria || 'Detalles de la categoría'
           }
           tituloVariant='h4'
           botones={
@@ -190,14 +201,10 @@ const ListaCategorias = () => {
                 ]
           }
         >
-          {errorDetalle ? (
-            <Texto variant='body2' sx={{ color: 'text.secondary' }}>
-              No se pudieron obtener los datos de esta categoría.
-            </Texto>
-          ) : (
+          {errorDetalle ? null : (
             <CategoriaInfo
-              descripcion={categoriaDetalle.descripcion}
-              productos={categoriaDetalle.productos}
+              descripcion={categoriaDetalle?.descripcion}
+              productos={categoriaDetalle?.productos}
             />
           )}
         </ModalFlotante>

From 7ede19bebafc947d6a4b51ef5013099e66b2888a Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Tue, 27 May 2025 12:33:13 -0600
Subject: [PATCH 030/160] =?UTF-8?q?Fix(categor=C3=ADas):=20cambiar=20const?=
 =?UTF-8?q?=20a=20espa=C3=B1ol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Componentes/Organismos/CategoriaInfo.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx b/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx
index fe1329c4..1824feea 100644
--- a/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx
+++ b/src/Vistas/Componentes/Organismos/CategoriaInfo.jsx
@@ -8,7 +8,7 @@ import Texto from '@Atomos/Texto';
  * Componente para mostrar la información detallada de una categoría.
  */
 const CategoriaInfo = ({ descripcion, productos = [] }) => {
-  const productosList = Array.isArray(productos)
+  const productosLista = Array.isArray(productos)
     ? productos
     : typeof productos === 'string'
       ? productos.split(',').map((produc) => produc.trim())
@@ -27,7 +27,7 @@ const CategoriaInfo = ({ descripcion, productos = [] }) => {
           <strong>Productos</strong>
         </Texto>
 
-        {productosList.length > 0 ? (
+        {productosLista.length > 0 ? (
           <Box
             sx={{
               maxHeight: '300px',
@@ -35,7 +35,7 @@ const CategoriaInfo = ({ descripcion, productos = [] }) => {
               pr: 1 
             }}
           >
-            {productosList.map((producto, idx) => (
+            {productosLista.map((producto, idx) => (
               <Box key={idx}>
                 <Texto variant='body2' sx={{ py: 1 }}>
                   {producto}

From 5c06fbeeccf7933de100435fae14726ce6b3e1e5 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Tue, 27 May 2025 12:35:49 -0600
Subject: [PATCH 031/160] =?UTF-8?q?Fix(setproductos):=20cambiar=20const=20?=
 =?UTF-8?q?a=20espa=C3=B1ol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx b/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
index 8b146213..0bec348b 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosInfo.jsx
@@ -7,7 +7,7 @@ import Texto from '@Atomos/Texto';
  * Componente para mostrar información de un set de productos
  */
 const InfoSetProductos = ({ nombre, descripcion, productos, grupos, mostrarGrupos = true }) => {
-  const productosList
+  const productosLista
     = typeof productos === 'string'
       ? productos.split(',').map((prod) => prod.trim())
       : productos || [];
@@ -39,7 +39,7 @@ const InfoSetProductos = ({ nombre, descripcion, productos, grupos, mostrarGrupo
             pr: 1,
           }}
         >
-          {productosList.map((producto, idx) => (
+          {productosLista.map((producto, idx) => (
             <Box key={idx}>
               <Texto variant='body2' sx={{ py: 1 }}>
                 {producto}

From 0ff29c2a056c5ff3266e991f421fd446fc079e6e Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Tue, 27 May 2025 15:57:05 -0600
Subject: [PATCH 032/160] Feat: recibir ids de empleados, y sets de productos

---
 .../Modelos/Empleados/GrupoEmpleadosLectura.js       | 12 +++++++++++-
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx         |  7 +++----
 src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx |  1 -
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js b/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
index 95151c7d..efc00983 100644
--- a/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
+++ b/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
@@ -4,11 +4,21 @@
  */
 
 export class GrupoEmpleadosLectura {
-  constructor({ idGrupo, nombre, descripcion, setsProductos = [], empleados = [] }) {
+  constructor({
+    idGrupo,
+    nombre,
+    descripcion,
+    setsProductos = [],
+    idsSetProductos = [],
+    empleados = [],
+    idsEmpleados = [],
+  }) {
     this.idGrupo = idGrupo;
     this.nombre = nombre;
     this.descripcion = descripcion;
     this.setsProductos = setsProductos;
+    this.idsSetProductos = idsSetProductos;
     this.empleados = empleados;
+    this.idsEmpleados = idsEmpleados;
   }
 }
diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 8bced0a0..09e94fd1 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -23,9 +23,8 @@ const InfoGrupoEmpleadosEditable = ({
   const [nombre, setNombre] = useState(nombreInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
   const [setsProductos, setSetsProductos] = useState(setsProductosInicial || []);
-  const [empleados, setEmpleados] = useState(empleadosInicial || []);
+  const [empleados, setEmpleados] = useState(empleadosInicial);
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
-
   // Estados para manejar las selecciones en las tablas
   const [productosSeleccionados, setProductosSeleccionados] = useState([]);
   const [empleadosSeleccionados, setEmpleadosSeleccionados] = useState([]);
@@ -57,7 +56,6 @@ const InfoGrupoEmpleadosEditable = ({
   const handleSeleccionProductos = (selectionData) => {
     console.log('Selecciones productos recibidas:', selectionData);
 
-    // Extraer IDs del Set y convertir a array
     let seleccionesArray = [];
     if (selectionData && selectionData.ids && selectionData.ids instanceof Set) {
       seleccionesArray = Array.from(selectionData.ids);
@@ -102,7 +100,8 @@ const InfoGrupoEmpleadosEditable = ({
     correo: empleado.correo,
     areaTrabajo: empleado.area,
   }));
-
+  console.log('Produtos seleccionados:', productosSeleccionados);
+  console.log('Empleados seleccionados:', empleadosSeleccionados);
   const handleGuardar = () => {
     if (!nombre || !descripcion || setsProductos.length === 0 || empleados.length === 0) {
       setMostrarAlerta(true);
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 92728731..112a0ec1 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -33,7 +33,6 @@ const ListaGrupoEmpleados = () => {
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
   const [idGrupoSeleccionado, setIdGrupoSeleccionado] = useState(null);
   const [abrirModalEditar, setAbrirModalEditar] = useState(false);
-
   const {
     grupoEmpleados,
     cargando: cargandoDetalle,

From 51b25fcad03a0bba7fcc8f0aa731f449c19fab0e Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 27 May 2025 16:40:26 -0600
Subject: [PATCH 033/160] feat:agregar funcionalidad para crear sets de
 productos

---
 .../SetsProductos/CrearSetsProductos.js       |  13 ++
 .../RepositorioCrearSetsProducto.js           |  24 +++
 src/Utilidades/Constantes/rutasAPI.js         |   1 +
 .../Formularios/FormaCrearSetsProducto.jsx    | 148 ++++++++++++++++++
 .../Organismos/ModalCrearSetsProductos.jsx    | 108 +++++++++++++
 .../SetsProductos/ListaSetsProductos.jsx      |  21 ++-
 .../SetsProductos/useCrearSetsProducto.js     |  74 +++++++++
 7 files changed, 387 insertions(+), 2 deletions(-)
 create mode 100644 src/Dominio/Modelos/SetsProductos/CrearSetsProductos.js
 create mode 100644 src/Dominio/Repositorios/SetsProductos/RepositorioCrearSetsProducto.js
 create mode 100644 src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
 create mode 100644 src/hooks/SetsProductos/useCrearSetsProducto.js

diff --git a/src/Dominio/Modelos/SetsProductos/CrearSetsProductos.js b/src/Dominio/Modelos/SetsProductos/CrearSetsProductos.js
new file mode 100644
index 00000000..db3bd0f0
--- /dev/null
+++ b/src/Dominio/Modelos/SetsProductos/CrearSetsProductos.js
@@ -0,0 +1,13 @@
+/**
+ * Modelo para crear un set de productos
+ * Representa los datos necesarios para crear un nuevo set de productos.
+ */
+export class CrearSetsProducto {
+  constructor({ nombre, nombreVisible, descripcion, productos }) {
+    this.nombre = nombre;
+    this.nombreVisible = nombreVisible;
+    this.descripcion = descripcion;
+    this.activo = 1;
+    this.idProductos = productos.map(producto => producto.idProducto);
+  }
+}
\ No newline at end of file
diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioCrearSetsProducto.js b/src/Dominio/Repositorios/SetsProductos/RepositorioCrearSetsProducto.js
new file mode 100644
index 00000000..b1fb8477
--- /dev/null
+++ b/src/Dominio/Repositorios/SetsProductos/RepositorioCrearSetsProducto.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioCrearSetsProducto {
+  static async crearSetsProducto(nuevoSetsProductos) {
+    try{
+      const respuesta = await axios.post(
+        RUTAS_API.SETS_PRODUCTOS.CREAR_SETS_PRODUCTOS,
+        {nuevoSetsProductos},
+        {
+          headers: {
+            'x-api-key': API_KEY
+          },
+          withCredentials: true
+        }
+      );
+      return respuesta
+    }catch(error){
+      throw new Error(error.response?.data?.mensaje || 'Error de conexion, intentalo de nuevo mas tarde.')
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..74b1e475 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -49,6 +49,7 @@ export const RUTAS_API = {
     BASE: BASE_SETS_PRODUCTOS,
     CONSULTAR_LISTA: `${BASE_SETS_PRODUCTOS}/consultar-lista`,
     ELIMINAR_SET_PRODUCTOS: `${BASE_SETS_PRODUCTOS}/eliminar`,
+    CREAR_SETS_PRODUCTOS: `${BASE_SETS_PRODUCTOS}/crear`
   },
   CLIENTES: {
     BASE: BASE_CLIENTES,
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
new file mode 100644
index 00000000..63adfabd
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
@@ -0,0 +1,148 @@
+import Alerta from '@Moleculas/Alerta';
+import CampoTexto from '@Atomos/CampoTexto';
+import { useState, useEffect } from 'react';
+import obtenerProductos from '@Servicios/obtenerProductos';
+import ProductosModal from '@Organismos/ProductosModal';
+import { useAuth } from '@Hooks/AuthProvider';
+
+const columns = [
+  { field: 'id', headerName: 'Id', width: 100 },
+  { field: 'nombreProducto', headerName: 'Nombre', width: 220 },
+  { field: 'tipo', headerName: 'Tipo', width: 100 },
+];
+
+const LIMITE_NOMBRE = 50;
+const LIMITE_NOMBRE_VISIBLE = 50;
+const LIMITE_DESCRIPCION = 150;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+
+const FormaCrearSetsProducto = ({
+                                  nombreSetsProducto,
+                                  setNombreSetsProducto,
+                                  nombreVisible,
+                                  setNombreVisible,
+                                  descripcionSetsProducto,
+                                  setDescripcionSetsProducto,
+                                  productos,
+                                  setProductos,
+                                  mostrarAlerta,
+                                  setMostrarAlerta,
+                                }) => {
+  const [rows, setRows] = useState([]);
+  const { usuario } = useAuth();
+  const clienteSeleccionado = usuario.clienteSeleccionado;
+
+  useEffect(() => {
+    const obtenerDatosProductos = async (clienteSeleccionado) => {
+      const productos = await obtenerProductos(clienteSeleccionado);
+      setRows(productos);
+    };
+
+    obtenerDatosProductos(clienteSeleccionado);
+  }, [clienteSeleccionado]);
+
+  const handleClickFila = (evento) => {
+    const productoSeleccionado = evento.row;
+
+    const yaExiste = productos.some((producto) => producto.id === productoSeleccionado.id);
+    if (!yaExiste) {
+      setProductos((prev) => [...prev, productoSeleccionado]);
+    }
+  };
+
+  const handleFilaSeleccion = (itemSeleccion) => {
+    const ids = Array.isArray(itemSeleccion) ? itemSeleccion : Array.from(itemSeleccion?.ids || []);
+
+    const nuevasFilas = ids
+      .map((id) => rows.find((row) => row.id === id))
+      .filter((fila) => fila && !productos.some((producto) => producto.id === fila.id));
+
+    if (nuevasFilas.length > 0) {
+      setProductos((prev) => [...prev, ...nuevasFilas]);
+    }
+  };
+
+  return (
+    <>
+      <CampoTexto
+        label={'Nombre'}
+        fullWidth
+        type={'text'}
+        value={nombreSetsProducto}
+        onChange={(evento) => {
+          if (evento.target.value.trim() !== '') {
+            setNombreSetsProducto(evento.target.value.slice(0, LIMITE_NOMBRE));
+          } else if (nombreSetsProducto !== '') {
+            setNombreSetsProducto('');
+          }
+        }}
+        inputProps={{ maxLength: LIMITE_NOMBRE }}
+        helperText={`${nombreSetsProducto.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`}
+        required
+        sx={{ mb: 2 }}
+      />
+
+      <CampoTexto
+        label={'Nombre Visible'}
+        fullWidth
+        type={'text'}
+        value={nombreVisible}
+        onChange={(evento) => {
+          if (evento.target.value.trim() !== '') {
+            setNombreVisible(evento.target.value.slice(0, LIMITE_NOMBRE_VISIBLE));
+          } else if (nombreVisible !== '') {
+            setNombreVisible('');
+          }
+        }}
+        inputProps={{ maxLength: LIMITE_NOMBRE_VISIBLE }}
+        helperText={`${nombreVisible.length}/${LIMITE_NOMBRE_VISIBLE} - ${MENSAJE_LIMITE}`}
+        required
+        sx={{ mb: 2 }}
+      />
+
+      <ProductosModal
+        elevacion={1}
+        sx={{ width: '100%', height: '350px' }}
+        columnas={columns}
+        filas={rows}
+        paginacion={4}
+        checkBox={true}
+        onRowClick={handleClickFila}
+        onRowSeleccion={(ids) => handleFilaSeleccion(ids)}
+      />
+
+      <CampoTexto
+        label={'Descripción'}
+        fullWidth
+        type={'text'}
+        value={descripcionSetsProducto}
+        onChange={(evento) => {
+          if (evento.target.value.trim() !== '') {
+            setDescripcionSetsProducto(evento.target.value.slice(0, LIMITE_DESCRIPCION));
+          } else if (descripcionSetsProducto !== '') {
+            setDescripcionSetsProducto('');
+          }
+        }}
+        inputProps={{ maxLength: LIMITE_DESCRIPCION }}
+        helperText={`${descripcionSetsProducto.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`}
+        required
+        sx={{ mt: 2 }}
+        multiline
+        rows={3}
+      />
+
+      {mostrarAlerta && (
+        <Alerta
+          tipo='warning'
+          mensaje={'Ingresa el nombre, nombre visible y selecciona al menos un producto.'}
+          cerrable
+          duracion={3000}
+          onClose={() => setMostrarAlerta(false)}
+          sx={{ mb: 2, mt: 2 }}
+        />
+      )}
+    </>
+  );
+};
+
+export default FormaCrearSetsProducto;
\ No newline at end of file
diff --git a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
new file mode 100644
index 00000000..fde02fbd
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
@@ -0,0 +1,108 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import ModalFlotante from '@Organismos/ModalFlotante.jsx';
+import FormaCrearSetsProducto from '@Organismos/Formularios/FormaCrearSetsProducto.jsx';
+import useCrearSetsProducto from '@Hooks/SetsProductos/useCrearSetsProducto';
+import Alerta from '@Moleculas/Alerta';
+
+const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
+  const [nombreSetsProducto, setNombreSetsProducto] = useState('');
+  const [nombreVisible, setNombreVisible] = useState('');
+  const [descripcionSetsProducto, setDescripcionSetsProducto] = useState('');
+  const [productos, setProductos] = useState([]);
+  const [mostrarAlerta, setMostrarAlerta] = useState(false);
+
+  const tieneReseteo = useRef(false);
+
+  const { crearSetsProducto, cargando, exito, error, mensaje, setError, resetEstado }
+    = useCrearSetsProducto();
+
+  useEffect(() => {
+    if (!abierto && !tieneReseteo.current) {
+      tieneReseteo.current = true;
+      resetEstado();
+      setTimeout(() => {
+        setNombreSetsProducto('');
+        setNombreVisible('');
+        setDescripcionSetsProducto('');
+        setProductos([]);
+        setMostrarAlerta(false);
+      }, 0);
+    } else if (abierto) {
+      tieneReseteo.current = false;
+    }
+  }, [abierto, resetEstado]);
+
+  useEffect(() => {
+    let timeoutId;
+    if (exito) {
+      timeoutId = setTimeout(() => {
+        if (onCreado) {
+          onCreado();
+        } else {
+          onCerrar();
+        }
+      }, 2000);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [exito, onCreado, onCerrar]);
+
+  const handleCerrar = useCallback(() => {
+    onCerrar();
+  }, [onCerrar]);
+
+  const handleConfirmar = async () => {
+    if (!nombreSetsProducto.trim() || !nombreVisible.trim() || productos.length === 0) {
+      setMostrarAlerta(true);
+      return;
+    }
+
+    await crearSetsProducto({
+      nombre: nombreSetsProducto.trim(),
+      nombreVisible: nombreVisible.trim(),
+      descripcion: descripcionSetsProducto.trim(),
+      productos,
+    });
+  };
+
+  return (
+    <ModalFlotante
+      open={abierto}
+      onClose={handleCerrar}
+      onConfirm={handleConfirmar}
+      titulo='Crear sets de productos'
+      cancelLabel='Cancelar'
+      confirmLabel={cargando ? 'Creando...' : 'Crear'}
+      disabledConfirm={cargando}
+    >
+      <FormaCrearSetsProducto
+        nombreSetsProducto={nombreSetsProducto}
+        setNombreSetsProducto={setNombreSetsProducto}
+        nombreVisible={nombreVisible}
+        setNombreVisible={setNombreVisible}
+        descripcionSetsProducto={descripcionSetsProducto}
+        setDescripcionSetsProducto={setDescripcionSetsProducto}
+        productos={productos}
+        setProductos={setProductos}
+        mostrarAlerta={mostrarAlerta}
+        setMostrarAlerta={setMostrarAlerta}
+      />
+      {(exito || error) && (
+        <Alerta
+          tipo={exito ? 'success' : 'error'}
+          mensaje={mensaje}
+          duracion={exito ? 3000 : 3000}
+          sx={{ margin: 3 }}
+          cerrable
+          onClose={error ? () => setError(false) : undefined}
+        />
+      )}
+    </ModalFlotante>
+  );
+};
+
+export default ModalCrearSetsProductos;
\ No newline at end of file
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index 45796e78..fc77623c 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -16,6 +16,7 @@ import { useConsultarSetsProductos } from '@Hooks/SetsProductos/useConsultarSets
 import { tokens } from '@SRC/theme';
 import { PERMISOS } from '@Utilidades/Constantes/permisos';
 import { useAuth } from '@Hooks/AuthProvider';
+import ModalCrearSetsProductos from '@Organismos/ModalCrearSetsProductos.jsx';
 
 const ListaSetsProductos = () => {
   const { setsDeProductos, cargando, error, recargar } = useConsultarSetsProductos();
@@ -29,6 +30,7 @@ const ListaSetsProductos = () => {
   const [abrirEliminar, setAbrirPopUpEliminar] = useState(false);
   const [setSeleccionado, setSetSeleccionado] = useState(null);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const { eliminar } = useEliminarSetProductos();
   const { usuario } = useAuth();
 
@@ -61,6 +63,16 @@ const ListaSetsProductos = () => {
     }
   };
 
+
+  const handleCerrarModalCrear = () => {
+    setModalCrearAbierto(false)
+  }
+
+  const handleSetProductoCreadoExitosamente = () => {
+    handleCerrarModalCrear()
+    recargar()
+  }
+
   const columns = [
     {
       field: 'nombre',
@@ -119,8 +131,7 @@ const ListaSetsProductos = () => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: () => console.log('Añadir'),
-      construccion: true,
+      onClick: () => setModalCrearAbierto(true),
     },
     {
       label: 'Eliminar',
@@ -177,6 +188,12 @@ const ListaSetsProductos = () => {
         </Box>
       </ContenedorLista>
 
+      <ModalCrearSetsProductos
+        abierto={modalCrearAbierto}
+        onCerrar={handleCerrarModalCrear}
+        onCreado={handleSetProductoCreadoExitosamente}
+      />
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
diff --git a/src/hooks/SetsProductos/useCrearSetsProducto.js b/src/hooks/SetsProductos/useCrearSetsProducto.js
new file mode 100644
index 00000000..02f0439a
--- /dev/null
+++ b/src/hooks/SetsProductos/useCrearSetsProducto.js
@@ -0,0 +1,74 @@
+import { useState, useCallback } from 'react';
+import { RepositorioCrearSetsProducto } from '@Repositorios/SetsProductos/RepositorioCrearSetsProducto.js';
+import { CrearSetsProducto } from '@Modelos/SetsProductos/CrearSetsProductos';
+
+const useCrearSetsProducto = () => {
+  const [cargando, setCargando] = useState(false);
+  const [exito, setExito] = useState(false);
+  const [error, setError] = useState(false);
+  const [mensaje, setMensaje] = useState('');
+
+  const crearSetsProducto = useCallback(async ({ nombre, nombreVisible, descripcion, productos }) => {
+    setCargando(true);
+    setExito(false);
+    setError(false);
+    setMensaje('');
+
+    try {
+      const productosTransformados = productos.map((producto) => ({
+        idProducto: producto.id,
+      }));
+
+      const nuevoSetsProducto = new CrearSetsProducto({
+        nombre,
+        nombreVisible,
+        descripcion,
+        productos: productosTransformados,
+      });
+
+
+      const resultado = await RepositorioCrearSetsProducto.crearSetsProducto(nuevoSetsProducto);
+
+      if (resultado.data.mensaje) {
+        setExito(true);
+        setMensaje(resultado.data.mensaje);
+        return resultado;
+      } else {
+        throw new Error(resultado.data?.mensaje || 'Error desconocido');
+      }
+    } catch (err) {
+      setExito(false);
+      setError(true);
+
+      if (err.response?.data?.error) {
+        setMensaje(err.response.data.error);
+      } else if (err instanceof Error) {
+        setMensaje(err.message);
+      } else {
+        setMensaje('Ocurrió un error al crear el set de productos');
+      }
+
+      return false;
+    } finally {
+      setCargando(false);
+    }
+  }, []);
+
+  const resetEstado = () => {
+    setExito(false);
+    setError(false);
+    setMensaje('');
+  };
+
+  return {
+    crearSetsProducto,
+    cargando,
+    exito,
+    error,
+    mensaje,
+    setError,
+    resetEstado,
+  };
+};
+
+export default useCrearSetsProducto;
\ No newline at end of file

From b782962400401bfb22a523d3337f500c67a01c0e Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 27 May 2025 18:03:03 -0600
Subject: [PATCH 034/160] fix: arreglar alertas

---
 .../Organismos/Formularios/FormaCrearSetsProducto.jsx | 11 -----------
 .../Organismos/ModalCrearSetsProductos.jsx            |  6 ++++--
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
index 63adfabd..d19c309a 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
@@ -130,17 +130,6 @@ const FormaCrearSetsProducto = ({
         multiline
         rows={3}
       />
-
-      {mostrarAlerta && (
-        <Alerta
-          tipo='warning'
-          mensaje={'Ingresa el nombre, nombre visible y selecciona al menos un producto.'}
-          cerrable
-          duracion={3000}
-          onClose={() => setMostrarAlerta(false)}
-          sx={{ mb: 2, mt: 2 }}
-        />
-      )}
     </>
   );
 };
diff --git a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
index fde02fbd..050e93cb 100644
--- a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
@@ -69,7 +69,7 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
     });
   };
 
-  return (
+  return (<>
     <ModalFlotante
       open={abierto}
       onClose={handleCerrar}
@@ -91,6 +91,7 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
         mostrarAlerta={mostrarAlerta}
         setMostrarAlerta={setMostrarAlerta}
       />
+    </ModalFlotante>
       {(exito || error) && (
         <Alerta
           tipo={exito ? 'success' : 'error'}
@@ -99,9 +100,10 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
           sx={{ margin: 3 }}
           cerrable
           onClose={error ? () => setError(false) : undefined}
+          centradoInferior
         />
       )}
-    </ModalFlotante>
+    </>
   );
 };
 

From 6074ffeead88e8389a071656ee6b44ce7185fd9a Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 27 May 2025 18:06:02 -0600
Subject: [PATCH 035/160] fix: arrglar comentarios de hiram

---
 src/Dominio/Modelos/Productos/InfoProducto.js                 | 2 +-
 src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js | 2 +-
 src/Vistas/Paginas/Productos/ListaProductos.jsx               | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Dominio/Modelos/Productos/InfoProducto.js b/src/Dominio/Modelos/Productos/InfoProducto.js
index c9252873..b4ff8db1 100644
--- a/src/Dominio/Modelos/Productos/InfoProducto.js
+++ b/src/Dominio/Modelos/Productos/InfoProducto.js
@@ -1,6 +1,6 @@
 /*
  * Modelo de información de un producto
- * RF[??] Lee información del producto - Documentación pendiente
+ * RF[28] Lee información del producto - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF28
  */
 
 export class InfoProducto {
diff --git a/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js b/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js
index 7c7aa68c..708c2fce 100644
--- a/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js
+++ b/src/Dominio/Repositorios/Productos/RepositorioLeerProducto.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { RUTAS_API } from '@Constantes/rutasAPI.js';
-import { InfoProducto } from '@Modelos/Productos/InfoProducto.js'; // Asegúrate de importar el modelo
+import { InfoProducto } from '@Modelos/Productos/InfoProducto.js';
 
 const API_KEY = import.meta.env.VITE_API_KEY;
 
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 56d46452..5c804d69 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -1,3 +1,6 @@
+//RF[26] Crea Producto - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF26]
+//RF[27] Consulta Lista de Productos - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF27]
+//RF[30] Elimina Producto - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF30]
 import { Box, useTheme, Chip } from '@mui/material';
 import { useState, useCallback, useEffect } from 'react';
 import Tabla from '@Organismos/Tabla';

From adce7d40d7a6aa976e32593951e204872049e1b3 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Tue, 27 May 2025 22:13:46 -0600
Subject: [PATCH 036/160] feature: Agregar logica de importacion de productos

---
 public/plantilla_importar_productos.csv       |   1 +
 .../Productos/RepositorioImportarProductos.js |  39 ++++
 src/Utilidades/Constantes/rutasAPI.js         |   1 +
 .../ContenedorImportarProductos.jsx           | 175 ++++++++++++++++++
 .../Organismos/ModalImportarProductos.jsx     |  18 +-
 .../Paginas/Productos/ListaProductos.jsx      |  11 +-
 src/hooks/Productos/useImportarProductos.js   |  49 +++++
 7 files changed, 277 insertions(+), 17 deletions(-)
 create mode 100644 public/plantilla_importar_productos.csv
 create mode 100644 src/Dominio/Repositorios/Productos/RepositorioImportarProductos.js
 create mode 100644 src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
 create mode 100644 src/hooks/Productos/useImportarProductos.js

diff --git a/public/plantilla_importar_productos.csv b/public/plantilla_importar_productos.csv
new file mode 100644
index 00000000..33c5db34
--- /dev/null
+++ b/public/plantilla_importar_productos.csv
@@ -0,0 +1 @@
+idProducto,idProveedor,nombreProducto,nombreComercial,descripcionProducto,tipoProducto,marca,modelo,costo,precioVenta,precioCliente,precioPuntos,impuesto,descuento,estado,envio,nombreVariante,descripcionVariante,valorOpcion,SKUautomatico,SKUcomercial,cantidad,costoAdicional,descuentoOpcion,estadoOpcion
diff --git a/src/Dominio/Repositorios/Productos/RepositorioImportarProductos.js b/src/Dominio/Repositorios/Productos/RepositorioImportarProductos.js
new file mode 100644
index 00000000..bfd48d05
--- /dev/null
+++ b/src/Dominio/Repositorios/Productos/RepositorioImportarProductos.js
@@ -0,0 +1,39 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Utilidades/Constantes/rutasAPI';
+import ProductoCompleto from '@Modelos/Productos/ProductoCompleto';
+import Variante from '@Modelos/Productos/Variante';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioImportarProductos {
+  /**
+   * Recibe un arreglo de objetos `{ productoRaw, variantesRaw }`,
+   * los convierte en instancias de ProductoCompleto y Variante, 
+   * y los envía al backend como JSON para importación masiva.
+   *
+   * @param {Array<{ productoRaw: Object, variantesRaw: Array<Object> }>} productosParseados
+   * @returns {Promise<Object>} Respuesta del backend
+   */
+  static async importarProductos(productosParseados) {
+    const productosConvertidos = productosParseados.map(({ productoRaw, variantesRaw }) => ({
+      producto: new ProductoCompleto(productoRaw),
+      variantes: variantesRaw.map((va) => new Variante(va)),
+    }));
+
+    try {
+    
+      const respuesta = await axios.post(RUTAS_API.PRODUCTOS.IMPORTAR, productosConvertidos, {
+        withCredentials: true,
+        headers: {
+          'x-api-key': API_KEY,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al importar productos desde CSV';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..93cac93b 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -39,6 +39,7 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_PRODUCTOS}/consultar-lista`,
     CREAR: `${BASE_PRODUCTOS}/crear`,
     ELIMINAR_PRODUCTO: `${BASE_PRODUCTOS}/eliminar`,
+    IMPORTAR: `${BASE_PRODUCTOS}/importar`,
   },
   PROVEEDORES: {
     BASE: BASE_PROVEEDORES,
diff --git a/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
new file mode 100644
index 00000000..c4c860c2
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
@@ -0,0 +1,175 @@
+import { useDropzone } from 'react-dropzone';
+import { Box, Typography, CircularProgress, useTheme } from '@mui/material';
+import Icono from '@Atomos/Icono';
+import Papa from 'papaparse';
+import { tokens } from '@SRC/theme';
+
+const transformarCSVaEstructuraProductos = (filas) => {
+  const productosMap = new Map();
+
+  for (const fila of filas) {
+    const idProducto = fila.idProducto;
+
+    if (!productosMap.has(idProducto)) {
+      const {
+        idProveedor,
+        nombreProducto,
+        nombreComercial,
+        descripcionProducto,
+        tipoProducto,
+        marca,
+        modelo,
+        costo,
+        precioVenta,
+        precioCliente,
+        precioPuntos,
+        impuesto,
+        descuento,
+        estado,
+        envio,
+      } = fila;
+
+      productosMap.set(idProducto, {
+        productoRaw: {
+          idProveedor: parseInt(idProveedor),
+          nombreComun: nombreProducto,
+          nombreComercial,
+          descripcion: descripcionProducto,
+          tipoProducto,
+          marca,
+          modelo,
+          costo: parseFloat(costo),
+          precioVenta: parseFloat(precioVenta),
+          precioCliente: parseFloat(precioCliente),
+          precioPuntos: parseFloat(precioPuntos),
+          impuesto: parseFloat(impuesto),
+          descuento: parseFloat(descuento),
+          estado: parseInt(estado),
+          envio: parseInt(envio),
+        },
+        variantesRaw: [],
+      });
+    }
+
+    const producto = productosMap.get(idProducto);
+    const {
+      nombreVariante,
+      descripcionVariante,
+      valorOpcion,
+      SKUautomatico,
+      SKUcomercial,
+      cantidad,
+      costoAdicional,
+      descuentoOpcion,
+      estadoOpcion,
+    } = fila;
+
+    let variante = producto.variantesRaw.find(vb => vb.nombreVariante === nombreVariante);
+    if (!variante) {
+      variante = {
+        identificador: `${producto.variantesRaw.length + 1}`,
+        nombreVariante,
+        descripcion: descripcionVariante,
+        opciones: [],
+      };
+      producto.variantesRaw.push(variante);
+    }
+
+    variante.opciones.push({
+      valorOpcion,
+      SKUautomatico,
+      SKUcomercial,
+      cantidad: parseInt(cantidad),
+      costoAdicional: parseFloat(costoAdicional),
+      descuento: parseFloat(descuentoOpcion),
+      estado: parseInt(estadoOpcion),
+    });
+  }
+
+  return Array.from(productosMap.values());
+};
+
+const ContenedorImportarProductos = ({ onFileAccepted, onError, cargando = false }) => {
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: { 'text/csv': ['.csv'] },
+    multiple: false,
+    maxSize: 5 * 1024 * 1024, // 5 MB
+    disabled: cargando,
+    onDrop: (acceptedFiles) => {
+      if (!acceptedFiles.length) return;
+      const archivo = acceptedFiles[0];
+
+      Papa.parse(archivo, {
+        header: true,
+        skipEmptyLines: true,
+        complete: (resultado) => {
+          try {
+            const productosParseados = transformarCSVaEstructuraProductos(resultado.data);
+            console.log('🧪 Productos Parseados con ID proveedor:', productosParseados);
+            onFileAccepted(archivo, productosParseados);
+          } catch (error) {
+            onError?.('Error al transformar los datos del CSV. Verifica el formato.');
+            console.error('Error al transformar CSV:', error);
+          }
+        },
+        error: (error) => {
+          console.error('Error al parsear CSV:', error.message);
+          onError?.(`Error al leer el archivo: ${error.message}`);
+        }
+      });
+    },
+    onDropRejected: (fileRejections) => {
+      const error = fileRejections[0]?.errors[0];
+      const file = fileRejections[0]?.file;
+
+      if (error?.code === 'file-too-large') {
+        const sizeMB = (file?.size || 0) / (1024 * 1024);
+        const mensaje = `El archivo "${file.name}" es muy grande (${sizeMB.toFixed(2)} MB).`;
+        onError?.(mensaje);
+      } else if (error?.code === 'file-invalid-type') {
+        onError?.(`El archivo debe ser de tipo .csv`);
+      } else {
+        onError?.(`${error?.message || 'Archivo no aceptado.'}`);
+      }
+    }
+  });
+
+  return (
+    <Box
+      {...getRootProps()}
+      sx={{
+        position: 'relative',
+        border: '2px dashed #ccc',
+        borderRadius: 2,
+        padding: 4,
+        textAlign: 'center',
+        cursor: cargando ? 'not-allowed' : 'pointer',
+        backgroundColor: isDragActive && !cargando ? '#f0f0f0' : 'transparent',
+        opacity: cargando ? 0.6 : 1,
+        pointerEvents: cargando ? 'none' : 'auto',
+        mb: 2,
+      }}
+    >
+      <input {...getInputProps()} disabled={cargando} />
+
+      {cargando ? (
+        <CircularProgress />
+      ) : (
+        <Icono nombre="UploadFile" size="large" color={colores.altertex[1]} clickable={false} />
+      )}
+
+      <Typography variant="body1" sx={{ mt: 1 }}>
+        {cargando
+          ? 'Cargando…'
+          : isDragActive
+            ? 'Suelta el archivo aquí…'
+            : 'Arrastra tu CSV o haz clic para seleccionarlo'}
+      </Typography>
+    </Box>
+  );
+};
+
+export default ContenedorImportarProductos;
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index c2e98ebb..328f4f5b 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -2,11 +2,11 @@ import { useState, useCallback, useEffect } from 'react';
 import { Box, List, ListItem, ListItemIcon, ListItemText, CircularProgress, useTheme } from '@mui/material';
 import Icono from '@Atomos/Icono';
 import ModalFlotante from '@Organismos/ModalFlotante';
-import ContenedorImportar from '@Organismos/ContenedorImportar';
 import Alerta from '@Moleculas/Alerta';
 import { tokens } from '@SRC/theme';
 import InfoImportar from '@Organismos/InfoImportar';
 import CajaDesplazable from '@Organismos/CajaDesplazable';
+import ContenedorImportarProductos from './ContenedorImportarProductos';
 
 const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errores, exito, recargar }) => {
   const [archivo, setFile] = useState(null);
@@ -99,7 +99,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
     <>
     <ModalFlotante
       open={abierto}
-      titulo="Importar Empleados con CSV"
+      titulo="Importar Productos con CSV"
       onClose={handleCerrar}
       botones={[
     {
@@ -119,7 +119,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
   ]}
     >
 
-      <ContenedorImportar onFileAccepted={handleFileAccepted} cargando={cargando} />
+      <ContenedorImportarProductos onFileAccepted={handleFileAccepted} cargando={cargando} />
 
       {archivo && (
         <List disablePadding>
@@ -147,21 +147,13 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
       )}
 
       <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
-        <a href="/plantilla_importar_empleados.csv" download="plantilla_importar_empleados.csv">
+        <a href="/plantilla_importar_productos.csv" download="plantilla_importar_productos.csv">
           Descargar CSV de ejemplo 
         </a>
         <InfoImportar 
           open={abririnfo}
           onClose={() => setAbrirInfo(false)}> 
-              Consideraciones para tu CSV:<br/>
-              Campos obligatorios: no dejes celdas vacías en ninguna columna.<br/>
-              Correo electrónico: formato válido (usuario@dominio.com).<br/>
-              {`Contraseñas: mínimo 8 caracteres, al menos una mayúscula y un carácter especial (!@#$%^&*(),.?":{}|<>)`}<br/>
-              Teléfonos: exactamente 10 dígitos, sin espacios ni guiones.<br/>
-              Textos largos: máximo 75 caracteres por campo.<br/>
-              Fecha Nacimiento: formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
-              Estado: 1 → activo, 0 → inactivo.<br/>
-              Antiguedad: formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
+              Under Construction
            </InfoImportar>
             </Box><br/>
                 {mensajeErrores && (
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 2dd807fc..d1698953 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -15,6 +15,7 @@ import { tokens } from '@SRC/theme';
 import { useAuth } from '@Hooks/AuthProvider';
 import { PERMISOS } from '@Constantes/permisos';
 import ModalImportarProdctos from '@Organismos/ModalImportarProductos';
+import useImportarProductos from '@Hooks/Productos/useImportarProductos';
 
 const ListaProductos = () => {
   const { productos, cargando, error, recargar } = useConsultarProductos();
@@ -32,6 +33,8 @@ const ListaProductos = () => {
   const [alerta, setAlerta] = useState(null);
   const [openModalEliminar, setAbrirPopUp] = useState(false);
   const [modalImportarAbierto, setModalImportarAbierto] = useState(false);
+  const { importar, errores, exito, cargando: cargandoImportacion } = useImportarProductos();
+ 
   
 
   const mostrarFormularioProducto = useCallback(() => {
@@ -248,10 +251,10 @@ const ListaProductos = () => {
         <ModalImportarProdctos
         abierto={modalImportarAbierto}
         onCerrar={() => setModalImportarAbierto(false)}
-        // onConfirm={importar}
-        // cargando={cargandoImportacion}
-        // errores={errores}
-        // exito={exito}
+        onConfirm={importar}
+        cargando={cargandoImportacion}
+        errores={errores}
+        exito={exito}
         recargar={recargar}
       ></ModalImportarProdctos>
     </>
diff --git a/src/hooks/Productos/useImportarProductos.js b/src/hooks/Productos/useImportarProductos.js
new file mode 100644
index 00000000..cbf81305
--- /dev/null
+++ b/src/hooks/Productos/useImportarProductos.js
@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { RepositorioImportarProductos } from '@Repositorios/Productos/RepositorioImportarProductos';
+
+/**
+ * Hook para importar productos masivamente desde un CSV (sin imágenes).
+ *
+ * @returns {{
+ *   importar: (productosParseados: Array<Object>) => Promise<void>,
+ *   cargando: boolean,
+ *   errores: Array<{ fila: number|string, error: string }>,
+ *   exito: boolean
+ * }}
+ */
+const useImportarProductos = () => {
+  const [cargando, setCargando] = useState(false);
+  const [errores, setErrores] = useState([]);
+  const [exito, setExito] = useState(false);
+
+  const importar = async (productosParseados) => {
+    setCargando(true);
+    setErrores([]);
+    setExito(false);
+    
+    try {
+      const respuesta = await RepositorioImportarProductos.importarProductos(productosParseados);
+
+      if (respuesta.errores) {
+        setErrores(respuesta.errores);
+      } else {
+        setExito(true);
+      }
+    } catch (err) {
+      setErrores([{ fila: '-', error: err.message }]);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  useEffect(() => {
+    if (exito) {
+      const timer = setTimeout(() => setExito(false), 0);
+      return () => clearTimeout(timer);
+    }
+  }, [exito]);
+
+  return { importar, cargando, errores, exito };
+};
+
+export default useImportarProductos;

From 4a34967cd7256698ba2a77a8ed41a4619388984d Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Tue, 27 May 2025 22:37:22 -0600
Subject: [PATCH 037/160] feature: Ajustar renderCell en lista productos para
 imagen de placeholder

---
 src/Vistas/Paginas/Productos/ListaProductos.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index fcefef8e..2e65ab07 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -99,7 +99,7 @@ const ListaProductos = () => {
       flex: 0.5,
       renderCell: (params) => (
         <img
-          src={params.row.urlImagen}
+          src={params.row.urlImagen || '/placeholder.png'}
           alt='Producto'
           style={{ width: 50, height: 50, objectFit: 'cover' }}
         />

From 28a3889a22696b06822f07680328747fc36f7ccf Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Wed, 28 May 2025 11:17:16 -0600
Subject: [PATCH 038/160] =?UTF-8?q?feature(categorias):=20avance=20sin=20f?=
 =?UTF-8?q?uncionalidad=20completa=20de=20actualizar=20categor=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../repositorioActualizarCategoria.js         | 26 +++++
 src/Utilidades/Constantes/rutasAPI.js         |  1 +
 .../Formularios/FormaCrearCategoria.jsx       |  1 +
 .../Organismos/ModalActualizarCategoria.jsx   | 95 +++++++++++++++++++
 .../Paginas/Categorias/ListaCategorias.jsx    | 21 +++-
 .../Categorias/useActualizarCategoria.js      | 28 ++++++
 src/hooks/Categorias/useLeerCategoria.js      |  1 +
 7 files changed, 172 insertions(+), 1 deletion(-)
 create mode 100644 src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js
 create mode 100644 src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx
 create mode 100644 src/hooks/Categorias/useActualizarCategoria.js

diff --git a/src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js b/src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js
new file mode 100644
index 00000000..f0123701
--- /dev/null
+++ b/src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js
@@ -0,0 +1,26 @@
+// RF48 Actualizar Categoría - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF48
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarCategoria {
+  static async actualizar(idCategoria, cambios) {
+    try {
+      const respuesta = await axios.put(
+        `${RUTAS_API.CATEGORIAS.ACTUALIZAR}/${idCategoria}`,
+        cambios,
+        {
+          withCredentials: true,
+          headers: {
+            'x-api-key': API_KEY,
+          },
+        }
+      );
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al actualizar la categoría';
+      throw new Error(mensaje);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index c56930d9..019f3279 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -34,6 +34,7 @@ export const RUTAS_API = {
     CREAR: `${BASE_CATEGORIAS}/crear-categoria`,
     ELIMINAR_CATEGORIA: `${BASE_CATEGORIAS}/eliminar`,
     LEER: `${BASE_CATEGORIAS}/leer`,
+    ACTUALIZAR: `${BASE_CATEGORIAS}/actualizar`,
   },
   PRODUCTOS: {
     BASE: BASE_PRODUCTOS,
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
index bedb3979..44b119e2 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
@@ -32,6 +32,7 @@ const FormaCrearCategorias = ({
   const [rows, setRows] = useState([]);
   const { usuario } = useAuth();
   const clienteSeleccionado = usuario.clienteSeleccionado;
+  
 
   useEffect(() => {
     const obtenerDatosProductos = async (clienteSeleccionado) => {
diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx
new file mode 100644
index 00000000..22567a7f
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx
@@ -0,0 +1,95 @@
+// RF48 Actualizar categoría de productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF48
+import { useState, useEffect, useCallback } from 'react';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import FormaCrearCategorias from '@Organismos/Formularios/FormaCrearCategoria';
+import Alerta from '@Moleculas/Alerta';
+import { useActualizarCategoria } from '@Hooks/Categorias/useActualizarCategoria';
+
+const ModalActualizarCategoria = ({ open, onClose, categoria, onActualizado }) => {
+  const [nombreCategoria, setNombreCategoria] = useState('');
+  const [descripcionCategoria, setDescripcionCategoria] = useState('');
+  const [productos, setProductos] = useState([]);
+  const [mostrarAlerta, setMostrarAlerta] = useState(false);
+
+  const { actualizar, cargando, error, mensaje } = useActualizarCategoria();
+
+  // Precargar datos al abrir el modal
+  useEffect(() => {
+    if (open && categoria) {
+      setNombreCategoria(categoria.nombreCategoria || '');
+      setDescripcionCategoria(categoria.descripcion || '');
+
+      // Asegurarse de transformar productos a IDs si vienen como objetos
+      const productosParseados = categoria.productos?.map((p) =>
+        typeof p === 'object' ? p.idProducto : p
+      );
+      setProductos(productosParseados || []);
+    }
+  }, [open, categoria]);
+
+  const handleConfirmar = async () => {
+    if (!nombreCategoria.trim() || productos.length === 0) {
+      setMostrarAlerta(true);
+      return;
+    }
+
+    const exito = await actualizar(categoria.idCategoria, {
+        nombreCategoria: nombreCategoria.trim(),
+        descripcion: descripcionCategoria.trim(),
+        productos,
+        });
+
+        if (exito) {
+        onActualizado?.();
+        onClose();
+        }
+
+    if (!error) {
+      onActualizado?.();
+      onClose();
+    }
+  };
+  
+
+  
+
+
+
+  const handleCerrar = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <ModalFlotante
+      open={open}
+      onClose={handleCerrar}
+      onConfirm={handleConfirmar}
+      titulo={`Editar: ${categoria?.nombreCategoria || ''}`}
+      cancelLabel='Cancelar'
+      confirmLabel={cargando ? 'Guardando...' : 'Guardar'}
+      disabledConfirm={cargando}
+    >
+      <FormaCrearCategorias
+        nombreCategoria={nombreCategoria}
+        setNombreCategoria={setNombreCategoria}
+        descripcionCategoria={descripcionCategoria}
+        setDescripcionCategoria={setDescripcionCategoria}
+        productos={productos}
+        setProductos={setProductos}
+        mostrarAlerta={mostrarAlerta}
+        setMostrarAlerta={setMostrarAlerta}
+      />
+      {mensaje && (
+        <Alerta
+          tipo={error ? 'error' : 'success'}
+          mensaje={mensaje}
+          duracion={4000}
+          sx={{ margin: 3 }}
+          cerrable
+        />
+      )}
+    </ModalFlotante>
+  );
+};
+
+export default ModalActualizarCategoria;
\ No newline at end of file
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index bbc50f58..ad9527c8 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -11,6 +11,7 @@ import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
 import { Box, useTheme } from '@mui/material';
 import Texto from '@Atomos/Texto';
 import { tokens } from '@SRC/theme';
+import ModalActualizarCategoria from '@Organismos/ModalActualizarCategoria';
 
 const ListaCategorias = () => {
   const { categorias, cargando, error, recargar } = useConsultarCategorias();
@@ -23,6 +24,8 @@ const ListaCategorias = () => {
   const [categoriaDetalle, setCategoriaDetalle] = useState(null);
   const [errorDetalle, setErrorDetalle] = useState(false);
   const [cargandoDetalle, setCargandoDetalle] = useState(false);
+  const [modalActualizarAbierto, setModalActualizarAbierto] = useState(false);
+  const [categoriaSeleccionada, setCategoriaSeleccionada] = useState(null);
 
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
@@ -189,7 +192,14 @@ const ListaCategorias = () => {
                     variant: 'contained',
                     color: 'error',
                     backgroundColor: colores.altertex[1],
-                    construccion: true,
+                    onClick: () => {
+                      setCategoriaSeleccionada({
+                        ...categoriaDetalle,
+                        productos: categoriaDetalle.productos.map(p => p.idProducto), // para evitar errores en el formulario
+                      });
+                      setModalDetalleAbierto(false);
+                      setModalActualizarAbierto(true);
+                    },
                   },
                   {
                     label: 'SALIR',
@@ -210,6 +220,15 @@ const ListaCategorias = () => {
         </ModalFlotante>
       )}
 
+      {modalActualizarAbierto && categoriaSeleccionada && (
+        <ModalActualizarCategoria
+          open={modalActualizarAbierto}
+          onClose={() => setModalActualizarAbierto(false)}
+          categoria={categoriaSeleccionada}
+          onActualizado={recargar}
+        />
+      )}
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
diff --git a/src/hooks/Categorias/useActualizarCategoria.js b/src/hooks/Categorias/useActualizarCategoria.js
new file mode 100644
index 00000000..7b5606b5
--- /dev/null
+++ b/src/hooks/Categorias/useActualizarCategoria.js
@@ -0,0 +1,28 @@
+// RF48 Actualizar Categoría - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF48
+import { useState } from 'react';
+import { RepositorioActualizarCategoria } from '@Repositorios/Categorias/repositorioActualizarCategoria';
+
+export function useActualizarCategoria() {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+
+  const actualizar = async (idCategoria, cambios) => {
+    setCargando(true);
+    setError(null);
+    setMensaje('');
+
+    try {
+    const respuesta = await RepositorioActualizarCategoria.actualizar(idCategoria, cambios);
+    setMensaje(respuesta.mensaje || 'Categoría actualizada correctamente');
+    return true;
+    } catch (err) {
+    setError(err.message || 'Ocurrió un error al actualizar');
+    return false;
+    } finally {
+    setCargando(false);
+    }
+  };
+
+  return { actualizar, cargando, error, mensaje };
+}
\ No newline at end of file
diff --git a/src/hooks/Categorias/useLeerCategoria.js b/src/hooks/Categorias/useLeerCategoria.js
index 64f8bd1e..c55a9e76 100644
--- a/src/hooks/Categorias/useLeerCategoria.js
+++ b/src/hooks/Categorias/useLeerCategoria.js
@@ -22,6 +22,7 @@ export const leerCategoria = async (idCategoria) => {
     const productos = data.categoria.productos?.map((produc) => produc.nombreComun) || [];
 
     return {
+      idCategoria: data.categoria.idCategoria,
       nombreCategoria: data.categoria.nombreCategoria,
       descripcion: data.categoria.descripcion,
       productos,

From dd3cc142695aad8e62ca09fe15e06e0bc6d24ce7 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Wed, 28 May 2025 11:26:22 -0600
Subject: [PATCH 039/160] feat: validar campos

---
 .../Organismos/ContenedorImportar.jsx            |  6 +++---
 .../Organismos/ContenedorImportarProductos.jsx   |  3 +--
 .../Organismos/ModalImportarEmpleados.jsx        |  2 +-
 .../Organismos/ModalImportarProductos.jsx        | 16 ++++++++++++++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ContenedorImportar.jsx b/src/Vistas/Componentes/Organismos/ContenedorImportar.jsx
index 82649d01..3a4b6952 100644
--- a/src/Vistas/Componentes/Organismos/ContenedorImportar.jsx
+++ b/src/Vistas/Componentes/Organismos/ContenedorImportar.jsx
@@ -34,10 +34,10 @@ const ContenedorImportar = ({ onFileAccepted, onError, cargando = false }) => {
 
   if (error?.code === 'file-too-large') {
       const sizeMB = (file?.size || 0) / (1024 * 1024);
-      const mensaje = `⚠️ El archivo "${file.name}" es muy grande (${sizeMB.toFixed(2)} MB).`;
+      const mensaje = `El archivo "${file.name}" es muy grande (${sizeMB.toFixed(2)} MB).`;
       onError?.(mensaje);
     } else if (error?.code === 'file-invalid-type') {
-      onError?.(`⚠️ El archivo debe ser de tipo .csv`);
+      onError?.(`El archivo debe ser de tipo .csv`);
     } else {
       onError?.(`${error?.message || 'Archivo no aceptado.'}`);
     }
@@ -76,7 +76,7 @@ const ContenedorImportar = ({ onFileAccepted, onError, cargando = false }) => {
           ? 'Cargando…'
           : isDragActive
             ? 'Suelta el archivo aquí…'
-            : 'Arrastra tu CSV o haz clic para seleccionarlo'}
+            : 'Arrastra tu CSV o haz clic para seleccionarlo (5 MB máximo)'}
       </Typography>
     </Box>
   );
diff --git a/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
index c4c860c2..a7cd2435 100644
--- a/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
@@ -108,7 +108,6 @@ const ContenedorImportarProductos = ({ onFileAccepted, onError, cargando = false
         complete: (resultado) => {
           try {
             const productosParseados = transformarCSVaEstructuraProductos(resultado.data);
-            console.log('🧪 Productos Parseados con ID proveedor:', productosParseados);
             onFileAccepted(archivo, productosParseados);
           } catch (error) {
             onError?.('Error al transformar los datos del CSV. Verifica el formato.');
@@ -166,7 +165,7 @@ const ContenedorImportarProductos = ({ onFileAccepted, onError, cargando = false
           ? 'Cargando…'
           : isDragActive
             ? 'Suelta el archivo aquí…'
-            : 'Arrastra tu CSV o haz clic para seleccionarlo'}
+            : 'Arrastra tu CSV o haz clic para seleccionarlo (5 MB máximo)'}
       </Typography>
     </Box>
   );
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx b/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
index 90dad3d5..f267171b 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
@@ -160,7 +160,7 @@ const ModalImportarEmpleados = ({ abierto, onCerrar, onConfirm, cargando, errore
 
       <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
         <a href="/plantilla_importar_empleados.csv" download="plantilla_importar_empleados.csv">
-          Descargar CSV de ejemplo 
+          Descargar plantilla CSV
         </a>
         <InfoImportar 
           open={abririnfo}
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index 328f4f5b..cc4aed37 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -119,7 +119,19 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
   ]}
     >
 
-      <ContenedorImportarProductos onFileAccepted={handleFileAccepted} cargando={cargando} />
+      <ContenedorImportarProductos 
+      onFileAccepted={handleFileAccepted} 
+      cargando={cargando}
+      onError={(mensaje) =>
+            setAlerta({
+              tipo: 'error',
+              mensaje,
+              duracion: 3000,
+              cerrable: true,
+              centradoInferior: true,
+            })
+          } 
+      />
 
       {archivo && (
         <List disablePadding>
@@ -148,7 +160,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
 
       <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
         <a href="/plantilla_importar_productos.csv" download="plantilla_importar_productos.csv">
-          Descargar CSV de ejemplo 
+          Descargar plantilla CSV
         </a>
         <InfoImportar 
           open={abririnfo}

From 9ef620698d96aba6c8ecbb5e52e60c35bac044dd Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Thu, 29 May 2025 01:38:28 -0600
Subject: [PATCH 040/160] fix: arreglar columnas para quitar los campos
 innecesarios

---
 src/Vistas/Paginas/Eventos/ListaEventos.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Vistas/Paginas/Eventos/ListaEventos.jsx b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
index bb0b0487..21ce8a5c 100644
--- a/src/Vistas/Paginas/Eventos/ListaEventos.jsx
+++ b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
@@ -102,8 +102,6 @@ const ListaEventos = () => {
     { field: 'nombre', headerName: 'Nombre', flex: 1 },
     { field: 'descripcion', headerName: 'Descripción', flex: 2 },
     { field: 'puntos', headerName: 'Puntos', flex: 1 },
-    { field: 'periodo', headerName: 'Periodo', flex: 1 },
-    { field: 'renovacion', headerName: 'Renovación', flex: 1 },
   ];
 
   const filas = (eventos || []).map((evento) => ({

From 9b05e5101f98e971314cca17224b55fd82cd69c6 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Thu, 29 May 2025 15:11:20 -0600
Subject: [PATCH 041/160] fix arreglar alerta

---
 .../Organismos/ModalCrearSetsProductos.jsx    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
index 050e93cb..6a5d0ed8 100644
--- a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
@@ -10,6 +10,7 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
   const [descripcionSetsProducto, setDescripcionSetsProducto] = useState('');
   const [productos, setProductos] = useState([]);
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
+  const [mensajeAlerta, setMensajeAlerta] = useState('')
 
   const tieneReseteo = useRef(false);
 
@@ -58,9 +59,14 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
   const handleConfirmar = async () => {
     if (!nombreSetsProducto.trim() || !nombreVisible.trim() || productos.length === 0) {
       setMostrarAlerta(true);
+      if (productos.length === 0) {
+        setMensajeAlerta('Debe seleccionar al menos un producto.');
+      } else {
+        setMensajeAlerta('Por favor complete todos los campos obligatorios.');
+      }
       return;
     }
-
+    setMensajeAlerta('');
     await crearSetsProducto({
       nombre: nombreSetsProducto.trim(),
       nombreVisible: nombreVisible.trim(),
@@ -92,6 +98,19 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
         setMostrarAlerta={setMostrarAlerta}
       />
     </ModalFlotante>
+
+      {mostrarAlerta && (
+        <Alerta
+          tipo="warning"
+          mensaje={mensajeAlerta}
+          duracion={3000}
+          sx={{ margin: 3 }}
+          cerrable
+          onClose={() => setMostrarAlerta(false)}
+          centradoInferior
+        />
+      )}
+
       {(exito || error) && (
         <Alerta
           tipo={exito ? 'success' : 'error'}

From dc861dc10b726be297504104f0e949adee6d7214 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Fri, 30 May 2025 12:13:38 -0600
Subject: [PATCH 042/160] Fix: Manejo de estados

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 55 ++++++++++++++-----
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  2 +
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 09e94fd1..85f3e93a 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -12,7 +12,9 @@ const InfoGrupoEmpleadosEditable = ({
   nombre: nombreInicial,
   descripcion: descripcionInicial,
   setsProductos: setsProductosInicial,
+  idsSetProductos: idsSetsProductosInicial, // IDs iniciales de sets de productos
   empleados: empleadosInicial,
+  idsEmpleados: idsEmpleadosInicial, // IDs iniciales de empleados
 }) => {
   const [productosDisponibles, setProductosDisponibles] = useState([]);
   const [empleadosDisponibles, setEmpleadosDisponibles] = useState([]);
@@ -23,11 +25,14 @@ const InfoGrupoEmpleadosEditable = ({
   const [nombre, setNombre] = useState(nombreInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
   const [setsProductos, setSetsProductos] = useState(setsProductosInicial || []);
-  const [empleados, setEmpleados] = useState(empleadosInicial);
+  const [empleados, setEmpleados] = useState(empleadosInicial || []);
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
-  // Estados para manejar las selecciones en las tablas
-  const [productosSeleccionados, setProductosSeleccionados] = useState([]);
-  const [empleadosSeleccionados, setEmpleadosSeleccionados] = useState([]);
+
+  // Estados para manejar las selecciones en las tablas - INICIALIZADOS CON LOS IDs
+  const [productosSeleccionados, setProductosSeleccionados] = useState(
+    idsSetsProductosInicial || []
+  );
+  const [empleadosSeleccionados, setEmpleadosSeleccionados] = useState(idsEmpleadosInicial || []);
 
   useEffect(() => {
     const obtenerDatos = async () => {
@@ -41,16 +46,37 @@ const InfoGrupoEmpleadosEditable = ({
     obtenerDatos();
   }, [clienteSeleccionado]);
 
-  // Sincronizar selecciones con los chips cuando cambian los datos
+  // Efecto para sincronizar cuando cambien los IDs iniciales (por si se recarga el componente)
+  useEffect(() => {
+    if (idsSetsProductosInicial && idsSetsProductosInicial.length > 0) {
+      setProductosSeleccionados(idsSetsProductosInicial);
+    }
+  }, [idsSetsProductosInicial]);
+
+  useEffect(() => {
+    if (idsEmpleadosInicial && idsEmpleadosInicial.length > 0) {
+      setEmpleadosSeleccionados(idsEmpleadosInicial);
+    }
+  }, [idsEmpleadosInicial]);
+
+  // Efecto para mantener sincronizados los chips con las selecciones
   useEffect(() => {
-    const idsProductosSeleccionados = setsProductos.map((producto) => producto.id);
-    setProductosSeleccionados(idsProductosSeleccionados);
-  }, [setsProductos]);
+    if (productosDisponibles.length > 0 && productosSeleccionados.length > 0) {
+      const productosActualizados = productosDisponibles.filter((producto) =>
+        productosSeleccionados.includes(producto.id)
+      );
+      setSetsProductos(productosActualizados);
+    }
+  }, [productosDisponibles, productosSeleccionados]);
 
   useEffect(() => {
-    const idsEmpleadosSeleccionados = empleados.map((empleado) => empleado.id);
-    setEmpleadosSeleccionados(idsEmpleadosSeleccionados);
-  }, [empleados]);
+    if (empleadosDisponibles.length > 0 && empleadosSeleccionados.length > 0) {
+      const empleadosActualizados = empleadosDisponibles.filter((empleado) =>
+        empleadosSeleccionados.includes(empleado.id)
+      );
+      setEmpleados(empleadosActualizados);
+    }
+  }, [empleadosDisponibles, empleadosSeleccionados]);
 
   // Manejar cambios en la selección de productos
   const handleSeleccionProductos = (selectionData) => {
@@ -75,8 +101,6 @@ const InfoGrupoEmpleadosEditable = ({
   // Manejar cambios en la selección de empleados
   const handleSeleccionEmpleados = (selectionData) => {
     console.log('Selecciones empleados recibidas:', selectionData);
-
-    // Extraer IDs del Set y convertir a array
     let seleccionesArray = [];
     if (selectionData && selectionData.ids && selectionData.ids instanceof Set) {
       seleccionesArray = Array.from(selectionData.ids);
@@ -100,8 +124,9 @@ const InfoGrupoEmpleadosEditable = ({
     correo: empleado.correo,
     areaTrabajo: empleado.area,
   }));
-  console.log('Produtos seleccionados:', productosSeleccionados);
+  console.log('Productos seleccionados:', productosSeleccionados);
   console.log('Empleados seleccionados:', empleadosSeleccionados);
+
   const handleGuardar = () => {
     if (!nombre || !descripcion || setsProductos.length === 0 || empleados.length === 0) {
       setMostrarAlerta(true);
@@ -112,6 +137,8 @@ const InfoGrupoEmpleadosEditable = ({
     console.log('Descripción:', descripcion);
     console.log('Sets de Productos:', setsProductos);
     console.log('Empleados:', empleados);
+    console.log('IDs Sets Productos:', productosSeleccionados);
+    console.log('IDs Empleados:', empleadosSeleccionados);
   };
 
   return (
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 112a0ec1..ea2f7bd2 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -269,7 +269,9 @@ const ListaGrupoEmpleados = () => {
               nombre={grupoEmpleados?.nombre || ''}
               descripcion={grupoEmpleados?.descripcion || ''}
               setsProductos={grupoEmpleados?.setsProductos || []}
+              idsSetProductos={grupoEmpleados?.idsSetProductos || []}
               empleados={grupoEmpleados?.empleados || []}
+              idsEmpleados={grupoEmpleados?.idsEmpleados || []}
             />
           )}
         </ModalFlotante>

From 63d19c49219bdd345992a5fa795ab0f73285367c Mon Sep 17 00:00:00 2001
From: PAOLA MARIA garrido <you@example.com>
Date: Fri, 30 May 2025 18:42:14 -0600
Subject: [PATCH 043/160] =?UTF-8?q?fix:=20agregar=20exportar=20por=20selec?=
 =?UTF-8?q?ci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Empleados/RepositorioExportarEmpleados.js | 30 +++++++
 src/Utilidades/Constantes/rutasAPI.js         |  1 +
 .../Paginas/Empleados/ListaEmpleados.jsx      | 89 +++++++++++++++++--
 src/hooks/Empleados/useExportarEmpleados.js   | 41 +++++++++
 4 files changed, 153 insertions(+), 8 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
 create mode 100644 src/hooks/Empleados/useExportarEmpleados.js

diff --git a/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js b/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
new file mode 100644
index 00000000..0d36dfb8
--- /dev/null
+++ b/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
@@ -0,0 +1,30 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+/**
+ * Solicita la exportación de empleados seleccionados al backend y retorna el contenido CSV como string.
+ *
+ * @param {number[]} idsEmpleado - Arreglo de IDs de empleados seleccionados para exportar.
+ * @returns {Promise<{ mensaje: string, csv: string }>} Respuesta con mensaje y contenido CSV.
+ * @throws {Error} Si la petición falla o el servidor devuelve un mensaje de error.
+ */
+
+export const exportarEmpleados = async (idsEmpleado) => {
+  try {
+    const response = await axios.post(
+      RUTAS_API.EMPLEADOS.EXPORTAR_EMPLEADOS,
+      { idsEmpleado },
+      {
+        withCredentials: true,
+        headers: { 'x-api-key': API_KEY },
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw new Error(
+      error.response?.data?.mensaje || 'Error al importar empleados en el servidor'
+    );
+  }
+};
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..d2856b75 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -69,6 +69,7 @@ export const RUTAS_API = {
     LEER_GRUPO: `${BASE_EMPLEADOS}/leer-grupo`,
     CREAR_GRUPO: `${BASE_EMPLEADOS}/crear-grupo`,
     ACTUALIZAR_EMPLEADO: `${BASE_EMPLEADOS}/actualizar`,
+    EXPORTAR_EMPLEADOS: `${BASE_EMPLEADOS}/exportar-empleados`,
   },
   CUOTAS: {
     BASE: BASE_CUOTAS,
diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index d962012c..53e0ac34 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -1,6 +1,6 @@
 //RF17 - Consulta Lista Empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF17
 //RF20 - Eliminar empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF20
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, useTheme } from '@mui/material';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
@@ -16,6 +16,7 @@ import { tokens } from '@SRC/theme';
 import { PERMISOS } from '@Constantes/permisos';
 import ModalImportarEmpleados from '@Organismos/ModalImportarEmpleados';
 import useImportarEmpleados from '@Hooks/Empleados/useImportarEmpleados';
+import useExportarEmpleados from '@Hooks/Empleados/useExportarEmpleados';
 
 const ListaGrupoEmpleados = () => {
   const { empleados, cargando, error, recargar } = useConsultarEmpleados();
@@ -45,7 +46,7 @@ const ListaGrupoEmpleados = () => {
   const manejarConfirmarEliminar = async () => {
     try {
       await eliminar(empleadosSeleccionados);
-      await recargar(); // Se asegura de que se recargue la lista
+      await recargar();
       setAlerta({
         tipo: 'success',
         mensaje: 'Empleados eliminados correctamente.',
@@ -67,6 +68,68 @@ const ListaGrupoEmpleados = () => {
     }
   };
 
+  const [openModalExportar, setAbrirPopUpExportar] = useState(false);
+  const MENSAJE_POPUP_EXPORTAR = '¿Deseas exportar la lista de empleados? El archivo será generado en formato CSV.';
+  const manejarCancelarExportar = () => {
+    setAbrirPopUpExportar(false);
+  };
+
+  const manejarConfirmarExportar = async () => {
+    if (empleadosSeleccionados.length === 0) {
+      setAlerta({
+        tipo: 'warning',
+        mensaje: 'Selecciona al menos un empleado para exportar.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+
+    await exportar(empleadosSeleccionados); // ✅ Pasa los IDs seleccionados
+    setAbrirPopUpExportar(false);
+  };
+
+  const { exportar, error: errorExportar, csv, mensaje } = useExportarEmpleados();
+
+  useEffect(() => {
+  if (csv) {
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', 'empleados.csv');
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    }
+  }, [csv]);
+  
+  useEffect(() => {
+    if (errorExportar) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: errorExportar,
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    }
+  }, [errorExportar]);
+
+  useEffect(() => {
+    if (csv && mensaje) {
+      setAlerta({
+        tipo: 'success',
+        mensaje,
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    }
+  }, [csv, mensaje]);
+
   const columnas = [
     { field: 'nombreCompleto', headerName: 'Nombre del Empleado', flex: 1 },
     { field: 'correoElectronico', headerName: 'Correo Electrónico', flex: 1 },
@@ -109,13 +172,13 @@ const ListaGrupoEmpleados = () => {
       disabled: !usuario?.permisos?.includes(PERMISOS.IMPORTAR_EMPLEADOS),
     },
     {
-      //variant: 'outlined',
+      variant: 'outlined',
       label: 'Exportar',
-      onClick: () => console.log('Exportar'),
+      onClick: () => setAbrirPopUpExportar(true),
       color: 'primary',
+      outlineColor: colores.altertex[1],
       size: 'large',
-      //outlineColor: colores.primario[10],
-      construccion: true,
+      disabled: !usuario?.permisos?.includes(PERMISOS.EXPORTAR_EMPLEADOS),
     },
     {
       label: 'Eliminar',
@@ -159,7 +222,8 @@ const ListaGrupoEmpleados = () => {
               setModalDetalleAbierto(true);
             }}
             onRowSelectionModelChange={(nuevosIds) => {
-              const ids = Array.isArray(nuevosIds) ? nuevosIds : Array.from(nuevosIds?.ids || []);
+              const ids = (Array.isArray(nuevosIds) ? nuevosIds : Array.from(nuevosIds?.ids || []))
+                .map(id => parseInt(id));
               setEmpleadosSeleccionados(ids);
             }}
           />
@@ -241,6 +305,15 @@ const ListaGrupoEmpleados = () => {
         dialogo={MENSAJE_POPUP_ELIMINAR}
       />
 
+      <PopUp
+        abrir={openModalExportar}
+        cerrar={manejarCancelarExportar}
+        confirmar={manejarConfirmarExportar}
+        dialogo={MENSAJE_POPUP_EXPORTAR}
+        labelCancelar = 'Cancelar'
+        labelConfirmar = 'Confirma'
+      />
+
       {/* Alerta inferior */}
       {alerta && (
         <Alerta
@@ -266,4 +339,4 @@ const ListaGrupoEmpleados = () => {
   );
 };
 
-export default ListaGrupoEmpleados;
+export default ListaGrupoEmpleados;
\ No newline at end of file
diff --git a/src/hooks/Empleados/useExportarEmpleados.js b/src/hooks/Empleados/useExportarEmpleados.js
new file mode 100644
index 00000000..2c7d5c28
--- /dev/null
+++ b/src/hooks/Empleados/useExportarEmpleados.js
@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { exportarEmpleados as repoExportarEmpleados } from '@Repositorios/Empleados/RepositorioExportarEmpleados';
+
+/**
+ * Hook para gestionar la exportación de empleados en formato CSV.
+ *
+ * @returns {{
+ *   exportar: (idsEmpleado: number[]) => Promise<void>,
+ *   cargando: boolean,
+ *   error: string | null,
+ *   csv: string,
+ *   mensaje: string
+ * }}
+ */
+const useExportarEmpleados = () => {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [csv, setCsv] = useState('');
+  const [mensaje, setMensaje] = useState('');
+
+  const exportar = async (idsEmpleado) => {
+    setCargando(true);
+    setError(null);
+    setCsv('');
+    setMensaje('');
+
+    try {
+      const { mensaje, csv } = await repoExportarEmpleados(idsEmpleado);
+      setMensaje(mensaje);
+      setCsv(csv);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { exportar, cargando, error, csv, mensaje };
+};
+
+export default useExportarEmpleados;
\ No newline at end of file

From 6dec5f15695955890b5fd75d9136b666b277cd9a Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 30 May 2025 19:00:11 -0600
Subject: [PATCH 044/160] feat: agregar documentacion para importar

---
 .../Organismos/ModalImportarEmpleados.jsx     | 18 ++++-----
 .../Organismos/ModalImportarProductos.jsx     | 39 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx b/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
index f267171b..f2c256ae 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
@@ -165,15 +165,15 @@ const ModalImportarEmpleados = ({ abierto, onCerrar, onConfirm, cargando, errore
         <InfoImportar 
           open={abririnfo}
           onClose={() => setAbrirInfo(false)}> 
-              Consideraciones para tu CSV:<br/>
-              Campos obligatorios: no dejes celdas vacías en ninguna columna.<br/>
-              Correo electrónico: formato válido (usuario@dominio.com).<br/>
-              {`Contraseñas: mínimo 8 caracteres, al menos una mayúscula y un carácter especial (!@#$%^&*(),.?":{}|<>)`}<br/>
-              Teléfonos: exactamente 10 dígitos, sin espacios ni guiones.<br/>
-              Textos largos: máximo 75 caracteres por campo.<br/>
-              Fecha Nacimiento: formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
-              Estado: 1 → activo, 0 → inactivo.<br/>
-              Antiguedad: formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
+              <strong>Consideraciones para tu CSV:</strong><br /><br />
+              <strong>Campos obligatorios:</strong> no dejes celdas vacías en ninguna columna.<br/>
+              <strong>Correo electrónico:</strong> formato válido (usuario@dominio.com).<br/>
+              <strong>Contraseñas: </strong>{`mínimo 8 caracteres, al menos una mayúscula y un carácter especial (!@#$%^&*(),.?":{}|<>)`}<br/>
+              <strong>Teléfonos:</strong> exactamente 10 dígitos, sin espacios ni guiones.<br/>
+              <strong>Textos largos:</strong> máximo 75 caracteres por campo.<br/>
+              <strong>Fecha Nacimiento:</strong> formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
+              <strong>Estado:</strong> 1 → activo, 0 → inactivo.<br/>
+              <strong>Antiguedad:</strong> formato DD/MM/AAAA (p. ej. 05/08/1998).<br/>
            </InfoImportar>
             </Box><br/>
                 {mensajeErrores && (
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index cc4aed37..6a72c9c3 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -22,7 +22,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
   useEffect(() => {
     if (errores && errores.length > 0) {
       const mensaje = errores
-        .map(elemento => `Fila ${elemento.fila}: ${elemento.error}`)
+        .map(elemento => `Producto ${elemento.fila}: ${elemento.error}`)
         .join('\n');
       setMensajeErrores(mensaje);
     } else {
@@ -165,7 +165,42 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
         <InfoImportar 
           open={abririnfo}
           onClose={() => setAbrirInfo(false)}> 
-              Under Construction
+                <>
+                  <strong>¿Cómo funciona la estructura del archivo CSV?</strong>
+                  <br /><br />
+                  Cada fila del archivo representa una opción específica de un producto. Por eso, en cada fila se debe repetir la información general del producto.
+                  El sistema necesita saber qué filas pertenecen al mismo producto. Para eso sirve el campo <strong>idProducto</strong>.
+                  <br /><br />
+                  Dentro de ese producto, se organizan las <strong>variantes</strong> usando el campo <strong>nombreVariante</strong>.
+                  Y dentro de cada variante, se agrupan las <strong>opciones</strong> como "Rojo", "M", "32GB", etc.
+                  <br /><br />
+                  Así se puede importar correctamente todo: producto, variantes y sus opciones.
+                  <br /><br />
+                  <strong>Importante:</strong><br />
+                  Asegúrate de que el <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto.
+                  <h3>Producto</h3>
+                  <strong>idProducto</strong> permite al sistema saber qué filas pertenecen al mismo producto, aunque estén en diferentes líneas del CSV. Es necesario para poder agruparlo.<br />
+                  <strong>nombreProducto, nombreComercial:</strong> Nombres básicos<br />
+                  <strong>descripcionProducto:</strong> Descripción del producto<br />
+                  <strong>marca, modelo, tipoProducto</strong><br />
+                  <strong>costo, precioVenta, precioCliente:</strong> Valores numéricos (usa punto decimal)<br />
+                  <strong>precioPuntos:</strong> Número entero<br />
+                  <strong>impuesto, descuento:</strong> Porcentajes<br />
+                  <strong>estado:</strong> 1 = activo, 0 = inactivo<br />
+                  <strong>envio:</strong> 1 = disponible, 0 = no disponible<br /><br />
+                  <h3>Variante</h3>
+                  <strong>nombreVariante:</strong> Ej. "Color", "Tamaño"<br />
+                  <strong>descripcionVariante:</strong> (opcional)<br /><br />
+                  <h3>Opción</h3>
+                  <strong>valorOpcion:</strong> Ej. "Rojo", "XL"<br />
+                  <strong>SKUautomatico:</strong> Obligatorio<br />
+                  <strong>SKUcomercial:</strong> Código visible al cliente<br />
+                  <strong>cantidad:</strong> Entero<br />
+                  <strong>costoAdicional:</strong> Número positivo<br />
+                  <strong>descuentoOpcion:</strong> Porcentaje<br />
+                  <strong>estadoOpcion:</strong> 1 = activa, 0 = inactiva<br /><br />
+                
+                </>
            </InfoImportar>
             </Box><br/>
                 {mensajeErrores && (

From 55bb344bdb300fb1a70fc786f8c249683399da3c Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sat, 31 May 2025 20:24:26 -0600
Subject: [PATCH 045/160] fix: arreglar manejo de errores segun los errores
 encontrados en las pruebas

---
 .../Formularios/FormaCrearSetsProducto.jsx    | 128 ++++++++++++++----
 .../Organismos/ModalCrearSetsProductos.jsx    | 107 ++++++++++-----
 2 files changed, 173 insertions(+), 62 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
index d19c309a..1d9ca7a0 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
@@ -27,6 +27,8 @@ const FormaCrearSetsProducto = ({
                                   setProductos,
                                   mostrarAlerta,
                                   setMostrarAlerta,
+                                  erroresCampos,
+                                  setErroresCampos,
                                 }) => {
   const [rows, setRows] = useState([]);
   const { usuario } = useAuth();
@@ -47,18 +49,73 @@ const FormaCrearSetsProducto = ({
     const yaExiste = productos.some((producto) => producto.id === productoSeleccionado.id);
     if (!yaExiste) {
       setProductos((prev) => [...prev, productoSeleccionado]);
+    } else {
+      // Remove product if it already exists (toggle behavior)
+      setProductos((prev) => prev.filter((producto) => producto.id !== productoSeleccionado.id));
+    }
+
+    // Clear products error when a product is selected
+    if (erroresCampos?.productos) {
+      setErroresCampos(prev => ({ ...prev, productos: false }));
     }
   };
 
   const handleFilaSeleccion = (itemSeleccion) => {
     const ids = Array.isArray(itemSeleccion) ? itemSeleccion : Array.from(itemSeleccion?.ids || []);
 
-    const nuevasFilas = ids
+    // Get all products that correspond to the selected IDs
+    const productosSeleccionados = ids
       .map((id) => rows.find((row) => row.id === id))
-      .filter((fila) => fila && !productos.some((producto) => producto.id === fila.id));
+      .filter((fila) => fila);
+
+    // Update the productos array to match exactly what's selected
+    setProductos(productosSeleccionados);
+
+    // Clear products error when products are selected
+    if (erroresCampos?.productos && productosSeleccionados.length > 0) {
+      setErroresCampos(prev => ({ ...prev, productos: false }));
+    }
+  };
+
+  const handleNombreChange = (evento) => {
+    const value = evento.target.value;
+    if (value.trim() !== '') {
+      setNombreSetsProducto(value.slice(0, LIMITE_NOMBRE));
+    } else if (nombreSetsProducto !== '') {
+      setNombreSetsProducto('');
+    }
+
+    // Clear error when user starts typing
+    if (erroresCampos?.nombre && value.trim()) {
+      setErroresCampos(prev => ({ ...prev, nombre: false }));
+    }
+  };
+
+  const handleNombreVisibleChange = (evento) => {
+    const value = evento.target.value;
+    if (value.trim() !== '') {
+      setNombreVisible(value.slice(0, LIMITE_NOMBRE_VISIBLE));
+    } else if (nombreVisible !== '') {
+      setNombreVisible('');
+    }
 
-    if (nuevasFilas.length > 0) {
-      setProductos((prev) => [...prev, ...nuevasFilas]);
+    // Clear error when user starts typing
+    if (erroresCampos?.nombreVisible && value.trim()) {
+      setErroresCampos(prev => ({ ...prev, nombreVisible: false }));
+    }
+  };
+
+  const handleDescripcionChange = (evento) => {
+    const value = evento.target.value;
+    if (value.trim() !== '') {
+      setDescripcionSetsProducto(value.slice(0, LIMITE_DESCRIPCION));
+    } else if (descripcionSetsProducto !== '') {
+      setDescripcionSetsProducto('');
+    }
+
+    // Clear error when user starts typing
+    if (erroresCampos?.descripcion && value.trim()) {
+      setErroresCampos(prev => ({ ...prev, descripcion: false }));
     }
   };
 
@@ -69,17 +126,19 @@ const FormaCrearSetsProducto = ({
         fullWidth
         type={'text'}
         value={nombreSetsProducto}
-        onChange={(evento) => {
-          if (evento.target.value.trim() !== '') {
-            setNombreSetsProducto(evento.target.value.slice(0, LIMITE_NOMBRE));
-          } else if (nombreSetsProducto !== '') {
-            setNombreSetsProducto('');
-          }
-        }}
+        onChange={handleNombreChange}
         inputProps={{ maxLength: LIMITE_NOMBRE }}
         helperText={`${nombreSetsProducto.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`}
         required
-        sx={{ mb: 2 }}
+        error={erroresCampos?.nombre}
+        sx={{
+          mb: 2,
+          '& .MuiOutlinedInput-root': {
+            '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+              borderColor: '#f44336',
+            },
+          },
+        }}
       />
 
       <CampoTexto
@@ -87,22 +146,31 @@ const FormaCrearSetsProducto = ({
         fullWidth
         type={'text'}
         value={nombreVisible}
-        onChange={(evento) => {
-          if (evento.target.value.trim() !== '') {
-            setNombreVisible(evento.target.value.slice(0, LIMITE_NOMBRE_VISIBLE));
-          } else if (nombreVisible !== '') {
-            setNombreVisible('');
-          }
-        }}
+        onChange={handleNombreVisibleChange}
         inputProps={{ maxLength: LIMITE_NOMBRE_VISIBLE }}
         helperText={`${nombreVisible.length}/${LIMITE_NOMBRE_VISIBLE} - ${MENSAJE_LIMITE}`}
         required
-        sx={{ mb: 2 }}
+        error={erroresCampos?.nombreVisible}
+        sx={{
+          mb: 2,
+          '& .MuiOutlinedInput-root': {
+            '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+              borderColor: '#f44336',
+            },
+          },
+        }}
       />
 
       <ProductosModal
         elevacion={1}
-        sx={{ width: '100%', height: '350px' }}
+        sx={{
+          width: '100%',
+          height: '350px',
+          ...(erroresCampos?.productos && {
+            border: '2px solid #f44336',
+            borderRadius: '4px',
+          })
+        }}
         columnas={columns}
         filas={rows}
         paginacion={4}
@@ -116,17 +184,19 @@ const FormaCrearSetsProducto = ({
         fullWidth
         type={'text'}
         value={descripcionSetsProducto}
-        onChange={(evento) => {
-          if (evento.target.value.trim() !== '') {
-            setDescripcionSetsProducto(evento.target.value.slice(0, LIMITE_DESCRIPCION));
-          } else if (descripcionSetsProducto !== '') {
-            setDescripcionSetsProducto('');
-          }
-        }}
+        onChange={handleDescripcionChange}
         inputProps={{ maxLength: LIMITE_DESCRIPCION }}
         helperText={`${descripcionSetsProducto.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`}
         required
-        sx={{ mt: 2 }}
+        error={erroresCampos?.descripcion}
+        sx={{
+          mt: 2,
+          '& .MuiOutlinedInput-root': {
+            '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+              borderColor: '#f44336',
+            },
+          },
+        }}
         multiline
         rows={3}
       />
diff --git a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
index 6a5d0ed8..e5e0d410 100644
--- a/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalCrearSetsProductos.jsx
@@ -10,7 +10,13 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
   const [descripcionSetsProducto, setDescripcionSetsProducto] = useState('');
   const [productos, setProductos] = useState([]);
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
-  const [mensajeAlerta, setMensajeAlerta] = useState('')
+  const [mensajeAlerta, setMensajeAlerta] = useState('');
+  const [erroresCampos, setErroresCampos] = useState({
+    nombre: false,
+    nombreVisible: false,
+    descripcion: false,
+    productos: false
+  });
 
   const tieneReseteo = useRef(false);
 
@@ -27,6 +33,12 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
         setDescripcionSetsProducto('');
         setProductos([]);
         setMostrarAlerta(false);
+        setErroresCampos({
+          nombre: false,
+          nombreVisible: false,
+          descripcion: false,
+          productos: false
+        });
       }, 0);
     } else if (abierto) {
       tieneReseteo.current = false;
@@ -56,17 +68,44 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
     onCerrar();
   }, [onCerrar]);
 
+  const validarCampos = () => {
+    const errores = {
+      nombre: !nombreSetsProducto.trim(),
+      nombreVisible: !nombreVisible.trim(),
+      descripcion: !descripcionSetsProducto.trim(),
+      productos: productos.length === 0
+    };
+
+    setErroresCampos(errores);
+
+    let mensaje = '';
+    if (errores.productos) {
+      mensaje = 'Debe seleccionar al menos un producto.';
+    } else if (errores.nombre || errores.nombreVisible || errores.descripcion) {
+      mensaje = 'Por favor complete todos los campos obligatorios.';
+    }
+
+    return { tieneErrores: Object.values(errores).some(error => error), mensaje };
+  };
+
   const handleConfirmar = async () => {
-    if (!nombreSetsProducto.trim() || !nombreVisible.trim() || productos.length === 0) {
+    const { tieneErrores, mensaje } = validarCampos();
+
+    if (tieneErrores) {
       setMostrarAlerta(true);
-      if (productos.length === 0) {
-        setMensajeAlerta('Debe seleccionar al menos un producto.');
-      } else {
-        setMensajeAlerta('Por favor complete todos los campos obligatorios.');
-      }
+      setMensajeAlerta(mensaje);
       return;
     }
+
+    setMostrarAlerta(false);
     setMensajeAlerta('');
+    setErroresCampos({
+      nombre: false,
+      nombreVisible: false,
+      descripcion: false,
+      productos: false
+    });
+
     await crearSetsProducto({
       nombre: nombreSetsProducto.trim(),
       nombreVisible: nombreVisible.trim(),
@@ -76,34 +115,36 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
   };
 
   return (<>
-    <ModalFlotante
-      open={abierto}
-      onClose={handleCerrar}
-      onConfirm={handleConfirmar}
-      titulo='Crear sets de productos'
-      cancelLabel='Cancelar'
-      confirmLabel={cargando ? 'Creando...' : 'Crear'}
-      disabledConfirm={cargando}
-    >
-      <FormaCrearSetsProducto
-        nombreSetsProducto={nombreSetsProducto}
-        setNombreSetsProducto={setNombreSetsProducto}
-        nombreVisible={nombreVisible}
-        setNombreVisible={setNombreVisible}
-        descripcionSetsProducto={descripcionSetsProducto}
-        setDescripcionSetsProducto={setDescripcionSetsProducto}
-        productos={productos}
-        setProductos={setProductos}
-        mostrarAlerta={mostrarAlerta}
-        setMostrarAlerta={setMostrarAlerta}
-      />
-    </ModalFlotante>
-
-      {mostrarAlerta && (
+      <ModalFlotante
+        open={abierto}
+        onClose={handleCerrar}
+        onConfirm={handleConfirmar}
+        titulo='Crear sets de productos'
+        cancelLabel='Cancelar'
+        confirmLabel={cargando ? 'Creando...' : 'Crear'}
+        disabledConfirm={cargando}
+      >
+        <FormaCrearSetsProducto
+          nombreSetsProducto={nombreSetsProducto}
+          setNombreSetsProducto={setNombreSetsProducto}
+          nombreVisible={nombreVisible}
+          setNombreVisible={setNombreVisible}
+          descripcionSetsProducto={descripcionSetsProducto}
+          setDescripcionSetsProducto={setDescripcionSetsProducto}
+          productos={productos}
+          setProductos={setProductos}
+          mostrarAlerta={mostrarAlerta}
+          setMostrarAlerta={setMostrarAlerta}
+          erroresCampos={erroresCampos}
+          setErroresCampos={setErroresCampos}
+        />
+      </ModalFlotante>
+
+      {mostrarAlerta && !exito && !error && (
         <Alerta
           tipo="warning"
           mensaje={mensajeAlerta}
-          duracion={3000}
+          duracion={2500}
           sx={{ margin: 3 }}
           cerrable
           onClose={() => setMostrarAlerta(false)}
@@ -115,7 +156,7 @@ const ModalCrearSetsProductos = ({ abierto = false, onCerrar, onCreado }) => {
         <Alerta
           tipo={exito ? 'success' : 'error'}
           mensaje={mensaje}
-          duracion={exito ? 3000 : 3000}
+          duracion={exito ? 2500 : 2500}
           sx={{ margin: 3 }}
           cerrable
           onClose={error ? () => setError(false) : undefined}

From 6a51b83604192a13c09a5c4fbaa8318ed6f8eb4a Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Sun, 1 Jun 2025 15:52:18 -0600
Subject: [PATCH 046/160] Feat: manejar la seleccion de empleados y sets con
 una lista de transferencia

---
 .../Empleados/GrupoEmpleadosLectura.js        |   4 +
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 516 ++++++++++++------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |   6 +-
 3 files changed, 364 insertions(+), 162 deletions(-)

diff --git a/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js b/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
index efc00983..4f16ced8 100644
--- a/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
+++ b/src/Dominio/Modelos/Empleados/GrupoEmpleadosLectura.js
@@ -12,6 +12,8 @@ export class GrupoEmpleadosLectura {
     idsSetProductos = [],
     empleados = [],
     idsEmpleados = [],
+    empleadosActualizar = [],
+    setProductosActualizar = [],
   }) {
     this.idGrupo = idGrupo;
     this.nombre = nombre;
@@ -20,5 +22,7 @@ export class GrupoEmpleadosLectura {
     this.idsSetProductos = idsSetProductos;
     this.empleados = empleados;
     this.idsEmpleados = idsEmpleados;
+    this.empleadosActualizar = empleadosActualizar;
+    this.setProductosActualizar = setProductosActualizar;
   }
 }
diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 85f3e93a..2fa55790 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -3,18 +3,40 @@ import CampoTexto from '@Atomos/CampoTexto';
 import { useState, useEffect } from 'react';
 import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
 import obtenerEmpleados from '@Servicios/obtenerEmpleados';
-import TablaSetsEmpleados from '@Organismos/TablaSetsEmpleados';
 import { useAuth } from '@Hooks/AuthProvider';
-import { Box, Button, Chip, Grid } from '@mui/material';
+import {
+  Box,
+  Button,
+  Grid,
+  Card,
+  CardHeader,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Checkbox,
+  Divider,
+} from '@mui/material';
 import Texto from '@Atomos/Texto';
 
+// Funciones auxiliares para la lista de transferencia
+function not(a, b) {
+  return a.filter((value) => !b.find((item) => item.id === value.id));
+}
+
+function intersection(a, b) {
+  return a.filter((value) => b.find((item) => item.id === value.id));
+}
+
+function union(a, b) {
+  return [...a, ...not(b, a)];
+}
+
 const InfoGrupoEmpleadosEditable = ({
   nombre: nombreInicial,
   descripcion: descripcionInicial,
   setsProductos: setsProductosInicial,
-  idsSetProductos: idsSetsProductosInicial, // IDs iniciales de sets de productos
   empleados: empleadosInicial,
-  idsEmpleados: idsEmpleadosInicial, // IDs iniciales de empleados
 }) => {
   const [productosDisponibles, setProductosDisponibles] = useState([]);
   const [empleadosDisponibles, setEmpleadosDisponibles] = useState([]);
@@ -24,128 +46,262 @@ const InfoGrupoEmpleadosEditable = ({
   // Estados locales
   const [nombre, setNombre] = useState(nombreInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
-  const [setsProductos, setSetsProductos] = useState(setsProductosInicial || []);
-  const [empleados, setEmpleados] = useState(empleadosInicial || []);
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
 
-  // Estados para manejar las selecciones en las tablas - INICIALIZADOS CON LOS IDs
-  const [productosSeleccionados, setProductosSeleccionados] = useState(
-    idsSetsProductosInicial || []
-  );
-  const [empleadosSeleccionados, setEmpleadosSeleccionados] = useState(idsEmpleadosInicial || []);
+  // Estados para la lista de transferencia de empleados
+  const [checkedEmpleados, setCheckedEmpleados] = useState([]);
+  const [leftEmpleados, setLeftEmpleados] = useState([]);
+  const [rightEmpleados, setRightEmpleados] = useState(empleadosInicial || []);
+
+  // Estados para la lista de transferencia de sets productos
+  const [checkedSets, setCheckedSets] = useState([]);
+  const [leftSets, setLeftSets] = useState([]);
+  const [rightSets, setRightSets] = useState(setsProductosInicial || []);
 
   useEffect(() => {
     const obtenerDatos = async () => {
       const productos = await obtenerSetsProductos(clienteSeleccionado);
-      setProductosDisponibles(productos);
+      console.log('Productos obtenidos:', productos);
+      setLeftSets(productos.filter((prod) => !rightSets.find((r) => r.id === prod.id)));
 
       const empleadosData = await obtenerEmpleados(clienteSeleccionado);
-      setEmpleadosDisponibles(empleadosData);
+      setLeftEmpleados(empleadosData.filter((emp) => !rightEmpleados.find((r) => r.id === emp.id)));
     };
 
     obtenerDatos();
   }, [clienteSeleccionado]);
 
-  // Efecto para sincronizar cuando cambien los IDs iniciales (por si se recarga el componente)
-  useEffect(() => {
-    if (idsSetsProductosInicial && idsSetsProductosInicial.length > 0) {
-      setProductosSeleccionados(idsSetsProductosInicial);
-    }
-  }, [idsSetsProductosInicial]);
+  // Handlers para empleados
+  const handleToggleEmpleados = (value) => () => {
+    const currentIndex = checkedEmpleados.findIndex((item) => item.id === value.id);
+    const newChecked = [...checkedEmpleados];
 
-  useEffect(() => {
-    if (idsEmpleadosInicial && idsEmpleadosInicial.length > 0) {
-      setEmpleadosSeleccionados(idsEmpleadosInicial);
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
     }
-  }, [idsEmpleadosInicial]);
 
-  // Efecto para mantener sincronizados los chips con las selecciones
-  useEffect(() => {
-    if (productosDisponibles.length > 0 && productosSeleccionados.length > 0) {
-      const productosActualizados = productosDisponibles.filter((producto) =>
-        productosSeleccionados.includes(producto.id)
-      );
-      setSetsProductos(productosActualizados);
-    }
-  }, [productosDisponibles, productosSeleccionados]);
+    setCheckedEmpleados(newChecked);
+  };
 
-  useEffect(() => {
-    if (empleadosDisponibles.length > 0 && empleadosSeleccionados.length > 0) {
-      const empleadosActualizados = empleadosDisponibles.filter((empleado) =>
-        empleadosSeleccionados.includes(empleado.id)
-      );
-      setEmpleados(empleadosActualizados);
-    }
-  }, [empleadosDisponibles, empleadosSeleccionados]);
+  const handleAllLeftEmpleados = () => {
+    setLeftEmpleados(leftEmpleados.concat(rightEmpleados));
+    setRightEmpleados([]);
+  };
+
+  const handleAllRightEmpleados = () => {
+    setRightEmpleados(rightEmpleados.concat(leftEmpleados));
+    setLeftEmpleados([]);
+  };
+
+  const handleCheckedRightEmpleados = () => {
+    const leftChecked = intersection(checkedEmpleados, leftEmpleados);
+    setRightEmpleados(rightEmpleados.concat(leftChecked));
+    setLeftEmpleados(not(leftEmpleados, leftChecked));
+    setCheckedEmpleados(not(checkedEmpleados, leftChecked));
+  };
+
+  const handleCheckedLeftEmpleados = () => {
+    const rightChecked = intersection(checkedEmpleados, rightEmpleados);
+    setLeftEmpleados(leftEmpleados.concat(rightChecked));
+    setRightEmpleados(not(rightEmpleados, rightChecked));
+    setCheckedEmpleados(not(checkedEmpleados, rightChecked));
+  };
 
-  // Manejar cambios en la selección de productos
-  const handleSeleccionProductos = (selectionData) => {
-    console.log('Selecciones productos recibidas:', selectionData);
+  // Handlers para sets productos
+  const handleToggleSets = (value) => () => {
+    const currentIndex = checkedSets.findIndex((item) => item.id === value.id);
+    const newChecked = [...checkedSets];
 
-    let seleccionesArray = [];
-    if (selectionData && selectionData.ids && selectionData.ids instanceof Set) {
-      seleccionesArray = Array.from(selectionData.ids);
-    } else if (Array.isArray(selectionData)) {
-      seleccionesArray = selectionData;
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
     }
 
-    setProductosSeleccionados(seleccionesArray);
+    setCheckedSets(newChecked);
+  };
 
-    // Actualizar los chips basándose en las selecciones
-    const productosActualizados = productosDisponibles.filter((producto) =>
-      seleccionesArray.includes(producto.id)
-    );
-    setSetsProductos(productosActualizados);
+  const handleAllLeftSets = () => {
+    setLeftSets(leftSets.concat(rightSets));
+    setRightSets([]);
   };
 
-  // Manejar cambios en la selección de empleados
-  const handleSeleccionEmpleados = (selectionData) => {
-    console.log('Selecciones empleados recibidas:', selectionData);
-    let seleccionesArray = [];
-    if (selectionData && selectionData.ids && selectionData.ids instanceof Set) {
-      seleccionesArray = Array.from(selectionData.ids);
-    } else if (Array.isArray(selectionData)) {
-      seleccionesArray = selectionData;
-    }
+  const handleAllRightSets = () => {
+    setRightSets(rightSets.concat(leftSets));
+    setLeftSets([]);
+  };
+
+  const handleCheckedRightSets = () => {
+    const leftChecked = intersection(checkedSets, leftSets);
+    setRightSets(rightSets.concat(leftChecked));
+    setLeftSets(not(leftSets, leftChecked));
+    setCheckedSets(not(checkedSets, leftChecked));
+  };
 
-    setEmpleadosSeleccionados(seleccionesArray);
+  const handleCheckedLeftSets = () => {
+    const rightChecked = intersection(checkedSets, rightSets);
+    setLeftSets(leftSets.concat(rightChecked));
+    setRightSets(not(rightSets, rightChecked));
+    setCheckedSets(not(checkedSets, rightChecked));
+  };
+
+  const numberOfCheckedEmpleados = (items) => intersection(checkedEmpleados, items).length;
+  const numberOfCheckedSets = (items) => intersection(checkedSets, items).length;
 
-    // Actualizar los chips basándose en las selecciones
-    const empleadosActualizados = empleadosDisponibles.filter((empleado) =>
-      seleccionesArray.includes(empleado.id)
-    );
-    setEmpleados(empleadosActualizados);
+  const handleToggleAllEmpleados = (items) => () => {
+    if (numberOfCheckedEmpleados(items) === items.length) {
+      setCheckedEmpleados(not(checkedEmpleados, items));
+    } else {
+      setCheckedEmpleados(union(checkedEmpleados, items));
+    }
   };
 
-  // Preparar filas para la tabla de empleados
-  const filas = empleadosDisponibles.map((empleado) => ({
-    id: empleado.id,
-    nombreCompleto: empleado.nombre,
-    correo: empleado.correo,
-    areaTrabajo: empleado.area,
-  }));
-  console.log('Productos seleccionados:', productosSeleccionados);
-  console.log('Empleados seleccionados:', empleadosSeleccionados);
+  const handleToggleAllSets = (items) => () => {
+    if (numberOfCheckedSets(items) === items.length) {
+      setCheckedSets(not(checkedSets, items));
+    } else {
+      setCheckedSets(union(checkedSets, items));
+    }
+  };
+
+  const customListEmpleados = (title, items) => (
+    <Card>
+      <CardHeader
+        sx={{ px: 2, py: 1 }}
+        avatar={
+          <Checkbox
+            onClick={handleToggleAllEmpleados(items)}
+            checked={numberOfCheckedEmpleados(items) === items.length && items.length !== 0}
+            indeterminate={
+              numberOfCheckedEmpleados(items) !== items.length &&
+              numberOfCheckedEmpleados(items) !== 0
+            }
+            disabled={items.length === 0}
+            inputProps={{
+              'aria-label': 'all items selected',
+            }}
+          />
+        }
+        title={title}
+        subheader={`${numberOfCheckedEmpleados(items)}/${items.length} seleccionados`}
+      />
+      <Divider />
+      <List
+        sx={{
+          width: 350,
+          height: 300,
+          bgcolor: 'background.paper',
+          overflow: 'auto',
+        }}
+        dense
+        component='div'
+        role='list'
+      >
+        {items.map((value) => {
+          const labelId = `transfer-list-empleados-${value.id}-label`;
+
+          return (
+            <ListItemButton key={value.id} role='listitem' onClick={handleToggleEmpleados(value)}>
+              <ListItemIcon>
+                <Checkbox
+                  checked={checkedEmpleados.some((item) => item.id === value.id)}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{
+                    'aria-labelledby': labelId,
+                  }}
+                />
+              </ListItemIcon>
+              <ListItemText
+                id={labelId}
+                primary={value.nombreCompleto || value.nombre}
+                secondary={value.correoElectronico || value.correo}
+              />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Card>
+  );
+
+  const customListSets = (title, items) => (
+    <Card>
+      <CardHeader
+        sx={{ px: 2, py: 1 }}
+        avatar={
+          <Checkbox
+            onClick={handleToggleAllSets(items)}
+            checked={numberOfCheckedSets(items) === items.length && items.length !== 0}
+            indeterminate={
+              numberOfCheckedSets(items) !== items.length && numberOfCheckedSets(items) !== 0
+            }
+            disabled={items.length === 0}
+            inputProps={{
+              'aria-label': 'all items selected',
+            }}
+          />
+        }
+        title={title}
+        subheader={`${numberOfCheckedSets(items)}/${items.length} seleccionados`}
+      />
+      <Divider />
+      <List
+        sx={{
+          width: 350,
+          height: 300,
+          bgcolor: 'background.paper',
+          overflow: 'auto',
+        }}
+        dense
+        component='div'
+        role='list'
+      >
+        {items.map((value) => {
+          const labelId = `transfer-list-sets-${value.id}-label`;
+
+          return (
+            <ListItemButton key={value.id} role='listitem' onClick={handleToggleSets(value)}>
+              <ListItemIcon>
+                <Checkbox
+                  checked={checkedSets.some((item) => item.id === value.id)}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{
+                    'aria-labelledby': labelId,
+                  }}
+                />
+              </ListItemIcon>
+              <ListItemText
+                id={labelId}
+                primary={value.nombreProducto}
+                secondary={`ID: ${value.id}`}
+              />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Card>
+  );
 
   const handleGuardar = () => {
-    if (!nombre || !descripcion || setsProductos.length === 0 || empleados.length === 0) {
+    if (!nombre || !descripcion || rightSets.length === 0 || rightEmpleados.length === 0) {
       setMostrarAlerta(true);
       return;
     }
 
     console.log('Nombre:', nombre);
     console.log('Descripción:', descripcion);
-    console.log('Sets de Productos:', setsProductos);
-    console.log('Empleados:', empleados);
-    console.log('IDs Sets Productos:', productosSeleccionados);
-    console.log('IDs Empleados:', empleadosSeleccionados);
+    console.log('Sets de Productos:', rightSets);
+    console.log('Empleados:', rightEmpleados);
   };
 
   return (
-    <Box p={3}>
-      <Grid container spacing={2}>
+    <Box sx={{ width: '800px', margin: '0 auto', borderRadius: '10px' }}>
+      <Grid container spacing={3}>
         {/* Nombre */}
-        <Grid item xs={12}>
+        <Grid item xs={20} direction={'column'}>
           <Texto variant='h6'>Nombre:</Texto>
           <CampoTexto
             fullWidth
@@ -153,12 +309,12 @@ const InfoGrupoEmpleadosEditable = ({
             value={nombre}
             placeholder='Nombre del grupo'
             onChange={(e) => setNombre(e.target.value)}
-            sx={{ mt: 1 }}
+            sx={{ mt: 1, mb: 2, width: '300px', overflow: 'auto' }}
           />
         </Grid>
 
         {/* Descripción */}
-        <Grid item xs={12}>
+        <Grid item xs={20} direction={'column'}>
           <Texto variant='h6'>Descripción:</Texto>
           <CampoTexto
             fullWidth
@@ -166,88 +322,130 @@ const InfoGrupoEmpleadosEditable = ({
             value={descripcion}
             placeholder='Escribe una descripción'
             onChange={(e) => setDescripcion(e.target.value)}
-            sx={{ mt: 1 }}
+            sx={{ mt: 1, mb: 2, width: '400px', overflow: 'auto' }}
           />
         </Grid>
 
         {/* Sets de Productos */}
         <Grid item xs={12}>
           <Texto variant='h6'>Sets de Productos:</Texto>
-          <Box display='flex' gap={1} flexWrap='wrap' mb={2}>
-            {setsProductos?.length > 0 ? (
-              setsProductos.map((set, index) => (
-                <Chip
-                  key={index}
-                  label={set.nombreProducto || set}
-                  sx={{
-                    borderRadius: '16px',
-                    backgroundColor: '#e0f7fa',
-                    color: '#006064',
-                  }}
-                />
-              ))
-            ) : (
-              <Texto variant='body1' sx={{ color: '#9e9e9e' }}>
-                No especificada
-              </Texto>
-            )}
+          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', mt: 2 }}>
+            <Grid
+              container
+              spacing={2}
+              justifyContent='center'
+              alignItems='center'
+              sx={{ maxWidth: '800px' }}
+            >
+              <Grid item>{customListSets('Sets Disponibles', leftSets)}</Grid>
+              <Grid item>
+                <Grid container direction='column' alignItems='center'>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleAllRightSets}
+                    disabled={leftSets.length === 0}
+                    aria-label='move all right'
+                  >
+                    ≫
+                  </Button>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleCheckedRightSets}
+                    disabled={numberOfCheckedSets(leftSets) === 0}
+                    aria-label='move selected right'
+                  >
+                    &gt;
+                  </Button>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleCheckedLeftSets}
+                    disabled={numberOfCheckedSets(rightSets) === 0}
+                    aria-label='move selected left'
+                  >
+                    &lt;
+                  </Button>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleAllLeftSets}
+                    disabled={rightSets.length === 0}
+                    aria-label='move all left'
+                  >
+                    ≪
+                  </Button>
+                </Grid>
+              </Grid>
+              <Grid item>{customListSets('Sets Seleccionados', rightSets)}</Grid>
+            </Grid>
           </Box>
-          <TablaSetsEmpleados
-            elevacion={1}
-            sx={{ width: '100%', height: '350px' }}
-            columnas={[
-              { field: 'id', headerName: 'Id', width: 100 },
-              { field: 'nombreProducto', headerName: 'Nombre', width: 220 },
-              { field: 'tipo', headerName: 'Tipo', width: 100 },
-            ]}
-            filas={productosDisponibles}
-            paginacion={4}
-            checkBox={true}
-            selectionModel={productosSeleccionados}
-            onRowSelectionModelChange={handleSeleccionProductos}
-          />
         </Grid>
 
-        {/* Empleados */}
+        {/* Lista de transferencia de empleados */}
         <Grid item xs={12}>
           <Texto variant='h6'>Empleados:</Texto>
-          <Box display='flex' gap={1} flexWrap='wrap' mb={2}>
-            {empleados?.length > 0 ? (
-              empleados.map((empleado, index) => (
-                <Chip
-                  key={index}
-                  label={
-                    empleado.nombre && empleado.correo && empleado.area
-                      ? `${empleado.nombre} | ${empleado.correo} | ${empleado.area}`
-                      : empleado.toString()
-                  }
-                  sx={{
-                    borderRadius: '16px',
-                    backgroundColor: '#e0f7fa',
-                    color: '#006064',
-                  }}
-                />
-              ))
-            ) : (
-              <Texto variant='body1' sx={{ color: '#9e9e9e' }}>
-                No especificada
-              </Texto>
-            )}
+          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', mt: 2 }}>
+            <Grid
+              container
+              spacing={2}
+              justifyContent='center'
+              alignItems='center'
+              sx={{ maxWidth: '800px' }}
+            >
+              <Grid item>{customListEmpleados('Empleados Disponibles', leftEmpleados)}</Grid>
+              <Grid item>
+                <Grid container direction='column' alignItems='center'>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleAllRightEmpleados}
+                    disabled={leftEmpleados.length === 0}
+                    aria-label='move all right'
+                  >
+                    ≫
+                  </Button>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleCheckedRightEmpleados}
+                    disabled={numberOfCheckedEmpleados(leftEmpleados) === 0}
+                    aria-label='move selected right'
+                  >
+                    &gt;
+                  </Button>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleCheckedLeftEmpleados}
+                    disabled={numberOfCheckedEmpleados(rightEmpleados) === 0}
+                    aria-label='move selected left'
+                  >
+                    &lt;
+                  </Button>
+                  <Button
+                    sx={{ my: 0.5 }}
+                    variant='outlined'
+                    size='small'
+                    onClick={handleAllLeftEmpleados}
+                    disabled={rightEmpleados.length === 0}
+                    aria-label='move all left'
+                  >
+                    ≪
+                  </Button>
+                </Grid>
+              </Grid>
+              <Grid item>{customListEmpleados('Empleados Seleccionados', rightEmpleados)}</Grid>
+            </Grid>
           </Box>
-          <TablaSetsEmpleados
-            elevacion={1}
-            sx={{}}
-            columnas={[
-              { field: 'nombreCompleto', headerName: 'Nombre del Empleado', flex: 0.9 },
-              { field: 'correo', headerName: 'Correo Electrónico', flex: 1 },
-              { field: 'areaTrabajo', headerName: 'Área de Trabajo', flex: 0.85 },
-            ]}
-            filas={filas}
-            paginacion={4}
-            checkBox={true}
-            selectionModel={empleadosSeleccionados}
-            onRowSelectionModelChange={handleSeleccionEmpleados}
-          />
         </Grid>
 
         {/* Botón Guardar */}
@@ -261,7 +459,7 @@ const InfoGrupoEmpleadosEditable = ({
       {mostrarAlerta && (
         <Alerta
           tipo='warning'
-          mensaje='Completa todos los campos y selecciona al menos un producto.'
+          mensaje='Completa todos los campos y selecciona al menos un producto y un empleado.'
           cerrable
           duracion={10000}
           onClose={() => setMostrarAlerta(false)}
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index ea2f7bd2..4b49d0fe 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -239,7 +239,7 @@ const ListaGrupoEmpleados = () => {
           onClose={() => setAbrirModalEditar(false)}
           titulo='Editar Grupo de Empleados'
           tituloVariant='h4'
-          customWidth={700}
+          customWidth={900}
           botones={[
             {
               label: 'Guardar',
@@ -268,9 +268,9 @@ const ListaGrupoEmpleados = () => {
             <InfoGrupoEmpleadosEditable
               nombre={grupoEmpleados?.nombre || ''}
               descripcion={grupoEmpleados?.descripcion || ''}
-              setsProductos={grupoEmpleados?.setsProductos || []}
+              setsProductos={grupoEmpleados?.setProductosActualizar || []}
               idsSetProductos={grupoEmpleados?.idsSetProductos || []}
-              empleados={grupoEmpleados?.empleados || []}
+              empleados={grupoEmpleados?.empleadosActualizar || []}
               idsEmpleados={grupoEmpleados?.idsEmpleados || []}
             />
           )}

From 9f2d957ee8380028ac73a50b2c1c2026eb9f592a Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Sun, 1 Jun 2025 17:26:45 -0600
Subject: [PATCH 047/160] Implement user update functionality with validation
 and API integration

---
 .../Modelos/Usuarios/ActualizarUsuario.js     |  69 ++++
 .../Usuarios/RepositorioActualizarUsuario.js  |  25 ++
 src/Utilidades/Constantes/rutas.js            |   1 +
 src/Utilidades/Constantes/rutasAPI.js         |   4 +-
 .../FormularioActualizarUsuario.jsx           | 297 ++++++++++++++++++
 .../Componentes/Organismos/ModalUsuarios.jsx  |   5 +
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx | 117 ++++---
 src/hooks/Usuarios/useAccionesUsuario.js      | 139 ++++++++
 src/hooks/Usuarios/useActualizarUsuario.js    |  25 ++
 9 files changed, 629 insertions(+), 53 deletions(-)
 create mode 100644 src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
 create mode 100644 src/Dominio/Repositorios/Usuarios/RepositorioActualizarUsuario.js
 create mode 100644 src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
 create mode 100644 src/hooks/Usuarios/useAccionesUsuario.js
 create mode 100644 src/hooks/Usuarios/useActualizarUsuario.js

diff --git a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
new file mode 100644
index 00000000..d19f142e
--- /dev/null
+++ b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
@@ -0,0 +1,69 @@
+// Modelo para actualizar un usuario
+
+export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) => {
+  const errores = {};
+  const emailValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const telefonoValido = /^\d{10}$/;
+
+  if (!datos.idUsuario) {
+    errores.idUsuario = true;
+  } else if (datos.idUsuario.toString().length > 10) {
+    errores.idUsuario = 'El idUsuario no debe tener más de 10 caracteres';
+  }
+
+  if (!datos.nombreCompleto || datos.nombreCompleto.trim().length === 0) {
+    errores.nombreCompleto = 'El nombre completo es obligatorio';
+  }
+
+  if (!datos.correoElectronico) {
+    errores.correoElectronico = 'El correo electrónico es obligatorio';
+  } else if (!emailValido.test(datos.correoElectronico)) {
+    errores.correoElectronico = 'Correo electrónico inválido';
+  } else if (
+    usuariosExistentes.some(
+      (usuario) =>
+        usuario.correoElectronico === datos.correoElectronico &&
+        usuario.idUsuario !== datos.idUsuario
+    )
+  ) {
+    errores.correoElectronico = 'Este correo ya está registrado';
+  }
+
+  if (datos.contrasenia && datos.contrasenia.length < 6) {
+    errores.contrasenia = 'La contraseña debe tener al menos 6 caracteres';
+  }
+
+  if (!datos.numeroTelefono) {
+    errores.numeroTelefono = 'El número de teléfono es obligatorio';
+  } else if (!telefonoValido.test(datos.numeroTelefono)) {
+    errores.numeroTelefono = 'El número de teléfono debe tener exactamente 10 dígitos';
+  }
+
+  if (!datos.direccion || datos.direccion.trim().length === 0) {
+    errores.direccion = 'La dirección es obligatoria';
+  }
+
+  if (!datos.fechaNacimiento) {
+    errores.fechaNacimiento = 'La fecha de nacimiento es obligatoria';
+  } else {
+    const hoy = new Date();
+    const fecha = new Date(datos.fechaNacimiento);
+    if (fecha > hoy) {
+      errores.fechaNacimiento = 'La fecha no puede ser futura';
+    }
+  }
+
+  if (!datos.genero) {
+    errores.genero = 'El género es obligatorio';
+  }
+
+  if (typeof datos.estatus === 'undefined' || datos.estatus === null) {
+    errores.estatus = 'El estatus es obligatorio';
+  }
+
+  if (!datos.idRol) {
+    errores.idRol = 'El rol es obligatorio';
+  }
+
+  return errores;
+};
diff --git a/src/Dominio/Repositorios/Usuarios/RepositorioActualizarUsuario.js b/src/Dominio/Repositorios/Usuarios/RepositorioActualizarUsuario.js
new file mode 100644
index 00000000..cfc3ef8c
--- /dev/null
+++ b/src/Dominio/Repositorios/Usuarios/RepositorioActualizarUsuario.js
@@ -0,0 +1,25 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarUsuario {
+  static async actualizar(cambios) {
+    try {
+      const respuesta = await axios.put(
+        RUTAS_API.USUARIOS.ACTUALIZAR_USUARIO,
+        { cambios },
+        {
+          withCredentials: true,
+          headers: {
+            'x-api-key': API_KEY,
+          },
+        }
+      );
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al actualizar';
+      throw new Error(mensaje);
+    }
+  }
+}
diff --git a/src/Utilidades/Constantes/rutas.js b/src/Utilidades/Constantes/rutas.js
index 9e391155..afd9eac0 100644
--- a/src/Utilidades/Constantes/rutas.js
+++ b/src/Utilidades/Constantes/rutas.js
@@ -42,6 +42,7 @@ export const RUTAS = {
       BASE: '/usuarios',
       CONSULTAR_ROLES: '/consultar-roles',
       CONFIRMAR_CREACION: '/confirmar-creacion',
+      ACTUALIZAR_USUARIO: '/actualizar-usuario',
     },
   },
   SISTEMA_TIENDA: {
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..7d64bd3d 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -13,13 +13,13 @@ const BASE_EVENTOS = `${BASE_URL}/api/eventos`;
 const BASE_PAGOS = `${BASE_URL}/api/pagos`;
 const BASE_AUTENTICACION = `${BASE_URL}/api/autenticacion`;
 
-
 export const RUTAS_API = {
   USUARIOS: {
     BASE: BASE_USUARIOS,
     CONSULTAR_LISTA: `${BASE_USUARIOS}/consultar-lista-usuarios`,
     CONSULTAR_USUARIO: `${BASE_USUARIOS}/consultar-usuario`,
     ELIMINAR_USUARIOS: `${BASE_USUARIOS}/eliminar-usuarios`,
+    ACTUALIZAR_USUARIO: `${BASE_USUARIOS}/actualizar-usuario`,
   },
 
   AUTENTICACION: {
@@ -27,7 +27,7 @@ export const RUTAS_API = {
     ACTIVAR_2FA: `${BASE_AUTENTICACION}/activar-2fa`,
     VERIFICAR_2FA: `${BASE_AUTENTICACION}/verificar-2fa`,
   },
-  
+
   CATEGORIAS: {
     BASE: BASE_CATEGORIAS,
     CONSULTAR_LISTA: `${BASE_CATEGORIAS}/consultar-lista-categorias`,
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
new file mode 100644
index 00000000..f12dbb83
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -0,0 +1,297 @@
+import { useState, useEffect } from 'react';
+import { Box, Grid } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateField } from '@mui/x-date-pickers/DateField';
+import CampoTexto from '@Atomos/CampoTexto';
+import CampoSelect from '@Atomos/CampoSelect';
+import Alerta from '@Moleculas/Alerta';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import FormularioActualizarUsuario from '@Organismos/Formularios/FormularioActualizarUsuario';
+import { useConsultarClientes } from '@Hooks/Clientes/useConsultarClientes';
+import { useActualizarUsuario } from '@Hooks/Usuarios/useActualizarUsuario';
+import CampoSelectMultiple from '@Atomos/CampoSelectMultiple';
+import { useAccionesUsuario } from '@Hooks/Usuarios/useAccionesUsuario';
+
+const FormularioActualizarUsuario = ({ open, onClose, usuario, onUsuarioActualizado }) => {
+  const {
+    datosUsuario,
+    setDatosUsuario,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    cargando,
+    esEdicion,
+    manejarCambio,
+    manejarFechaNacimiento,
+    obtenerHelperText,
+    handleGuardar,
+    limpiarFormulario,
+    CAMPO_OBLIGATORIO,
+  } = useAccionesUsuario(usuarioInicial); // usuarioInicial es null para crear, o el usuario para editar
+
+  useEffect(() => {
+    if (usuario) {
+      setDatosUsuario({
+        nombreCompleto: usuario.nombreCompleto || '',
+        apellido: usuario.apellido || '',
+        correoElectronico: usuario.correoElectronico || '',
+        numeroTelefono: usuario.numeroTelefono || '',
+        direccion: usuario.direccion || '',
+        codigoPostal: usuario.codigoPostal || '',
+        fechaNacimiento: usuario.fechaNacimiento || null,
+        genero: usuario.genero || '',
+        cliente: usuario.cliente || [],
+        rol: usuario.rol || '',
+        contrasenia: '',
+      });
+    }
+  }, [usuario]);
+
+  const { errores, handleActualizarUsuario } = useActualizarUsuario();
+  const { roles, cargando: cargandoRoles } = useConsultarRoles();
+  const { clientes } = useConsultarClientes();
+  const esSuperAdmin = datosUsuario.rol === 1;
+
+  const manejarConfirmacion = async () => {
+    const resultado = await handleActualizarUsuario({
+      ...datosUsuario,
+      idUsuario: usuario.idUsuario,
+    });
+
+    if (resultado?.mensaje) {
+      if (resultado.exito) {
+        setAlerta({
+          tipo: 'success',
+          mensaje: `Usuario actualizado exitosamente.`,
+          icono: true,
+          cerrable: true,
+          centradoInferior: true,
+          duracion: 3000,
+        });
+        setTimeout(async () => {
+          if (onUsuarioActualizado) await onUsuarioActualizado();
+          manejarCierre();
+        }, 2000);
+      } else {
+        setAlerta({
+          tipo: 'error',
+          mensaje: resultado.mensaje,
+        });
+      }
+    }
+  };
+
+  const manejarCierre = () => {
+    setAlerta(null);
+    onClose();
+  };
+
+  const estiloCuadricula = {
+    display: 'flex',
+    justifyContent: 'center',
+  };
+
+  return (
+    <>
+      <ModalFlotante
+        open={open}
+        onClose={manejarCierre}
+        onConfirm={manejarConfirmacion}
+        titulo='Actualizar usuario'
+      >
+        <Box
+          component='form'
+          method='POST'
+          sx={{
+            flexGrow: 1,
+            '& .MuiTextField-root': { margin: 1, width: '30ch' },
+            '& .MuiFormControl-root': { margin: 1, minWidth: '30ch' },
+          }}
+          noValidate
+          autoComplete='off'
+        >
+          <Grid container columns={12}>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoTexto
+                label='Nombre'
+                name='nombreCompleto'
+                value={datosUsuario.nombreCompleto}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.nombreCompleto}
+                helperText={errores.nombreCompleto && CAMPO_OBLIGATORIO}
+                inputProps={{
+                  maxLength: 50,
+                }}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoTexto
+                label='Apellido'
+                name='apellido'
+                value={datosUsuario.apellido}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.apellido}
+                helperText={errores.apellido && CAMPO_OBLIGATORIO}
+                inputProps={{
+                  maxLength: 50,
+                }}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
+                <DateField
+                  required
+                  label='Fecha de nacimiento'
+                  value={datosUsuario.fechaNacimiento}
+                  onChange={manejarFechaNacimiento}
+                  format='DD/MM/YYYY'
+                  sx={{ width: '30ch' }}
+                  slotProps={{
+                    textField: {
+                      error: !!errores.fechaNacimiento,
+                      helperText:
+                        errores.fechaNacimiento === true
+                          ? CAMPO_OBLIGATORIO
+                          : errores.fechaNacimiento || '',
+                    },
+                  }}
+                />
+              </LocalizationProvider>
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoSelect
+                required
+                label='Género'
+                name='genero'
+                value={datosUsuario.genero}
+                onChange={manejarCambio}
+                size='medium'
+                error={!!errores.genero}
+                helperText={errores.genero && CAMPO_OBLIGATORIO}
+                options={[
+                  { value: 'Hombre', label: 'Hombre' },
+                  { value: 'Mujer', label: 'Mujer' },
+                  { value: 'Otro', label: 'Otro' },
+                ]}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoTexto
+                label='Correo Electrónico'
+                name='correoElectronico'
+                value={datosUsuario.correoElectronico}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.correoElectronico}
+                helperText={
+                  errores.correoElectronico === true
+                    ? CAMPO_OBLIGATORIO
+                    : errores.correoElectronico || ''
+                }
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoTexto
+                label='Número de Teléfono'
+                name='numeroTelefono'
+                value={datosUsuario.numeroTelefono}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.numeroTelefono}
+                helperText={
+                  errores.numeroTelefono === true ? CAMPO_OBLIGATORIO : errores.numeroTelefono || ''
+                }
+                inputProps={{
+                  maxLength: 10,
+                }}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoTexto
+                label='Dirección'
+                name='direccion'
+                value={datosUsuario.direccion}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.direccion}
+                helperText={errores.direccion && CAMPO_OBLIGATORIO}
+                inputProps={{
+                  maxLength: 100,
+                }}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoSelect
+                label='Rol'
+                name='rol'
+                value={datosUsuario.rol}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.rol}
+                helperText={errores.rol && CAMPO_OBLIGATORIO}
+                options={roles
+                  .filter((rol) => rol.idRol !== 3)
+                  .map((rol) => ({
+                    value: rol.idRol,
+                    label: rol.nombre,
+                  }))}
+                disabled={cargandoRoles}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoSelectMultiple
+                label='Cliente'
+                name='cliente'
+                value={datosUsuario.cliente}
+                onChange={manejarCambio}
+                required
+                size='medium'
+                error={!!errores.cliente}
+                helperText={errores.cliente && CAMPO_OBLIGATORIO}
+                options={clientes.map((cliente) => ({
+                  value: cliente.idCliente,
+                  label: cliente.nombreComercial,
+                }))}
+                disabled={esSuperAdmin}
+              />
+            </Grid>
+            <Grid size={6} sx={estiloCuadricula}>
+              <CampoTexto
+                label='Contraseña (dejar en blanco para no cambiar)'
+                name='contrasenia'
+                type='password'
+                value={datosUsuario.contrasenia}
+                onChange={manejarCambio}
+                size='medium'
+                error={!!errores.contrasenia}
+                autoComplete='new-password'
+                helperText={errores.contrasenia || ''}
+              />
+            </Grid>
+          </Grid>
+        </Box>
+      </ModalFlotante>
+      {alerta && (
+        <Alerta
+          sx={{ marginBottom: 2 }}
+          tipo={alerta.tipo}
+          mensaje={alerta.mensaje}
+          duracion='3000'
+          onClose={() => setAlerta(null)}
+          centradoInferior
+        />
+      )}
+    </>
+  );
+};
+
+export default FormularioActualizarUsuario;
diff --git a/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx b/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
new file mode 100644
index 00000000..f6a2a6ef
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
@@ -0,0 +1,5 @@
+import { Box } from '@mui/material';
+import Alerta from '@Moleculas/Alerta';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import FormaEmpleado from '@Organismos/Formularios/FormaEmpleado';
+import { useLeerUsuario } from '@Hooks/Usuarios/useLeerUsuario';
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 45234ef6..9711b419 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -21,6 +21,7 @@ import { useTheme } from '@mui/material';
 import { useActivar2FA } from '@Hooks/Usuarios/useActivar2FA';
 import Activar2FAModal from '@Organismos/Activar2FAModal';
 import Verificar2FAModal from '@Moleculas/Verificar2FAModal';
+//import FormularioActualizarUsuario from '@Organismos/Formularios/FormularioActualizarUsuario.jsx';
 
 const estiloImagenLogo = { marginRight: '1rem' };
 
@@ -44,21 +45,22 @@ const ListaUsuarios = () => {
   const navigate = useNavigate();
   const [alerta, setAlerta] = useState(null);
   const { usuarios, cargando, error, recargar } = useConsultarListaUsuarios();
-  const { roles} = useConsultarRoles();
+  const { roles } = useConsultarRoles();
   const { usuario: usuarioAutenticado } = useAuth();
   const [modalCrearUsuarioAbierto, setModalCrearUsuarioAbierto] = useState(false);
   const [idUsuarioSeleccionado, setIdUsuarioSeleccionado] = useState(null);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [modalActualizarAbierto, setModalActualizarAbierto] = useState(false);
   const {
     usuario,
     cargando: cargandoDetalle,
     error: errorDetalle,
   } = useUsuarioId(modalDetalleAbierto ? idUsuarioSeleccionado : null);
 
-    const [modal2FAAbierto, setModal2FAAbierto] = useState(false);
-    const { qrCode, cargando: cargandoQR, error: errorQR, setQrCode } = useActivar2FA();
+  const [modal2FAAbierto, setModal2FAAbierto] = useState(false);
+  const { qrCode, cargando: cargandoQR, error: errorQR, setQrCode } = useActivar2FA();
 
-    /** const manejarActivar2FA = async () => {
+  /** const manejarActivar2FA = async () => {
       await activar2FA({
         idUsuario: usuarioAutenticado?.idUsuario,
         nombre: usuarioAutenticado?.nombre,
@@ -68,7 +70,7 @@ const ListaUsuarios = () => {
     };
     */
   const opcionesRol = roles.map((rol) => ({
-    value: rol.idRol, 
+    value: rol.idRol,
     label: rol.nombre,
   }));
 
@@ -85,21 +87,21 @@ const ListaUsuarios = () => {
     await cerrarSesion();
   };
   const { cerrarSesion } = useAuth();
-const {
-  usuariosAEliminar,
-  abrirPopUp,
-  abrirModal2FA,
-  error2FA,
-  cargando2FA,
-  manejarSeleccion,
-  manejarAbrirPopUp,
-  manejarCerrarPopUp,
-  eliminarUsuarios,
-  manejarVerificar2FA,
-  manejarCerrarModal2FA,
-  codigo2FA,          
-  setCodigo2FA 
-} = useEliminarUsuarios(setAlerta, recargar);
+  const {
+    usuariosAEliminar,
+    abrirPopUp,
+    abrirModal2FA,
+    error2FA,
+    cargando2FA,
+    manejarSeleccion,
+    manejarAbrirPopUp,
+    manejarCerrarPopUp,
+    eliminarUsuarios,
+    manejarVerificar2FA,
+    manejarCerrarModal2FA,
+    codigo2FA,
+    setCodigo2FA,
+  } = useEliminarUsuarios(setAlerta, recargar);
 
   useEffect(() => {}, [usuariosAEliminar]);
 
@@ -257,7 +259,8 @@ const {
       backgroundColor: colores.verde[1],
       disabled: !usuarioAutenticado?.permisos?.includes(PERMISOS.ACTIVAR_2FA_SUPERADMIN),
     },
-  */];
+  */
+  ];
 
   const redirigirATienda = () => {
     navigate(RUTAS.SISTEMA_TIENDA.BASE, { replace: true });
@@ -388,8 +391,11 @@ const {
                 variant: 'contained',
                 color: 'primary',
                 backgroundColor: colores.altertex[1],
-                onClick: () => console.log('Editar usuario'),
-                disabled: true, 
+                onClick: () => {
+                  setModalDetalleAbierto(false);
+                  setTimeout(() => setModalActualizarAbierto(true), 100);
+                },
+                disabled: !usuarioAutenticado?.permisos?.includes(PERMISOS.ACTUALIZAR_USUARIO),
               },
               {
                 label: 'SALIR',
@@ -404,34 +410,34 @@ const {
               <p>Cargando usuario...</p>
             ) : usuario ? (
               <>
-              <InfoUsuario
-                modoEdicion={false}
-                cliente={
-                  usuario.clientes?.some((cliente) => cliente?.nombreCliente)
-                    ? usuario.clientes
-                        .filter((cliente) => cliente?.nombreCliente)
-                        .map((cliente) => cliente.nombreCliente)
-                        .join(', ')
-                    : 'Sin cliente asignado'
-                }
-                rol={obtenerIdRolPorNombre(usuario.rol)}
-                datosContacto={{
-                  email: usuario.correoElectronico,
-                  telefono: usuario.numeroTelefono,
-                  direccion: usuario.direccion,
-                }}
-                datosAdicionales={{
-                  nacimiento: new Date(usuario.fechaNacimiento).toLocaleDateString('es-MX'),
-                  genero: usuario.genero,
-                }}
-                estadoUsuario={{
-                  label: usuario.estatus === 1 ? 'Activo' : 'Inactivo',
-                  color: 'primary',
-                  shape: 'circular',
-                  backgroundColor: 'rgba(24, 50, 165, 1)',
-                }}
-                opcionesRol={opcionesRol}
-              />
+                <InfoUsuario
+                  modoEdicion={false}
+                  cliente={
+                    usuario.clientes?.some((cliente) => cliente?.nombreCliente)
+                      ? usuario.clientes
+                          .filter((cliente) => cliente?.nombreCliente)
+                          .map((cliente) => cliente.nombreCliente)
+                          .join(', ')
+                      : 'Sin cliente asignado'
+                  }
+                  rol={obtenerIdRolPorNombre(usuario.rol)}
+                  datosContacto={{
+                    email: usuario.correoElectronico,
+                    telefono: usuario.numeroTelefono,
+                    direccion: usuario.direccion,
+                  }}
+                  datosAdicionales={{
+                    nacimiento: new Date(usuario.fechaNacimiento).toLocaleDateString('es-MX'),
+                    genero: usuario.genero,
+                  }}
+                  estadoUsuario={{
+                    label: usuario.estatus === 1 ? 'Activo' : 'Inactivo',
+                    color: 'primary',
+                    shape: 'circular',
+                    backgroundColor: 'rgba(24, 50, 165, 1)',
+                  }}
+                  opcionesRol={opcionesRol}
+                />
               </>
             ) : (
               <p>No se encontró información del usuario.</p>
@@ -439,6 +445,15 @@ const {
           </ModalFlotante>
         )}
 
+        {modalActualizarAbierto && usuario && (
+          <FormularioActualizarUsuario
+            open={modalActualizarAbierto}
+            onClose={() => setModalActualizarAbierto(false)}
+            onAccion={recargar}
+            usuarioEdicion={usuario}
+          />
+        )}
+
         {errorDetalle && (
           <div style={{ marginTop: '2rem' }}>
             <Alerta tipo='error' mensaje={errorDetalle} icono cerrable centradoInferior />
diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
new file mode 100644
index 00000000..08284b03
--- /dev/null
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import dayjs from 'dayjs';
+import { RepositorioActualizarUsuario } from '@Repositorios/Usuarios/RepositorioActualizarUsuario';
+import { validarDatosActualizarUsuario } from '@Modelos/Usuarios/ActualizarUsuario';
+
+export const useAccionesUsuario = (usuarioInicial = null) => {
+  const esEdicion = !!usuarioInicial;
+  const [erroresValidacion, setErroresValidacion] = useState({});
+  const [cargando, setCargando] = useState(false);
+  const [alerta, setAlerta] = useState(null);
+
+  // Inicializar con datos de edición o vacío
+  const [datosUsuario, setDatosUsuario] = useState(() => {
+    if (esEdicion) {
+      let fechaNacimiento = null;
+      if (usuarioInicial.fechaNacimiento) {
+        fechaNacimiento = dayjs(usuarioInicial.fechaNacimiento);
+      }
+      return {
+        ...usuarioInicial,
+        idUsuario: usuarioInicial.idUsuario || usuarioInicial.id,
+        nombreCompleto: usuarioInicial.nombreCompleto || '',
+        correoElectronico: usuarioInicial.correoElectronico || '',
+        fechaNacimiento,
+      };
+    }
+    return {
+      nombreCompleto: '',
+      correoElectronico: '',
+      contrasenia: '',
+      numeroTelefono: '',
+      direccion: '',
+      fechaNacimiento: null,
+      genero: '',
+      rol: '',
+      cliente: [],
+    };
+  });
+
+  const CAMPO_OBLIGATORIO = 'Este campo es obligatorio';
+
+  // Métodos para manejar cambios
+  const manejarCambio = (evento) => {
+    const { name, value } = evento.target;
+    setDatosUsuario((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const manejarFechaNacimiento = (nuevaFecha) => {
+    setDatosUsuario((prev) => ({
+      ...prev,
+      fechaNacimiento: nuevaFecha,
+    }));
+  };
+
+  const obtenerHelperText = (campo) => {
+    const err = erroresValidacion[campo];
+    if (err) {
+      return typeof err === 'string' ? err : CAMPO_OBLIGATORIO;
+    }
+    return '';
+  };
+
+  const handleGuardar = async () => {
+    const datosProcesados = {
+      ...datosUsuario,
+      idUsuario: esEdicion ? usuarioInicial.idUsuario || usuarioInicial.id : datosUsuario.idUsuario,
+      fechaNacimiento: datosUsuario.fechaNacimiento
+        ? dayjs(datosUsuario.fechaNacimiento).format('YYYY-MM-DD')
+        : null,
+    };
+
+    const nuevosErrores = validarDatosActualizarUsuario(datosProcesados);
+
+    if (Object.keys(nuevosErrores).length > 0) {
+      setErroresValidacion(nuevosErrores);
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Corrige los errores en el formulario antes de guardar.',
+      });
+      return { exito: false };
+    }
+
+    setErroresValidacion({});
+    setAlerta(null);
+    setCargando(true);
+
+    try {
+      await RepositorioActualizarUsuario.actualizar(datosProcesados);
+      setAlerta({
+        tipo: 'success',
+        mensaje: esEdicion ? 'Usuario actualizado correctamente' : 'Usuario creado correctamente',
+      });
+      return {
+        exito: true,
+        mensaje: esEdicion ? 'Usuario actualizado correctamente' : 'Usuario creado correctamente',
+      };
+    } catch (error) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: error.message || 'Error al guardar el usuario',
+      });
+      return { exito: false, mensaje: error.message || 'Error al guardar el usuario' };
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  const limpiarFormulario = () => {
+    setDatosUsuario({
+      nombreCompleto: '',
+      correoElectronico: '',
+      contrasenia: '',
+      numeroTelefono: '',
+      direccion: '',
+      fechaNacimiento: null,
+      genero: '',
+      rol: '',
+      cliente: [],
+    });
+    setErroresValidacion({});
+    setAlerta(null);
+  };
+
+  return {
+    datosUsuario,
+    setDatosUsuario,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    cargando,
+    esEdicion,
+    manejarCambio,
+    manejarFechaNacimiento,
+    obtenerHelperText,
+    handleGuardar,
+    limpiarFormulario,
+    CAMPO_OBLIGATORIO,
+  };
+};
diff --git a/src/hooks/Usuarios/useActualizarUsuario.js b/src/hooks/Usuarios/useActualizarUsuario.js
new file mode 100644
index 00000000..288d88bc
--- /dev/null
+++ b/src/hooks/Usuarios/useActualizarUsuario.js
@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { RepositorioActualizarUsuario } from '@Repositorios/Usuarios/RepositorioActualizarUsuario';
+
+export function useActualizarUsuario() {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+
+  const actualizar = async (cambios) => {
+    setCargando(true);
+    setError(null);
+    setMensaje('');
+
+    try {
+      const respuesta = await RepositorioActualizarUsuario.actualizar(cambios);
+      setMensaje(respuesta.mensaje || 'Actualización exitosa');
+    } catch (err) {
+      setError(err.message || 'Ocurrió un error');
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { actualizar, cargando, error, mensaje };
+}

From f06e33a511726074b55435175b55d54cbbcb5e7e Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 17:30:36 -0600
Subject: [PATCH 048/160] feat: agregar componente de lista de transferencia

---
 .../Organismos/ListaTransferencia.jsx         | 200 ++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 src/Vistas/Componentes/Organismos/ListaTransferencia.jsx

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
new file mode 100644
index 00000000..6871ee7e
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -0,0 +1,200 @@
+import React, { useState, useEffect } from 'react';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Checkbox from '@mui/material/Checkbox';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+
+// Funciones utilitarias
+function no(a, b, funcionClave = (elemento) => elemento.id || elemento) {
+  return a.filter((valorA) => !b.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
+}
+
+function interseccion(a, b, funcionClave = (elemento) => elemento.id || elemento) {
+  return a.filter((valorA) => b.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
+}
+
+function union(a, b, funcionClave = (elemento) => elemento.id || elemento) {
+  return [...a, ...no(b, a, funcionClave)];
+}
+
+// Componente Lista de Transferencia Personalizada
+const ListaTransferenciaPersonalizada = ({
+                                           elementosDisponibles = [],
+                                           elementosSeleccionados = [],
+                                           alCambiarSeleccion,
+                                           tituloIzquierda = "Disponibles",
+                                           tituloDerecha = "Seleccionados",
+                                           obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
+                                           obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
+                                           deshabilitado = false,
+                                           alturaMaxima = 230,
+                                           ancho = 250
+                                         }) => {
+  const [marcados, setMarcados] = useState([]);
+  const [izquierda, setIzquierda] = useState(elementosDisponibles);
+  const [derecha, setDerecha] = useState(elementosSeleccionados);
+
+  // Actualizar estado interno cuando cambien las props
+  useEffect(() => {
+    setIzquierda(elementosDisponibles);
+  }, [elementosDisponibles]);
+
+  useEffect(() => {
+    setDerecha(elementosSeleccionados);
+  }, [elementosSeleccionados]);
+
+  // Notificar al componente padre de los cambios
+  useEffect(() => {
+    if (alCambiarSeleccion) {
+      alCambiarSeleccion({
+        disponibles: izquierda,
+        seleccionados: derecha
+      });
+    }
+  }, [izquierda, derecha, alCambiarSeleccion]);
+
+  const marcadosIzquierda = interseccion(marcados, izquierda, obtenerClaveElemento);
+  const marcadosDerecha = interseccion(marcados, derecha, obtenerClaveElemento);
+
+  const manejarAlternar = (valor) => () => {
+    const indiceActual = marcados.findIndex(elemento => obtenerClaveElemento(elemento) === obtenerClaveElemento(valor));
+    const nuevosMarcados = [...marcados];
+
+    if (indiceActual === -1) {
+      nuevosMarcados.push(valor);
+    } else {
+      nuevosMarcados.splice(indiceActual, 1);
+    }
+
+    setMarcados(nuevosMarcados);
+  };
+
+  const numeroDeMarcados = (elementos) => interseccion(marcados, elementos, obtenerClaveElemento).length;
+
+  const manejarAlternarTodos = (elementos) => () => {
+    if (numeroDeMarcados(elementos) === elementos.length) {
+      setMarcados(no(marcados, elementos, obtenerClaveElemento));
+    } else {
+      setMarcados(union(marcados, elementos, obtenerClaveElemento));
+    }
+  };
+
+  const manejarMarcadosADerecha = () => {
+    setDerecha(union(derecha, marcadosIzquierda, obtenerClaveElemento));
+    setIzquierda(no(izquierda, marcadosIzquierda, obtenerClaveElemento));
+    setMarcados(no(marcados, marcadosIzquierda, obtenerClaveElemento));
+  };
+
+  const manejarMarcadosAIzquierda = () => {
+    setIzquierda(union(izquierda, marcadosDerecha, obtenerClaveElemento));
+    setDerecha(no(derecha, marcadosDerecha, obtenerClaveElemento));
+    setMarcados(no(marcados, marcadosDerecha, obtenerClaveElemento));
+  };
+
+  const listaPersonalizada = (titulo, elementos) => (
+    <Card sx={{ width: ancho }}>
+      <CardHeader
+        sx={{ px: 2, py: 1 }}
+        avatar={
+          <Checkbox
+            onClick={manejarAlternarTodos(elementos)}
+            checked={numeroDeMarcados(elementos) === elementos.length && elementos.length !== 0}
+            indeterminate={
+              numeroDeMarcados(elementos) !== elementos.length && numeroDeMarcados(elementos) !== 0
+            }
+            disabled={elementos.length === 0 || deshabilitado}
+            inputProps={{
+              'aria-label': 'todos los elementos seleccionados',
+            }}
+          />
+        }
+        title={titulo}
+        subheader={`${numeroDeMarcados(elementos)}/${elementos.length} seleccionados`}
+      />
+      <Divider />
+      <List
+        sx={{
+          height: alturaMaxima,
+          bgcolor: 'background.paper',
+          overflow: 'auto',
+        }}
+        dense
+        component="div"
+        role="list"
+      >
+        {elementos.map((elemento) => {
+          const claveElemento = obtenerClaveElemento(elemento);
+          const etiquetaElemento = obtenerEtiquetaElemento(elemento);
+          const estaMarcado = marcados.some(elementoMarcado => obtenerClaveElemento(elementoMarcado) === claveElemento);
+
+          return (
+            <ListItemButton
+              key={claveElemento}
+              role="listitem"
+              onClick={manejarAlternar(elemento)}
+            >
+              <ListItemIcon>
+                <Checkbox
+                  checked={estaMarcado}
+                  tabIndex={-1}
+                  disableRipple
+                  disabled={deshabilitado}
+                  inputProps={{
+                    'aria-labelledby': `lista-transferencia-elemento-${claveElemento}-etiqueta`,
+                  }}
+                />
+              </ListItemIcon>
+              <ListItemText
+                id={`lista-transferencia-elemento-${claveElemento}-etiqueta`}
+                primary={etiquetaElemento}
+              />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Card>
+  );
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      sx={{ justifyContent: 'center', alignItems: 'center' }}
+    >
+      <Grid>{listaPersonalizada(tituloIzquierda, izquierda)}</Grid>
+      <Grid>
+        <Grid container direction="column" sx={{ alignItems: 'center' }}>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarMarcadosADerecha}
+            disabled={marcadosIzquierda.length === 0 || deshabilitado}
+            aria-label="mover seleccionados a la derecha"
+          >
+            →
+          </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarMarcadosAIzquierda}
+            disabled={marcadosDerecha.length === 0 || deshabilitado}
+            aria-label="mover seleccionados a la izquierda"
+          >
+            ←
+          </Button>
+        </Grid>
+      </Grid>
+      <Grid>{listaPersonalizada(tituloDerecha, derecha)}</Grid>
+    </Grid>
+  );
+};
+
+export default ListaTransferenciaPersonalizada;
\ No newline at end of file

From 0f1d75e44a22f7237a2ca7ae867d450a8261d6eb Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 17:32:01 -0600
Subject: [PATCH 049/160] fix: cambiar nombre de el componente

---
 src/Vistas/Componentes/Organismos/ListaTransferencia.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index 6871ee7e..f0bb18d4 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -24,7 +24,7 @@ function union(a, b, funcionClave = (elemento) => elemento.id || elemento) {
 }
 
 // Componente Lista de Transferencia Personalizada
-const ListaTransferenciaPersonalizada = ({
+const ListaTransferencia = ({
                                            elementosDisponibles = [],
                                            elementosSeleccionados = [],
                                            alCambiarSeleccion,
@@ -197,4 +197,4 @@ const ListaTransferenciaPersonalizada = ({
   );
 };
 
-export default ListaTransferenciaPersonalizada;
\ No newline at end of file
+export default ListaTransferencia;
\ No newline at end of file

From 17eb133995da902efb63386ef2d647f1d2f939fb Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Sun, 1 Jun 2025 17:32:31 -0600
Subject: [PATCH 050/160] Fix: recibir sets de productos para actualizar

---
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 4b49d0fe..0c422f54 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -1,6 +1,6 @@
 // RF22 - Consulta Lista de Grupo Empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF22
 // RF23 Lee grupo de empleados -https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23
-import React, { useState } from 'react';
+import React, { use, useState } from 'react';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import { useConsultarGrupos } from '@Hooks/Empleados/useConsultarGrupos';
@@ -16,6 +16,7 @@ import { useGrupoEmpleadosId } from '@Hooks/Empleados/useLeerGrupoEmpleados';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import ModalCrearGrupoEmpleado from '@Organismos/ModalCrearGrupoEmpleado';
 import InfoGrupoEmpleadosEditable from '@Moleculas/GrupoEmpleadosInfoEditable';
+import { useActualizarGrupoEmpleados } from '@Hooks/Empleados/useActualizarGrupoEmpleados';
 
 const ListaGrupoEmpleados = () => {
   const { grupos, cargando, error, refetch } = useConsultarGrupos();
@@ -33,6 +34,7 @@ const ListaGrupoEmpleados = () => {
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
   const [idGrupoSeleccionado, setIdGrupoSeleccionado] = useState(null);
   const [abrirModalEditar, setAbrirModalEditar] = useState(false);
+  const [formData, setFormData] = useState(null);
   const {
     grupoEmpleados,
     cargando: cargandoDetalle,
@@ -66,6 +68,50 @@ const ListaGrupoEmpleados = () => {
     }
   };
 
+  const handleFormDataChange = (data) => {
+    setFormData(data);
+  };
+
+  const handleGuardar = async () => {
+    if (!formData?.isValid) {
+      setAlerta({
+        tipo: 'warning',
+        mensaje: 'Por favor completa todos los campos requeridos',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+    console.log('Guardando grupo de empleados:', formData);
+    try {
+      useActualizarGrupoEmpleados(
+        idGrupoSeleccionado,
+        formData.nombre,
+        formData.descripcion,
+        formData.empleados,
+        formData.setsDeProductos
+      );
+      setAbrirModalEditar(false);
+      await refetch();
+      setAlerta({
+        tipo: 'success',
+        mensaje: 'Grupo de empleados actualizado correctamente.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    } catch (error) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Error al actualizar el grupo de empleados.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    }
+  };
+
   const columnas = [
     {
       field: 'nombre',
@@ -246,10 +292,8 @@ const ListaGrupoEmpleados = () => {
               variant: 'contained',
               color: 'primary',
               outlineColor: colores.primario[10],
-              onClick: () => {
-                setAbrirModalEditar(false);
-                refetch();
-              },
+              onClick: handleGuardar,
+              disabled: !formData?.isValid,
             },
             {
               label: 'Cancelar',
@@ -272,6 +316,7 @@ const ListaGrupoEmpleados = () => {
               idsSetProductos={grupoEmpleados?.idsSetProductos || []}
               empleados={grupoEmpleados?.empleadosActualizar || []}
               idsEmpleados={grupoEmpleados?.idsEmpleados || []}
+              onFormDataChange={handleFormDataChange}
             />
           )}
         </ModalFlotante>

From 661a22e903b457529347303923f156023cc4198f Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 18:01:24 -0600
Subject: [PATCH 051/160] feat: render de lista de transferencia

---
 .../Organismos/ModalDetalleRol.jsx            | 139 +++++++++++++++---
 1 file changed, 117 insertions(+), 22 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
index d4652f68..49174820 100644
--- a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -1,22 +1,57 @@
 // RF[8] Leer Rol - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF8
 
-import { useEffect } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Box, Typography, useTheme } from '@mui/material';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import { useLeerRol } from '@Hooks/Roles/useLeerRol';
 import Alerta from '@Moleculas/Alerta';
 import Tabla from '@Organismos/Tabla';
+import ListaTransferencia from '@Organismos/ListaTransferencia';
+import obtenerPermisos from '@Servicios/obtenerPermisos';
 import { tokens } from '@SRC/theme';
 
 const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
   const { detalle, cargando, error, leerRol } = useLeerRol();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
+  const [modoEdicion, setModoEdicion] = useState(false);
+  const [permisosDisponibles, setPermisosDisponibles] = useState([]);
+  const [permisosSeleccionados, setPermisosSeleccionados] = useState([]);
+
+  // Add ref to track if permissions have been loaded
+  const permisosLoadedRef = useRef(false);
 
   useEffect(() => {
     if (abierto && idRol) leerRol(idRol);
   }, [abierto, idRol, leerRol]);
 
+  // Reset the ref when modal closes or role changes
+  useEffect(() => {
+    if (!abierto || !modoEdicion) {
+      permisosLoadedRef.current = false;
+    }
+  }, [abierto, modoEdicion]);
+
+  // Modified useEffect with ref check to prevent infinite loop
+  useEffect(() => {
+    const cargarPermisos = async () => {
+      if (detalle && modoEdicion && !permisosLoadedRef.current) {
+        const todosLosPermisos = await obtenerPermisos();
+        const permisosDelRol = detalle.permisos || [];
+
+        const permisosNoAsignados = todosLosPermisos.filter(
+          permiso => !permisosDelRol.some(asignado => asignado.id === permiso.id)
+        );
+
+        setPermisosDisponibles(permisosNoAsignados);
+        setPermisosSeleccionados(permisosDelRol);
+        permisosLoadedRef.current = true;
+      }
+    };
+
+    cargarPermisos();
+  }, [detalle, modoEdicion, permisosLoadedRef]);
+
   const columnas = [
     {
       field: 'nombre',
@@ -36,6 +71,55 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
     descripcion: permiso.descripcion,
   }));
 
+  const manejarCambioEdicion = () => {
+    setModoEdicion(!modoEdicion);
+  };
+
+  const manejarCambioTransferencia = ({ disponibles, seleccionados }) => {
+    setPermisosDisponibles(disponibles);
+    setPermisosSeleccionados(seleccionados);
+  };
+
+  const manejarCerrar = () => {
+    setModoEdicion(false);
+    onCerrar();
+  };
+
+  const botonesModo = modoEdicion ? [
+    {
+      label: 'Cancelar',
+      variant: 'outlined',
+      size: 'large',
+      outlineColor: colores.altertex[1],
+      onClick: () => setModoEdicion(false),
+    },
+    {
+      label: 'Guardar',
+      variant: 'contained',
+      size: 'large',
+      backgroundColor: colores.altertex[1],
+      onClick: () => {
+        // Aquí iría la lógica para guardar
+        setModoEdicion(false);
+      },
+    }
+  ] : [
+    {
+      label: 'Editar',
+      variant: 'contained',
+      size: 'large',
+      backgroundColor: colores.altertex[1],
+      onClick: manejarCambioEdicion,
+    },
+    {
+      label: 'Salir',
+      variant: 'outlined',
+      size: 'large',
+      outlineColor: colores.altertex[1],
+      onClick: manejarCerrar,
+    }
+  ];
+
   return (
     <>
       {error && (
@@ -62,20 +146,12 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
       <ModalFlotante
         open={abierto}
-        onClose={onCerrar}
-        onConfirm={onCerrar}
-        titulo="Detalles del Rol"
+        onClose={manejarCerrar}
+        onConfirm={manejarCerrar}
+        titulo={modoEdicion ? "Editar Rol" : "Detalles del Rol"}
         tituloVariant="h4"
-        customWidth={800}
-        botones={[
-          {
-            label: 'Salir',
-            variant: 'outlined',
-            size: 'large',
-            outlineColor: colores.altertex[1],
-            onClick: onCerrar,
-          },
-        ]}
+        customWidth={modoEdicion ? 1000 : 800}
+        botones={botonesModo}
       >
         {cargando && (
           <Typography variant="body1" sx={{ mb: 2 }}>
@@ -95,14 +171,33 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
               <strong>Número de usuarios asociados a este rol:</strong> {detalle.totalUsuarios}
             </Typography>
 
-            <Box sx={{ mb: 4 }}>
-              <Tabla
-                columns={columnas}
-                rows={filas}
-                loading={cargando}
-                disableRowSelectionOnClick
-              />
-            </Box>
+            {modoEdicion ? (
+              <Box sx={{ mb: 4 }}>
+                <Typography variant="h6" sx={{ mb: 2, textAlign: 'center' }}>
+                  Gestionar Permisos
+                </Typography>
+                <ListaTransferencia
+                  elementosDisponibles={permisosDisponibles}
+                  elementosSeleccionados={permisosSeleccionados}
+                  alCambiarSeleccion={manejarCambioTransferencia}
+                  tituloIzquierda="Permisos Disponibles"
+                  tituloDerecha="Permisos Asignados"
+                  obtenerEtiquetaElemento={(permiso) => permiso.nombre}
+                  obtenerClaveElemento={(permiso) => permiso.id}
+                  alturaMaxima={300}
+                  ancho={300}
+                />
+              </Box>
+            ) : (
+              <Box sx={{ mb: 4 }}>
+                <Tabla
+                  columns={columnas}
+                  rows={filas}
+                  loading={cargando}
+                  disableRowSelectionOnClick
+                />
+              </Box>
+            )}
           </>
         )}
       </ModalFlotante>

From 4961f7f8a019fb3c857054fc011fbd67ebfa538a Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 18:02:14 -0600
Subject: [PATCH 052/160] fix: arreglar loop infinito

---
 .../Organismos/ListaTransferencia.jsx         | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index f0bb18d4..1c5710ad 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
 import Card from '@mui/material/Card';
@@ -25,33 +25,40 @@ function union(a, b, funcionClave = (elemento) => elemento.id || elemento) {
 
 // Componente Lista de Transferencia Personalizada
 const ListaTransferencia = ({
-                                           elementosDisponibles = [],
-                                           elementosSeleccionados = [],
-                                           alCambiarSeleccion,
-                                           tituloIzquierda = "Disponibles",
-                                           tituloDerecha = "Seleccionados",
-                                           obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
-                                           obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
-                                           deshabilitado = false,
-                                           alturaMaxima = 230,
-                                           ancho = 250
-                                         }) => {
+                              elementosDisponibles = [],
+                              elementosSeleccionados = [],
+                              alCambiarSeleccion,
+                              tituloIzquierda = "Disponibles",
+                              tituloDerecha = "Seleccionados",
+                              obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
+                              obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
+                              deshabilitado = false,
+                              alturaMaxima = 230,
+                              ancho = 250
+                            }) => {
   const [marcados, setMarcados] = useState([]);
   const [izquierda, setIzquierda] = useState(elementosDisponibles);
   const [derecha, setDerecha] = useState(elementosSeleccionados);
 
+  // Use ref to track if we're in the middle of updating from props
+  const updatingFromPropsRef = useRef(false);
+
   // Actualizar estado interno cuando cambien las props
   useEffect(() => {
+    updatingFromPropsRef.current = true;
     setIzquierda(elementosDisponibles);
+    updatingFromPropsRef.current = false;
   }, [elementosDisponibles]);
 
   useEffect(() => {
+    updatingFromPropsRef.current = true;
     setDerecha(elementosSeleccionados);
+    updatingFromPropsRef.current = false;
   }, [elementosSeleccionados]);
 
-  // Notificar al componente padre de los cambios
+  // Only notify parent when changes come from user interactions, not from prop updates
   useEffect(() => {
-    if (alCambiarSeleccion) {
+    if (alCambiarSeleccion && !updatingFromPropsRef.current) {
       alCambiarSeleccion({
         disponibles: izquierda,
         seleccionados: derecha

From cdb1cf796ca736f1d88c73d5f377dabc8a533f7b Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 18:03:55 -0600
Subject: [PATCH 053/160] fix: arreglar loop infinito en la lista de
 transferencia

---
 src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
index 49174820..9a926135 100644
--- a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -1,6 +1,6 @@
 // RF[8] Leer Rol - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF8
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { Box, Typography, useTheme } from '@mui/material';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import { useLeerRol } from '@Hooks/Roles/useLeerRol';
@@ -50,7 +50,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
     };
 
     cargarPermisos();
-  }, [detalle, modoEdicion, permisosLoadedRef]);
+  }, [detalle, modoEdicion]);
 
   const columnas = [
     {
@@ -75,10 +75,10 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
     setModoEdicion(!modoEdicion);
   };
 
-  const manejarCambioTransferencia = ({ disponibles, seleccionados }) => {
+  const manejarCambioTransferencia = useCallback(({ disponibles, seleccionados }) => {
     setPermisosDisponibles(disponibles);
     setPermisosSeleccionados(seleccionados);
-  };
+  }, []);
 
   const manejarCerrar = () => {
     setModoEdicion(false);

From 06706dac579d66e14ef6d5cb4e4752c559aad222 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 18:07:28 -0600
Subject: [PATCH 054/160] feat: agregar funcionalidad de seleccionar y quitar
 todo con flechas

---
 .../Organismos/ListaTransferencia.jsx         | 58 ++++++++++++++-----
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index 1c5710ad..aacd3dc4 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -24,18 +24,18 @@ function union(a, b, funcionClave = (elemento) => elemento.id || elemento) {
 }
 
 // Componente Lista de Transferencia Personalizada
-const ListaTransferencia = ({
-                              elementosDisponibles = [],
-                              elementosSeleccionados = [],
-                              alCambiarSeleccion,
-                              tituloIzquierda = "Disponibles",
-                              tituloDerecha = "Seleccionados",
-                              obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
-                              obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
-                              deshabilitado = false,
-                              alturaMaxima = 230,
-                              ancho = 250
-                            }) => {
+const ListaTransferenciaPersonalizada = ({
+                                           elementosDisponibles = [],
+                                           elementosSeleccionados = [],
+                                           alCambiarSeleccion,
+                                           tituloIzquierda = "Disponibles",
+                                           tituloDerecha = "Seleccionados",
+                                           obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
+                                           obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
+                                           deshabilitado = false,
+                                           alturaMaxima = 230,
+                                           ancho = 250
+                                         }) => {
   const [marcados, setMarcados] = useState([]);
   const [izquierda, setIzquierda] = useState(elementosDisponibles);
   const [derecha, setDerecha] = useState(elementosSeleccionados);
@@ -104,6 +104,18 @@ const ListaTransferencia = ({
     setMarcados(no(marcados, marcadosDerecha, obtenerClaveElemento));
   };
 
+  const manejarTodoADerecha = () => {
+    setDerecha(union(derecha, izquierda, obtenerClaveElemento));
+    setIzquierda([]);
+    setMarcados([]);
+  };
+
+  const manejarTodoAIzquierda = () => {
+    setIzquierda(union(izquierda, derecha, obtenerClaveElemento));
+    setDerecha([]);
+    setMarcados([]);
+  };
+
   const listaPersonalizada = (titulo, elementos) => (
     <Card sx={{ width: ancho }}>
       <CardHeader
@@ -177,6 +189,16 @@ const ListaTransferencia = ({
       <Grid>{listaPersonalizada(tituloIzquierda, izquierda)}</Grid>
       <Grid>
         <Grid container direction="column" sx={{ alignItems: 'center' }}>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarTodoADerecha}
+            disabled={izquierda.length === 0 || deshabilitado}
+            aria-label="mover todo a la derecha"
+          >
+            ≫
+          </Button>
           <Button
             sx={{ my: 0.5 }}
             variant="outlined"
@@ -197,6 +219,16 @@ const ListaTransferencia = ({
           >
             ←
           </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarTodoAIzquierda}
+            disabled={derecha.length === 0 || deshabilitado}
+            aria-label="mover todo a la izquierda"
+          >
+            ≪
+          </Button>
         </Grid>
       </Grid>
       <Grid>{listaPersonalizada(tituloDerecha, derecha)}</Grid>
@@ -204,4 +236,4 @@ const ListaTransferencia = ({
   );
 };
 
-export default ListaTransferencia;
\ No newline at end of file
+export default ListaTransferenciaPersonalizada;
\ No newline at end of file

From 25d8b10f556f1323bf4540620f95ef4a5d7ff96f Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Sun, 1 Jun 2025 18:15:05 -0600
Subject: [PATCH 055/160] feat: cambiar flechas a iconos de MUI

---
 .../Componentes/Organismos/ListaTransferencia.jsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index aacd3dc4..75901460 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -9,6 +9,11 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+
 
 // Funciones utilitarias
 function no(a, b, funcionClave = (elemento) => elemento.id || elemento) {
@@ -197,7 +202,7 @@ const ListaTransferenciaPersonalizada = ({
             disabled={izquierda.length === 0 || deshabilitado}
             aria-label="mover todo a la derecha"
           >
-            ≫
+            <KeyboardDoubleArrowRightIcon/>
           </Button>
           <Button
             sx={{ my: 0.5 }}
@@ -207,7 +212,7 @@ const ListaTransferenciaPersonalizada = ({
             disabled={marcadosIzquierda.length === 0 || deshabilitado}
             aria-label="mover seleccionados a la derecha"
           >
-            →
+            <KeyboardArrowRightIcon/>
           </Button>
           <Button
             sx={{ my: 0.5 }}
@@ -217,7 +222,7 @@ const ListaTransferenciaPersonalizada = ({
             disabled={marcadosDerecha.length === 0 || deshabilitado}
             aria-label="mover seleccionados a la izquierda"
           >
-            ←
+            <KeyboardArrowLeftIcon/>
           </Button>
           <Button
             sx={{ my: 0.5 }}
@@ -227,7 +232,7 @@ const ListaTransferenciaPersonalizada = ({
             disabled={derecha.length === 0 || deshabilitado}
             aria-label="mover todo a la izquierda"
           >
-            ≪
+            <KeyboardDoubleArrowLeftIcon/>
           </Button>
         </Grid>
       </Grid>

From 846924b30ae070d0b1a8fff6df0f6f549366a87b Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Sun, 1 Jun 2025 20:24:24 -0600
Subject: [PATCH 056/160] =?UTF-8?q?Fix:=20optimizar=20c=C3=B3digo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 67 ++++++++++------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx | 11 ++-
 .../Empleados/useActualizarGrupoEmpleados.js  | 77 ++++++++-----------
 3 files changed, 86 insertions(+), 69 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 2fa55790..ca7b3afb 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -1,6 +1,6 @@
 import Alerta from '@Moleculas/Alerta';
 import CampoTexto from '@Atomos/CampoTexto';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
 import obtenerEmpleados from '@Servicios/obtenerEmpleados';
 import { useAuth } from '@Hooks/AuthProvider';
@@ -37,9 +37,8 @@ const InfoGrupoEmpleadosEditable = ({
   descripcion: descripcionInicial,
   setsProductos: setsProductosInicial,
   empleados: empleadosInicial,
+  onFormDataChange,
 }) => {
-  const [productosDisponibles, setProductosDisponibles] = useState([]);
-  const [empleadosDisponibles, setEmpleadosDisponibles] = useState([]);
   const { usuario } = useAuth();
   const clienteSeleccionado = usuario.clienteSeleccionado;
 
@@ -58,10 +57,27 @@ const InfoGrupoEmpleadosEditable = ({
   const [leftSets, setLeftSets] = useState([]);
   const [rightSets, setRightSets] = useState(setsProductosInicial || []);
 
+  const rightSetsIds = useMemo(
+    () =>
+      rightSets
+        .map((item) => item.id)
+        .sort()
+        .join(','),
+    [rightSets]
+  );
+
+  const rightEmpleadosIds = useMemo(
+    () =>
+      rightEmpleados
+        .map((item) => item.id)
+        .sort()
+        .join(','),
+    [rightEmpleados]
+  );
+
   useEffect(() => {
     const obtenerDatos = async () => {
       const productos = await obtenerSetsProductos(clienteSeleccionado);
-      console.log('Productos obtenidos:', productos);
       setLeftSets(productos.filter((prod) => !rightSets.find((r) => r.id === prod.id)));
 
       const empleadosData = await obtenerEmpleados(clienteSeleccionado);
@@ -71,6 +87,29 @@ const InfoGrupoEmpleadosEditable = ({
     obtenerDatos();
   }, [clienteSeleccionado]);
 
+  useEffect(() => {
+    const isValid = Boolean(
+      nombre && descripcion && rightSets.length > 0 && rightEmpleados.length > 0
+    );
+
+    if (onFormDataChange) {
+      onFormDataChange({
+        isValid,
+        nombre,
+        descripcion,
+        setsDeProductos: rightSets.map((set) => set.id),
+        empleados: rightEmpleados.map((emp) => emp.id),
+      });
+    }
+  }, [
+    nombre,
+    descripcion,
+    rightSets.length,
+    rightEmpleados.length,
+    rightSetsIds,
+    rightEmpleadosIds,
+  ]);
+
   // Handlers para empleados
   const handleToggleEmpleados = (value) => () => {
     const currentIndex = checkedEmpleados.findIndex((item) => item.id === value.id);
@@ -285,18 +324,6 @@ const InfoGrupoEmpleadosEditable = ({
     </Card>
   );
 
-  const handleGuardar = () => {
-    if (!nombre || !descripcion || rightSets.length === 0 || rightEmpleados.length === 0) {
-      setMostrarAlerta(true);
-      return;
-    }
-
-    console.log('Nombre:', nombre);
-    console.log('Descripción:', descripcion);
-    console.log('Sets de Productos:', rightSets);
-    console.log('Empleados:', rightEmpleados);
-  };
-
   return (
     <Box sx={{ width: '800px', margin: '0 auto', borderRadius: '10px' }}>
       <Grid container spacing={3}>
@@ -447,13 +474,6 @@ const InfoGrupoEmpleadosEditable = ({
             </Grid>
           </Box>
         </Grid>
-
-        {/* Botón Guardar */}
-        <Grid item xs={12}>
-          <Button variant='contained' color='primary' onClick={handleGuardar} sx={{ mt: 2 }}>
-            Guardar Cambios
-          </Button>
-        </Grid>
       </Grid>
 
       {mostrarAlerta && (
@@ -466,6 +486,7 @@ const InfoGrupoEmpleadosEditable = ({
           sx={{ mb: 2, mt: 2 }}
         />
       )}
+      <Box display='flex' justifyContent='flex-end' mt={3}></Box>
     </Box>
   );
 };
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 5b781858..917755bc 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -72,6 +72,8 @@ const ListaGrupoEmpleados = () => {
     setFormData(data);
   };
 
+  const { actualizarGrupo } = useActualizarGrupoEmpleados();
+
   const handleGuardar = async () => {
     if (!formData?.isValid) {
       setAlerta({
@@ -83,15 +85,20 @@ const ListaGrupoEmpleados = () => {
       });
       return;
     }
-    console.log('Guardando grupo de empleados:', formData);
     try {
-      useActualizarGrupoEmpleados(
+      console.log('Datos a enviar:', {
+        idGrupo: idGrupoSeleccionado,
+        ...formData,
+      });
+
+      await actualizarGrupo(
         idGrupoSeleccionado,
         formData.nombre,
         formData.descripcion,
         formData.empleados,
         formData.setsDeProductos
       );
+
       setAbrirModalEditar(false);
       await refetch();
       setAlerta({
diff --git a/src/hooks/Empleados/useActualizarGrupoEmpleados.js b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
index f67b327e..f3a764e8 100644
--- a/src/hooks/Empleados/useActualizarGrupoEmpleados.js
+++ b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
@@ -1,58 +1,47 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { RepositorioActualizarGrupoEmpleados } from '@Repositorios/Empleados/RepositorioActualizarGrupoEmpleados';
 
 /**
- * * Hook para actualizar los datos de un grupo de empleados
- * @param {number} idGrupo - ID del grupo de empleados a actualizar
- * @param {string} nombre - Nuevo nombre del grupo de empleados
- * @param {string} descripcion - Nueva descripción del grupo de empleados
- * @param {array} empleados - Lista de IDs de empleados a agregar al grupo
- * @param {array} setsDeProductos - Lista de IDs de sets de productos a agregar al grupo
- * @returns {{
- *    mensaje: string,
- * *    cargando: boolean,
- * *    error: string | null
- * *  }}
- * * @see [RF[24] Actualizar grupo de empleados - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF24)
+ * Hook para actualizar los datos de un grupo de empleados
+ * @returns {Object} Objeto con la función de actualización y estados
  */
-
-export const useActualizarGrupoEmpleados = (
-  idGrupo,
-  nombre,
-  descripcion,
-  empleados,
-  setsDeProductos
-) => {
+export const useActualizarGrupoEmpleados = () => {
   const [mensaje, setMensaje] = useState('');
   const [cargando, setCargando] = useState(false);
   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    const actualizarGrupoEmpleados = async () => {
-      setCargando(true);
-      setError(null);
+  const actualizarGrupo = async (idGrupo, nombre, descripcion, empleados, setsDeProductos) => {
+    if (!idGrupo) return;
+
+    setCargando(true);
+    setError(null);
 
-      try {
-        const { mensaje } = await RepositorioActualizarGrupoEmpleados.actualizarGrupoEmpleados(
-          idGrupo,
-          nombre,
-          descripcion,
-          empleados,
-          setsDeProductos
-        );
+    try {
+      console.log('useActualizarGrupoEmpleados:', {
+        idGrupo,
+        nombre,
+        descripcion,
+        empleados,
+        setsDeProductos,
+      });
 
-        setMensaje(mensaje);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setCargando(false);
-      }
-    };
+      const { mensaje } = await RepositorioActualizarGrupoEmpleados.actualizarGrupoEmpleados(
+        idGrupo,
+        nombre,
+        descripcion,
+        empleados,
+        setsDeProductos
+      );
 
-    if (idGrupo) {
-      actualizarGrupoEmpleados();
+      setMensaje(mensaje);
+      return mensaje;
+    } catch (err) {
+      setError(err.message);
+      throw err;
+    } finally {
+      setCargando(false);
     }
-  }, [idGrupo, nombre, descripcion, empleados, setsDeProductos]);
+  };
 
-  return { mensaje, cargando, error };
+  return { actualizarGrupo, mensaje, cargando, error };
 };

From 31edc70802a6a5fcf9bbce49e9b8aabda2717736 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Sun, 1 Jun 2025 20:25:36 -0600
Subject: [PATCH 057/160] Fix: quitar console.log

---
 src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx | 5 -----
 src/hooks/Empleados/useActualizarGrupoEmpleados.js   | 8 --------
 2 files changed, 13 deletions(-)

diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 917755bc..4166de60 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -86,11 +86,6 @@ const ListaGrupoEmpleados = () => {
       return;
     }
     try {
-      console.log('Datos a enviar:', {
-        idGrupo: idGrupoSeleccionado,
-        ...formData,
-      });
-
       await actualizarGrupo(
         idGrupoSeleccionado,
         formData.nombre,
diff --git a/src/hooks/Empleados/useActualizarGrupoEmpleados.js b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
index f3a764e8..0a6f7e8a 100644
--- a/src/hooks/Empleados/useActualizarGrupoEmpleados.js
+++ b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
@@ -17,14 +17,6 @@ export const useActualizarGrupoEmpleados = () => {
     setError(null);
 
     try {
-      console.log('useActualizarGrupoEmpleados:', {
-        idGrupo,
-        nombre,
-        descripcion,
-        empleados,
-        setsDeProductos,
-      });
-
       const { mensaje } = await RepositorioActualizarGrupoEmpleados.actualizarGrupoEmpleados(
         idGrupo,
         nombre,

From 80254e72ac99a778ed63cc0eb9b957b09accbc46 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Mon, 2 Jun 2025 11:30:03 -0600
Subject: [PATCH 058/160] fix: arreglar errores de lint

---
 src/Dominio/Modelos/Productos/InfoProducto.js                 | 4 ++--
 .../Organismos/Formularios/FormaCrearSetsProducto.jsx         | 2 --
 src/Vistas/Paginas/Categorias/ListaCategorias.jsx             | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/Dominio/Modelos/Productos/InfoProducto.js b/src/Dominio/Modelos/Productos/InfoProducto.js
index b4ff8db1..d9ef51e9 100644
--- a/src/Dominio/Modelos/Productos/InfoProducto.js
+++ b/src/Dominio/Modelos/Productos/InfoProducto.js
@@ -24,7 +24,7 @@ export class InfoProducto {
 
     // Variantes del producto (puede ser un arreglo vacío)
     this.variantes = Array.isArray(producto.variantes)
-      ? producto.variantes.map((v) => new VarianteProducto(v))
+      ? producto.variantes.map((variante) => new VarianteProducto(variante))
       : [];
   }
 }
@@ -35,7 +35,7 @@ class VarianteProducto {
     this.nombreVariante = nombreVariante ?? '';
     this.descripcion = descripcion ?? '';
     this.opciones = Array.isArray(opciones)
-      ? opciones.map((o) => new OpcionVariante(o))
+      ? opciones.map((opcion) => new OpcionVariante(opcion))
       : [];
   }
 }
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
index 1d9ca7a0..d5f4a706 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
@@ -25,8 +25,6 @@ const FormaCrearSetsProducto = ({
                                   setDescripcionSetsProducto,
                                   productos,
                                   setProductos,
-                                  mostrarAlerta,
-                                  setMostrarAlerta,
                                   erroresCampos,
                                   setErroresCampos,
                                 }) => {
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 8fd83042..46aedc93 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -67,7 +67,7 @@ const ListaCategorias = () => {
     try {
       const detalle = await leerCategoria(idCategoria);
       setCategoriaDetalle(detalle);
-    } catch (err) {
+    } catch {
       setErrorDetalle(true);
       setCategoriaDetalle({
         nombreCategoria: '',

From 37c270a3487654f85b936178b9bba1b2ffdfd398 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 11:52:15 -0600
Subject: [PATCH 059/160] Fix: empleados y sets de productos pueden estar
 vacios al actualizar

---
 .../Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index ca7b3afb..85ceb687 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -88,9 +88,7 @@ const InfoGrupoEmpleadosEditable = ({
   }, [clienteSeleccionado]);
 
   useEffect(() => {
-    const isValid = Boolean(
-      nombre && descripcion && rightSets.length > 0 && rightEmpleados.length > 0
-    );
+    const isValid = Boolean(nombre && descripcion);
 
     if (onFormDataChange) {
       onFormDataChange({
@@ -264,6 +262,9 @@ const InfoGrupoEmpleadosEditable = ({
       </List>
     </Card>
   );
+  const LIMITE_NOMBRE = 50;
+  const LIMITE_DESCRIPCION = 150;
+  const MENSAJE_LIMITE = 'Máximo caracteres';
 
   const customListSets = (title, items) => (
     <Card>

From 39ce63261b1b39f8b5dbd455ba3493e16aaa2dab Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 12:21:01 -0600
Subject: [PATCH 060/160] =?UTF-8?q?Feat:=20Nombre=20y=20descripci=C3=B3n?=
 =?UTF-8?q?=20son=20campos=20obligatorios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 60 ++++++++++++-------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  2 +-
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 85ceb687..26f3a064 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -19,6 +19,11 @@ import {
 } from '@mui/material';
 import Texto from '@Atomos/Texto';
 
+// Constantes para los límites de caracteres
+const LIMITE_NOMBRE = 50;
+const LIMITE_DESCRIPCION = 150;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+
 // Funciones auxiliares para la lista de transferencia
 function not(a, b) {
   return a.filter((value) => !b.find((item) => item.id === value.id));
@@ -45,6 +50,7 @@ const InfoGrupoEmpleadosEditable = ({
   // Estados locales
   const [nombre, setNombre] = useState(nombreInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
+  const [errores, setErrores] = useState({});
   const [mostrarAlerta, setMostrarAlerta] = useState(false);
 
   // Estados para la lista de transferencia de empleados
@@ -87,8 +93,29 @@ const InfoGrupoEmpleadosEditable = ({
     obtenerDatos();
   }, [clienteSeleccionado]);
 
+  // Validación de campos
+  const validarCampos = () => {
+    const nuevosErrores = {};
+
+    if (!nombre.trim()) {
+      nuevosErrores.nombre = 'Este campo es obligatorio';
+    } else if (nombre.length > LIMITE_NOMBRE) {
+      nuevosErrores.nombre = `El nombre no puede exceder ${LIMITE_NOMBRE} caracteres`;
+    }
+
+    if (!descripcion.trim()) {
+      nuevosErrores.descripcion = 'Este campo es obligatorio';
+    } else if (descripcion.length > LIMITE_DESCRIPCION) {
+      nuevosErrores.descripcion = `La descripción no puede exceder ${LIMITE_DESCRIPCION} caracteres`;
+    }
+
+    setErrores(nuevosErrores);
+    return Object.keys(nuevosErrores).length === 0;
+  };
+
+  // Efecto para validar y notificar cambios
   useEffect(() => {
-    const isValid = Boolean(nombre && descripcion);
+    const isValid = validarCampos();
 
     if (onFormDataChange) {
       onFormDataChange({
@@ -99,14 +126,7 @@ const InfoGrupoEmpleadosEditable = ({
         empleados: rightEmpleados.map((emp) => emp.id),
       });
     }
-  }, [
-    nombre,
-    descripcion,
-    rightSets.length,
-    rightEmpleados.length,
-    rightSetsIds,
-    rightEmpleadosIds,
-  ]);
+  }, [nombre, descripcion, rightSets, rightEmpleados]);
 
   // Handlers para empleados
   const handleToggleEmpleados = (value) => () => {
@@ -262,10 +282,6 @@ const InfoGrupoEmpleadosEditable = ({
       </List>
     </Card>
   );
-  const LIMITE_NOMBRE = 50;
-  const LIMITE_DESCRIPCION = 150;
-  const MENSAJE_LIMITE = 'Máximo caracteres';
-
   const customListSets = (title, items) => (
     <Card>
       <CardHeader
@@ -337,6 +353,9 @@ const InfoGrupoEmpleadosEditable = ({
             value={nombre}
             placeholder='Nombre del grupo'
             onChange={(e) => setNombre(e.target.value)}
+            error={!!errores.nombre}
+            helperText={errores.nombre || `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`}
+            inputProps={{ maxLength: LIMITE_NOMBRE }}
             sx={{ mt: 1, mb: 2, width: '300px', overflow: 'auto' }}
           />
         </Grid>
@@ -350,6 +369,11 @@ const InfoGrupoEmpleadosEditable = ({
             value={descripcion}
             placeholder='Escribe una descripción'
             onChange={(e) => setDescripcion(e.target.value)}
+            error={!!errores.descripcion}
+            helperText={
+              errores.descripcion || `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
+            }
+            inputProps={{ maxLength: LIMITE_DESCRIPCION }}
             sx={{ mt: 1, mb: 2, width: '400px', overflow: 'auto' }}
           />
         </Grid>
@@ -477,16 +501,6 @@ const InfoGrupoEmpleadosEditable = ({
         </Grid>
       </Grid>
 
-      {mostrarAlerta && (
-        <Alerta
-          tipo='warning'
-          mensaje='Completa todos los campos y selecciona al menos un producto y un empleado.'
-          cerrable
-          duracion={10000}
-          onClose={() => setMostrarAlerta(false)}
-          sx={{ mb: 2, mt: 2 }}
-        />
-      )}
       <Box display='flex' justifyContent='flex-end' mt={3}></Box>
     </Box>
   );
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 4166de60..612d563c 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -178,7 +178,7 @@ const ListaGrupoEmpleados = () => {
   ];
 
   const manejarGrupoCreadoExitosamente = () => {
-    refetch(); // Recarga la lista de grupos
+    refetch();
     setAlerta({
       tipo: 'success',
       mensaje: 'Grupo de empleados creado correctamente.',

From 5193269a13b90049651ac47c75d706c6ec4ad02f Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 13:27:10 -0600
Subject: [PATCH 061/160] Feat: Manejo de errores

---
 .../RepositorioActualizarGrupoEmpleados.js    | 20 ++++-----
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  |  2 +-
 .../Formularios/FormaCrearCategoria.jsx       | 37 ++++++++--------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx | 12 +----
 .../Empleados/useActualizarGrupoEmpleados.js  | 44 +++++++++++++++----
 5 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js b/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js
index 72de1e5b..1f9c52e7 100644
--- a/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js
+++ b/src/Dominio/Repositorios/Empleados/RepositorioActualizarGrupoEmpleados.js
@@ -18,13 +18,13 @@ export class RepositorioActualizarGrupoEmpleados {
   static async actualizarGrupoEmpleados(idGrupo, nombre, descripcion, empleados, setsDeProductos) {
     try {
       const respuesta = await axios.put(
-        RUTAS_API.EMPLEADOS.ACTUALIZAR_GRUPO,
+        `${RUTAS_API.EMPLEADOS.ACTUALIZAR_GRUPO}`,
         {
           idGrupoEmpleado: idGrupo,
-          nombre: nombre,
-          descripcion: descripcion,
-          empleados: empleados,
-          setsDeProductos: setsDeProductos,
+          nombre,
+          descripcion,
+          empleados,
+          setsDeProductos,
         },
         {
           headers: {
@@ -34,12 +34,12 @@ export class RepositorioActualizarGrupoEmpleados {
         }
       );
 
-      const { mensaje } = respuesta.data;
-
-      return { mensaje };
+      return respuesta;
     } catch (error) {
-      const mensaje = error.response?.data?.mensaje || 'Error al actualizar el grupo de empleados.';
-      throw new Error(mensaje);
+      if (error.response?.data?.mensaje) {
+        throw new Error(error.response.data.mensaje);
+      }
+      throw error;
     }
   }
 }
diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 26f3a064..cab951af 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -356,7 +356,7 @@ const InfoGrupoEmpleadosEditable = ({
             error={!!errores.nombre}
             helperText={errores.nombre || `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`}
             inputProps={{ maxLength: LIMITE_NOMBRE }}
-            sx={{ mt: 1, mb: 2, width: '300px', overflow: 'auto' }}
+            sx={{ mt: 1, mb: 2, mr: 8, width: '300px', overflow: 'auto' }}
           />
         </Grid>
 
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
index 918b19f5..9a8e4dc0 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
@@ -1,4 +1,3 @@
-import Alerta from '@Moleculas/Alerta';
 import CampoTexto from '@Atomos/CampoTexto';
 import { useState, useEffect } from 'react';
 import obtenerProductos from '@Servicios/obtenerProductos';
@@ -20,17 +19,17 @@ const LIMITE_DESCRIPCION = 150;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 const FormaCrearCategorias = ({
-                                nombreCategoria,
-                                setNombreCategoria,
-                                descripcionCategoria,
-                                setDescripcionCategoria,
-                                productos,
-                                setProductos,
-                                mostrarAlerta,
-                                setMostrarAlerta,
-                                errores,
-                                intentoEnviar,
-                              }) => {
+  nombreCategoria,
+  setNombreCategoria,
+  descripcionCategoria,
+  setDescripcionCategoria,
+  productos,
+  setProductos,
+  mostrarAlerta,
+  setMostrarAlerta,
+  errores,
+  intentoEnviar,
+}) => {
   const [rows, setRows] = useState([]);
   const { usuario } = useAuth();
   const clienteSeleccionado = usuario.clienteSeleccionado;
@@ -80,7 +79,8 @@ const FormaCrearCategorias = ({
         onChange={(evento) => setNombreCategoria(evento.target.value.slice(0, LIMITE_NOMBRE))}
         inputProps={{ maxLength: LIMITE_NOMBRE }}
         helperText={
-          errores?.nombreCategoria || `${nombreCategoria.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
+          errores?.nombreCategoria ||
+          `${nombreCategoria.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
         }
         error={intentoEnviar && !!errores?.nombreCategoria}
         required
@@ -103,10 +103,13 @@ const FormaCrearCategorias = ({
         fullWidth
         type='text'
         value={descripcionCategoria}
-        onChange={(evento) => setDescripcionCategoria(evento.target.value.slice(0, LIMITE_DESCRIPCION))}
+        onChange={(evento) =>
+          setDescripcionCategoria(evento.target.value.slice(0, LIMITE_DESCRIPCION))
+        }
         inputProps={{ maxLength: LIMITE_DESCRIPCION }}
         helperText={
-          errores?.descripcionCategoria || `${descripcionCategoria.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`
+          errores?.descripcionCategoria ||
+          `${descripcionCategoria.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`
         }
         error={intentoEnviar && !!errores?.descripcionCategoria}
         required
@@ -114,10 +117,8 @@ const FormaCrearCategorias = ({
         multiline
         rows={3}
       />
-
-      {/* Alert moved to parent component */}
     </>
   );
 };
 
-export default FormaCrearCategorias;
\ No newline at end of file
+export default FormaCrearCategorias;
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 612d563c..c18a01c4 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -75,16 +75,6 @@ const ListaGrupoEmpleados = () => {
   const { actualizarGrupo } = useActualizarGrupoEmpleados();
 
   const handleGuardar = async () => {
-    if (!formData?.isValid) {
-      setAlerta({
-        tipo: 'warning',
-        mensaje: 'Por favor completa todos los campos requeridos',
-        icono: true,
-        cerrable: true,
-        centradoInferior: true,
-      });
-      return;
-    }
     try {
       await actualizarGrupo(
         idGrupoSeleccionado,
@@ -106,7 +96,7 @@ const ListaGrupoEmpleados = () => {
     } catch (error) {
       setAlerta({
         tipo: 'error',
-        mensaje: 'Error al actualizar el grupo de empleados.',
+        mensaje: error?.message || 'Error al actualizar el grupo de empleados.',
         icono: true,
         cerrable: true,
         centradoInferior: true,
diff --git a/src/hooks/Empleados/useActualizarGrupoEmpleados.js b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
index 0a6f7e8a..a2c6057a 100644
--- a/src/hooks/Empleados/useActualizarGrupoEmpleados.js
+++ b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
@@ -7,17 +7,19 @@ import { RepositorioActualizarGrupoEmpleados } from '@Repositorios/Empleados/Rep
  */
 export const useActualizarGrupoEmpleados = () => {
   const [mensaje, setMensaje] = useState('');
+  const [exito, setExito] = useState(false);
   const [cargando, setCargando] = useState(false);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState(false);
 
   const actualizarGrupo = async (idGrupo, nombre, descripcion, empleados, setsDeProductos) => {
     if (!idGrupo) return;
-
     setCargando(true);
-    setError(null);
+    setExito(false);
+    setError(false);
+    setMensaje('');
 
     try {
-      const { mensaje } = await RepositorioActualizarGrupoEmpleados.actualizarGrupoEmpleados(
+      const resultado = await RepositorioActualizarGrupoEmpleados.actualizarGrupoEmpleados(
         idGrupo,
         nombre,
         descripcion,
@@ -25,15 +27,41 @@ export const useActualizarGrupoEmpleados = () => {
         setsDeProductos
       );
 
-      setMensaje(mensaje);
-      return mensaje;
+      // Consideramos la actualización exitosa si tenemos una respuesta del servidor
+      setExito(true);
+      setMensaje(resultado?.data?.mensaje || 'Grupo actualizado exitosamente');
+      return resultado;
     } catch (err) {
-      setError(err.message);
+      setExito(false);
+      setError(true);
+      const errorMessage =
+        err?.response?.data?.mensaje ||
+        err?.response?.data?.error ||
+        err?.message ||
+        'Ocurrió un error al actualizar el grupo de empleados';
+
+      setMensaje(errorMessage);
       throw err;
     } finally {
       setCargando(false);
     }
   };
 
-  return { actualizarGrupo, mensaje, cargando, error };
+  const resetEstado = () => {
+    setExito(false);
+    setError(false);
+    setMensaje('');
+  };
+
+  return {
+    actualizarGrupo,
+    cargando,
+    exito,
+    error,
+    mensaje,
+    setError,
+    resetEstado,
+  };
 };
+
+export default useActualizarGrupoEmpleados;

From 6fa845b25dfe6405c17802fd154ec4d267c21b0f Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Mon, 2 Jun 2025 13:33:02 -0600
Subject: [PATCH 062/160] Refactor user update forms to improve validation
 handling and integrate FormularioActualizarUsuario component

---
 .../FormularioActualizarUsuario.jsx           | 472 +++++++-----------
 .../Componentes/Organismos/ModalUsuarios.jsx  |  85 +++-
 src/hooks/Usuarios/useAccionesUsuario.js      |   7 +
 3 files changed, 283 insertions(+), 281 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index f12dbb83..384d31b3 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -1,296 +1,210 @@
-import { useState, useEffect } from 'react';
 import { Box, Grid } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateField } from '@mui/x-date-pickers/DateField';
 import CampoTexto from '@Atomos/CampoTexto';
 import CampoSelect from '@Atomos/CampoSelect';
-import Alerta from '@Moleculas/Alerta';
-import ModalFlotante from '@Organismos/ModalFlotante';
-import FormularioActualizarUsuario from '@Organismos/Formularios/FormularioActualizarUsuario';
-import { useConsultarClientes } from '@Hooks/Clientes/useConsultarClientes';
-import { useActualizarUsuario } from '@Hooks/Usuarios/useActualizarUsuario';
 import CampoSelectMultiple from '@Atomos/CampoSelectMultiple';
-import { useAccionesUsuario } from '@Hooks/Usuarios/useAccionesUsuario';
-
-const FormularioActualizarUsuario = ({ open, onClose, usuario, onUsuarioActualizado }) => {
-  const {
-    datosUsuario,
-    setDatosUsuario,
-    erroresValidacion,
-    alerta,
-    setAlerta,
-    cargando,
-    esEdicion,
-    manejarCambio,
-    manejarFechaNacimiento,
-    obtenerHelperText,
-    handleGuardar,
-    limpiarFormulario,
-    CAMPO_OBLIGATORIO,
-  } = useAccionesUsuario(usuarioInicial); // usuarioInicial es null para crear, o el usuario para editar
-
-  useEffect(() => {
-    if (usuario) {
-      setDatosUsuario({
-        nombreCompleto: usuario.nombreCompleto || '',
-        apellido: usuario.apellido || '',
-        correoElectronico: usuario.correoElectronico || '',
-        numeroTelefono: usuario.numeroTelefono || '',
-        direccion: usuario.direccion || '',
-        codigoPostal: usuario.codigoPostal || '',
-        fechaNacimiento: usuario.fechaNacimiento || null,
-        genero: usuario.genero || '',
-        cliente: usuario.cliente || [],
-        rol: usuario.rol || '',
-        contrasenia: '',
-      });
-    }
-  }, [usuario]);
-
-  const { errores, handleActualizarUsuario } = useActualizarUsuario();
-  const { roles, cargando: cargandoRoles } = useConsultarRoles();
-  const { clientes } = useConsultarClientes();
-  const esSuperAdmin = datosUsuario.rol === 1;
-
-  const manejarConfirmacion = async () => {
-    const resultado = await handleActualizarUsuario({
-      ...datosUsuario,
-      idUsuario: usuario.idUsuario,
-    });
-
-    if (resultado?.mensaje) {
-      if (resultado.exito) {
-        setAlerta({
-          tipo: 'success',
-          mensaje: `Usuario actualizado exitosamente.`,
-          icono: true,
-          cerrable: true,
-          centradoInferior: true,
-          duracion: 3000,
-        });
-        setTimeout(async () => {
-          if (onUsuarioActualizado) await onUsuarioActualizado();
-          manejarCierre();
-        }, 2000);
-      } else {
-        setAlerta({
-          tipo: 'error',
-          mensaje: resultado.mensaje,
-        });
-      }
-    }
-  };
-
-  const manejarCierre = () => {
-    setAlerta(null);
-    onClose();
-  };
 
+const FormularioActualizarUsuario = ({
+  datosUsuario,
+  erroresValidacion,
+  manejarCambio,
+  manejarFechaNacimiento,
+  obtenerHelperText,
+  roles,
+  clientes,
+  esSuperAdmin,
+  cargandoRoles,
+  CAMPO_OBLIGATORIO,
+}) => {
   const estiloCuadricula = {
     display: 'flex',
     justifyContent: 'center',
   };
 
   return (
-    <>
-      <ModalFlotante
-        open={open}
-        onClose={manejarCierre}
-        onConfirm={manejarConfirmacion}
-        titulo='Actualizar usuario'
-      >
-        <Box
-          component='form'
-          method='POST'
-          sx={{
-            flexGrow: 1,
-            '& .MuiTextField-root': { margin: 1, width: '30ch' },
-            '& .MuiFormControl-root': { margin: 1, minWidth: '30ch' },
-          }}
-          noValidate
-          autoComplete='off'
-        >
-          <Grid container columns={12}>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoTexto
-                label='Nombre'
-                name='nombreCompleto'
-                value={datosUsuario.nombreCompleto}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.nombreCompleto}
-                helperText={errores.nombreCompleto && CAMPO_OBLIGATORIO}
-                inputProps={{
-                  maxLength: 50,
-                }}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoTexto
-                label='Apellido'
-                name='apellido'
-                value={datosUsuario.apellido}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.apellido}
-                helperText={errores.apellido && CAMPO_OBLIGATORIO}
-                inputProps={{
-                  maxLength: 50,
-                }}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
-                <DateField
-                  required
-                  label='Fecha de nacimiento'
-                  value={datosUsuario.fechaNacimiento}
-                  onChange={manejarFechaNacimiento}
-                  format='DD/MM/YYYY'
-                  sx={{ width: '30ch' }}
-                  slotProps={{
-                    textField: {
-                      error: !!errores.fechaNacimiento,
-                      helperText:
-                        errores.fechaNacimiento === true
-                          ? CAMPO_OBLIGATORIO
-                          : errores.fechaNacimiento || '',
-                    },
-                  }}
-                />
-              </LocalizationProvider>
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoSelect
-                required
-                label='Género'
-                name='genero'
-                value={datosUsuario.genero}
-                onChange={manejarCambio}
-                size='medium'
-                error={!!errores.genero}
-                helperText={errores.genero && CAMPO_OBLIGATORIO}
-                options={[
-                  { value: 'Hombre', label: 'Hombre' },
-                  { value: 'Mujer', label: 'Mujer' },
-                  { value: 'Otro', label: 'Otro' },
-                ]}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoTexto
-                label='Correo Electrónico'
-                name='correoElectronico'
-                value={datosUsuario.correoElectronico}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.correoElectronico}
-                helperText={
-                  errores.correoElectronico === true
-                    ? CAMPO_OBLIGATORIO
-                    : errores.correoElectronico || ''
-                }
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoTexto
-                label='Número de Teléfono'
-                name='numeroTelefono'
-                value={datosUsuario.numeroTelefono}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.numeroTelefono}
-                helperText={
-                  errores.numeroTelefono === true ? CAMPO_OBLIGATORIO : errores.numeroTelefono || ''
-                }
-                inputProps={{
-                  maxLength: 10,
-                }}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoTexto
-                label='Dirección'
-                name='direccion'
-                value={datosUsuario.direccion}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.direccion}
-                helperText={errores.direccion && CAMPO_OBLIGATORIO}
-                inputProps={{
-                  maxLength: 100,
-                }}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoSelect
-                label='Rol'
-                name='rol'
-                value={datosUsuario.rol}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.rol}
-                helperText={errores.rol && CAMPO_OBLIGATORIO}
-                options={roles
-                  .filter((rol) => rol.idRol !== 3)
-                  .map((rol) => ({
-                    value: rol.idRol,
-                    label: rol.nombre,
-                  }))}
-                disabled={cargandoRoles}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoSelectMultiple
-                label='Cliente'
-                name='cliente'
-                value={datosUsuario.cliente}
-                onChange={manejarCambio}
-                required
-                size='medium'
-                error={!!errores.cliente}
-                helperText={errores.cliente && CAMPO_OBLIGATORIO}
-                options={clientes.map((cliente) => ({
-                  value: cliente.idCliente,
-                  label: cliente.nombreComercial,
-                }))}
-                disabled={esSuperAdmin}
-              />
-            </Grid>
-            <Grid size={6} sx={estiloCuadricula}>
-              <CampoTexto
-                label='Contraseña (dejar en blanco para no cambiar)'
-                name='contrasenia'
-                type='password'
-                value={datosUsuario.contrasenia}
-                onChange={manejarCambio}
-                size='medium'
-                error={!!errores.contrasenia}
-                autoComplete='new-password'
-                helperText={errores.contrasenia || ''}
-              />
-            </Grid>
-          </Grid>
-        </Box>
-      </ModalFlotante>
-      {alerta && (
-        <Alerta
-          sx={{ marginBottom: 2 }}
-          tipo={alerta.tipo}
-          mensaje={alerta.mensaje}
-          duracion='3000'
-          onClose={() => setAlerta(null)}
-          centradoInferior
-        />
-      )}
-    </>
+    <Box
+      component='form'
+      method='POST'
+      sx={{
+        flexGrow: 1,
+        '& .MuiTextField-root': { margin: 1, width: '30ch' },
+        '& .MuiFormControl-root': { margin: 1, minWidth: '30ch' },
+      }}
+      noValidate
+      autoComplete='off'
+    >
+      <Grid container columns={12}>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoTexto
+            label='Nombre'
+            name='nombreCompleto'
+            value={datosUsuario.nombreCompleto}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.nombreCompleto}
+            helperText={erroresValidacion.nombreCompleto && CAMPO_OBLIGATORIO}
+            inputProps={{
+              maxLength: 50,
+            }}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoTexto
+            label='Apellido'
+            name='apellido'
+            value={datosUsuario.apellido}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.apellido}
+            helperText={erroresValidacion.apellido && CAMPO_OBLIGATORIO}
+            inputProps={{
+              maxLength: 50,
+            }}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
+            <DateField
+              required
+              label='Fecha de nacimiento'
+              value={datosUsuario.fechaNacimiento}
+              onChange={manejarFechaNacimiento}
+              format='DD/MM/YYYY'
+              sx={{ width: '30ch' }}
+              slotProps={{
+                textField: {
+                  error: !!erroresValidacion.fechaNacimiento,
+                  helperText:
+                    erroresValidacion.fechaNacimiento === true
+                      ? CAMPO_OBLIGATORIO
+                      : erroresValidacion.fechaNacimiento || '',
+                },
+              }}
+            />
+          </LocalizationProvider>
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoSelect
+            required
+            label='Género'
+            name='genero'
+            value={datosUsuario.genero}
+            onChange={manejarCambio}
+            size='medium'
+            error={!!erroresValidacion.genero}
+            helperText={erroresValidacion.genero && CAMPO_OBLIGATORIO}
+            options={[
+              { value: 'Hombre', label: 'Hombre' },
+              { value: 'Mujer', label: 'Mujer' },
+              { value: 'Otro', label: 'Otro' },
+            ]}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoTexto
+            label='Correo Electrónico'
+            name='correoElectronico'
+            value={datosUsuario.correoElectronico}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.correoElectronico}
+            helperText={
+              erroresValidacion.correoElectronico === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.correoElectronico || ''
+            }
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoTexto
+            label='Número de Teléfono'
+            name='numeroTelefono'
+            value={datosUsuario.numeroTelefono}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.numeroTelefono}
+            helperText={
+              erroresValidacion.numeroTelefono === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.numeroTelefono || ''
+            }
+            inputProps={{
+              maxLength: 10,
+            }}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoTexto
+            label='Dirección'
+            name='direccion'
+            value={datosUsuario.direccion}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.direccion}
+            helperText={erroresValidacion.direccion && CAMPO_OBLIGATORIO}
+            inputProps={{
+              maxLength: 100,
+            }}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoSelect
+            label='Rol'
+            name='rol'
+            value={datosUsuario.rol}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.rol}
+            helperText={erroresValidacion.rol && CAMPO_OBLIGATORIO}
+            options={roles
+              .filter((rol) => rol.idRol !== 3)
+              .map((rol) => ({
+                value: rol.idRol,
+                label: rol.nombre,
+              }))}
+            disabled={cargandoRoles}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoSelectMultiple
+            label='Cliente'
+            name='cliente'
+            value={datosUsuario.cliente}
+            onChange={manejarCambio}
+            required
+            size='medium'
+            error={!!erroresValidacion.cliente}
+            helperText={erroresValidacion.cliente && CAMPO_OBLIGATORIO}
+            options={clientes.map((cliente) => ({
+              value: cliente.idCliente,
+              label: cliente.nombreComercial,
+            }))}
+            disabled={esSuperAdmin}
+          />
+        </Grid>
+        <Grid size={6} sx={estiloCuadricula}>
+          <CampoTexto
+            label='Contraseña (dejar en blanco para no cambiar)'
+            name='contrasenia'
+            type='password'
+            value={datosUsuario.contrasenia}
+            onChange={manejarCambio}
+            size='medium'
+            error={!!erroresValidacion.contrasenia}
+            autoComplete='new-password'
+            helperText={erroresValidacion.contrasenia || ''}
+          />
+        </Grid>
+      </Grid>
+    </Box>
   );
 };
 
diff --git a/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx b/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
index f6a2a6ef..2892e6fa 100644
--- a/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
@@ -1,5 +1,86 @@
 import { Box } from '@mui/material';
 import Alerta from '@Moleculas/Alerta';
 import ModalFlotante from '@Organismos/ModalFlotante';
-import FormaEmpleado from '@Organismos/Formularios/FormaEmpleado';
-import { useLeerUsuario } from '@Hooks/Usuarios/useLeerUsuario';
+import FormularioActualizarUsuario from './Formularios/FormularioActualizarUsuario';
+import { useAccionesUsuario } from '@Hooks/Usuarios/useAccionesUsuario';
+
+const ModalUsuarios = ({ open, onClose, onAccion, usuarioEdicion }) => {
+  const {
+    datosUsuario,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    cargando,
+    esEdicion,
+    manejarCambio,
+    manejarFechaNacimiento,
+    obtenerHelperText,
+    handleGuardar,
+    limpiarFormulario,
+    CAMPO_OBLIGATORIO,
+    roles,
+    clientes,
+    esSuperAdmin,
+    cargandoRoles,
+  } = useAccionesUsuario(usuarioEdicion);
+
+  const manejarConfirmacion = async () => {
+    const resultado = await handleGuardar();
+    if (resultado?.exito) {
+      if (onAccion) await onAccion();
+      setTimeout(() => {
+        onClose();
+      }, 1500);
+    }
+  };
+
+  const manejarCierre = () => {
+    setAlerta(null);
+    onClose();
+  };
+
+  return (
+    <ModalFlotante
+      open={open}
+      onClose={manejarCierre}
+      onConfirm={manejarConfirmacion}
+      titulo={esEdicion ? datosUsuario.nombreCompleto : 'Actualizar Usuario'}
+    >
+      <Box
+        component='form'
+        method='POST'
+        sx={{
+          flexGrow: 1,
+          '& .MuiTextField-root': { margin: 1, width: '30ch' },
+          '& .MuiFormControl-root': { margin: 1, width: '30ch' },
+        }}
+        noValidate
+        autoComplete='off'
+      >
+        <FormularioActualizarUsuario
+          datosUsuario={datosUsuario}
+          erroresValidacion={erroresValidacion}
+          manejarCambio={manejarCambio}
+          manejarFechaNacimiento={manejarFechaNacimiento}
+          obtenerHelperText={obtenerHelperText}
+          roles={roles}
+          clientes={clientes}
+          esSuperAdmin={esSuperAdmin}
+          cargandoRoles={cargandoRoles}
+          CAMPO_OBLIGATORIO={CAMPO_OBLIGATORIO}
+        />
+      </Box>
+      {alerta && (
+        <Alerta
+          sx={{ marginBottom: 2 }}
+          tipo={alerta.tipo}
+          mensaje={alerta.mensaje}
+          duracion='3000'
+          onClose={() => setAlerta(null)}
+        />
+      )}
+    </ModalFlotante>
+  );
+};
+
+export default ModalUsuarios;
diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
index 08284b03..02ce67ca 100644
--- a/src/hooks/Usuarios/useAccionesUsuario.js
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -20,8 +20,15 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
         ...usuarioInicial,
         idUsuario: usuarioInicial.idUsuario || usuarioInicial.id,
         nombreCompleto: usuarioInicial.nombreCompleto || '',
+        apellido: usuarioInicial.apellido || '',
         correoElectronico: usuarioInicial.correoElectronico || '',
+        numeroTelefono: usuarioInicial.numeroTelefono || '',
+        direccion: usuarioInicial.direccion || '',
         fechaNacimiento,
+        genero: usuarioInicial.genero || '',
+        rol: usuarioInicial.rol || '',
+        cliente: usuarioInicial.cliente || [],
+        contrasenia: '',
       };
     }
     return {

From aa767db6ccf49817fdc87a052726c12a3ad0c067 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 13:57:13 -0600
Subject: [PATCH 063/160] Feat: Uso de iconos mui

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index cab951af..16678991 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -1,4 +1,3 @@
-import Alerta from '@Moleculas/Alerta';
 import CampoTexto from '@Atomos/CampoTexto';
 import { useState, useEffect, useMemo } from 'react';
 import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
@@ -18,6 +17,10 @@ import {
   Divider,
 } from '@mui/material';
 import Texto from '@Atomos/Texto';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 
 // Constantes para los límites de caracteres
 const LIMITE_NOMBRE = 50;
@@ -399,9 +402,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleAllRightSets}
                     disabled={leftSets.length === 0}
                     aria-label='move all right'
-                  >
-                    ≫
-                  </Button>
+                    startIcon={<KeyboardDoubleArrowRightIcon sx={{ ml: 1 }} />}
+                  />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
@@ -409,9 +411,9 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleCheckedRightSets}
                     disabled={numberOfCheckedSets(leftSets) === 0}
                     aria-label='move selected right'
-                  >
-                    &gt;
-                  </Button>
+                    startIcon={<KeyboardArrowRightIcon sx={{ ml: 1 }} />}
+                    allign='center'
+                  />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
@@ -419,9 +421,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleCheckedLeftSets}
                     disabled={numberOfCheckedSets(rightSets) === 0}
                     aria-label='move selected left'
-                  >
-                    &lt;
-                  </Button>
+                    startIcon={<KeyboardArrowLeftIcon sx={{ ml: 1 }} />}
+                  />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
@@ -429,9 +430,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleAllLeftSets}
                     disabled={rightSets.length === 0}
                     aria-label='move all left'
-                  >
-                    ≪
-                  </Button>
+                    startIcon={<KeyboardDoubleArrowLeftIcon sx={{ ml: 1 }} />}
+                  />
                 </Grid>
               </Grid>
               <Grid item>{customListSets('Sets Seleccionados', rightSets)}</Grid>
@@ -460,9 +460,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleAllRightEmpleados}
                     disabled={leftEmpleados.length === 0}
                     aria-label='move all right'
-                  >
-                    ≫
-                  </Button>
+                    startIcon={<KeyboardDoubleArrowRightIcon sx={{ ml: 1 }} />}
+                  />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
@@ -470,9 +469,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleCheckedRightEmpleados}
                     disabled={numberOfCheckedEmpleados(leftEmpleados) === 0}
                     aria-label='move selected right'
-                  >
-                    &gt;
-                  </Button>
+                    startIcon={<KeyboardArrowRightIcon sx={{ ml: 1 }} />}
+                  />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
@@ -480,9 +478,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleCheckedLeftEmpleados}
                     disabled={numberOfCheckedEmpleados(rightEmpleados) === 0}
                     aria-label='move selected left'
-                  >
-                    &lt;
-                  </Button>
+                    startIcon={<KeyboardArrowLeftIcon sx={{ ml: 1 }} />}
+                  />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
@@ -490,9 +487,8 @@ const InfoGrupoEmpleadosEditable = ({
                     onClick={handleAllLeftEmpleados}
                     disabled={rightEmpleados.length === 0}
                     aria-label='move all left'
-                  >
-                    ≪
-                  </Button>
+                    startIcon={<KeyboardDoubleArrowLeftIcon sx={{ ml: 1 }} />}
+                  />
                 </Grid>
               </Grid>
               <Grid item>{customListEmpleados('Empleados Seleccionados', rightEmpleados)}</Grid>

From 43f90c340356e8f8ae829bafc8a68682a6e750a1 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Mon, 2 Jun 2025 15:09:36 -0600
Subject: [PATCH 064/160] fix: documentacion de instrucciones

---
 .../Componentes/Moleculas/InfoProducto.jsx       | 16 ++++++++++++----
 .../Organismos/ModalImportarProductos.jsx        |  9 ++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
index 8cf0050e..347557d3 100644
--- a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
+++ b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
@@ -64,7 +64,9 @@ const InfoProducto = ({detalleProducto, imagenProducto}) => {
           <Texto gutterBottom sx={{mb: 1.5}}>
             Costo:{' '}
             <span style={{color: colores.altertex[3]}}>
-              ${detalleProducto?.costo || 'No disponible'}
+              {detalleProducto?.costo !== undefined && detalleProducto?.costo !== null
+              ? `$${detalleProducto.costo}`
+              : 'No disponible'}
             </span>
           </Texto>
 
@@ -72,7 +74,9 @@ const InfoProducto = ({detalleProducto, imagenProducto}) => {
           <Texto gutterBottom sx={{mb: 1.5}}>
             Precio de Venta:{' '}
             <span style={{color:colores.altertex[3]}}>
-              ${detalleProducto?.precioVenta || 'No disponible'}
+              {detalleProducto?.precioVenta !== undefined && detalleProducto?.precioVenta !== null
+            ? `$${detalleProducto.precioVenta}`
+            : 'No disponible'}
             </span>
           </Texto>
 
@@ -80,7 +84,9 @@ const InfoProducto = ({detalleProducto, imagenProducto}) => {
           <Texto gutterBottom sx={{mb: 1.5}}>
             Precio Cliente:{' '}
             <span style={{color:colores.altertex[3]}}>
-              ${detalleProducto?.precioCliente || 'No disponible'}
+              {detalleProducto?.precioCliente !== undefined && detalleProducto?.precioCliente !== null
+              ? `$${detalleProducto.precioCliente}`
+              : 'No disponible'}
             </span>
           </Texto>
 
@@ -88,7 +94,9 @@ const InfoProducto = ({detalleProducto, imagenProducto}) => {
           <Texto gutterBottom sx={{mb: 1.5}}>
             Precio en puntos:{' '}
             <span style={{color:colores.altertex[3]}}>
-              {detalleProducto?.precioPuntos || 'No disponible'}
+              {detalleProducto?.precioPuntos !== undefined && detalleProducto?.precioPuntos !== null
+              ? `${detalleProducto.precioPuntos}`
+              : 'No disponible'}
             </span>
           </Texto>
 
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index 6a72c9c3..85339b54 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -178,14 +178,17 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   <br /><br />
                   <strong>Importante:</strong><br />
                   Asegúrate de que el <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto.
+                  Tambien, asegúrate de que la primera fila de cada producto no tenga campos vacíos, ya que el sistema la usa para identificar el producto principal.
+
                   <h3>Producto</h3>
                   <strong>idProducto</strong> permite al sistema saber qué filas pertenecen al mismo producto, aunque estén en diferentes líneas del CSV. Es necesario para poder agruparlo.<br />
+                  <strong>idProveedor:</strong>Identificador del proveedor del producto. Puede ser un campo vacío <br />
                   <strong>nombreProducto, nombreComercial:</strong> Nombres básicos<br />
                   <strong>descripcionProducto:</strong> Descripción del producto<br />
-                  <strong>marca, modelo, tipoProducto</strong><br />
+                  <strong>marca, modelo, tipoProducto:</strong> Datos básicos del producto<br />
                   <strong>costo, precioVenta, precioCliente:</strong> Valores numéricos (usa punto decimal)<br />
                   <strong>precioPuntos:</strong> Número entero<br />
-                  <strong>impuesto, descuento:</strong> Porcentajes<br />
+                  <strong>impuesto, descuento:</strong> Valor numérico del porcentaje. Ejemplo: 16 (para 16%)<br />
                   <strong>estado:</strong> 1 = activo, 0 = inactivo<br />
                   <strong>envio:</strong> 1 = disponible, 0 = no disponible<br /><br />
                   <h3>Variante</h3>
@@ -197,7 +200,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   <strong>SKUcomercial:</strong> Código visible al cliente<br />
                   <strong>cantidad:</strong> Entero<br />
                   <strong>costoAdicional:</strong> Número positivo<br />
-                  <strong>descuentoOpcion:</strong> Porcentaje<br />
+                  <strong>descuentoOpcion:</strong> Valor numérico del porcentaje. Ejemplo: 50 (para 50%)<br />
                   <strong>estadoOpcion:</strong> 1 = activa, 0 = inactiva<br /><br />
                 
                 </>

From 764b25ec9682b82eb93b211ca2c2b09080b577e9 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 16:51:55 -0600
Subject: [PATCH 065/160] Fix: Correciones eslint

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 98 ++++++++-----------
 .../Formularios/FormaCrearCategoria.jsx       |  8 +-
 src/Vistas/Componentes/Organismos/Tabla.jsx   | 44 +--------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  6 +-
 .../Empleados/useActualizarGrupoEmpleados.js  | 10 +-
 5 files changed, 59 insertions(+), 107 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 16678991..16dc97d3 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -1,5 +1,5 @@
 import CampoTexto from '@Atomos/CampoTexto';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
 import obtenerEmpleados from '@Servicios/obtenerEmpleados';
 import { useAuth } from '@Hooks/AuthProvider';
@@ -28,16 +28,16 @@ const LIMITE_DESCRIPCION = 150;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 // Funciones auxiliares para la lista de transferencia
-function not(a, b) {
-  return a.filter((value) => !b.find((item) => item.id === value.id));
+function notInList(sourceList, compareList) {
+  return sourceList.filter((value) => !compareList.find((item) => item.id === value.id));
 }
 
-function intersection(a, b) {
-  return a.filter((value) => b.find((item) => item.id === value.id));
+function intersection(listOne, listTwo) {
+  return listOne.filter((value) => listTwo.find((item) => item.id === value.id));
 }
 
-function union(a, b) {
-  return [...a, ...not(b, a)];
+function union(listOne, listTwo) {
+  return [...listOne, ...notInList(listTwo, listOne)];
 }
 
 const InfoGrupoEmpleadosEditable = ({
@@ -54,7 +54,6 @@ const InfoGrupoEmpleadosEditable = ({
   const [nombre, setNombre] = useState(nombreInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
   const [errores, setErrores] = useState({});
-  const [mostrarAlerta, setMostrarAlerta] = useState(false);
 
   // Estados para la lista de transferencia de empleados
   const [checkedEmpleados, setCheckedEmpleados] = useState([]);
@@ -66,38 +65,28 @@ const InfoGrupoEmpleadosEditable = ({
   const [leftSets, setLeftSets] = useState([]);
   const [rightSets, setRightSets] = useState(setsProductosInicial || []);
 
-  const rightSetsIds = useMemo(
-    () =>
-      rightSets
-        .map((item) => item.id)
-        .sort()
-        .join(','),
-    [rightSets]
-  );
-
-  const rightEmpleadosIds = useMemo(
-    () =>
-      rightEmpleados
-        .map((item) => item.id)
-        .sort()
-        .join(','),
-    [rightEmpleados]
-  );
-
   useEffect(() => {
     const obtenerDatos = async () => {
       const productos = await obtenerSetsProductos(clienteSeleccionado);
-      setLeftSets(productos.filter((prod) => !rightSets.find((r) => r.id === prod.id)));
+      setLeftSets(
+        productos.filter(
+          (producto) => !rightSets.find((selectedSet) => selectedSet.id === producto.id)
+        )
+      );
 
       const empleadosData = await obtenerEmpleados(clienteSeleccionado);
-      setLeftEmpleados(empleadosData.filter((emp) => !rightEmpleados.find((r) => r.id === emp.id)));
+      setLeftEmpleados(
+        empleadosData.filter(
+          (empleado) => !rightEmpleados.find((selectedEmp) => selectedEmp.id === empleado.id)
+        )
+      );
     };
 
     obtenerDatos();
-  }, [clienteSeleccionado]);
+  }, [clienteSeleccionado, rightSets, rightEmpleados]);
 
   // Validación de campos
-  const validarCampos = () => {
+  const validarCampos = useCallback(() => {
     const nuevosErrores = {};
 
     if (!nombre.trim()) {
@@ -114,22 +103,19 @@ const InfoGrupoEmpleadosEditable = ({
 
     setErrores(nuevosErrores);
     return Object.keys(nuevosErrores).length === 0;
-  };
+  }, [nombre, descripcion]); // Add dependencies that validarCampos uses
 
   // Efecto para validar y notificar cambios
   useEffect(() => {
     const isValid = validarCampos();
-
-    if (onFormDataChange) {
-      onFormDataChange({
-        isValid,
-        nombre,
-        descripcion,
-        setsDeProductos: rightSets.map((set) => set.id),
-        empleados: rightEmpleados.map((emp) => emp.id),
-      });
-    }
-  }, [nombre, descripcion, rightSets, rightEmpleados]);
+    onFormDataChange?.({
+      isValid,
+      nombre,
+      descripcion,
+      setsDeProductos: rightSets.map((set) => set.id),
+      empleados: rightEmpleados.map((emp) => emp.id),
+    });
+  }, [nombre, descripcion, rightSets, rightEmpleados, onFormDataChange, validarCampos]);
 
   // Handlers para empleados
   const handleToggleEmpleados = (value) => () => {
@@ -158,15 +144,15 @@ const InfoGrupoEmpleadosEditable = ({
   const handleCheckedRightEmpleados = () => {
     const leftChecked = intersection(checkedEmpleados, leftEmpleados);
     setRightEmpleados(rightEmpleados.concat(leftChecked));
-    setLeftEmpleados(not(leftEmpleados, leftChecked));
-    setCheckedEmpleados(not(checkedEmpleados, leftChecked));
+    setLeftEmpleados(notInList(leftEmpleados, leftChecked));
+    setCheckedEmpleados(notInList(checkedEmpleados, leftChecked));
   };
 
   const handleCheckedLeftEmpleados = () => {
     const rightChecked = intersection(checkedEmpleados, rightEmpleados);
     setLeftEmpleados(leftEmpleados.concat(rightChecked));
-    setRightEmpleados(not(rightEmpleados, rightChecked));
-    setCheckedEmpleados(not(checkedEmpleados, rightChecked));
+    setRightEmpleados(notInList(rightEmpleados, rightChecked));
+    setCheckedEmpleados(notInList(checkedEmpleados, rightChecked));
   };
 
   // Handlers para sets productos
@@ -196,15 +182,15 @@ const InfoGrupoEmpleadosEditable = ({
   const handleCheckedRightSets = () => {
     const leftChecked = intersection(checkedSets, leftSets);
     setRightSets(rightSets.concat(leftChecked));
-    setLeftSets(not(leftSets, leftChecked));
-    setCheckedSets(not(checkedSets, leftChecked));
+    setLeftSets(notInList(leftSets, leftChecked));
+    setCheckedSets(notInList(checkedSets, leftChecked));
   };
 
   const handleCheckedLeftSets = () => {
     const rightChecked = intersection(checkedSets, rightSets);
     setLeftSets(leftSets.concat(rightChecked));
-    setRightSets(not(rightSets, rightChecked));
-    setCheckedSets(not(checkedSets, rightChecked));
+    setRightSets(notInList(rightSets, rightChecked));
+    setCheckedSets(notInList(checkedSets, rightChecked));
   };
 
   const numberOfCheckedEmpleados = (items) => intersection(checkedEmpleados, items).length;
@@ -212,7 +198,7 @@ const InfoGrupoEmpleadosEditable = ({
 
   const handleToggleAllEmpleados = (items) => () => {
     if (numberOfCheckedEmpleados(items) === items.length) {
-      setCheckedEmpleados(not(checkedEmpleados, items));
+      setCheckedEmpleados(notInList(checkedEmpleados, items));
     } else {
       setCheckedEmpleados(union(checkedEmpleados, items));
     }
@@ -220,7 +206,7 @@ const InfoGrupoEmpleadosEditable = ({
 
   const handleToggleAllSets = (items) => () => {
     if (numberOfCheckedSets(items) === items.length) {
-      setCheckedSets(not(checkedSets, items));
+      setCheckedSets(notInList(checkedSets, items));
     } else {
       setCheckedSets(union(checkedSets, items));
     }
@@ -235,8 +221,8 @@ const InfoGrupoEmpleadosEditable = ({
             onClick={handleToggleAllEmpleados(items)}
             checked={numberOfCheckedEmpleados(items) === items.length && items.length !== 0}
             indeterminate={
-              numberOfCheckedEmpleados(items) !== items.length &&
-              numberOfCheckedEmpleados(items) !== 0
+              numberOfCheckedEmpleados(items) !== items.length
+              && numberOfCheckedEmpleados(items) !== 0
             }
             disabled={items.length === 0}
             inputProps={{
@@ -355,7 +341,7 @@ const InfoGrupoEmpleadosEditable = ({
             variant='outlined'
             value={nombre}
             placeholder='Nombre del grupo'
-            onChange={(e) => setNombre(e.target.value)}
+            onChange={(event) => setNombre(event.target.value)}
             error={!!errores.nombre}
             helperText={errores.nombre || `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`}
             inputProps={{ maxLength: LIMITE_NOMBRE }}
@@ -371,7 +357,7 @@ const InfoGrupoEmpleadosEditable = ({
             variant='outlined'
             value={descripcion}
             placeholder='Escribe una descripción'
-            onChange={(e) => setDescripcion(e.target.value)}
+            onChange={(event) => setDescripcion(event.target.value)}
             error={!!errores.descripcion}
             helperText={
               errores.descripcion || `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
index 9a8e4dc0..7bf9bba3 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
@@ -79,8 +79,8 @@ const FormaCrearCategorias = ({
         onChange={(evento) => setNombreCategoria(evento.target.value.slice(0, LIMITE_NOMBRE))}
         inputProps={{ maxLength: LIMITE_NOMBRE }}
         helperText={
-          errores?.nombreCategoria ||
-          `${nombreCategoria.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
+          errores?.nombreCategoria
+          || `${nombreCategoria.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
         }
         error={intentoEnviar && !!errores?.nombreCategoria}
         required
@@ -108,8 +108,8 @@ const FormaCrearCategorias = ({
         }
         inputProps={{ maxLength: LIMITE_DESCRIPCION }}
         helperText={
-          errores?.descripcionCategoria ||
-          `${descripcionCategoria.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`
+          errores?.descripcionCategoria
+          || `${descripcionCategoria.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`
         }
         error={intentoEnviar && !!errores?.descripcionCategoria}
         required
diff --git a/src/Vistas/Componentes/Organismos/Tabla.jsx b/src/Vistas/Componentes/Organismos/Tabla.jsx
index b6dc0b2e..933bade5 100644
--- a/src/Vistas/Componentes/Organismos/Tabla.jsx
+++ b/src/Vistas/Componentes/Organismos/Tabla.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import { tokens, themeSettings } from '@SRC/theme';
 import { styled } from '@mui/material/styles';
 
@@ -10,6 +10,8 @@ const spanishLocaleText = {
   columnMenuSortDesc: 'Ordenar descendente',
   columnMenuUnsort: 'Restablecer orden',
   columnMenuFilter: 'Filtrar',
+  columnMenuHideColumn: 'Ocultar columna',
+  columnMenuManageColumns: 'Mostrar columnas',
   noResultsOverlayLabel: 'No se encontraron resultados.',
   filterOperatorContains: 'Contiene',
   filterOperatorEquals: 'Es igual a',
@@ -113,11 +115,6 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => {
     '& .MuiDataGrid-columnHeader, & .MuiDataGrid-cell': {
       outline: 'none',
     },
-
-    // Ocultar el separador de redimensionamiento de columnas
-    '& .MuiDataGrid-columnSeparator': {
-      display: 'none',
-    },
   };
 });
 
@@ -136,12 +133,6 @@ const Tabla = ({
     pageSize: pageSize || 5,
   });
 
-  const handleSelectionModelChange = (newSelection) => {
-    if (typeof onRowSelectionModelChange === 'function') {
-      onRowSelectionModelChange(newSelection);
-    }
-  };
-
   return (
     <StyledDataGrid
       rows={rows}
@@ -151,7 +142,6 @@ const Tabla = ({
       onRowClick={onRowClick}
       checkboxSelection={checkboxSelection}
       disableRowSelectionOnClick={disableRowSelectionOnClick}
-      disableColumnResize={true} // Esta prop deshabilita el redimensionamiento
       onRowSelectionModelChange={(seleccion) => {
         onRowSelectionModelChange(seleccion);
       }}
@@ -160,29 +150,6 @@ const Tabla = ({
       pagination
       localeText={spanishLocaleText}
       rowHeight={70}
-      disableColumnSelector
-      slots={{
-        toolbar: GridToolbar,
-      }}
-      componentsProps={{
-        toolbar: {
-          showQuickFilter: true,
-          quickFilterProps: { debounceMs: 500 },
-          csvOptions: { disableToolbarButton: true },
-          printOptions: { disableToolbarButton: true },
-        },
-      }}
-      initialState={{
-        columns: {
-          columnVisibilityModel: {},
-        },
-        filter: {
-          filterModel: {
-            items: [],
-          },
-        },
-      }}
-      hideColumnsButton
     />
   );
 };
@@ -212,9 +179,8 @@ Tabla.defaultProps = {
   loading: false,
   pageSize: 5,
   onRowClick: () => {},
-  onRowSelectionModelChange: undefined,
-  checkboxSelection: false,
-  disableRowSelectionOnClick: false,
+  onRowSelectionModelChange: () => {},
+  disableRowSelectionOnClick: true,
 };
 
 export default Tabla;
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index c18a01c4..58690de0 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -1,6 +1,6 @@
 // RF22 - Consulta Lista de Grupo Empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF22
 // RF23 Lee grupo de empleados -https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF23
-import React, { use, useState } from 'react';
+import React, { useState } from 'react';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import { useConsultarGrupos } from '@Hooks/Empleados/useConsultarGrupos';
@@ -23,8 +23,8 @@ const ListaGrupoEmpleados = () => {
   const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
 
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const [gruposSeleccionados, setGruposSeleccionados] = useState([]);
diff --git a/src/hooks/Empleados/useActualizarGrupoEmpleados.js b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
index a2c6057a..a9c267ba 100644
--- a/src/hooks/Empleados/useActualizarGrupoEmpleados.js
+++ b/src/hooks/Empleados/useActualizarGrupoEmpleados.js
@@ -34,11 +34,11 @@ export const useActualizarGrupoEmpleados = () => {
     } catch (err) {
       setExito(false);
       setError(true);
-      const errorMessage =
-        err?.response?.data?.mensaje ||
-        err?.response?.data?.error ||
-        err?.message ||
-        'Ocurrió un error al actualizar el grupo de empleados';
+      const errorMessage
+        = err?.response?.data?.mensaje
+        || err?.response?.data?.error
+        || err?.message
+        || 'Ocurrió un error al actualizar el grupo de empleados';
 
       setMensaje(errorMessage);
       throw err;

From 96130d786c1eff88337680910c57d118e2d38dad Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 22:02:32 -0600
Subject: [PATCH 066/160] =?UTF-8?q?Fix:=20correci=C3=B3n=20loop=20renderiz?=
 =?UTF-8?q?aci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 562 ++++++++++--------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  20 +-
 2 files changed, 329 insertions(+), 253 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 16dc97d3..a5d185af 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -1,5 +1,5 @@
 import CampoTexto from '@Atomos/CampoTexto';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import obtenerSetsProductos from '@Servicios/obtenerSetsProductos';
 import obtenerEmpleados from '@Servicios/obtenerEmpleados';
 import { useAuth } from '@Hooks/AuthProvider';
@@ -29,15 +29,23 @@ const MENSAJE_LIMITE = 'Máximo caracteres';
 
 // Funciones auxiliares para la lista de transferencia
 function notInList(sourceList, compareList) {
-  return sourceList.filter((value) => !compareList.find((item) => item.id === value.id));
+  return sourceList.filter(
+    (item) => !compareList.find((compareItem) => compareItem.id === item.id)
+  );
 }
 
 function intersection(listOne, listTwo) {
-  return listOne.filter((value) => listTwo.find((item) => item.id === value.id));
+  return listOne.filter((item) => listTwo.find((item2) => item2.id === item.id));
 }
 
 function union(listOne, listTwo) {
-  return [...listOne, ...notInList(listTwo, listOne)];
+  const combined = [...listOne];
+  listTwo.forEach((item) => {
+    if (!combined.find((existingItem) => existingItem.id === item.id)) {
+      combined.push(item);
+    }
+  });
+  return combined;
 }
 
 const InfoGrupoEmpleadosEditable = ({
@@ -50,286 +58,347 @@ const InfoGrupoEmpleadosEditable = ({
   const { usuario } = useAuth();
   const clienteSeleccionado = usuario.clienteSeleccionado;
 
+  // Ref para evitar llamadas múltiples del callback
+  const isInitializedRef = useRef(false);
+  const lastFormDataRef = useRef(null);
+
   // Estados locales
   const [nombre, setNombre] = useState(nombreInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
-  const [errores, setErrores] = useState({});
+
+  // Estados para datos completos (sin filtrar)
+  const [todosLosSets, setTodosLosSets] = useState([]);
+  const [todosLosEmpleados, setTodosLosEmpleados] = useState([]);
+  const [datosListos, setDatosListos] = useState(false);
 
   // Estados para la lista de transferencia de empleados
   const [checkedEmpleados, setCheckedEmpleados] = useState([]);
-  const [leftEmpleados, setLeftEmpleados] = useState([]);
   const [rightEmpleados, setRightEmpleados] = useState(empleadosInicial || []);
 
   // Estados para la lista de transferencia de sets productos
   const [checkedSets, setCheckedSets] = useState([]);
-  const [leftSets, setLeftSets] = useState([]);
   const [rightSets, setRightSets] = useState(setsProductosInicial || []);
 
+  // Carga inicial de datos
   useEffect(() => {
     const obtenerDatos = async () => {
-      const productos = await obtenerSetsProductos(clienteSeleccionado);
-      setLeftSets(
-        productos.filter(
-          (producto) => !rightSets.find((selectedSet) => selectedSet.id === producto.id)
-        )
-      );
-
-      const empleadosData = await obtenerEmpleados(clienteSeleccionado);
-      setLeftEmpleados(
-        empleadosData.filter(
-          (empleado) => !rightEmpleados.find((selectedEmp) => selectedEmp.id === empleado.id)
-        )
-      );
+      try {
+        const [productos, empleadosData] = await Promise.all([
+          obtenerSetsProductos(clienteSeleccionado),
+          obtenerEmpleados(clienteSeleccionado),
+        ]);
+
+        setTodosLosSets(productos);
+        setTodosLosEmpleados(empleadosData);
+        setDatosListos(true);
+        isInitializedRef.current = true;
+      } catch (error) {
+        console.error('Error al obtener datos:', error);
+      }
     };
 
-    obtenerDatos();
-  }, [clienteSeleccionado, rightSets, rightEmpleados]);
-
-  // Validación de campos
-  const validarCampos = useCallback(() => {
-    const nuevosErrores = {};
-
-    if (!nombre.trim()) {
-      nuevosErrores.nombre = 'Este campo es obligatorio';
-    } else if (nombre.length > LIMITE_NOMBRE) {
-      nuevosErrores.nombre = `El nombre no puede exceder ${LIMITE_NOMBRE} caracteres`;
+    if (clienteSeleccionado && !isInitializedRef.current) {
+      obtenerDatos();
     }
+  }, [clienteSeleccionado]);
+
+  // Calcular listas filtradas como valores derivados
+  const leftSets = useMemo(
+    () =>
+      todosLosSets.filter(
+        (producto) => !rightSets.find((selectedSet) => selectedSet.id === producto.id)
+      ),
+    [todosLosSets, rightSets]
+  );
 
-    if (!descripcion.trim()) {
-      nuevosErrores.descripcion = 'Este campo es obligatorio';
-    } else if (descripcion.length > LIMITE_DESCRIPCION) {
-      nuevosErrores.descripcion = `La descripción no puede exceder ${LIMITE_DESCRIPCION} caracteres`;
-    }
+  const leftEmpleados = useMemo(
+    () =>
+      todosLosEmpleados.filter(
+        (empleado) => !rightEmpleados.find((selectedEmp) => selectedEmp.id === empleado.id)
+      ),
+    [todosLosEmpleados, rightEmpleados]
+  );
 
-    setErrores(nuevosErrores);
-    return Object.keys(nuevosErrores).length === 0;
-  }, [nombre, descripcion]); // Add dependencies that validarCampos uses
+  // Función estable para generar los datos del formulario
+  const generateFormData = useCallback(() => {
+    if (!datosListos) return null;
 
-  // Efecto para validar y notificar cambios
-  useEffect(() => {
-    const isValid = validarCampos();
-    onFormDataChange?.({
-      isValid,
-      nombre,
-      descripcion,
+    return {
+      nombre: nombre.trim(),
+      descripcion: descripcion.trim(),
       setsDeProductos: rightSets.map((set) => set.id),
       empleados: rightEmpleados.map((emp) => emp.id),
-    });
-  }, [nombre, descripcion, rightSets, rightEmpleados, onFormDataChange, validarCampos]);
-
-  // Handlers para empleados
-  const handleToggleEmpleados = (value) => () => {
-    const currentIndex = checkedEmpleados.findIndex((item) => item.id === value.id);
-    const newChecked = [...checkedEmpleados];
-
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
+    };
+  }, [nombre, descripcion, rightSets, rightEmpleados, datosListos]);
+
+  // Efecto para notificar cambios en el formulario con debounce y comparación
+  useEffect(() => {
+    if (!datosListos || !onFormDataChange) return;
+
+    const formData = generateFormData();
+
+    // Comparar con los datos anteriores para evitar llamadas innecesarias
+    const formDataString = JSON.stringify(formData);
+    const lastFormDataString = JSON.stringify(lastFormDataRef.current);
+
+    if (formDataString !== lastFormDataString) {
+      lastFormDataRef.current = formData;
+
+      // Usar setTimeout para debounce y evitar llamadas síncronas que causen loops
+      const timeoutId = setTimeout(() => {
+        onFormDataChange(formData);
+      }, 0);
+
+      return () => clearTimeout(timeoutId);
     }
+  }, [generateFormData, onFormDataChange, datosListos]);
+
+  // Handlers para empleados - estabilizados
+  const handleToggleEmpleados = useCallback(
+    (value) => () => {
+      setCheckedEmpleados((prev) => {
+        const currentIndex = prev.findIndex((item) => item.id === value.id);
+        const newChecked = [...prev];
+
+        if (currentIndex === -1) {
+          newChecked.push(value);
+        } else {
+          newChecked.splice(currentIndex, 1);
+        }
 
-    setCheckedEmpleados(newChecked);
-  };
+        return newChecked;
+      });
+    },
+    []
+  );
 
-  const handleAllLeftEmpleados = () => {
-    setLeftEmpleados(leftEmpleados.concat(rightEmpleados));
+  const handleAllLeftEmpleados = useCallback(() => {
     setRightEmpleados([]);
-  };
+    setCheckedEmpleados([]);
+  }, []);
 
-  const handleAllRightEmpleados = () => {
-    setRightEmpleados(rightEmpleados.concat(leftEmpleados));
-    setLeftEmpleados([]);
-  };
+  const handleAllRightEmpleados = useCallback(() => {
+    setRightEmpleados((prev) => [...prev, ...leftEmpleados]);
+    setCheckedEmpleados([]);
+  }, [leftEmpleados]);
 
-  const handleCheckedRightEmpleados = () => {
+  const handleCheckedRightEmpleados = useCallback(() => {
     const leftChecked = intersection(checkedEmpleados, leftEmpleados);
-    setRightEmpleados(rightEmpleados.concat(leftChecked));
-    setLeftEmpleados(notInList(leftEmpleados, leftChecked));
-    setCheckedEmpleados(notInList(checkedEmpleados, leftChecked));
-  };
+    setRightEmpleados((prev) => [...prev, ...leftChecked]);
+    setCheckedEmpleados((prev) => notInList(prev, leftChecked));
+  }, [checkedEmpleados, leftEmpleados]);
 
-  const handleCheckedLeftEmpleados = () => {
+  const handleCheckedLeftEmpleados = useCallback(() => {
     const rightChecked = intersection(checkedEmpleados, rightEmpleados);
-    setLeftEmpleados(leftEmpleados.concat(rightChecked));
-    setRightEmpleados(notInList(rightEmpleados, rightChecked));
-    setCheckedEmpleados(notInList(checkedEmpleados, rightChecked));
-  };
-
-  // Handlers para sets productos
-  const handleToggleSets = (value) => () => {
-    const currentIndex = checkedSets.findIndex((item) => item.id === value.id);
-    const newChecked = [...checkedSets];
-
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
-    }
+    setRightEmpleados((prev) => notInList(prev, rightChecked));
+    setCheckedEmpleados((prev) => notInList(prev, rightChecked));
+  }, [checkedEmpleados, rightEmpleados]);
+
+  // Handlers para sets productos - estabilizados
+  const handleToggleSets = useCallback(
+    (value) => () => {
+      setCheckedSets((prev) => {
+        const currentIndex = prev.findIndex((item) => item.id === value.id);
+        const newChecked = [...prev];
+
+        if (currentIndex === -1) {
+          newChecked.push(value);
+        } else {
+          newChecked.splice(currentIndex, 1);
+        }
 
-    setCheckedSets(newChecked);
-  };
+        return newChecked;
+      });
+    },
+    []
+  );
 
-  const handleAllLeftSets = () => {
-    setLeftSets(leftSets.concat(rightSets));
+  const handleAllLeftSets = useCallback(() => {
     setRightSets([]);
-  };
+    setCheckedSets([]);
+  }, []);
 
-  const handleAllRightSets = () => {
-    setRightSets(rightSets.concat(leftSets));
-    setLeftSets([]);
-  };
+  const handleAllRightSets = useCallback(() => {
+    setRightSets((prev) => [...prev, ...leftSets]);
+    setCheckedSets([]);
+  }, [leftSets]);
 
-  const handleCheckedRightSets = () => {
+  const handleCheckedRightSets = useCallback(() => {
     const leftChecked = intersection(checkedSets, leftSets);
-    setRightSets(rightSets.concat(leftChecked));
-    setLeftSets(notInList(leftSets, leftChecked));
-    setCheckedSets(notInList(checkedSets, leftChecked));
-  };
+    setRightSets((prev) => [...prev, ...leftChecked]);
+    setCheckedSets((prev) => notInList(prev, leftChecked));
+  }, [checkedSets, leftSets]);
 
-  const handleCheckedLeftSets = () => {
+  const handleCheckedLeftSets = useCallback(() => {
     const rightChecked = intersection(checkedSets, rightSets);
-    setLeftSets(leftSets.concat(rightChecked));
-    setRightSets(notInList(rightSets, rightChecked));
-    setCheckedSets(notInList(checkedSets, rightChecked));
-  };
-
-  const numberOfCheckedEmpleados = (items) => intersection(checkedEmpleados, items).length;
-  const numberOfCheckedSets = (items) => intersection(checkedSets, items).length;
-
-  const handleToggleAllEmpleados = (items) => () => {
-    if (numberOfCheckedEmpleados(items) === items.length) {
-      setCheckedEmpleados(notInList(checkedEmpleados, items));
-    } else {
-      setCheckedEmpleados(union(checkedEmpleados, items));
-    }
-  };
+    setRightSets((prev) => notInList(prev, rightChecked));
+    setCheckedSets((prev) => notInList(prev, rightChecked));
+  }, [checkedSets, rightSets]);
+
+  // Funciones auxiliares memoizadas
+  const numberOfCheckedEmpleados = useMemo(
+    () => (items) => intersection(checkedEmpleados, items).length,
+    [checkedEmpleados]
+  );
 
-  const handleToggleAllSets = (items) => () => {
-    if (numberOfCheckedSets(items) === items.length) {
-      setCheckedSets(notInList(checkedSets, items));
-    } else {
-      setCheckedSets(union(checkedSets, items));
-    }
-  };
-
-  const customListEmpleados = (title, items) => (
-    <Card>
-      <CardHeader
-        sx={{ px: 2, py: 1 }}
-        avatar={
-          <Checkbox
-            onClick={handleToggleAllEmpleados(items)}
-            checked={numberOfCheckedEmpleados(items) === items.length && items.length !== 0}
-            indeterminate={
-              numberOfCheckedEmpleados(items) !== items.length
-              && numberOfCheckedEmpleados(items) !== 0
-            }
-            disabled={items.length === 0}
-            inputProps={{
-              'aria-label': 'all items selected',
-            }}
-          />
-        }
-        title={title}
-        subheader={`${numberOfCheckedEmpleados(items)}/${items.length} seleccionados`}
-      />
-      <Divider />
-      <List
-        sx={{
-          width: 350,
-          height: 300,
-          bgcolor: 'background.paper',
-          overflow: 'auto',
-        }}
-        dense
-        component='div'
-        role='list'
-      >
-        {items.map((value) => {
-          const labelId = `transfer-list-empleados-${value.id}-label`;
-
-          return (
-            <ListItemButton key={value.id} role='listitem' onClick={handleToggleEmpleados(value)}>
-              <ListItemIcon>
-                <Checkbox
-                  checked={checkedEmpleados.some((item) => item.id === value.id)}
-                  tabIndex={-1}
-                  disableRipple
-                  inputProps={{
-                    'aria-labelledby': labelId,
-                  }}
+  const numberOfCheckedSets = useMemo(
+    () => (items) => intersection(checkedSets, items).length,
+    [checkedSets]
+  );
+
+  const handleToggleAllEmpleados = useCallback(
+    (items) => () => {
+      if (numberOfCheckedEmpleados(items) === items.length) {
+        setCheckedEmpleados((prev) => notInList(prev, items));
+      } else {
+        setCheckedEmpleados((prev) => union(prev, items));
+      }
+    },
+    [numberOfCheckedEmpleados]
+  );
+
+  const handleToggleAllSets = useCallback(
+    (items) => () => {
+      if (numberOfCheckedSets(items) === items.length) {
+        setCheckedSets((prev) => notInList(prev, items));
+      } else {
+        setCheckedSets((prev) => union(prev, items));
+      }
+    },
+    [numberOfCheckedSets]
+  );
+
+  // Componentes de lista memoizados
+  const customListEmpleados = useCallback(
+    (title, items) => (
+      <Card>
+        <CardHeader
+          sx={{ px: 2, py: 1 }}
+          avatar={
+            <Checkbox
+              onClick={handleToggleAllEmpleados(items)}
+              checked={numberOfCheckedEmpleados(items) === items.length && items.length !== 0}
+              indeterminate={
+                numberOfCheckedEmpleados(items) !== items.length &&
+                numberOfCheckedEmpleados(items) !== 0
+              }
+              disabled={items.length === 0}
+              inputProps={{
+                'aria-label': 'all items selected',
+              }}
+            />
+          }
+          title={title}
+          subheader={`${numberOfCheckedEmpleados(items)}/${items.length} seleccionados`}
+        />
+        <Divider />
+        <List
+          sx={{
+            width: 350,
+            height: 300,
+            bgcolor: 'background.paper',
+            overflow: 'auto',
+          }}
+          dense
+          component='div'
+          role='list'
+        >
+          {items.map((value) => {
+            const labelId = `transfer-list-empleados-${value.id}-label`;
+
+            return (
+              <ListItemButton key={value.id} role='listitem' onClick={handleToggleEmpleados(value)}>
+                <ListItemIcon>
+                  <Checkbox
+                    checked={checkedEmpleados.some((item) => item.id === value.id)}
+                    tabIndex={-1}
+                    disableRipple
+                    inputProps={{
+                      'aria-labelledby': labelId,
+                    }}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={labelId}
+                  primary={value.nombreCompleto || value.nombre}
+                  secondary={value.correoElectronico || value.correo}
                 />
-              </ListItemIcon>
-              <ListItemText
-                id={labelId}
-                primary={value.nombreCompleto || value.nombre}
-                secondary={value.correoElectronico || value.correo}
-              />
-            </ListItemButton>
-          );
-        })}
-      </List>
-    </Card>
+              </ListItemButton>
+            );
+          })}
+        </List>
+      </Card>
+    ),
+    [checkedEmpleados, handleToggleEmpleados, handleToggleAllEmpleados, numberOfCheckedEmpleados]
   );
-  const customListSets = (title, items) => (
-    <Card>
-      <CardHeader
-        sx={{ px: 2, py: 1 }}
-        avatar={
-          <Checkbox
-            onClick={handleToggleAllSets(items)}
-            checked={numberOfCheckedSets(items) === items.length && items.length !== 0}
-            indeterminate={
-              numberOfCheckedSets(items) !== items.length && numberOfCheckedSets(items) !== 0
-            }
-            disabled={items.length === 0}
-            inputProps={{
-              'aria-label': 'all items selected',
-            }}
-          />
-        }
-        title={title}
-        subheader={`${numberOfCheckedSets(items)}/${items.length} seleccionados`}
-      />
-      <Divider />
-      <List
-        sx={{
-          width: 350,
-          height: 300,
-          bgcolor: 'background.paper',
-          overflow: 'auto',
-        }}
-        dense
-        component='div'
-        role='list'
-      >
-        {items.map((value) => {
-          const labelId = `transfer-list-sets-${value.id}-label`;
-
-          return (
-            <ListItemButton key={value.id} role='listitem' onClick={handleToggleSets(value)}>
-              <ListItemIcon>
-                <Checkbox
-                  checked={checkedSets.some((item) => item.id === value.id)}
-                  tabIndex={-1}
-                  disableRipple
-                  inputProps={{
-                    'aria-labelledby': labelId,
-                  }}
+
+  const customListSets = useCallback(
+    (title, items) => (
+      <Card>
+        <CardHeader
+          sx={{ px: 2, py: 1 }}
+          avatar={
+            <Checkbox
+              onClick={handleToggleAllSets(items)}
+              checked={numberOfCheckedSets(items) === items.length && items.length !== 0}
+              indeterminate={
+                numberOfCheckedSets(items) !== items.length && numberOfCheckedSets(items) !== 0
+              }
+              disabled={items.length === 0}
+              inputProps={{
+                'aria-label': 'all items selected',
+              }}
+            />
+          }
+          title={title}
+          subheader={`${numberOfCheckedSets(items)}/${items.length} seleccionados`}
+        />
+        <Divider />
+        <List
+          sx={{
+            width: 350,
+            height: 300,
+            bgcolor: 'background.paper',
+            overflow: 'auto',
+          }}
+          dense
+          component='div'
+          role='list'
+        >
+          {items.map((value) => {
+            const labelId = `transfer-list-sets-${value.id}-label`;
+
+            return (
+              <ListItemButton key={value.id} role='listitem' onClick={handleToggleSets(value)}>
+                <ListItemIcon>
+                  <Checkbox
+                    checked={checkedSets.some((item) => item.id === value.id)}
+                    tabIndex={-1}
+                    disableRipple
+                    inputProps={{
+                      'aria-labelledby': labelId,
+                    }}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={labelId}
+                  primary={value.nombreProducto}
+                  secondary={`ID: ${value.id}`}
                 />
-              </ListItemIcon>
-              <ListItemText
-                id={labelId}
-                primary={value.nombreProducto}
-                secondary={`ID: ${value.id}`}
-              />
-            </ListItemButton>
-          );
-        })}
-      </List>
-    </Card>
+              </ListItemButton>
+            );
+          })}
+        </List>
+      </Card>
+    ),
+    [checkedSets, handleToggleSets, handleToggleAllSets, numberOfCheckedSets]
   );
 
+  // Mostrar loading mientras se cargan los datos
+  if (!datosListos) {
+    return <div>Cargando datos...</div>;
+  }
+
   return (
     <Box sx={{ width: '800px', margin: '0 auto', borderRadius: '10px' }}>
       <Grid container spacing={3}>
@@ -338,12 +407,13 @@ const InfoGrupoEmpleadosEditable = ({
           <Texto variant='h6'>Nombre:</Texto>
           <CampoTexto
             fullWidth
+            type='text'
             variant='outlined'
             value={nombre}
             placeholder='Nombre del grupo'
-            onChange={(event) => setNombre(event.target.value)}
-            error={!!errores.nombre}
-            helperText={errores.nombre || `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`}
+            onChange={(evento) => setNombre(evento.target.value.slice(0, LIMITE_NOMBRE))}
+            required
+            helperText={`${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`}
             inputProps={{ maxLength: LIMITE_NOMBRE }}
             sx={{ mt: 1, mb: 2, mr: 8, width: '300px', overflow: 'auto' }}
           />
@@ -357,11 +427,8 @@ const InfoGrupoEmpleadosEditable = ({
             variant='outlined'
             value={descripcion}
             placeholder='Escribe una descripción'
-            onChange={(event) => setDescripcion(event.target.value)}
-            error={!!errores.descripcion}
-            helperText={
-              errores.descripcion || `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
-            }
+            onChange={(evento) => setDescripcion(evento.target.value.slice(0, LIMITE_DESCRIPCION))}
+            helperText={`${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`}
             inputProps={{ maxLength: LIMITE_DESCRIPCION }}
             sx={{ mt: 1, mb: 2, width: '400px', overflow: 'auto' }}
           />
@@ -398,7 +465,6 @@ const InfoGrupoEmpleadosEditable = ({
                     disabled={numberOfCheckedSets(leftSets) === 0}
                     aria-label='move selected right'
                     startIcon={<KeyboardArrowRightIcon sx={{ ml: 1 }} />}
-                    allign='center'
                   />
                   <Button
                     sx={{ my: 0.5 }}
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 58690de0..787af844 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -23,8 +23,8 @@ const ListaGrupoEmpleados = () => {
   const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR
-    = '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR =
+    '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
 
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const [gruposSeleccionados, setGruposSeleccionados] = useState([]);
@@ -35,6 +35,7 @@ const ListaGrupoEmpleados = () => {
   const [idGrupoSeleccionado, setIdGrupoSeleccionado] = useState(null);
   const [abrirModalEditar, setAbrirModalEditar] = useState(false);
   const [formData, setFormData] = useState(null);
+
   const {
     grupoEmpleados,
     cargando: cargandoDetalle,
@@ -75,6 +76,17 @@ const ListaGrupoEmpleados = () => {
   const { actualizarGrupo } = useActualizarGrupoEmpleados();
 
   const handleGuardar = async () => {
+    if (!formData?.nombre?.trim() || !formData?.descripcion?.trim()) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'El nombre y la descripción son obligatorios.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+
     try {
       await actualizarGrupo(
         idGrupoSeleccionado,
@@ -83,9 +95,8 @@ const ListaGrupoEmpleados = () => {
         formData.empleados,
         formData.setsDeProductos
       );
-
-      setAbrirModalEditar(false);
       await refetch();
+      setAbrirModalEditar(false);
       setAlerta({
         tipo: 'success',
         mensaje: 'Grupo de empleados actualizado correctamente.',
@@ -285,7 +296,6 @@ const ListaGrupoEmpleados = () => {
               color: 'primary',
               outlineColor: colores.primario[10],
               onClick: handleGuardar,
-              disabled: !formData?.isValid,
             },
             {
               label: 'Cancelar',

From d421cea71433880cc25c40466e66d15a82c899d3 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 22:31:11 -0600
Subject: [PATCH 067/160] Fix: correcion variables y es lint

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 407 ++++++++++--------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |   4 +-
 2 files changed, 223 insertions(+), 188 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index a5d185af..000f46cb 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -28,24 +28,38 @@ const LIMITE_DESCRIPCION = 150;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 // Funciones auxiliares para la lista de transferencia
-function notInList(sourceList, compareList) {
-  return sourceList.filter(
-    (item) => !compareList.find((compareItem) => compareItem.id === item.id)
-  );
+function noEstaEnLista(listaOrigen, listaComparar) {
+  return listaOrigen
+    .filter((item) => !listaComparar.find((itemComparar) => itemComparar.id === item.id))
+    .sort((empleado1, empleado2) => {
+      const nombreA = (empleado1.nombreCompleto || empleado1.nombre || '').toLowerCase();
+      const nombreB = (empleado2.nombreCompleto || empleado2.nombre || '').toLowerCase();
+      return nombreA.localeCompare(nombreB);
+    });
 }
 
-function intersection(listOne, listTwo) {
-  return listOne.filter((item) => listTwo.find((item2) => item2.id === item.id));
+function interseccion(listaUno, listaDos) {
+  return listaUno
+    .filter((item) => listaDos.find((item2) => item2.id === item.id))
+    .sort((empleado1, empleado2) => {
+      const nombreA = (empleado1.nombreCompleto || empleado1.nombre || '').toLowerCase();
+      const nombreB = (empleado2.nombreCompleto || empleado2.nombre || '').toLowerCase();
+      return nombreA.localeCompare(nombreB);
+    });
 }
 
-function union(listOne, listTwo) {
-  const combined = [...listOne];
-  listTwo.forEach((item) => {
-    if (!combined.find((existingItem) => existingItem.id === item.id)) {
-      combined.push(item);
+function union(listaUno, listaDos) {
+  const combinados = [...listaUno];
+  listaDos.forEach((item) => {
+    if (!combinados.find((itemExistente) => itemExistente.id === item.id)) {
+      combinados.push(item);
     }
   });
-  return combined;
+  return combinados.sort((empleado1, empleado2) => {
+    const nombreA = (empleado1.nombreCompleto || empleado1.nombre || '').toLowerCase();
+    const nombreB = (empleado2.nombreCompleto || empleado2.nombre || '').toLowerCase();
+    return nombreA.localeCompare(nombreB);
+  });
 }
 
 const InfoGrupoEmpleadosEditable = ({
@@ -59,8 +73,7 @@ const InfoGrupoEmpleadosEditable = ({
   const clienteSeleccionado = usuario.clienteSeleccionado;
 
   // Ref para evitar llamadas múltiples del callback
-  const isInitializedRef = useRef(false);
-  const lastFormDataRef = useRef(null);
+  const referenciaUltimosFormData = useRef(null);
 
   // Estados locales
   const [nombre, setNombre] = useState(nombreInicial || '');
@@ -72,77 +85,80 @@ const InfoGrupoEmpleadosEditable = ({
   const [datosListos, setDatosListos] = useState(false);
 
   // Estados para la lista de transferencia de empleados
-  const [checkedEmpleados, setCheckedEmpleados] = useState([]);
-  const [rightEmpleados, setRightEmpleados] = useState(empleadosInicial || []);
+  const [empleadosSeleccionados, setEmpleadosSeleccionados] = useState([]);
+  const [empleadosDerecha, setEmpleadosDerecha] = useState(empleadosInicial || []);
 
   // Estados para la lista de transferencia de sets productos
-  const [checkedSets, setCheckedSets] = useState([]);
-  const [rightSets, setRightSets] = useState(setsProductosInicial || []);
+  const [setsSeleccionados, setSetsSeleccionados] = useState([]);
+  const [setsDerecha, setSetsDerecha] = useState(setsProductosInicial || []);
 
-  // Carga inicial de datos
+  // Efecto para cargar los datos iniciales
   useEffect(() => {
     const obtenerDatos = async () => {
       try {
-        const [productos, empleadosData] = await Promise.all([
+        const [productos, datosEmpleados] = await Promise.all([
           obtenerSetsProductos(clienteSeleccionado),
           obtenerEmpleados(clienteSeleccionado),
         ]);
 
-        setTodosLosSets(productos);
-        setTodosLosEmpleados(empleadosData);
+        // Ordenar productos por nombre
+        const productosOrdenados = productos.sort((productos1, productos2) =>
+          (productos1.nombreProducto || '')
+            .toLowerCase()
+            .localeCompare((productos2.nombreProducto || '').toLowerCase()));
+
+        // Ordenar empleados por nombre
+        const empleadosOrdenados = datosEmpleados.sort((empleado1, empleado2) => {
+          const nombreA = (empleado1.nombreCompleto || empleado1.nombre || '').toLowerCase();
+          const nombreB = (empleado2.nombreCompleto || empleado2.nombre || '').toLowerCase();
+          return nombreA.localeCompare(nombreB);
+        });
+
+        setTodosLosSets(productosOrdenados);
+        setTodosLosEmpleados(empleadosOrdenados);
         setDatosListos(true);
-        isInitializedRef.current = true;
       } catch (error) {
         console.error('Error al obtener datos:', error);
       }
     };
 
-    if (clienteSeleccionado && !isInitializedRef.current) {
-      obtenerDatos();
-    }
+    obtenerDatos();
   }, [clienteSeleccionado]);
 
-  // Calcular listas filtradas como valores derivados
-  const leftSets = useMemo(
-    () =>
-      todosLosSets.filter(
-        (producto) => !rightSets.find((selectedSet) => selectedSet.id === producto.id)
-      ),
-    [todosLosSets, rightSets]
+  const setsIzquierda = useMemo(
+    () => noEstaEnLista(todosLosSets, setsDerecha),
+    [todosLosSets, setsDerecha]
   );
 
-  const leftEmpleados = useMemo(
-    () =>
-      todosLosEmpleados.filter(
-        (empleado) => !rightEmpleados.find((selectedEmp) => selectedEmp.id === empleado.id)
-      ),
-    [todosLosEmpleados, rightEmpleados]
+  const empleadosIzquierda = useMemo(
+    () => noEstaEnLista(todosLosEmpleados, empleadosDerecha),
+    [todosLosEmpleados, empleadosDerecha]
   );
 
   // Función estable para generar los datos del formulario
-  const generateFormData = useCallback(() => {
+  const generarDatosFormulario = useCallback(() => {
     if (!datosListos) return null;
 
     return {
       nombre: nombre.trim(),
       descripcion: descripcion.trim(),
-      setsDeProductos: rightSets.map((set) => set.id),
-      empleados: rightEmpleados.map((emp) => emp.id),
+      setsDeProductos: setsDerecha.map((set) => set.id),
+      empleados: empleadosDerecha.map((emp) => emp.id),
     };
-  }, [nombre, descripcion, rightSets, rightEmpleados, datosListos]);
+  }, [nombre, descripcion, setsDerecha, empleadosDerecha, datosListos]);
 
   // Efecto para notificar cambios en el formulario con debounce y comparación
   useEffect(() => {
     if (!datosListos || !onFormDataChange) return;
 
-    const formData = generateFormData();
+    const formData = generarDatosFormulario();
 
     // Comparar con los datos anteriores para evitar llamadas innecesarias
     const formDataString = JSON.stringify(formData);
-    const lastFormDataString = JSON.stringify(lastFormDataRef.current);
+    const lastFormDataString = JSON.stringify(referenciaUltimosFormData.current);
 
     if (formDataString !== lastFormDataString) {
-      lastFormDataRef.current = formData;
+      referenciaUltimosFormData.current = formData;
 
       // Usar setTimeout para debounce y evitar llamadas síncronas que causen loops
       const timeoutId = setTimeout(() => {
@@ -151,145 +167,148 @@ const InfoGrupoEmpleadosEditable = ({
 
       return () => clearTimeout(timeoutId);
     }
-  }, [generateFormData, onFormDataChange, datosListos]);
+  }, [generarDatosFormulario, onFormDataChange, datosListos]);
 
-  // Handlers para empleados - estabilizados
-  const handleToggleEmpleados = useCallback(
-    (value) => () => {
-      setCheckedEmpleados((prev) => {
-        const currentIndex = prev.findIndex((item) => item.id === value.id);
-        const newChecked = [...prev];
+  // Handlers para empleados
+  const manejarSeleccionEmpleado = useCallback(
+    (valor) => () => {
+      setEmpleadosSeleccionados((prev) => {
+        const indiceActual = prev.findIndex((item) => item.id === valor.id);
+        const nuevaSeleccion = [...prev];
 
-        if (currentIndex === -1) {
-          newChecked.push(value);
+        if (indiceActual === -1) {
+          nuevaSeleccion.push(valor);
         } else {
-          newChecked.splice(currentIndex, 1);
+          nuevaSeleccion.splice(indiceActual, 1);
         }
 
-        return newChecked;
+        return nuevaSeleccion;
       });
     },
     []
   );
 
-  const handleAllLeftEmpleados = useCallback(() => {
-    setRightEmpleados([]);
-    setCheckedEmpleados([]);
+  const manejarTodosIzquierdaEmpleados = useCallback(() => {
+    setEmpleadosDerecha([]);
+    setEmpleadosSeleccionados([]);
   }, []);
 
-  const handleAllRightEmpleados = useCallback(() => {
-    setRightEmpleados((prev) => [...prev, ...leftEmpleados]);
-    setCheckedEmpleados([]);
-  }, [leftEmpleados]);
-
-  const handleCheckedRightEmpleados = useCallback(() => {
-    const leftChecked = intersection(checkedEmpleados, leftEmpleados);
-    setRightEmpleados((prev) => [...prev, ...leftChecked]);
-    setCheckedEmpleados((prev) => notInList(prev, leftChecked));
-  }, [checkedEmpleados, leftEmpleados]);
-
-  const handleCheckedLeftEmpleados = useCallback(() => {
-    const rightChecked = intersection(checkedEmpleados, rightEmpleados);
-    setRightEmpleados((prev) => notInList(prev, rightChecked));
-    setCheckedEmpleados((prev) => notInList(prev, rightChecked));
-  }, [checkedEmpleados, rightEmpleados]);
-
-  // Handlers para sets productos - estabilizados
-  const handleToggleSets = useCallback(
-    (value) => () => {
-      setCheckedSets((prev) => {
-        const currentIndex = prev.findIndex((item) => item.id === value.id);
-        const newChecked = [...prev];
-
-        if (currentIndex === -1) {
-          newChecked.push(value);
+  const manejarTodosDerechaEmpleados = useCallback(() => {
+    setEmpleadosDerecha((prev) => [...prev, ...empleadosIzquierda]);
+    setEmpleadosSeleccionados([]);
+  }, [empleadosIzquierda]);
+
+  const manejarSeleccionDerechaEmpleados = useCallback(() => {
+    const izquierdaSeleccionados = interseccion(empleadosSeleccionados, empleadosIzquierda);
+    setEmpleadosDerecha((prev) => [...prev, ...izquierdaSeleccionados]);
+    setEmpleadosSeleccionados((prev) => noEstaEnLista(prev, izquierdaSeleccionados));
+  }, [empleadosSeleccionados, empleadosIzquierda]);
+
+  const manejarSeleccionIzquierdaEmpleados = useCallback(() => {
+    const derechaSeleccionados = interseccion(empleadosSeleccionados, empleadosDerecha);
+    setEmpleadosDerecha((prev) => noEstaEnLista(prev, derechaSeleccionados));
+    setEmpleadosSeleccionados((prev) => noEstaEnLista(prev, derechaSeleccionados));
+  }, [empleadosSeleccionados, empleadosDerecha]);
+
+  // Handlers para sets productos
+  const manejarSeleccionSet = useCallback(
+    (valor) => () => {
+      setSetsSeleccionados((prev) => {
+        const indiceActual = prev.findIndex((item) => item.id === valor.id);
+        const nuevaSeleccion = [...prev];
+
+        if (indiceActual === -1) {
+          nuevaSeleccion.push(valor);
         } else {
-          newChecked.splice(currentIndex, 1);
+          nuevaSeleccion.splice(indiceActual, 1);
         }
 
-        return newChecked;
+        return nuevaSeleccion;
       });
     },
     []
   );
 
-  const handleAllLeftSets = useCallback(() => {
-    setRightSets([]);
-    setCheckedSets([]);
+  const manejarTodosIzquierdaSets = useCallback(() => {
+    setSetsDerecha([]);
+    setSetsSeleccionados([]);
   }, []);
 
-  const handleAllRightSets = useCallback(() => {
-    setRightSets((prev) => [...prev, ...leftSets]);
-    setCheckedSets([]);
-  }, [leftSets]);
+  const manejarTodosDerechaSets = useCallback(() => {
+    setSetsDerecha((prev) => [...prev, ...setsIzquierda]);
+    setSetsSeleccionados([]);
+  }, [setsIzquierda]);
 
-  const handleCheckedRightSets = useCallback(() => {
-    const leftChecked = intersection(checkedSets, leftSets);
-    setRightSets((prev) => [...prev, ...leftChecked]);
-    setCheckedSets((prev) => notInList(prev, leftChecked));
-  }, [checkedSets, leftSets]);
+  const manejarSeleccionDerechaSets = useCallback(() => {
+    const izquierdaSeleccionados = interseccion(setsSeleccionados, setsIzquierda);
+    setSetsDerecha((prev) => [...prev, ...izquierdaSeleccionados]);
+    setSetsSeleccionados((prev) => noEstaEnLista(prev, izquierdaSeleccionados));
+  }, [setsSeleccionados, setsIzquierda]);
 
-  const handleCheckedLeftSets = useCallback(() => {
-    const rightChecked = intersection(checkedSets, rightSets);
-    setRightSets((prev) => notInList(prev, rightChecked));
-    setCheckedSets((prev) => notInList(prev, rightChecked));
-  }, [checkedSets, rightSets]);
+  const manejarSeleccionIzquierdaSets = useCallback(() => {
+    const derechaSeleccionados = interseccion(setsSeleccionados, setsDerecha);
+    setSetsDerecha((prev) => noEstaEnLista(prev, derechaSeleccionados));
+    setSetsSeleccionados((prev) => noEstaEnLista(prev, derechaSeleccionados));
+  }, [setsSeleccionados, setsDerecha]);
 
   // Funciones auxiliares memoizadas
-  const numberOfCheckedEmpleados = useMemo(
-    () => (items) => intersection(checkedEmpleados, items).length,
-    [checkedEmpleados]
+  const contarEmpleadosSeleccionados = useMemo(
+    () => (items) => interseccion(empleadosSeleccionados, items).length,
+    [empleadosSeleccionados]
   );
 
-  const numberOfCheckedSets = useMemo(
-    () => (items) => intersection(checkedSets, items).length,
-    [checkedSets]
+  const contarSetsSeleccionados = useMemo(
+    () => (items) => interseccion(setsSeleccionados, items).length,
+    [setsSeleccionados]
   );
 
-  const handleToggleAllEmpleados = useCallback(
+  const manejarSeleccionTodosEmpleados = useCallback(
     (items) => () => {
-      if (numberOfCheckedEmpleados(items) === items.length) {
-        setCheckedEmpleados((prev) => notInList(prev, items));
+      if (contarEmpleadosSeleccionados(items) === items.length) {
+        setEmpleadosSeleccionados((prev) => noEstaEnLista(prev, items));
       } else {
-        setCheckedEmpleados((prev) => union(prev, items));
+        setEmpleadosSeleccionados((prev) => union(prev, items));
       }
     },
-    [numberOfCheckedEmpleados]
+    [contarEmpleadosSeleccionados]
   );
 
-  const handleToggleAllSets = useCallback(
+  const manejarSeleccionTodosSets = useCallback(
     (items) => () => {
-      if (numberOfCheckedSets(items) === items.length) {
-        setCheckedSets((prev) => notInList(prev, items));
+      if (contarSetsSeleccionados(items) === items.length) {
+        setSetsSeleccionados((prev) => noEstaEnLista(prev, items));
       } else {
-        setCheckedSets((prev) => union(prev, items));
+        setSetsSeleccionados((prev) => union(prev, items));
       }
     },
-    [numberOfCheckedSets]
+    [contarSetsSeleccionados]
   );
 
   // Componentes de lista memoizados
-  const customListEmpleados = useCallback(
-    (title, items) => (
+  const listaPersonalizadaEmpleados = useCallback(
+    (titulo, elementos) => (
       <Card>
         <CardHeader
           sx={{ px: 2, py: 1 }}
           avatar={
             <Checkbox
-              onClick={handleToggleAllEmpleados(items)}
-              checked={numberOfCheckedEmpleados(items) === items.length && items.length !== 0}
+              onClick={manejarSeleccionTodosEmpleados(elementos)}
+              checked={
+                contarEmpleadosSeleccionados(elementos) === elementos.length
+                && elementos.length !== 0
+              }
               indeterminate={
-                numberOfCheckedEmpleados(items) !== items.length &&
-                numberOfCheckedEmpleados(items) !== 0
+                contarEmpleadosSeleccionados(elementos) !== elementos.length
+                && contarEmpleadosSeleccionados(elementos) !== 0
               }
-              disabled={items.length === 0}
+              disabled={elementos.length === 0}
               inputProps={{
-                'aria-label': 'all items selected',
+                'aria-label': 'todos los elementos seleccionados',
               }}
             />
           }
-          title={title}
-          subheader={`${numberOfCheckedEmpleados(items)}/${items.length} seleccionados`}
+          title={titulo}
+          subheader={`${contarEmpleadosSeleccionados(elementos)}/${elementos.length} seleccionados`}
         />
         <Divider />
         <List
@@ -303,25 +322,29 @@ const InfoGrupoEmpleadosEditable = ({
           component='div'
           role='list'
         >
-          {items.map((value) => {
-            const labelId = `transfer-list-empleados-${value.id}-label`;
+          {elementos.map((valor) => {
+            const idEtiqueta = `lista-transferencia-empleados-${valor.id}-etiqueta`;
 
             return (
-              <ListItemButton key={value.id} role='listitem' onClick={handleToggleEmpleados(value)}>
+              <ListItemButton
+                key={valor.id}
+                role='listitem'
+                onClick={manejarSeleccionEmpleado(valor)}
+              >
                 <ListItemIcon>
                   <Checkbox
-                    checked={checkedEmpleados.some((item) => item.id === value.id)}
+                    checked={empleadosSeleccionados.some((item) => item.id === valor.id)}
                     tabIndex={-1}
                     disableRipple
                     inputProps={{
-                      'aria-labelledby': labelId,
+                      'aria-labelledby': idEtiqueta,
                     }}
                   />
                 </ListItemIcon>
                 <ListItemText
-                  id={labelId}
-                  primary={value.nombreCompleto || value.nombre}
-                  secondary={value.correoElectronico || value.correo}
+                  id={idEtiqueta}
+                  primary={valor.nombreCompleto || valor.nombre}
+                  secondary={valor.correoElectronico || valor.correo}
                 />
               </ListItemButton>
             );
@@ -329,29 +352,37 @@ const InfoGrupoEmpleadosEditable = ({
         </List>
       </Card>
     ),
-    [checkedEmpleados, handleToggleEmpleados, handleToggleAllEmpleados, numberOfCheckedEmpleados]
+    [
+      empleadosSeleccionados,
+      manejarSeleccionEmpleado,
+      manejarSeleccionTodosEmpleados,
+      contarEmpleadosSeleccionados,
+    ]
   );
 
-  const customListSets = useCallback(
-    (title, items) => (
+  const listaPersonalizadaSets = useCallback(
+    (titulo, elementos) => (
       <Card>
         <CardHeader
           sx={{ px: 2, py: 1 }}
           avatar={
             <Checkbox
-              onClick={handleToggleAllSets(items)}
-              checked={numberOfCheckedSets(items) === items.length && items.length !== 0}
+              onClick={manejarSeleccionTodosSets(elementos)}
+              checked={
+                contarSetsSeleccionados(elementos) === elementos.length && elementos.length !== 0
+              }
               indeterminate={
-                numberOfCheckedSets(items) !== items.length && numberOfCheckedSets(items) !== 0
+                contarSetsSeleccionados(elementos) !== elementos.length
+                && contarSetsSeleccionados(elementos) !== 0
               }
-              disabled={items.length === 0}
+              disabled={elementos.length === 0}
               inputProps={{
-                'aria-label': 'all items selected',
+                'aria-label': 'todos los elementos seleccionados',
               }}
             />
           }
-          title={title}
-          subheader={`${numberOfCheckedSets(items)}/${items.length} seleccionados`}
+          title={titulo}
+          subheader={`${contarSetsSeleccionados(elementos)}/${elementos.length} seleccionados`}
         />
         <Divider />
         <List
@@ -365,25 +396,25 @@ const InfoGrupoEmpleadosEditable = ({
           component='div'
           role='list'
         >
-          {items.map((value) => {
-            const labelId = `transfer-list-sets-${value.id}-label`;
+          {elementos.map((valor) => {
+            const idEtiqueta = `lista-transferencia-sets-${valor.id}-etiqueta`;
 
             return (
-              <ListItemButton key={value.id} role='listitem' onClick={handleToggleSets(value)}>
+              <ListItemButton key={valor.id} role='listitem' onClick={manejarSeleccionSet(valor)}>
                 <ListItemIcon>
                   <Checkbox
-                    checked={checkedSets.some((item) => item.id === value.id)}
+                    checked={setsSeleccionados.some((item) => item.id === valor.id)}
                     tabIndex={-1}
                     disableRipple
                     inputProps={{
-                      'aria-labelledby': labelId,
+                      'aria-labelledby': idEtiqueta,
                     }}
                   />
                 </ListItemIcon>
                 <ListItemText
-                  id={labelId}
-                  primary={value.nombreProducto}
-                  secondary={`ID: ${value.id}`}
+                  id={idEtiqueta}
+                  primary={valor.nombreProducto}
+                  secondary={`ID: ${valor.id}`}
                 />
               </ListItemButton>
             );
@@ -391,7 +422,7 @@ const InfoGrupoEmpleadosEditable = ({
         </List>
       </Card>
     ),
-    [checkedSets, handleToggleSets, handleToggleAllSets, numberOfCheckedSets]
+    [setsSeleccionados, manejarSeleccionSet, manejarSeleccionTodosSets, contarSetsSeleccionados]
   );
 
   // Mostrar loading mientras se cargan los datos
@@ -445,48 +476,48 @@ const InfoGrupoEmpleadosEditable = ({
               alignItems='center'
               sx={{ maxWidth: '800px' }}
             >
-              <Grid item>{customListSets('Sets Disponibles', leftSets)}</Grid>
+              <Grid item>{listaPersonalizadaSets('Sets Disponibles', setsIzquierda)}</Grid>
               <Grid item>
                 <Grid container direction='column' alignItems='center'>
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleAllRightSets}
-                    disabled={leftSets.length === 0}
-                    aria-label='move all right'
+                    onClick={manejarTodosDerechaSets}
+                    disabled={setsIzquierda.length === 0}
+                    aria-label='mover todos a la derecha'
                     startIcon={<KeyboardDoubleArrowRightIcon sx={{ ml: 1 }} />}
                   />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleCheckedRightSets}
-                    disabled={numberOfCheckedSets(leftSets) === 0}
-                    aria-label='move selected right'
+                    onClick={manejarSeleccionDerechaSets}
+                    disabled={contarSetsSeleccionados(setsIzquierda) === 0}
+                    aria-label='mover seleccionados a la derecha'
                     startIcon={<KeyboardArrowRightIcon sx={{ ml: 1 }} />}
                   />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleCheckedLeftSets}
-                    disabled={numberOfCheckedSets(rightSets) === 0}
-                    aria-label='move selected left'
+                    onClick={manejarSeleccionIzquierdaSets}
+                    disabled={contarSetsSeleccionados(setsDerecha) === 0}
+                    aria-label='mover seleccionados a la izquierda'
                     startIcon={<KeyboardArrowLeftIcon sx={{ ml: 1 }} />}
                   />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleAllLeftSets}
-                    disabled={rightSets.length === 0}
-                    aria-label='move all left'
+                    onClick={manejarTodosIzquierdaSets}
+                    disabled={setsDerecha.length === 0}
+                    aria-label='mover todos a la izquierda'
                     startIcon={<KeyboardDoubleArrowLeftIcon sx={{ ml: 1 }} />}
                   />
                 </Grid>
               </Grid>
-              <Grid item>{customListSets('Sets Seleccionados', rightSets)}</Grid>
+              <Grid item>{listaPersonalizadaSets('Sets Seleccionados', setsDerecha)}</Grid>
             </Grid>
           </Box>
         </Grid>
@@ -502,48 +533,52 @@ const InfoGrupoEmpleadosEditable = ({
               alignItems='center'
               sx={{ maxWidth: '800px' }}
             >
-              <Grid item>{customListEmpleados('Empleados Disponibles', leftEmpleados)}</Grid>
+              <Grid item>
+                {listaPersonalizadaEmpleados('Empleados Disponibles', empleadosIzquierda)}
+              </Grid>
               <Grid item>
                 <Grid container direction='column' alignItems='center'>
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleAllRightEmpleados}
-                    disabled={leftEmpleados.length === 0}
-                    aria-label='move all right'
+                    onClick={manejarTodosDerechaEmpleados}
+                    disabled={empleadosIzquierda.length === 0}
+                    aria-label='mover todos a la derecha'
                     startIcon={<KeyboardDoubleArrowRightIcon sx={{ ml: 1 }} />}
                   />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleCheckedRightEmpleados}
-                    disabled={numberOfCheckedEmpleados(leftEmpleados) === 0}
-                    aria-label='move selected right'
+                    onClick={manejarSeleccionDerechaEmpleados}
+                    disabled={contarEmpleadosSeleccionados(empleadosIzquierda) === 0}
+                    aria-label='mover seleccionados a la derecha'
                     startIcon={<KeyboardArrowRightIcon sx={{ ml: 1 }} />}
                   />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleCheckedLeftEmpleados}
-                    disabled={numberOfCheckedEmpleados(rightEmpleados) === 0}
-                    aria-label='move selected left'
+                    onClick={manejarSeleccionIzquierdaEmpleados}
+                    disabled={contarEmpleadosSeleccionados(empleadosDerecha) === 0}
+                    aria-label='mover seleccionados a la izquierda'
                     startIcon={<KeyboardArrowLeftIcon sx={{ ml: 1 }} />}
                   />
                   <Button
                     sx={{ my: 0.5 }}
                     variant='outlined'
                     size='small'
-                    onClick={handleAllLeftEmpleados}
-                    disabled={rightEmpleados.length === 0}
-                    aria-label='move all left'
+                    onClick={manejarTodosIzquierdaEmpleados}
+                    disabled={empleadosDerecha.length === 0}
+                    aria-label='mover todos a la izquierda'
                     startIcon={<KeyboardDoubleArrowLeftIcon sx={{ ml: 1 }} />}
                   />
                 </Grid>
               </Grid>
-              <Grid item>{customListEmpleados('Empleados Seleccionados', rightEmpleados)}</Grid>
+              <Grid item>
+                {listaPersonalizadaEmpleados('Empleados Seleccionados', empleadosDerecha)}
+              </Grid>
             </Grid>
           </Box>
         </Grid>
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 787af844..d35a4b9a 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -23,8 +23,8 @@ const ListaGrupoEmpleados = () => {
   const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
 
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const [gruposSeleccionados, setGruposSeleccionados] = useState([]);

From 1766a019e6e2593003e6b91b41af53f13a7c0a7b Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Mon, 2 Jun 2025 22:42:06 -0600
Subject: [PATCH 068/160] Feat: Ordenar alfabeticamente los sets y empleados
 seleccionados

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 51 +++++++++++++++----
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 000f46cb..b8e44890 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -105,7 +105,8 @@ const InfoGrupoEmpleadosEditable = ({
         const productosOrdenados = productos.sort((productos1, productos2) =>
           (productos1.nombreProducto || '')
             .toLowerCase()
-            .localeCompare((productos2.nombreProducto || '').toLowerCase()));
+            .localeCompare((productos2.nombreProducto || '').toLowerCase())
+        );
 
         // Ordenar empleados por nombre
         const empleadosOrdenados = datosEmpleados.sort((empleado1, empleado2) => {
@@ -194,13 +195,27 @@ const InfoGrupoEmpleadosEditable = ({
   }, []);
 
   const manejarTodosDerechaEmpleados = useCallback(() => {
-    setEmpleadosDerecha((prev) => [...prev, ...empleadosIzquierda]);
+    setEmpleadosDerecha((prev) => {
+      const nuevaLista = [...prev, ...empleadosIzquierda];
+      return nuevaLista.sort((empleado1, empleado2) => {
+        const nombreA = (empleado1.nombreCompleto || empleado1.nombre || '').toLowerCase();
+        const nombreB = (empleado2.nombreCompleto || empleado2.nombre || '').toLowerCase();
+        return nombreA.localeCompare(nombreB);
+      });
+    });
     setEmpleadosSeleccionados([]);
   }, [empleadosIzquierda]);
 
   const manejarSeleccionDerechaEmpleados = useCallback(() => {
     const izquierdaSeleccionados = interseccion(empleadosSeleccionados, empleadosIzquierda);
-    setEmpleadosDerecha((prev) => [...prev, ...izquierdaSeleccionados]);
+    setEmpleadosDerecha((prev) => {
+      const nuevaLista = [...prev, ...izquierdaSeleccionados];
+      return nuevaLista.sort((empleado1, empleado2) => {
+        const nombreA = (empleado1.nombreCompleto || empleado1.nombre || '').toLowerCase();
+        const nombreB = (empleado2.nombreCompleto || empleado2.nombre || '').toLowerCase();
+        return nombreA.localeCompare(nombreB);
+      });
+    });
     setEmpleadosSeleccionados((prev) => noEstaEnLista(prev, izquierdaSeleccionados));
   }, [empleadosSeleccionados, empleadosIzquierda]);
 
@@ -235,13 +250,27 @@ const InfoGrupoEmpleadosEditable = ({
   }, []);
 
   const manejarTodosDerechaSets = useCallback(() => {
-    setSetsDerecha((prev) => [...prev, ...setsIzquierda]);
+    setSetsDerecha((prev) => {
+      const nuevaLista = [...prev, ...setsIzquierda];
+      return nuevaLista.sort((set1, set2) =>
+        (set1.nombreProducto || '')
+          .toLowerCase()
+          .localeCompare((set2.nombreProducto || '').toLowerCase())
+      );
+    });
     setSetsSeleccionados([]);
   }, [setsIzquierda]);
 
   const manejarSeleccionDerechaSets = useCallback(() => {
     const izquierdaSeleccionados = interseccion(setsSeleccionados, setsIzquierda);
-    setSetsDerecha((prev) => [...prev, ...izquierdaSeleccionados]);
+    setSetsDerecha((prev) => {
+      const nuevaLista = [...prev, ...izquierdaSeleccionados];
+      return nuevaLista.sort((set1, set2) =>
+        (set1.nombreProducto || '')
+          .toLowerCase()
+          .localeCompare((set2.nombreProducto || '').toLowerCase())
+      );
+    });
     setSetsSeleccionados((prev) => noEstaEnLista(prev, izquierdaSeleccionados));
   }, [setsSeleccionados, setsIzquierda]);
 
@@ -294,12 +323,12 @@ const InfoGrupoEmpleadosEditable = ({
             <Checkbox
               onClick={manejarSeleccionTodosEmpleados(elementos)}
               checked={
-                contarEmpleadosSeleccionados(elementos) === elementos.length
-                && elementos.length !== 0
+                contarEmpleadosSeleccionados(elementos) === elementos.length &&
+                elementos.length !== 0
               }
               indeterminate={
-                contarEmpleadosSeleccionados(elementos) !== elementos.length
-                && contarEmpleadosSeleccionados(elementos) !== 0
+                contarEmpleadosSeleccionados(elementos) !== elementos.length &&
+                contarEmpleadosSeleccionados(elementos) !== 0
               }
               disabled={elementos.length === 0}
               inputProps={{
@@ -372,8 +401,8 @@ const InfoGrupoEmpleadosEditable = ({
                 contarSetsSeleccionados(elementos) === elementos.length && elementos.length !== 0
               }
               indeterminate={
-                contarSetsSeleccionados(elementos) !== elementos.length
-                && contarSetsSeleccionados(elementos) !== 0
+                contarSetsSeleccionados(elementos) !== elementos.length &&
+                contarSetsSeleccionados(elementos) !== 0
               }
               disabled={elementos.length === 0}
               inputProps={{

From 684e999fa5ab54532bd3722e54bdd252106ff68e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Tue, 3 Jun 2025 10:24:22 -0600
Subject: [PATCH 069/160] chore: incluir rama para github actions

---
 .github/workflows/on-pr.yaml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.github/workflows/on-pr.yaml b/.github/workflows/on-pr.yaml
index 70bf8d2f..9b952562 100644
--- a/.github/workflows/on-pr.yaml
+++ b/.github/workflows/on-pr.yaml
@@ -6,6 +6,7 @@ on:
       - main
       - staging
       - develop
+      - MBI-1
 
 jobs:
   lint:
@@ -18,10 +19,8 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-
           node-version: '22.14'
 
-
       - name: Install dependencies
         run: npm install
 
@@ -38,13 +37,11 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-
           node-version: '22.14'
 
       - name: Install dependencies
         run: npm install
 
-
       - name: Run Build
 
         run: npm run build

From 0996f12458d68940921bc610031c081b33828c35 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Tue, 3 Jun 2025 11:54:17 -0600
Subject: [PATCH 070/160] Add ModalActualizarUsuario component to encapsulate
 user update functionality

---
 .../FormularioActualizarUsuario.jsx           | 29 ++++--
 .../Organismos/ModalActualizarUsuario.jsx     | 91 +++++++++++++++++++
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |  8 +-
 3 files changed, 119 insertions(+), 9 deletions(-)
 create mode 100644 src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index 384d31b3..c5c2069d 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -1,3 +1,4 @@
+import { useState, useEffect, useRef } from 'react';
 import { Box, Grid } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -12,11 +13,12 @@ const FormularioActualizarUsuario = ({
   manejarCambio,
   manejarFechaNacimiento,
   obtenerHelperText,
-  roles,
-  clientes,
-  esSuperAdmin,
-  cargandoRoles,
-  CAMPO_OBLIGATORIO,
+  roles = [],
+  clientes = [],
+  cargandoRoles = false,
+  cargando = false,
+  esSuperAdmin = false,
+  CAMPO_OBLIGATORIO = 'Este campo es obligatorio',
 }) => {
   const estiloCuadricula = {
     display: 'flex',
@@ -51,6 +53,7 @@ const FormularioActualizarUsuario = ({
             }}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoTexto
             label='Apellido'
@@ -66,6 +69,7 @@ const FormularioActualizarUsuario = ({
             }}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
             <DateField
@@ -87,6 +91,7 @@ const FormularioActualizarUsuario = ({
             />
           </LocalizationProvider>
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoSelect
             required
@@ -104,6 +109,7 @@ const FormularioActualizarUsuario = ({
             ]}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoTexto
             label='Correo Electrónico'
@@ -120,6 +126,7 @@ const FormularioActualizarUsuario = ({
             }
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoTexto
             label='Número de Teléfono'
@@ -139,6 +146,7 @@ const FormularioActualizarUsuario = ({
             }}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoTexto
             label='Dirección'
@@ -154,6 +162,7 @@ const FormularioActualizarUsuario = ({
             }}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoSelect
             label='Rol'
@@ -173,6 +182,7 @@ const FormularioActualizarUsuario = ({
             disabled={cargandoRoles}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoSelectMultiple
             label='Cliente'
@@ -190,9 +200,10 @@ const FormularioActualizarUsuario = ({
             disabled={esSuperAdmin}
           />
         </Grid>
+
         <Grid size={6} sx={estiloCuadricula}>
           <CampoTexto
-            label='Contraseña (dejar en blanco para no cambiar)'
+            label='Contraseña'
             name='contrasenia'
             type='password'
             value={datosUsuario.contrasenia}
@@ -200,7 +211,11 @@ const FormularioActualizarUsuario = ({
             size='medium'
             error={!!erroresValidacion.contrasenia}
             autoComplete='new-password'
-            helperText={erroresValidacion.contrasenia || ''}
+            helperText={
+              erroresValidacion.contrasenia === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.contrasenia || ''
+            }
           />
         </Grid>
       </Grid>
diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
new file mode 100644
index 00000000..c9a9d0ab
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -0,0 +1,91 @@
+import { Box } from '@mui/material';
+import Alerta from '@Moleculas/Alerta';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import FormularioActualizarUsuario from '@Organismos/Formularios/FormularioActualizarUsuario';
+import { useAccionesUsuario } from '@Hooks/Usuarios/useAccionesUsuario';
+
+const ModalActualizarUsuario = ({
+  open,
+  onClose,
+  onAccion,
+  usuarioEdicion,
+  roles = [],
+  clientes = [],
+  esSuperAdmin = false,
+  cargandoRoles = false,
+}) => {
+  const {
+    datosUsuario,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    manejarCambio,
+    manejarFechaNacimiento,
+    obtenerHelperText,
+    handleGuardar,
+    cargando,
+    esEdicion,
+    limpiarFormulario,
+  } = useAccionesUsuario(usuarioEdicion);
+
+  const manejarConfirmacion = async () => {
+    const resultado = await handleGuardar();
+    if (resultado?.exito) {
+      if (onAccion) await onAccion();
+      limpiarFormulario();
+      setTimeout(() => {
+        onClose();
+      }, 1500);
+    }
+  };
+
+  const manejarCierre = () => {
+    setAlerta(null);
+    onClose();
+  };
+
+  return (
+    <ModalFlotante
+      open={open}
+      onClose={manejarCierre}
+      onConfirm={manejarConfirmacion}
+      titulo={esEdicion ? datosUsuario.nombreCompleto : 'Actualizar Usuario'}
+    >
+      <Box
+        component='form'
+        method='POST'
+        sx={{
+          flexGrow: 1,
+          '& .MuiTextField-root': { margin: 1, width: '30ch' },
+          '& .MuiFormControl-root': { margin: 1, width: '30ch' },
+        }}
+        noValidate
+        autoComplete='off'
+      >
+        <FormularioActualizarUsuario
+          datosUsuario={datosUsuario}
+          erroresValidacion={erroresValidacion}
+          manejarCambio={manejarCambio}
+          manejarFechaNacimiento={manejarFechaNacimiento}
+          obtenerHelperText={obtenerHelperText}
+          roles={roles}
+          clientes={clientes}
+          esSuperAdmin={esSuperAdmin}
+          cargandoRoles={cargandoRoles}
+          cargando={cargando}
+        />
+      </Box>
+      {alerta && (
+        <Alerta
+          sx={{ marginBottom: 2 }}
+          tipo={alerta.tipo}
+          mensaje={alerta.mensaje}
+          duracion='3000'
+          onClose={() => setAlerta(null)}
+        />
+      )}
+    </ModalFlotante>
+  );
+};
+
+export default ModalActualizarUsuario;
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 9711b419..5e056d73 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -21,7 +21,7 @@ import { useTheme } from '@mui/material';
 import { useActivar2FA } from '@Hooks/Usuarios/useActivar2FA';
 import Activar2FAModal from '@Organismos/Activar2FAModal';
 import Verificar2FAModal from '@Moleculas/Verificar2FAModal';
-//import FormularioActualizarUsuario from '@Organismos/Formularios/FormularioActualizarUsuario.jsx';
+import ModalActualizarUsuario from '@Organismos/ModalActualizarUsuario';
 
 const estiloImagenLogo = { marginRight: '1rem' };
 
@@ -446,11 +446,15 @@ const ListaUsuarios = () => {
         )}
 
         {modalActualizarAbierto && usuario && (
-          <FormularioActualizarUsuario
+          <ModalActualizarUsuario
             open={modalActualizarAbierto}
             onClose={() => setModalActualizarAbierto(false)}
             onAccion={recargar}
             usuarioEdicion={usuario}
+            roles={roles}
+            clientes={[]}
+            esSuperAdmin={false}
+            cargandoRoles={false}
           />
         )}
 

From 6c11bce44b8bec7f8ee07ab41ea9537c347f14c2 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Tue, 3 Jun 2025 11:57:49 -0600
Subject: [PATCH 071/160] =?UTF-8?q?Feat:=20Campo=20en=20rojo=20en=20caso?=
 =?UTF-8?q?=20de=20estar=20vacio=20(nombre,=20descripci=C3=B3n)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 58 +++++++++++++------
 .../Paginas/Categorias/ListaCategorias.jsx    |  1 -
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  6 +-
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index b8e44890..4014d20d 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -136,39 +136,50 @@ const InfoGrupoEmpleadosEditable = ({
     [todosLosEmpleados, empleadosDerecha]
   );
 
-  // Función estable para generar los datos del formulario
-  const generarDatosFormulario = useCallback(() => {
-    if (!datosListos) return null;
+  // Estado para controlar errores
+  const [errores, setErrores] = useState({
+    nombre: false,
+    descripcion: false,
+  });
+
+  // Remueve el useEffect que validaba en tiempo real
+
+  // Función para validar campos al guardar
+  const validarCampos = () => {
+    const nombreVacio = nombre.trim() === '';
+    const descripcionVacia = descripcion.trim() === '';
+
+    setErrores({
+      nombre: nombreVacio,
+      descripcion: descripcionVacia,
+    });
+
+    return !nombreVacio && !descripcionVacia;
+  };
+
+  // Modificamos el useEffect para generar datos del formulario incluyendo la validación
+  useEffect(() => {
+    if (!datosListos || !onFormDataChange) return;
 
-    return {
+    const formData = {
       nombre: nombre.trim(),
       descripcion: descripcion.trim(),
       setsDeProductos: setsDerecha.map((set) => set.id),
       empleados: empleadosDerecha.map((emp) => emp.id),
+      esValido: validarCampos,
     };
-  }, [nombre, descripcion, setsDerecha, empleadosDerecha, datosListos]);
-
-  // Efecto para notificar cambios en el formulario con debounce y comparación
-  useEffect(() => {
-    if (!datosListos || !onFormDataChange) return;
 
-    const formData = generarDatosFormulario();
-
-    // Comparar con los datos anteriores para evitar llamadas innecesarias
     const formDataString = JSON.stringify(formData);
     const lastFormDataString = JSON.stringify(referenciaUltimosFormData.current);
 
     if (formDataString !== lastFormDataString) {
       referenciaUltimosFormData.current = formData;
-
-      // Usar setTimeout para debounce y evitar llamadas síncronas que causen loops
       const timeoutId = setTimeout(() => {
         onFormDataChange(formData);
       }, 0);
-
       return () => clearTimeout(timeoutId);
     }
-  }, [generarDatosFormulario, onFormDataChange, datosListos]);
+  }, [nombre, descripcion, setsDerecha, empleadosDerecha, datosListos, onFormDataChange]);
 
   // Handlers para empleados
   const manejarSeleccionEmpleado = useCallback(
@@ -473,7 +484,12 @@ const InfoGrupoEmpleadosEditable = ({
             placeholder='Nombre del grupo'
             onChange={(evento) => setNombre(evento.target.value.slice(0, LIMITE_NOMBRE))}
             required
-            helperText={`${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`}
+            error={errores.nombre}
+            helperText={
+              errores.nombre
+                ? 'Este campo es obligatorio'
+                : `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`
+            }
             inputProps={{ maxLength: LIMITE_NOMBRE }}
             sx={{ mt: 1, mb: 2, mr: 8, width: '300px', overflow: 'auto' }}
           />
@@ -488,9 +504,15 @@ const InfoGrupoEmpleadosEditable = ({
             value={descripcion}
             placeholder='Escribe una descripción'
             onChange={(evento) => setDescripcion(evento.target.value.slice(0, LIMITE_DESCRIPCION))}
-            helperText={`${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`}
+            error={errores.descripcion}
+            helperText={
+              errores.descripcion
+                ? 'Este campo es obligatorio'
+                : `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
+            }
             inputProps={{ maxLength: LIMITE_DESCRIPCION }}
             sx={{ mt: 1, mb: 2, width: '400px', overflow: 'auto' }}
+            required
           />
         </Grid>
 
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index f6736389..8418f7b5 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -147,7 +147,6 @@ const ListaCategorias = () => {
         abierto={modalCrearAbierto}
         onCerrar={handleCerrarModalCrear}
         onCreado={handleCategoriaCreadaExitosamente}
-        onError={handleErrorCrearCategoria}
       />
 
       <ModalEliminarCategoria
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index d35a4b9a..bf3a8253 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -23,8 +23,8 @@ const ListaGrupoEmpleados = () => {
   const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR
-    = '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR =
+    '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
 
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const [gruposSeleccionados, setGruposSeleccionados] = useState([]);
@@ -76,7 +76,7 @@ const ListaGrupoEmpleados = () => {
   const { actualizarGrupo } = useActualizarGrupoEmpleados();
 
   const handleGuardar = async () => {
-    if (!formData?.nombre?.trim() || !formData?.descripcion?.trim()) {
+    if (!formData?.esValido()) {
       setAlerta({
         tipo: 'error',
         mensaje: 'El nombre y la descripción son obligatorios.',

From d725a867ef67b699c6939f699f1c69402d6a64d6 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 3 Jun 2025 12:02:55 -0600
Subject: [PATCH 072/160] feat: agregar logica y componentes para actualizar
 otros campos de rol

---
 .../Organismos/ModalDetalleRol.jsx            | 97 ++++++++++++++++---
 src/hooks/Roles/useActualizarRol.js           | 67 +++++++++++++
 2 files changed, 152 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/Roles/useActualizarRol.js

diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
index 9a926135..18e4718f 100644
--- a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -7,6 +7,7 @@ import { useLeerRol } from '@Hooks/Roles/useLeerRol';
 import Alerta from '@Moleculas/Alerta';
 import Tabla from '@Organismos/Tabla';
 import ListaTransferencia from '@Organismos/ListaTransferencia';
+import CampoTexto from '@Atomos/CampoTexto';
 import obtenerPermisos from '@Servicios/obtenerPermisos';
 import { tokens } from '@SRC/theme';
 
@@ -18,6 +19,10 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
   const [permisosDisponibles, setPermisosDisponibles] = useState([]);
   const [permisosSeleccionados, setPermisosSeleccionados] = useState([]);
 
+  // Estados para los campos editables
+  const [nombreRol, setNombreRol] = useState('');
+  const [descripcionRol, setDescripcionRol] = useState('');
+
   // Add ref to track if permissions have been loaded
   const permisosLoadedRef = useRef(false);
 
@@ -25,6 +30,14 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
     if (abierto && idRol) leerRol(idRol);
   }, [abierto, idRol, leerRol]);
 
+  // Initialize editable fields when detail is loaded
+  useEffect(() => {
+    if (detalle) {
+      setNombreRol(detalle.nombre || '');
+      setDescripcionRol(detalle.descripcion || '');
+    }
+  }, [detalle]);
+
   // Reset the ref when modal closes or role changes
   useEffect(() => {
     if (!abierto || !modoEdicion) {
@@ -80,28 +93,57 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
     setPermisosSeleccionados(seleccionados);
   }, []);
 
+  const manejarGuardar = () => {
+    // Console log the data that would be sent to the API
+    const datosParaEnviar = {
+      nombre: nombreRol,
+      descripcion: descripcionRol,
+      permisos: permisosSeleccionados.map(permiso => ({ id: permiso.id, nombre: permiso.nombre }))
+    };
+
+    console.log('Datos para enviar:', datosParaEnviar);
+    console.log('Permisos seleccionados:', permisosSeleccionados);
+
+    // TODO: Implement custom hook call here
+    // useActualizarRol(idRol, datosParaEnviar);
+
+    setModoEdicion(false);
+  };
+
+  const manejarCancelar = () => {
+    // Reset fields to original values
+    setNombreRol(detalle?.nombre || '');
+    setDescripcionRol(detalle?.descripcion || '');
+    setModoEdicion(false);
+  };
+
   const manejarCerrar = () => {
     setModoEdicion(false);
     onCerrar();
   };
 
+  const manejarCambioNombre = (event) => {
+    setNombreRol(event.target.value);
+  };
+
+  const manejarCambioDescripcion = (event) => {
+    setDescripcionRol(event.target.value);
+  };
+
   const botonesModo = modoEdicion ? [
     {
       label: 'Cancelar',
       variant: 'outlined',
       size: 'large',
       outlineColor: colores.altertex[1],
-      onClick: () => setModoEdicion(false),
+      onClick: manejarCancelar,
     },
     {
       label: 'Guardar',
       variant: 'contained',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: () => {
-        // Aquí iría la lógica para guardar
-        setModoEdicion(false);
-      },
+      onClick: manejarGuardar,
     }
   ] : [
     {
@@ -150,7 +192,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
         onConfirm={manejarCerrar}
         titulo={modoEdicion ? "Editar Rol" : "Detalles del Rol"}
         tituloVariant="h4"
-        customWidth={modoEdicion ? 1000 : 800}
+        customWidth={modoEdicion ? 800 : 800}
         botones={botonesModo}
       >
         {cargando && (
@@ -161,12 +203,43 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
         {!cargando && detalle && (
           <>
-            <Typography variant="body1" sx={{ mb: 2 }}>
-              <strong>Rol:</strong> {detalle.nombre}
-            </Typography>
-            <Typography variant="body1" sx={{ mb: 2 }}>
-              <strong>Descripción:</strong> {detalle.descripcion}
-            </Typography>
+            {modoEdicion ? (
+              <Box sx={{ mb: 3 }}>
+                <CampoTexto
+                  label="Nombre del Rol"
+                  name="nombreRol"
+                  value={nombreRol}
+                  onChange={manejarCambioNombre}
+                  fullWidth
+                  required
+                  maxLength={50}
+                  helperText={`${nombreRol.length}/50 caracteres`}
+                  sx={{ mb: 2 }}
+                />
+                <CampoTexto
+                  label="Descripción"
+                  name="descripcionRol"
+                  value={descripcionRol}
+                  onChange={manejarCambioDescripcion}
+                  fullWidth
+                  multiline
+                  rows={3}
+                  maxLength={150}
+                  helperText={`${descripcionRol.length}/150 caracteres`}
+                  sx={{ mb: 2 }}
+                />
+              </Box>
+            ) : (
+              <Box sx={{ mb: 3 }}>
+                <Typography variant="body1" sx={{ mb: 2 }}>
+                  <strong>Rol:</strong> {detalle.nombre}
+                </Typography>
+                <Typography variant="body1" sx={{ mb: 2 }}>
+                  <strong>Descripción:</strong> {detalle.descripcion}
+                </Typography>
+              </Box>
+            )}
+
             <Typography variant="body1" sx={{ mb: 3 }}>
               <strong>Número de usuarios asociados a este rol:</strong> {detalle.totalUsuarios}
             </Typography>
diff --git a/src/hooks/Roles/useActualizarRol.js b/src/hooks/Roles/useActualizarRol.js
new file mode 100644
index 00000000..e1a7b5c9
--- /dev/null
+++ b/src/hooks/Roles/useActualizarRol.js
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+// import { API_ENDPOINTS } from '@Constants/api'; // Adjust import path as needed
+
+/**
+ * Custom hook para actualizar un rol
+ * @returns {Object} - Estado y función para actualizar rol
+ */
+const useActualizarRol = () => {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [exitoso, setExitoso] = useState(false);
+
+  const actualizarRol = async (idRol, datosRol) => {
+    setCargando(true);
+    setError(null);
+    setExitoso(false);
+
+    try {
+      // TODO: Replace with actual API call
+      // const response = await fetch(`${API_ENDPOINTS.ROLES}/${idRol}`, {
+      //   method: 'PUT',
+      //   headers: {
+      //     'Content-Type': 'application/json',
+      //     // Add authorization headers if needed
+      //   },
+      //   body: JSON.stringify(datosRol),
+      // });
+
+      // if (!response.ok) {
+      //   throw new Error(`Error ${response.status}: ${response.statusText}`);
+      // }
+
+      // const resultado = await response.json();
+
+      // For now, simulate API call with timeout
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      console.log('Actualizando rol:', idRol, 'con datos:', datosRol);
+
+      setExitoso(true);
+      return { success: true, data: datosRol };
+
+    } catch (err) {
+      const mensajeError = err.message || 'Error al actualizar el rol';
+      setError(mensajeError);
+      console.error('Error al actualizar rol:', err);
+      return { success: false, error: mensajeError };
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  const limpiarEstado = () => {
+    setError(null);
+    setExitoso(false);
+  };
+
+  return {
+    actualizarRol,
+    cargando,
+    error,
+    exitoso,
+    limpiarEstado,
+  };
+};
+
+export default useActualizarRol;
\ No newline at end of file

From fd8d0a299fb17170c57e781d5b067218aba61285 Mon Sep 17 00:00:00 2001
From: PAOLA MARIA garrido <you@example.com>
Date: Tue, 3 Jun 2025 12:07:08 -0600
Subject: [PATCH 073/160] feat: agregar exportar empleados

---
 .../Repositorios/Empleados/RepositorioExportarEmpleados.js    | 2 ++
 src/Vistas/Paginas/Empleados/ListaEmpleados.jsx               | 4 +++-
 src/hooks/Empleados/useExportarEmpleados.js                   | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js b/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
index 0d36dfb8..b6b31fa9 100644
--- a/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
+++ b/src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
@@ -9,6 +9,8 @@ const API_KEY = import.meta.env.VITE_API_KEY;
  * @param {number[]} idsEmpleado - Arreglo de IDs de empleados seleccionados para exportar.
  * @returns {Promise<{ mensaje: string, csv: string }>} Respuesta con mensaje y contenido CSV.
  * @throws {Error} Si la petición falla o el servidor devuelve un mensaje de error.
+ * 
+ * @see [RF59 - Exportar Empleados](https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF59)
  */
 
 export const exportarEmpleados = async (idsEmpleado) => {
diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index 53e0ac34..16a37df9 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -1,5 +1,7 @@
 //RF17 - Consulta Lista Empleados - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF17
 //RF20 - Eliminar empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF20
+//RF59 - Exportar Empleados - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF59
+
 import React, { useState, useEffect } from 'react';
 import { Box, useTheme } from '@mui/material';
 import Tabla from '@Organismos/Tabla';
@@ -86,7 +88,7 @@ const ListaGrupoEmpleados = () => {
       return;
     }
 
-    await exportar(empleadosSeleccionados); // ✅ Pasa los IDs seleccionados
+    await exportar(empleadosSeleccionados);
     setAbrirPopUpExportar(false);
   };
 
diff --git a/src/hooks/Empleados/useExportarEmpleados.js b/src/hooks/Empleados/useExportarEmpleados.js
index 2c7d5c28..ddd1455f 100644
--- a/src/hooks/Empleados/useExportarEmpleados.js
+++ b/src/hooks/Empleados/useExportarEmpleados.js
@@ -11,6 +11,7 @@ import { exportarEmpleados as repoExportarEmpleados } from '@Repositorios/Emplea
  *   csv: string,
  *   mensaje: string
  * }}
+ * @see [RF59 - Exportar Empleados](https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF59)
  */
 const useExportarEmpleados = () => {
   const [cargando, setCargando] = useState(false);

From cf4cc7c509525d812933a987fcdb44b0317a0217 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 3 Jun 2025 12:08:26 -0600
Subject: [PATCH 074/160] fix: cambiar las dimensiones de la transfer list

---
 src/Vistas/Componentes/Organismos/ListaTransferencia.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index 75901460..4e102093 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -38,8 +38,8 @@ const ListaTransferenciaPersonalizada = ({
                                            obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
                                            obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
                                            deshabilitado = false,
-                                           alturaMaxima = 230,
-                                           ancho = 250
+                                           alturaMaxima = 357,
+                                           ancho = 350
                                          }) => {
   const [marcados, setMarcados] = useState([]);
   const [izquierda, setIzquierda] = useState(elementosDisponibles);

From 6b08bb2636b7d49f7b40be0c3b55d0552499b027 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 3 Jun 2025 12:50:44 -0600
Subject: [PATCH 075/160] feat: agregar hook y repositorio, solo falta el
 backend

---
 .../Roles/RepositorioActualizarRol.js         |  27 ++++
 .../Organismos/ModalDetalleRol.jsx            | 116 +++++++++++-------
 src/hooks/Roles/useActualizarRol.js           |  37 ++----
 3 files changed, 110 insertions(+), 70 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js

diff --git a/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js b/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
new file mode 100644
index 00000000..f1c5ab06
--- /dev/null
+++ b/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
@@ -0,0 +1,27 @@
+//RF[8] Leer Rol - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF8
+
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarRol {
+  static async actualizar(idRol, datosRol) {
+    try {
+      const respuesta = await axios.put(
+        `${RUTAS_API.ROLES.ACTUALIZAR}`,
+        { datosRol, idRol },
+        {
+          withCredentials: true,
+          headers: {
+            'x-api-key': API_KEY,
+          },
+        }
+      );
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al actualizar el rol';
+      throw new Error(mensaje);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
index 18e4718f..ed4d9519 100644
--- a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -4,6 +4,7 @@ import { useEffect, useState, useRef, useCallback } from 'react';
 import { Box, Typography, useTheme } from '@mui/material';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import { useLeerRol } from '@Hooks/Roles/useLeerRol';
+import useActualizarRol from '@Hooks/Roles/useActualizarRol';
 import Alerta from '@Moleculas/Alerta';
 import Tabla from '@Organismos/Tabla';
 import ListaTransferencia from '@Organismos/ListaTransferencia';
@@ -13,24 +14,22 @@ import { tokens } from '@SRC/theme';
 
 const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
   const { detalle, cargando, error, leerRol } = useLeerRol();
+  const { actualizarRol, cargando: cargandoActualizacion, error: errorActualizacion, exitoso, mensaje, limpiarEstado } = useActualizarRol();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
   const [modoEdicion, setModoEdicion] = useState(false);
   const [permisosDisponibles, setPermisosDisponibles] = useState([]);
   const [permisosSeleccionados, setPermisosSeleccionados] = useState([]);
 
-  // Estados para los campos editables
   const [nombreRol, setNombreRol] = useState('');
   const [descripcionRol, setDescripcionRol] = useState('');
 
-  // Add ref to track if permissions have been loaded
   const permisosLoadedRef = useRef(false);
 
   useEffect(() => {
     if (abierto && idRol) leerRol(idRol);
   }, [abierto, idRol, leerRol]);
 
-  // Initialize editable fields when detail is loaded
   useEffect(() => {
     if (detalle) {
       setNombreRol(detalle.nombre || '');
@@ -38,14 +37,12 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
     }
   }, [detalle]);
 
-  // Reset the ref when modal closes or role changes
   useEffect(() => {
     if (!abierto || !modoEdicion) {
       permisosLoadedRef.current = false;
     }
   }, [abierto, modoEdicion]);
 
-  // Modified useEffect with ref check to prevent infinite loop
   useEffect(() => {
     const cargarPermisos = async () => {
       if (detalle && modoEdicion && !permisosLoadedRef.current) {
@@ -86,39 +83,45 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
   const manejarCambioEdicion = () => {
     setModoEdicion(!modoEdicion);
+    // Limpiar estados de actualización al entrar en modo edición
+    if (!modoEdicion) {
+      limpiarEstado();
+    }
   };
 
+  const puedeEditarse = idRol !== 1 && idRol !== 3;
+
   const manejarCambioTransferencia = useCallback(({ disponibles, seleccionados }) => {
     setPermisosDisponibles(disponibles);
     setPermisosSeleccionados(seleccionados);
   }, []);
 
-  const manejarGuardar = () => {
-    // Console log the data that would be sent to the API
+  const manejarGuardar = async () => {
     const datosParaEnviar = {
       nombre: nombreRol,
       descripcion: descripcionRol,
       permisos: permisosSeleccionados.map(permiso => ({ id: permiso.id, nombre: permiso.nombre }))
     };
 
-    console.log('Datos para enviar:', datosParaEnviar);
-    console.log('Permisos seleccionados:', permisosSeleccionados);
+    const resultado = await actualizarRol(idRol, datosParaEnviar);
 
-    // TODO: Implement custom hook call here
-    // useActualizarRol(idRol, datosParaEnviar);
-
-    setModoEdicion(false);
+    if (resultado.success) {
+      setModoEdicion(false);
+      // Recargar los detalles del rol para mostrar los cambios actualizados
+      leerRol(idRol);
+    }
   };
 
   const manejarCancelar = () => {
-    // Reset fields to original values
     setNombreRol(detalle?.nombre || '');
     setDescripcionRol(detalle?.descripcion || '');
     setModoEdicion(false);
+    limpiarEstado();
   };
 
   const manejarCerrar = () => {
     setModoEdicion(false);
+    limpiarEstado();
     onCerrar();
   };
 
@@ -137,6 +140,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
       size: 'large',
       outlineColor: colores.altertex[1],
       onClick: manejarCancelar,
+      disabled: cargandoActualizacion,
     },
     {
       label: 'Guardar',
@@ -144,15 +148,16 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
       size: 'large',
       backgroundColor: colores.altertex[1],
       onClick: manejarGuardar,
+      disabled: cargandoActualizacion,
     }
   ] : [
-    {
+    ...(puedeEditarse ? [{
       label: 'Editar',
       variant: 'contained',
       size: 'large',
       backgroundColor: colores.altertex[1],
       onClick: manejarCambioEdicion,
-    },
+    }] : []),
     {
       label: 'Salir',
       variant: 'outlined',
@@ -164,7 +169,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
   return (
     <>
-      {error && (
+      {(error || errorActualizacion) && (
         <Box
           sx={{
             position: 'fixed',
@@ -178,7 +183,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
         >
           <Alerta
             tipo="error"
-            mensaje={error}
+            mensaje={error || errorActualizacion}
             duracion={4000}
             cerrable
             onClose={() => {}}
@@ -186,6 +191,28 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
         </Box>
       )}
 
+      {exitoso && mensaje && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: '24px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1500,
+            width: 'calc(100% - 32px)',
+            maxWidth: 600,
+          }}
+        >
+          <Alerta
+            tipo="success"
+            mensaje={mensaje}
+            duracion={3000}
+            cerrable
+            onClose={limpiarEstado}
+          />
+        </Box>
+      )}
+
       <ModalFlotante
         open={abierto}
         onClose={manejarCerrar}
@@ -195,9 +222,9 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
         customWidth={modoEdicion ? 800 : 800}
         botones={botonesModo}
       >
-        {cargando && (
+        {(cargando || cargandoActualizacion) && (
           <Typography variant="body1" sx={{ mb: 2 }}>
-            Cargando...
+            {cargandoActualizacion ? 'Guardando cambios...' : 'Cargando...'}
           </Typography>
         )}
 
@@ -205,29 +232,31 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
           <>
             {modoEdicion ? (
               <Box sx={{ mb: 3 }}>
-                <CampoTexto
-                  label="Nombre del Rol"
-                  name="nombreRol"
-                  value={nombreRol}
-                  onChange={manejarCambioNombre}
-                  fullWidth
-                  required
-                  maxLength={50}
-                  helperText={`${nombreRol.length}/50 caracteres`}
-                  sx={{ mb: 2 }}
-                />
-                <CampoTexto
-                  label="Descripción"
-                  name="descripcionRol"
-                  value={descripcionRol}
-                  onChange={manejarCambioDescripcion}
-                  fullWidth
-                  multiline
-                  rows={3}
-                  maxLength={150}
-                  helperText={`${descripcionRol.length}/150 caracteres`}
-                  sx={{ mb: 2 }}
-                />
+                <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                  <CampoTexto
+                    label="Nombre del Rol"
+                    name="nombreRol"
+                    value={nombreRol}
+                    onChange={manejarCambioNombre}
+                    fullWidth
+                    required
+                    maxLength={50}
+                    helperText={`${nombreRol.length}/50 caracteres`}
+                    disabled={cargandoActualizacion}
+                  />
+                  <CampoTexto
+                    label="Descripción"
+                    name="descripcionRol"
+                    value={descripcionRol}
+                    onChange={manejarCambioDescripcion}
+                    fullWidth
+                    multiline
+                    rows={3}
+                    maxLength={150}
+                    helperText={`${descripcionRol.length}/150 caracteres`}
+                    disabled={cargandoActualizacion}
+                  />
+                </Box>
               </Box>
             ) : (
               <Box sx={{ mb: 3 }}>
@@ -259,6 +288,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
                   obtenerClaveElemento={(permiso) => permiso.id}
                   alturaMaxima={300}
                   ancho={300}
+                  disabled={cargandoActualizacion}
                 />
               </Box>
             ) : (
diff --git a/src/hooks/Roles/useActualizarRol.js b/src/hooks/Roles/useActualizarRol.js
index e1a7b5c9..6f1c403c 100644
--- a/src/hooks/Roles/useActualizarRol.js
+++ b/src/hooks/Roles/useActualizarRol.js
@@ -1,44 +1,25 @@
+//RF[8] Leer Rol - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF8
+
 import { useState } from 'react';
-// import { API_ENDPOINTS } from '@Constants/api'; // Adjust import path as needed
+import { RepositorioActualizarRol } from '@Repositorios/Roles/RepositorioActualizarRol';
 
-/**
- * Custom hook para actualizar un rol
- * @returns {Object} - Estado y función para actualizar rol
- */
 const useActualizarRol = () => {
   const [cargando, setCargando] = useState(false);
   const [error, setError] = useState(null);
   const [exitoso, setExitoso] = useState(false);
+  const [mensaje, setMensaje] = useState('');
 
   const actualizarRol = async (idRol, datosRol) => {
     setCargando(true);
     setError(null);
     setExitoso(false);
+    setMensaje('');
 
     try {
-      // TODO: Replace with actual API call
-      // const response = await fetch(`${API_ENDPOINTS.ROLES}/${idRol}`, {
-      //   method: 'PUT',
-      //   headers: {
-      //     'Content-Type': 'application/json',
-      //     // Add authorization headers if needed
-      //   },
-      //   body: JSON.stringify(datosRol),
-      // });
-
-      // if (!response.ok) {
-      //   throw new Error(`Error ${response.status}: ${response.statusText}`);
-      // }
-
-      // const resultado = await response.json();
-
-      // For now, simulate API call with timeout
-      await new Promise(resolve => setTimeout(resolve, 1000));
-
-      console.log('Actualizando rol:', idRol, 'con datos:', datosRol);
-
+      const respuesta = await RepositorioActualizarRol.actualizar(idRol, datosRol);
+      setMensaje(respuesta.mensaje || 'Rol actualizado exitosamente');
       setExitoso(true);
-      return { success: true, data: datosRol };
+      return { success: true, data: respuesta };
 
     } catch (err) {
       const mensajeError = err.message || 'Error al actualizar el rol';
@@ -53,6 +34,7 @@ const useActualizarRol = () => {
   const limpiarEstado = () => {
     setError(null);
     setExitoso(false);
+    setMensaje('');
   };
 
   return {
@@ -60,6 +42,7 @@ const useActualizarRol = () => {
     cargando,
     error,
     exitoso,
+    mensaje,
     limpiarEstado,
   };
 };

From e0530e176d3bc7a9db4b8441fa179c804e26611c Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Tue, 3 Jun 2025 12:52:30 -0600
Subject: [PATCH 076/160] feat: agregar ruta de la API

---
 src/Utilidades/Constantes/rutasAPI.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index 1db3cd9c..bd32febf 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -83,7 +83,8 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_ROLES}/consultar-lista`,
     CREAR_ROL: `${BASE_ROLES}/crear-rol`,
     ELIMINAR_ROL: `${BASE_ROLES}/eliminar`,
-    LEER_ROL: `${BASE_ROLES}/leer`
+    LEER_ROL: `${BASE_ROLES}/leer`,
+    ACTUALIZAR: `${BASE_ROLES}/actualizar-rol`
   },
   PEDIDOS: {
     BASE: BASE_PEDIDOS,

From c009908f1b996a87e56feb10629e47de1791db95 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Tue, 3 Jun 2025 13:29:09 -0600
Subject: [PATCH 077/160] Add password confirmation validation and normalize
 user data in update forms

---
 .../Modelos/Usuarios/ActualizarUsuario.js     |   8 +
 .../FormularioActualizarUsuario.jsx           | 391 ++++++++++--------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |   5 +-
 src/hooks/Usuarios/useAccionesUsuario.js      |  29 +-
 4 files changed, 248 insertions(+), 185 deletions(-)

diff --git a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
index d19f142e..82e5ada2 100644
--- a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
@@ -33,6 +33,14 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
     errores.contrasenia = 'La contraseña debe tener al menos 6 caracteres';
   }
 
+  if (datos.contrasenia) {
+    if (!datos.confirmarContrasenia) {
+      errores.confirmarContrasenia = true;
+    } else if (datos.contrasenia !== datos.confirmarContrasenia) {
+      errores.confirmarContrasenia = 'Las contraseñas no coinciden';
+    }
+  }
+
   if (!datos.numeroTelefono) {
     errores.numeroTelefono = 'El número de teléfono es obligatorio';
   } else if (!telefonoValido.test(datos.numeroTelefono)) {
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index c5c2069d..f4d6bc1b 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Box, Grid } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -25,201 +25,228 @@ const FormularioActualizarUsuario = ({
     justifyContent: 'center',
   };
 
+  const rolAnterior = useRef(null);
+  useEffect(() => {
+    if (rolAnterior.current === 1 && datosUsuario.rol !== 1) {
+      manejarCambio({
+        target: {
+          name: 'cliente',
+          value: [],
+        },
+      });
+    }
+    if (datosUsuario.rol === 1 && clientes.length > 0) {
+      manejarCambio({
+        target: {
+          name: 'cliente',
+          value: clientes.map((cliente) => cliente.idCliente),
+        },
+      });
+    }
+    rolAnterior.current = datosUsuario.rol;
+  }, [datosUsuario.rol, clientes]);
+
   return (
-    <Box
-      component='form'
-      method='POST'
-      sx={{
-        flexGrow: 1,
-        '& .MuiTextField-root': { margin: 1, width: '30ch' },
-        '& .MuiFormControl-root': { margin: 1, minWidth: '30ch' },
-      }}
-      noValidate
-      autoComplete='off'
-    >
-      <Grid container columns={12}>
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoTexto
-            label='Nombre'
-            name='nombreCompleto'
-            value={datosUsuario.nombreCompleto}
-            onChange={manejarCambio}
-            required
-            size='medium'
-            error={!!erroresValidacion.nombreCompleto}
-            helperText={erroresValidacion.nombreCompleto && CAMPO_OBLIGATORIO}
-            inputProps={{
-              maxLength: 50,
-            }}
-          />
-        </Grid>
+    <Grid container columns={12}>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Nombre'
+          name='nombreCompleto'
+          value={datosUsuario.nombreCompleto}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.nombreCompleto}
+          helperText={erroresValidacion.nombreCompleto && CAMPO_OBLIGATORIO}
+          inputProps={{
+            maxLength: 50,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Apellido'
+          name='apellido'
+          value={datosUsuario.apellido}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.apellido}
+          helperText={erroresValidacion.apellido && CAMPO_OBLIGATORIO}
+          inputProps={{
+            maxLength: 50,
+          }}
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoTexto
-            label='Apellido'
-            name='apellido'
-            value={datosUsuario.apellido}
-            onChange={manejarCambio}
+      <Grid size={6} sx={estiloCuadricula}>
+        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
+          <DateField
             required
-            size='medium'
-            error={!!erroresValidacion.apellido}
-            helperText={erroresValidacion.apellido && CAMPO_OBLIGATORIO}
-            inputProps={{
-              maxLength: 50,
+            label='Fecha de nacimiento'
+            value={datosUsuario.fechaNacimiento}
+            onChange={manejarFechaNacimiento}
+            format='DD/MM/YYYY'
+            sx={{ width: '30ch' }}
+            slotProps={{
+              textField: {
+                error: !!erroresValidacion.fechaNacimiento,
+                helperText:
+                  erroresValidacion.fechaNacimiento === true
+                    ? CAMPO_OBLIGATORIO
+                    : erroresValidacion.fechaNacimiento || '',
+              },
             }}
           />
-        </Grid>
+        </LocalizationProvider>
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
-            <DateField
-              required
-              label='Fecha de nacimiento'
-              value={datosUsuario.fechaNacimiento}
-              onChange={manejarFechaNacimiento}
-              format='DD/MM/YYYY'
-              sx={{ width: '30ch' }}
-              slotProps={{
-                textField: {
-                  error: !!erroresValidacion.fechaNacimiento,
-                  helperText:
-                    erroresValidacion.fechaNacimiento === true
-                      ? CAMPO_OBLIGATORIO
-                      : erroresValidacion.fechaNacimiento || '',
-                },
-              }}
-            />
-          </LocalizationProvider>
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoSelect
+          required
+          label='Género'
+          name='genero'
+          value={datosUsuario.genero}
+          onChange={manejarCambio}
+          size='medium'
+          error={!!erroresValidacion.genero}
+          helperText={erroresValidacion.genero && CAMPO_OBLIGATORIO}
+          options={[
+            { value: 'Hombre', label: 'Hombre' },
+            { value: 'Mujer', label: 'Mujer' },
+            { value: 'Otro', label: 'Otro' },
+          ]}
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoSelect
-            required
-            label='Género'
-            name='genero'
-            value={datosUsuario.genero}
-            onChange={manejarCambio}
-            size='medium'
-            error={!!erroresValidacion.genero}
-            helperText={erroresValidacion.genero && CAMPO_OBLIGATORIO}
-            options={[
-              { value: 'Hombre', label: 'Hombre' },
-              { value: 'Mujer', label: 'Mujer' },
-              { value: 'Otro', label: 'Otro' },
-            ]}
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Correo Electrónico'
+          name='correoElectronico'
+          value={datosUsuario.correoElectronico}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.correoElectronico}
+          helperText={
+            erroresValidacion.correoElectronico === true
+              ? CAMPO_OBLIGATORIO
+              : erroresValidacion.correoElectronico || ''
+          }
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoTexto
-            label='Correo Electrónico'
-            name='correoElectronico'
-            value={datosUsuario.correoElectronico}
-            onChange={manejarCambio}
-            required
-            size='medium'
-            error={!!erroresValidacion.correoElectronico}
-            helperText={
-              erroresValidacion.correoElectronico === true
-                ? CAMPO_OBLIGATORIO
-                : erroresValidacion.correoElectronico || ''
-            }
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Número de Teléfono'
+          name='numeroTelefono'
+          value={datosUsuario.numeroTelefono}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.numeroTelefono}
+          helperText={
+            erroresValidacion.numeroTelefono === true
+              ? CAMPO_OBLIGATORIO
+              : erroresValidacion.numeroTelefono || ''
+          }
+          inputProps={{
+            maxLength: 10,
+          }}
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoTexto
-            label='Número de Teléfono'
-            name='numeroTelefono'
-            value={datosUsuario.numeroTelefono}
-            onChange={manejarCambio}
-            required
-            size='medium'
-            error={!!erroresValidacion.numeroTelefono}
-            helperText={
-              erroresValidacion.numeroTelefono === true
-                ? CAMPO_OBLIGATORIO
-                : erroresValidacion.numeroTelefono || ''
-            }
-            inputProps={{
-              maxLength: 10,
-            }}
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Dirección'
+          name='direccion'
+          value={datosUsuario.direccion}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.direccion}
+          helperText={erroresValidacion.direccion && CAMPO_OBLIGATORIO}
+          inputProps={{
+            maxLength: 100,
+          }}
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoTexto
-            label='Dirección'
-            name='direccion'
-            value={datosUsuario.direccion}
-            onChange={manejarCambio}
-            required
-            size='medium'
-            error={!!erroresValidacion.direccion}
-            helperText={erroresValidacion.direccion && CAMPO_OBLIGATORIO}
-            inputProps={{
-              maxLength: 100,
-            }}
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoSelect
+          label='Rol'
+          name='idRol'
+          value={datosUsuario.idRol}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.idRol}
+          helperText={erroresValidacion.idRol && CAMPO_OBLIGATORIO}
+          options={roles
+            .filter((rol) => rol.idRol !== 3)
+            .map((rol) => ({
+              value: rol.idRol,
+              label: rol.nombre,
+            }))}
+          disabled={cargandoRoles}
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoSelect
-            label='Rol'
-            name='rol'
-            value={datosUsuario.rol}
-            onChange={manejarCambio}
-            required
-            size='medium'
-            error={!!erroresValidacion.rol}
-            helperText={erroresValidacion.rol && CAMPO_OBLIGATORIO}
-            options={roles
-              .filter((rol) => rol.idRol !== 3)
-              .map((rol) => ({
-                value: rol.idRol,
-                label: rol.nombre,
-              }))}
-            disabled={cargandoRoles}
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoSelectMultiple
+          label='Cliente'
+          name='cliente'
+          value={datosUsuario.cliente}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.cliente}
+          helperText={erroresValidacion.cliente && CAMPO_OBLIGATORIO}
+          options={clientes.map((cliente) => ({
+            value: cliente.idCliente,
+            label: cliente.nombreComercial,
+          }))}
+          disabled={esSuperAdmin}
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoSelectMultiple
-            label='Cliente'
-            name='cliente'
-            value={datosUsuario.cliente}
-            onChange={manejarCambio}
-            required
-            size='medium'
-            error={!!erroresValidacion.cliente}
-            helperText={erroresValidacion.cliente && CAMPO_OBLIGATORIO}
-            options={clientes.map((cliente) => ({
-              value: cliente.idCliente,
-              label: cliente.nombreComercial,
-            }))}
-            disabled={esSuperAdmin}
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Contraseña'
+          name='contrasenia'
+          type='password'
+          value={datosUsuario.contrasenia}
+          onChange={manejarCambio}
+          size='medium'
+          error={!!erroresValidacion.contrasenia}
+          autoComplete='new-password'
+          helperText={
+            erroresValidacion.contrasenia === true
+              ? CAMPO_OBLIGATORIO
+              : erroresValidacion.contrasenia || ''
+          }
+        />
+      </Grid>
 
-        <Grid size={6} sx={estiloCuadricula}>
-          <CampoTexto
-            label='Contraseña'
-            name='contrasenia'
-            type='password'
-            value={datosUsuario.contrasenia}
-            onChange={manejarCambio}
-            size='medium'
-            error={!!erroresValidacion.contrasenia}
-            autoComplete='new-password'
-            helperText={
-              erroresValidacion.contrasenia === true
-                ? CAMPO_OBLIGATORIO
-                : erroresValidacion.contrasenia || ''
-            }
-          />
-        </Grid>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Confirmar contraseña'
+          name='confirmarContrasenia'
+          type='password'
+          value={datosUsuario.confirmarContrasenia || ''}
+          onChange={manejarCambio}
+          size='medium'
+          error={!!erroresValidacion.confirmarContrasenia}
+          autoComplete='new-password'
+          helperText={
+            erroresValidacion.confirmarContrasenia === true
+              ? CAMPO_OBLIGATORIO
+              : erroresValidacion.confirmarContrasenia || ''
+          }
+        />
       </Grid>
-    </Box>
+    </Grid>
   );
 };
 
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 5e056d73..214f5937 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -9,6 +9,7 @@ import Chip from '@Atomos/Chip';
 import { useConsultarListaUsuarios } from '@Hooks/Usuarios/useConsultarListaUsuarios';
 import { useEliminarUsuarios } from '@Hooks/Usuarios/useEliminarUsuarios';
 import { useConsultarRoles } from '@Hooks/Roles/useConsultarRoles';
+import { useConsultarClientes } from '@Hooks/Clientes/useConsultarClientes';
 import { RUTAS } from '@Constantes/rutas';
 import { tokens } from '@SRC/theme';
 import NavegadorAdministrador from '@Organismos/NavegadorAdministrador';
@@ -37,6 +38,7 @@ const estiloImagenLogo = { marginRight: '1rem' };
  * @see [RF02 Super Administrador Consulta Lista de Usuarios](https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF2)
  * @see [RF03 Leer usuario](https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF3)
  * @see [RF05 Super Administrador Eliminar Usuario](https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF5)
+ * @see [RF04 Super Administrador Actualiza Usuario](https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF4)
  */
 
 const ListaUsuarios = () => {
@@ -45,6 +47,7 @@ const ListaUsuarios = () => {
   const navigate = useNavigate();
   const [alerta, setAlerta] = useState(null);
   const { usuarios, cargando, error, recargar } = useConsultarListaUsuarios();
+  const { clientes, cargando: cargandoClientes } = useConsultarClientes();
   const { roles } = useConsultarRoles();
   const { usuario: usuarioAutenticado } = useAuth();
   const [modalCrearUsuarioAbierto, setModalCrearUsuarioAbierto] = useState(false);
@@ -452,7 +455,7 @@ const ListaUsuarios = () => {
             onAccion={recargar}
             usuarioEdicion={usuario}
             roles={roles}
-            clientes={[]}
+            clientes={clientes}
             esSuperAdmin={false}
             cargandoRoles={false}
           />
diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
index 02ce67ca..091905e9 100644
--- a/src/hooks/Usuarios/useAccionesUsuario.js
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -16,6 +16,26 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
       if (usuarioInicial.fechaNacimiento) {
         fechaNacimiento = dayjs(usuarioInicial.fechaNacimiento);
       }
+
+      // Normalizar género
+      let genero = '';
+      if (usuarioInicial.genero) {
+        if (usuarioInicial.genero.toLowerCase() === 'femenino') genero = 'Mujer';
+        else if (usuarioInicial.genero.toLowerCase() === 'masculino') genero = 'Hombre';
+        else genero = 'Otro';
+      }
+
+      let idRol = usuarioInicial.idRol || '';
+      if (typeof usuarioInicial.rol === 'string') {
+        const rolesMap = {
+          'Super Administrador': 1,
+          Administrador: 2,
+        };
+        idRol = rolesMap[usuarioInicial.rol] || '';
+      } else if (usuarioInicial.rol) {
+        idRol = usuarioInicial.rol;
+      }
+
       return {
         ...usuarioInicial,
         idUsuario: usuarioInicial.idUsuario || usuarioInicial.id,
@@ -25,16 +45,19 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
         numeroTelefono: usuarioInicial.numeroTelefono || '',
         direccion: usuarioInicial.direccion || '',
         fechaNacimiento,
-        genero: usuarioInicial.genero || '',
-        rol: usuarioInicial.rol || '',
+        genero,
+        idRol,
         cliente: usuarioInicial.cliente || [],
         contrasenia: '',
+        confirmarContrasenia: '',
       };
     }
     return {
       nombreCompleto: '',
+      apellido: '',
       correoElectronico: '',
       contrasenia: '',
+      confirmarContrasenia: '',
       numeroTelefono: '',
       direccion: '',
       fechaNacimiento: null,
@@ -78,6 +101,8 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
 
     const nuevosErrores = validarDatosActualizarUsuario(datosProcesados);
 
+    console.log('Errores de validación:', nuevosErrores);
+
     if (Object.keys(nuevosErrores).length > 0) {
       setErroresValidacion(nuevosErrores);
       setAlerta({

From b9175db2faf9d01fc87e44475ec56f05fdacb04c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Tue, 3 Jun 2025 14:20:59 -0600
Subject: [PATCH 078/160] refactor: simplificar el modal de leer cuota

---
 src/Dominio/Modelos/Cuotas/LeerCuota.js       | 14 ++---
 .../Componentes/Moleculas/CuotasInfo.jsx      | 51 +++++++------------
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx     | 43 ++++++++++------
 3 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/src/Dominio/Modelos/Cuotas/LeerCuota.js b/src/Dominio/Modelos/Cuotas/LeerCuota.js
index c60f178f..cb804bc7 100644
--- a/src/Dominio/Modelos/Cuotas/LeerCuota.js
+++ b/src/Dominio/Modelos/Cuotas/LeerCuota.js
@@ -4,19 +4,11 @@ RF[33] - Leer cuota - [https://codeandco-wiki.netlify.app/docs/proyectos/textile
 */
 
 export class LeerCuota {
-  constructor({
-    idCuota,
-    nombre,
-    descripcion,
-    periodoRenovacion,
-    renovacionHabilitada,
-    ultimaActualizacion,
-  }) {
+  constructor({ idCuota, nombre, descripcion, productos = [], cuotas = [] }) {
     this.idCuota = idCuota;
     this.nombre = nombre;
     this.descripcion = descripcion;
-    this.periodoRenovacion = periodoRenovacion;
-    this.renovacionHabilitada = renovacionHabilitada;
-    this.ultimaActualizacion = ultimaActualizacion;
+    this.productos = productos;
+    this.cuotas = cuotas;
   }
 }
diff --git a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
index 33a2ef76..cbad1e04 100644
--- a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
@@ -3,63 +3,46 @@ import PropTypes from 'prop-types';
 import Texto from '@Atomos/Texto';
 import { Grid, Box, useTheme } from '@mui/material';
 import { tokens } from '@SRC/theme';
+import Tabla from '@Organismos/Tabla'; // Asegúrate de que la ruta sea correcta
 
-const CuotasInfo = ({
-  nombre,
-  periodoRenovacion,
-  renovacionHabilitada,
-  descripcion,
-  ultimaActualizacion,
-}) => {
+const CuotasInfo = ({ nombre, descripcion, productos = [], cuotas = [] }) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
+  // Combina productos y cuotas en filas para la tabla
+  const rows = productos.map((producto, idx) => ({
+    id: idx,
+    nombreComun: producto.nombre,
+    cuota_valor: cuotas[idx]?.valor ?? '',
+  }));
+
+  const columns = [
+    { field: 'nombreComun', headerName: 'Producto', width: 200 },
+    { field: 'cuota_valor', headerName: 'Valor de Cuota', width: 150 },
+  ];
+
   return (
     <Box>
       <Grid container spacing={6} mb={4}>
         <Grid item xs={12} sm={6}>
-          <Texto gutterBottom sx={{ mb: 2, pb: 1 }}>
-            <strong>Nombre:</strong>{' '}
-            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
-              {nombre || 'No especificado'}
-            </span>
-          </Texto>
           <Texto gutterBottom sx={{ mb: 2 }}>
             <strong>Descripción:</strong>{' '}
             <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
               {descripcion || 'Sin descripción'}
             </span>
           </Texto>
-          <Texto gutterBottom sx={{ mb: 2 }}>
-            <strong>Periodo de Renovación:</strong>{' '}
-            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
-              {periodoRenovacion ?? 'No especificado'}
-            </span>
-          </Texto>
-          <Texto gutterBottom sx={{ mb: 2 }}>
-            <strong>Renovación Habilitada:</strong>{' '}
-            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
-              {renovacionHabilitada === 1 || renovacionHabilitada === true ? 'Sí' : 'No'}
-            </span>
-          </Texto>
-          <Texto gutterBottom sx={{ mb: 2 }}>
-            <strong>Última Actualización:</strong>{' '}
-            <span style={{ color: colores.altertex[4], fontWeight: 500 }}>
-              {ultimaActualizacion ? new Date(ultimaActualizacion).toLocaleString() : 'N/A'}
-            </span>
-          </Texto>
         </Grid>
       </Grid>
+      <Tabla columns={columns} rows={rows} pageSize={5} loading={false} sx={{ mt: 2 }} />
     </Box>
   );
 };
 
 CuotasInfo.propTypes = {
   nombre: PropTypes.string,
-  periodoRenovacion: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  renovacionHabilitada: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   descripcion: PropTypes.string,
-  ultimaActualizacion: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  productos: PropTypes.array,
+  cuotas: PropTypes.array,
 };
 
 export default CuotasInfo;
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index 183d58b0..cd0646db 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -25,7 +25,6 @@ const ListaCuotas = () => {
   const navegar = useNavigate();
   const { usuario } = useAuth();
   const { cuotas, cargando, error, recargar } = useConsultarCuotas();
-  const [idCuotaDetalle, setIdCuotaDetalle] = useState(null);
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
@@ -34,9 +33,14 @@ const ListaCuotas = () => {
   const [idsSetCuotas, setIdsSetCuotas] = useState([]);
   const [alerta, setAlerta] = useState(null);
   const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
-  const [modalAbierto, setModalAbierto] = useState(false);
+  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [idSetCuotaSeleccionado, setIdSetCuotaSeleccionado] = useState(null);
 
-  const { cuota, cargando: cargandoDetalle } = useCuotaId(idCuotaDetalle);
+  const {
+    cuota,
+    cargando: cargandoDetalle,
+    error: errorDetalle,
+  } = useCuotaId(modalDetalleAbierto ? idSetCuotaSeleccionado : null);
 
   useEffect(() => {
     if (!usuario?.clienteSeleccionado) {
@@ -172,8 +176,8 @@ const ListaCuotas = () => {
               setSeleccionados(ids);
             }}
             onRowClick={(params) => {
-              setIdCuotaDetalle(params.row.idCuotaSet);
-              setModalAbierto(true);
+              setIdSetCuotaSeleccionado(params.row.idCuotaSet);
+              setModalDetalleAbierto(true);
             }}
           />
         </Box>
@@ -188,22 +192,31 @@ const ListaCuotas = () => {
         dialogo='¿Estás seguro de que deseas eliminar los sets de cuotas seleccionados? Esta acción no se puede deshacer.'
       />
 
-      {modalAbierto && (
+      {modalDetalleAbierto && (
         <ModalFlotante
-          open={modalAbierto}
-          onClose={() => setModalAbierto(false)}
-          titulo='Detalles de la Cuota'
+          open={modalDetalleAbierto}
+          onClose={() => setModalDetalleAbierto(false)}
+          titulo={cuota?.nombre || 'Cargando...'}
+          tituloVariant='h4'
+          customWidth={530}
           botones={[
             {
-              label: 'Cerrar',
-              variant: 'contained',
-              color: 'error',
-              backgroundColor: colores.altertex[1],
-              onClick: () => setModalAbierto(false),
+              label: 'Salir',
+              variant: 'outlined',
+              color: 'primary',
+              outlineColor: colores.primario[1],
+              onClick: () => setModalDetalleAbierto(false),
+              style: { marginTop: '10px' },
             },
           ]}
         >
-          {cargandoDetalle || !cuota ? <span>Cargando...</span> : <CuotasInfo {...cuota} />}
+          {cargandoDetalle ? (
+            <p>Cargando información del set de cuotas...</p>
+          ) : errorDetalle ? (
+            <p>Error al cargar la información del set de cuotas: {errorDetalle}</p>
+          ) : (
+            <CuotasInfo {...cuota} />
+          )}
         </ModalFlotante>
       )}
 

From 4a29bb6a8066b7c3e09d2ca9ea7be1e9eb19f427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Tue, 3 Jun 2025 14:41:15 -0600
Subject: [PATCH 079/160] style: centre el valor de la cuota

---
 src/Vistas/Componentes/Moleculas/CuotasInfo.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
index cbad1e04..dfabf4e9 100644
--- a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
@@ -18,7 +18,13 @@ const CuotasInfo = ({ nombre, descripcion, productos = [], cuotas = [] }) => {
 
   const columns = [
     { field: 'nombreComun', headerName: 'Producto', width: 200 },
-    { field: 'cuota_valor', headerName: 'Valor de Cuota', width: 150 },
+    {
+      field: 'cuota_valor',
+      headerName: 'Valor de Cuota',
+      width: 150,
+      align: 'center',
+      headerAlign: 'center',
+    },
   ];
 
   return (

From 78b726bd6dce92110b9b1948701438a7cb5819f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Tue, 3 Jun 2025 15:20:37 -0600
Subject: [PATCH 080/160] =?UTF-8?q?refactor:=20quit=C3=A9=20varibales=20si?=
 =?UTF-8?q?n=20usa=20y=20puse=20varibales=20en=20camel=20case?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Componentes/Moleculas/CuotasInfo.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
index dfabf4e9..0393b9a2 100644
--- a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
@@ -5,7 +5,7 @@ import { Grid, Box, useTheme } from '@mui/material';
 import { tokens } from '@SRC/theme';
 import Tabla from '@Organismos/Tabla'; // Asegúrate de que la ruta sea correcta
 
-const CuotasInfo = ({ nombre, descripcion, productos = [], cuotas = [] }) => {
+const CuotasInfo = ({ descripcion, productos = [], cuotas = [] }) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
@@ -13,13 +13,13 @@ const CuotasInfo = ({ nombre, descripcion, productos = [], cuotas = [] }) => {
   const rows = productos.map((producto, idx) => ({
     id: idx,
     nombreComun: producto.nombre,
-    cuota_valor: cuotas[idx]?.valor ?? '',
+    cuotaValor: cuotas[idx]?.valor ?? '',
   }));
 
   const columns = [
     { field: 'nombreComun', headerName: 'Producto', width: 200 },
     {
-      field: 'cuota_valor',
+      field: 'cuotaValor',
       headerName: 'Valor de Cuota',
       width: 150,
       align: 'center',
@@ -45,7 +45,6 @@ const CuotasInfo = ({ nombre, descripcion, productos = [], cuotas = [] }) => {
 };
 
 CuotasInfo.propTypes = {
-  nombre: PropTypes.string,
   descripcion: PropTypes.string,
   productos: PropTypes.array,
   cuotas: PropTypes.array,

From 68409ae1cd1dadd086c4599e2fc358ce8ff7b1fd Mon Sep 17 00:00:00 2001
From: PAOLA MARIA garrido <you@example.com>
Date: Tue, 3 Jun 2025 15:59:12 -0600
Subject: [PATCH 081/160] =?UTF-8?q?fix:deshabilitar=20bot=C3=B3n=20de=20co?=
 =?UTF-8?q?nfirmaci=C3=B3n=20en=20la=20carga?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Paginas/Empleados/ListaEmpleados.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index 16a37df9..589b02b4 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -314,6 +314,7 @@ const ListaGrupoEmpleados = () => {
         dialogo={MENSAJE_POPUP_EXPORTAR}
         labelCancelar = 'Cancelar'
         labelConfirmar = 'Confirma'
+        disabledConfirmar={cargando}
       />
 
       {/* Alerta inferior */}

From 1de0aa84e7585eab058a9b2a50319e97f194196a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Tue, 3 Jun 2025 17:37:59 -0600
Subject: [PATCH 082/160] refactor: clean up imports and remove unnecessary
 comments in CuotasInfo component

---
 src/Vistas/Componentes/Moleculas/CuotasInfo.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
index 0393b9a2..4a8ceed6 100644
--- a/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
+++ b/src/Vistas/Componentes/Moleculas/CuotasInfo.jsx
@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import Texto from '@Atomos/Texto';
 import { Grid, Box, useTheme } from '@mui/material';
 import { tokens } from '@SRC/theme';
-import Tabla from '@Organismos/Tabla'; // Asegúrate de que la ruta sea correcta
+import Tabla from '@Organismos/Tabla';
 
 const CuotasInfo = ({ descripcion, productos = [], cuotas = [] }) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
-  // Combina productos y cuotas en filas para la tabla
   const rows = productos.map((producto, idx) => ({
     id: idx,
     nombreComun: producto.nombre,
@@ -39,7 +38,7 @@ const CuotasInfo = ({ descripcion, productos = [], cuotas = [] }) => {
           </Texto>
         </Grid>
       </Grid>
-      <Tabla columns={columns} rows={rows} pageSize={5} loading={false} sx={{ mt: 2 }} />
+      <Tabla columns={columns} rows={rows} pageSize={5} />
     </Box>
   );
 };

From 623fc08593ef3a72a6f0fcea341688db85d63d6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Antonio=20Ben=C3=ADtez=20De=20La=20Portilla?=
 <a01771433@tec.mx>
Date: Tue, 3 Jun 2025 17:54:14 -0600
Subject: [PATCH 083/160] refactor: quitar warning de lint

---
 .../Moleculas/GrupoEmpleadosInfoEditable.jsx  | 53 +++++++++++++------
 .../Paginas/Empleados/ListaGrupoEmpleados.jsx |  4 +-
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
index 4014d20d..37168ed6 100644
--- a/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/GrupoEmpleadosInfoEditable.jsx
@@ -105,8 +105,7 @@ const InfoGrupoEmpleadosEditable = ({
         const productosOrdenados = productos.sort((productos1, productos2) =>
           (productos1.nombreProducto || '')
             .toLowerCase()
-            .localeCompare((productos2.nombreProducto || '').toLowerCase())
-        );
+            .localeCompare((productos2.nombreProducto || '').toLowerCase()));
 
         // Ordenar empleados por nombre
         const empleadosOrdenados = datosEmpleados.sort((empleado1, empleado2) => {
@@ -145,7 +144,7 @@ const InfoGrupoEmpleadosEditable = ({
   // Remueve el useEffect que validaba en tiempo real
 
   // Función para validar campos al guardar
-  const validarCampos = () => {
+  const validarCampos = useCallback(() => {
     const nombreVacio = nombre.trim() === '';
     const descripcionVacia = descripcion.trim() === '';
 
@@ -155,7 +154,7 @@ const InfoGrupoEmpleadosEditable = ({
     });
 
     return !nombreVacio && !descripcionVacia;
-  };
+  }, [nombre, descripcion]);
 
   // Modificamos el useEffect para generar datos del formulario incluyendo la validación
   useEffect(() => {
@@ -179,7 +178,15 @@ const InfoGrupoEmpleadosEditable = ({
       }, 0);
       return () => clearTimeout(timeoutId);
     }
-  }, [nombre, descripcion, setsDerecha, empleadosDerecha, datosListos, onFormDataChange]);
+  }, [
+    nombre,
+    descripcion,
+    setsDerecha,
+    empleadosDerecha,
+    datosListos,
+    onFormDataChange,
+    validarCampos,
+  ]);
 
   // Handlers para empleados
   const manejarSeleccionEmpleado = useCallback(
@@ -266,8 +273,7 @@ const InfoGrupoEmpleadosEditable = ({
       return nuevaLista.sort((set1, set2) =>
         (set1.nombreProducto || '')
           .toLowerCase()
-          .localeCompare((set2.nombreProducto || '').toLowerCase())
-      );
+          .localeCompare((set2.nombreProducto || '').toLowerCase()));
     });
     setSetsSeleccionados([]);
   }, [setsIzquierda]);
@@ -279,8 +285,7 @@ const InfoGrupoEmpleadosEditable = ({
       return nuevaLista.sort((set1, set2) =>
         (set1.nombreProducto || '')
           .toLowerCase()
-          .localeCompare((set2.nombreProducto || '').toLowerCase())
-      );
+          .localeCompare((set2.nombreProducto || '').toLowerCase()));
     });
     setSetsSeleccionados((prev) => noEstaEnLista(prev, izquierdaSeleccionados));
   }, [setsSeleccionados, setsIzquierda]);
@@ -334,12 +339,12 @@ const InfoGrupoEmpleadosEditable = ({
             <Checkbox
               onClick={manejarSeleccionTodosEmpleados(elementos)}
               checked={
-                contarEmpleadosSeleccionados(elementos) === elementos.length &&
-                elementos.length !== 0
+                contarEmpleadosSeleccionados(elementos) === elementos.length
+                && elementos.length !== 0
               }
               indeterminate={
-                contarEmpleadosSeleccionados(elementos) !== elementos.length &&
-                contarEmpleadosSeleccionados(elementos) !== 0
+                contarEmpleadosSeleccionados(elementos) !== elementos.length
+                && contarEmpleadosSeleccionados(elementos) !== 0
               }
               disabled={elementos.length === 0}
               inputProps={{
@@ -412,8 +417,8 @@ const InfoGrupoEmpleadosEditable = ({
                 contarSetsSeleccionados(elementos) === elementos.length && elementos.length !== 0
               }
               indeterminate={
-                contarSetsSeleccionados(elementos) !== elementos.length &&
-                contarSetsSeleccionados(elementos) !== 0
+                contarSetsSeleccionados(elementos) !== elementos.length
+                && contarSetsSeleccionados(elementos) !== 0
               }
               disabled={elementos.length === 0}
               inputProps={{
@@ -519,7 +524,14 @@ const InfoGrupoEmpleadosEditable = ({
         {/* Sets de Productos */}
         <Grid item xs={12}>
           <Texto variant='h6'>Sets de Productos:</Texto>
-          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', mt: 2 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
+              mt: 2,
+            }}
+          >
             <Grid
               container
               spacing={2}
@@ -576,7 +588,14 @@ const InfoGrupoEmpleadosEditable = ({
         {/* Lista de transferencia de empleados */}
         <Grid item xs={12}>
           <Texto variant='h6'>Empleados:</Texto>
-          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', mt: 2 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
+              mt: 2,
+            }}
+          >
             <Grid
               container
               spacing={2}
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index bf3a8253..de23b8a5 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -23,8 +23,8 @@ const ListaGrupoEmpleados = () => {
   const { usuario } = useAuth();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los grupos seleccionados? Esta acción no se puede deshacer.';
 
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
   const [gruposSeleccionados, setGruposSeleccionados] = useState([]);

From c69f686c17cb69842007ad6193c7607781375d1b Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Wed, 4 Jun 2025 12:11:48 -0600
Subject: [PATCH 084/160] feat: add estatus field to user update form and
 handle undefined values

---
 .../FormularioActualizarUsuario.jsx           | 19 ++++++++++-
 src/hooks/Usuarios/useAccionesUsuario.js      | 34 ++++++++++---------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index f4d6bc1b..aab1d241 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -177,7 +177,7 @@ const FormularioActualizarUsuario = ({
         <CampoSelect
           label='Rol'
           name='idRol'
-          value={datosUsuario.idRol}
+          value={datosUsuario.idRol !== undefined ? datosUsuario.idRol : ''}
           onChange={manejarCambio}
           required
           size='medium'
@@ -193,6 +193,23 @@ const FormularioActualizarUsuario = ({
         />
       </Grid>
 
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoSelect
+          label='Estatus'
+          name='estatus'
+          value={datosUsuario.estatus}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.estatus}
+          helperText={erroresValidacion.estatus && CAMPO_OBLIGATORIO}
+          options={[
+            { value: 1, label: 'Activo' },
+            { value: 0, label: 'Inactivo' },
+          ]}
+        />
+      </Grid>
+
       <Grid size={6} sx={estiloCuadricula}>
         <CampoSelectMultiple
           label='Cliente'
diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
index 091905e9..1c80edb4 100644
--- a/src/hooks/Usuarios/useAccionesUsuario.js
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -9,7 +9,6 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
   const [cargando, setCargando] = useState(false);
   const [alerta, setAlerta] = useState(null);
 
-  // Inicializar con datos de edición o vacío
   const [datosUsuario, setDatosUsuario] = useState(() => {
     if (esEdicion) {
       let fechaNacimiento = null;
@@ -17,7 +16,6 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
         fechaNacimiento = dayjs(usuarioInicial.fechaNacimiento);
       }
 
-      // Normalizar género
       let genero = '';
       if (usuarioInicial.genero) {
         if (usuarioInicial.genero.toLowerCase() === 'femenino') genero = 'Mujer';
@@ -25,7 +23,7 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
         else genero = 'Otro';
       }
 
-      let idRol = usuarioInicial.idRol || '';
+      let idRol = usuarioInicial.idRol ?? '';
       if (typeof usuarioInicial.rol === 'string') {
         const rolesMap = {
           'Super Administrador': 1,
@@ -37,19 +35,18 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
       }
 
       return {
-        ...usuarioInicial,
-        idUsuario: usuarioInicial.idUsuario || usuarioInicial.id,
-        nombreCompleto: usuarioInicial.nombreCompleto || '',
-        apellido: usuarioInicial.apellido || '',
-        correoElectronico: usuarioInicial.correoElectronico || '',
-        numeroTelefono: usuarioInicial.numeroTelefono || '',
-        direccion: usuarioInicial.direccion || '',
-        fechaNacimiento,
-        genero,
-        idRol,
-        cliente: usuarioInicial.cliente || [],
+        nombreCompleto: usuarioInicial.nombreCompleto ?? '',
+        apellido: usuarioInicial.apellido ?? '',
+        correoElectronico: usuarioInicial.correoElectronico ?? '',
         contrasenia: '',
         confirmarContrasenia: '',
+        numeroTelefono: usuarioInicial.numeroTelefono ?? '',
+        direccion: usuarioInicial.direccion ?? '',
+        fechaNacimiento,
+        genero,
+        idRol: idRol ?? '',
+        cliente: usuarioInicial.cliente ?? [],
+        estatus: usuarioInicial.estatus !== undefined ? usuarioInicial.estatus : 1,
       };
     }
     return {
@@ -62,8 +59,9 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
       direccion: '',
       fechaNacimiento: null,
       genero: '',
-      rol: '',
+      idRol: '',
       cliente: [],
+      estatus: 1,
     };
   });
 
@@ -97,8 +95,12 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
       fechaNacimiento: datosUsuario.fechaNacimiento
         ? dayjs(datosUsuario.fechaNacimiento).format('YYYY-MM-DD')
         : null,
+      nombreCompleto: datosUsuario.nombreCompleto,
+      apellido: datosUsuario.apellido,
     };
 
+    console.log('Enviando al backend:', datosProcesados);
+
     const nuevosErrores = validarDatosActualizarUsuario(datosProcesados);
 
     console.log('Errores de validación:', nuevosErrores);
@@ -146,7 +148,7 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
       direccion: '',
       fechaNacimiento: null,
       genero: '',
-      rol: '',
+      idrol: '',
       cliente: [],
     });
     setErroresValidacion({});

From 12f81f0c961895167fa8e33449bf43756eaeaeb9 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Wed, 4 Jun 2025 13:44:45 -0600
Subject: [PATCH 085/160] feat: agregar recarga al cerrar detalle para que se
 muestren los cambios, cambiar forma de como se envian los datos al backend

---
 .../Roles/RepositorioActualizarRol.js         |  3 ++-
 .../Organismos/ModalDetalleRol.jsx            | 26 +++++++++++++------
 src/Vistas/Paginas/Roles/ListaRoles.jsx       | 13 ++++++----
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js b/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
index f1c5ab06..47541a86 100644
--- a/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
+++ b/src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
@@ -8,9 +8,10 @@ const API_KEY = import.meta.env.VITE_API_KEY;
 export class RepositorioActualizarRol {
   static async actualizar(idRol, datosRol) {
     try {
+      const datosRolActualizacion = {datosRol, idRol}
       const respuesta = await axios.put(
         `${RUTAS_API.ROLES.ACTUALIZAR}`,
-        { datosRol, idRol },
+        { datosRolActualizacion },
         {
           withCredentials: true,
           headers: {
diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
index ed4d9519..3cf2379f 100644
--- a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -24,6 +24,9 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
   const [nombreRol, setNombreRol] = useState('');
   const [descripcionRol, setDescripcionRol] = useState('');
 
+  const [nombreOriginal, setNombreOriginal] = useState('');
+  const [descripcionOriginal, setDescripcionOriginal] = useState('');
+
   const permisosLoadedRef = useRef(false);
 
   useEffect(() => {
@@ -32,8 +35,14 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
   useEffect(() => {
     if (detalle) {
-      setNombreRol(detalle.nombre || '');
-      setDescripcionRol(detalle.descripcion || '');
+      const nombre = detalle.nombre || '';
+      const descripcion = detalle.descripcion || '';
+
+      setNombreRol(nombre);
+      setDescripcionRol(descripcion);
+
+      setNombreOriginal(nombre);
+      setDescripcionOriginal(descripcion);
     }
   }, [detalle]);
 
@@ -98,23 +107,24 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
   const manejarGuardar = async () => {
     const datosParaEnviar = {
-      nombre: nombreRol,
-      descripcion: descripcionRol,
-      permisos: permisosSeleccionados.map(permiso => ({ id: permiso.id, nombre: permiso.nombre }))
+      // Only send the name value if it was actually changed
+      nombre: nombreRol !== nombreOriginal ? nombreRol : null,
+      // Only send the description value if it was actually changed
+      descripcion: descripcionRol !== descripcionOriginal ? descripcionRol : null,
+      permisos: permisosSeleccionados.map(permiso => permiso.id)
     };
 
     const resultado = await actualizarRol(idRol, datosParaEnviar);
 
     if (resultado.success) {
       setModoEdicion(false);
-      // Recargar los detalles del rol para mostrar los cambios actualizados
       leerRol(idRol);
     }
   };
 
   const manejarCancelar = () => {
-    setNombreRol(detalle?.nombre || '');
-    setDescripcionRol(detalle?.descripcion || '');
+    setNombreRol(nombreOriginal);
+    setDescripcionRol(descripcionOriginal);
     setModoEdicion(false);
     limpiarEstado();
   };
diff --git a/src/Vistas/Paginas/Roles/ListaRoles.jsx b/src/Vistas/Paginas/Roles/ListaRoles.jsx
index 1c155bd0..32e23be0 100644
--- a/src/Vistas/Paginas/Roles/ListaRoles.jsx
+++ b/src/Vistas/Paginas/Roles/ListaRoles.jsx
@@ -50,7 +50,7 @@ const ListaRoles = () => {
       icono: true,
       cerrable: true,
       centradoInferior: true,
-      duracion: 3000,
+      duracion: 2500,
     });
     recargar();
   };
@@ -71,7 +71,7 @@ const ListaRoles = () => {
         icono: true,
         cerrable: true,
         centradoInferior: true,
-        //duracion: 3500,
+        duracion: 2500,
       });
     }
 
@@ -98,7 +98,7 @@ const ListaRoles = () => {
           icono: true,
           cerrable: true,
           centradoInferior: true,
-          duracion: 3000,
+          duracion: 2500,
         });
       } else {
         setAlerta({
@@ -124,7 +124,7 @@ const ListaRoles = () => {
         icono: true,
         cerrable: true,
         centradoInferior: true,
-        duracion: 3000,
+        duracion: 2500,
       });
     } finally {
       setAbrirPopupEliminar(false);
@@ -305,7 +305,10 @@ const ListaRoles = () => {
 
       <ModalDetalleRol
         abierto={modalDetalleAbierto}
-        onCerrar={() => setModalDetalleAbierto(false)}
+        onCerrar={() => {
+          setModalDetalleAbierto(false);
+          recargar()
+        }}
         idRol={rolSeleccionado}
       />
 

From f173b3008f49ad02a2ab3a278bd59bfacf177e1e Mon Sep 17 00:00:00 2001
From: PAOLA MARIA garrido <you@example.com>
Date: Thu, 5 Jun 2025 10:09:03 -0600
Subject: [PATCH 086/160] fix: corregir error de lint

---
 src/hooks/Empleados/useExportarEmpleados.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/Empleados/useExportarEmpleados.js b/src/hooks/Empleados/useExportarEmpleados.js
index ddd1455f..ed01a803 100644
--- a/src/hooks/Empleados/useExportarEmpleados.js
+++ b/src/hooks/Empleados/useExportarEmpleados.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { exportarEmpleados as repoExportarEmpleados } from '@Repositorios/Empleados/RepositorioExportarEmpleados';
 
 /**

From 06841fa555366d02c83ce5796aa14cfa66bfae03 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Thu, 5 Jun 2025 14:34:04 -0600
Subject: [PATCH 087/160] fix: arreglar errores de lint

---
 .../Componentes/Organismos/ListaTransferencia.jsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index 4e102093..e5eeac36 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -16,16 +16,16 @@ import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrow
 
 
 // Funciones utilitarias
-function no(a, b, funcionClave = (elemento) => elemento.id || elemento) {
-  return a.filter((valorA) => !b.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
+function no(no1, no2, funcionClave = (elemento) => elemento.id || elemento) {
+  return no1.filter((valorA) => !no2.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
 }
 
-function interseccion(a, b, funcionClave = (elemento) => elemento.id || elemento) {
-  return a.filter((valorA) => b.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
+function interseccion(inter1, inter2, funcionClave = (elemento) => elemento.id || elemento) {
+  return inter1.filter((valorA) => inter2.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
 }
 
-function union(a, b, funcionClave = (elemento) => elemento.id || elemento) {
-  return [...a, ...no(b, a, funcionClave)];
+function union(union1, union2, funcionClave = (elemento) => elemento.id || elemento) {
+  return [...union1, ...no(union2, union1, funcionClave)];
 }
 
 // Componente Lista de Transferencia Personalizada

From 81b892bf540b0081ba48aa98773eb743ab843eb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Thu, 5 Jun 2025 16:31:04 -0600
Subject: [PATCH 088/160] feat: Agregar ruta, repositorio y hook actualizar set

---
 .../RepositorioActualizarSetsProductos.js     | 25 ++++++++++++++++++
 src/Utilidades/Constantes/rutasAPI.js         | 10 +++----
 .../useActualizarSetsProductos.js             | 26 +++++++++++++++++++
 3 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js
 create mode 100644 src/hooks/SetsProductos/useActualizarSetsProductos.js

diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js
new file mode 100644
index 00000000..af4139f5
--- /dev/null
+++ b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js
@@ -0,0 +1,25 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+// RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarSetProducto {
+  static async actualizar(formData) {
+    if (!formData) return;
+
+    try {
+      await axios.put(RUTAS_API.SETS_PRODUCTOS.ACTUALIZAR_SETS_PRODUCTO, formData, {
+        headers: {
+          'x-api-key': API_KEY,
+        },
+        withCredentials: true,
+      });
+    } catch (error) {
+      throw new Error(
+        error.response.data.mensaje || 'Ocurrió un error al actualizar el set de producto.'
+      );
+    }
+  }
+}
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index 63f2c6d7..45b91bce 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -13,7 +13,6 @@ const BASE_EVENTOS = `${BASE_URL}/api/eventos`;
 const BASE_PAGOS = `${BASE_URL}/api/pagos`;
 const BASE_AUTENTICACION = `${BASE_URL}/api/autenticacion`;
 
-
 export const RUTAS_API = {
   USUARIOS: {
     BASE: BASE_USUARIOS,
@@ -27,7 +26,7 @@ export const RUTAS_API = {
     ACTIVAR_2FA: `${BASE_AUTENTICACION}/activar-2fa`,
     VERIFICAR_2FA: `${BASE_AUTENTICACION}/verificar-2fa`,
   },
-  
+
   CATEGORIAS: {
     BASE: BASE_CATEGORIAS,
     CONSULTAR_LISTA: `${BASE_CATEGORIAS}/consultar-lista-categorias`,
@@ -40,7 +39,7 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_PRODUCTOS}/consultar-lista`,
     CREAR: `${BASE_PRODUCTOS}/crear`,
     ELIMINAR_PRODUCTO: `${BASE_PRODUCTOS}/eliminar`,
-    LEER_PRODCUTO: `${BASE_PRODUCTOS}/leer-producto`
+    LEER_PRODCUTO: `${BASE_PRODUCTOS}/leer-producto`,
   },
   PROVEEDORES: {
     BASE: BASE_PROVEEDORES,
@@ -51,7 +50,8 @@ export const RUTAS_API = {
     BASE: BASE_SETS_PRODUCTOS,
     CONSULTAR_LISTA: `${BASE_SETS_PRODUCTOS}/consultar-lista`,
     ELIMINAR_SET_PRODUCTOS: `${BASE_SETS_PRODUCTOS}/eliminar`,
-    CREAR_SETS_PRODUCTOS: `${BASE_SETS_PRODUCTOS}/crear`
+    CREAR_SETS_PRODUCTOS: `${BASE_SETS_PRODUCTOS}/crear`,
+    ACTUALIZAR_SETS_PRODUCTO: `${BASE_SETS_PRODUCTOS}/actualizar`,
   },
   CLIENTES: {
     BASE: BASE_CLIENTES,
@@ -84,7 +84,7 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_ROLES}/consultar-lista`,
     CREAR_ROL: `${BASE_ROLES}/crear-rol`,
     ELIMINAR_ROL: `${BASE_ROLES}/eliminar`,
-    LEER_ROL: `${BASE_ROLES}/leer`
+    LEER_ROL: `${BASE_ROLES}/leer`,
   },
   PEDIDOS: {
     BASE: BASE_PEDIDOS,
diff --git a/src/hooks/SetsProductos/useActualizarSetsProductos.js b/src/hooks/SetsProductos/useActualizarSetsProductos.js
new file mode 100644
index 00000000..deff53f6
--- /dev/null
+++ b/src/hooks/SetsProductos/useActualizarSetsProductos.js
@@ -0,0 +1,26 @@
+// RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
+
+import { useState } from 'react';
+import { RepositorioActualizarSetProducto } from '@Repositorios/SetsProductos/RepositorioActualizarSetProducto';
+
+export function useActualizarEmpleado() {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+
+  const actualizar = async (cambios) => {
+    setCargando(true);
+    setError(null);
+    setMensaje('');
+
+    try {
+      const respuesta = await RepositorioActualizarSetProducto.actualizar(cambios);
+      setMensaje(respuesta.mensaje || 'Actualización exitosa');
+    } catch (err) {
+      setError(err.message || 'Ocurrió un error');
+    } finally {
+      setCargando(false);
+    }
+  };
+  return { actualizar, cargando, error, mensaje };
+}

From 2b163af3e175e9cafa8552a1e93523935db3beee Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Thu, 5 Jun 2025 16:37:46 -0600
Subject: [PATCH 089/160] feature actualizar categoria

---
 .../repositorioActualizarCategoria.js         |  40 +++
 .../Servicios/obtenerProductosCategoria.js    |  39 +++
 src/Utilidades/Constantes/rutasAPI.js         |   1 +
 .../Organismos/CategoriaInfoEditable.jsx      |  74 ++++++
 .../Organismos/ListaTransferencia.jsx         | 245 ++++++++++++++++++
 .../Organismos/ModalEditarCategoria.jsx       | 110 ++++++++
 .../Paginas/Categorias/ListaCategorias.jsx    | 139 ++++++++--
 .../Categorias/useActualizarCategoria.js      |  62 +++++
 8 files changed, 684 insertions(+), 26 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js
 create mode 100644 src/Dominio/Servicios/obtenerProductosCategoria.js
 create mode 100644 src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
 create mode 100644 src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
 create mode 100644 src/hooks/Categorias/useActualizarCategoria.js

diff --git a/src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js b/src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js
new file mode 100644
index 00000000..ff71f66b
--- /dev/null
+++ b/src/Dominio/Repositorios/Categorias/repositorioActualizarCategoria.js
@@ -0,0 +1,40 @@
+// RF49 - Actualizar Categoría - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF49]
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+/**
+ * Repositorio para actualizar una categoría en el sistema.
+ *
+ * RF49 - Actualizar Categoría
+ * @see https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF49
+ */
+export class RepositorioActualizarCategoria {
+  /**
+   * Envía una solicitud PUT al backend para actualizar una categoría.
+   *
+   * @param {number} idCategoria - ID de la categoría a actualizar.
+   * @param {object} datosCategoria - Datos nuevos de la categoría.
+   * @returns {Promise<object>} - Respuesta del servidor.
+   * @throws {Error} - Si ocurre un error durante la petición.
+   */
+  static async actualizar(idCategoria, datosCategoria) {
+    try {
+      const respuesta = await axios.put(
+        `${RUTAS_API.CATEGORIAS.ACTUALIZAR}/${idCategoria}`,
+        datosCategoria,
+        {
+          withCredentials: true,
+          headers: {
+            'x-api-key': API_KEY,
+          },
+        }
+      );
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error?.response?.data?.mensaje || 'Error al actualizar la categoría';
+      throw new Error(mensaje);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Dominio/Servicios/obtenerProductosCategoria.js b/src/Dominio/Servicios/obtenerProductosCategoria.js
new file mode 100644
index 00000000..8ce4d147
--- /dev/null
+++ b/src/Dominio/Servicios/obtenerProductosCategoria.js
@@ -0,0 +1,39 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+/**
+ * Servicio para obtener la lista de productos disponibles para categorías.
+ * 
+ * RF49 - Actualizar Categoría
+ * @returns {Promise<Array<{id: number, nombre: string}>>} Lista formateada de productos.
+ */
+const obtenerProductosCategoria = async () => {
+  try {
+    const respuesta = await axios.post(
+      RUTAS_API.PRODUCTOS.CONSULTAR_LISTA,
+      {},
+      {
+        headers: {
+          'x-api-key': API_KEY,
+        },
+        withCredentials: true,
+      }
+    );
+
+    const productosCrudos = respuesta?.data?.listaProductos || [];
+
+    const productosFormateados = productosCrudos.map((producto) => ({
+      id: producto.idProducto,
+      nombre: producto.nombreComun,
+    }));
+
+    return productosFormateados;
+  } catch (error) {
+    console.error('❌ Error al obtener productos:', error);
+    return [];
+  }
+};
+
+export default obtenerProductosCategoria;
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index a1050e92..1f145c7f 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -35,6 +35,7 @@ export const RUTAS_API = {
     CREAR: `${BASE_CATEGORIAS}/crear-categoria`,
     ELIMINAR_CATEGORIA: `${BASE_CATEGORIAS}/eliminar`,
     LEER: `${BASE_CATEGORIAS}/leer`,
+    ACTUALIZAR: `${BASE_CATEGORIAS}/actualizar`,
   },
   PRODUCTOS: {
     BASE: BASE_PRODUCTOS,
diff --git a/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx b/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx
new file mode 100644
index 00000000..0045ebf2
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import CampoTexto from '@Atomos/CampoTexto';
+import ListaTransferencia from '@Organismos/ListaTransferencia';
+
+const CategoriaInfoEditable = ({
+  nombre,
+  descripcion,
+  productosDisponibles,
+  productosSeleccionados,
+  onCambioNombre,
+  onCambioDescripcion,
+  onCambioTransferencia,
+  deshabilitado = false,
+  errorNombre = false
+}) => {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+      <Box sx={{ width: '100%', maxWidth: 900, display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {/* Fila de campos */}
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <Box sx={{ flex: 1 }}>
+            <CampoTexto
+              label='Nombre de la Categoría'
+              name='nombreCategoria'
+              value={nombre}
+              onChange={onCambioNombre}
+              fullWidth
+              required
+              maxLength={50}
+              helperText={
+                errorNombre
+                  ? 'Este campo es obligatorio'
+                  : `${nombre.length}/50 caracteres`
+              }
+              error={errorNombre}
+              disabled={deshabilitado}
+            />
+          </Box>
+
+          <Box sx={{ flex: 1 }}>
+            <CampoTexto
+              label='Descripción'
+              name='descripcionCategoria'
+              value={descripcion}
+              onChange={onCambioDescripcion}
+              fullWidth
+              maxLength={150}
+              helperText={`${descripcion.length}/150 caracteres`}
+              disabled={deshabilitado}
+            />
+          </Box>
+        </Box>
+
+        {/* Fila de lista de transferencia */}
+        <Box>
+          <ListaTransferencia
+            elementosDisponibles={productosDisponibles}
+            elementosSeleccionados={productosSeleccionados}
+            alCambiarSeleccion={onCambioTransferencia}
+            tituloIzquierda='Productos Disponibles'
+            tituloDerecha='Productos Asociados'
+            obtenerEtiquetaElemento={(producto) => producto.nombre}
+            obtenerClaveElemento={(producto) => producto.id}
+            alturaMaxima={300}
+            deshabilitado={deshabilitado}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default CategoriaInfoEditable;
\ No newline at end of file
diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
new file mode 100644
index 00000000..d31a55f4
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -0,0 +1,245 @@
+import React, { useState, useEffect, useRef } from 'react';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Checkbox from '@mui/material/Checkbox';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+
+
+// Funciones utilitarias
+function no(a, b, funcionClave = (elemento) => elemento.id || elemento) {
+  return a.filter((valorA) => !b.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
+}
+
+function interseccion(a, b, funcionClave = (elemento) => elemento.id || elemento) {
+  return a.filter((valorA) => b.some((valorB) => funcionClave(valorA) === funcionClave(valorB)));
+}
+
+function union(a, b, funcionClave = (elemento) => elemento.id || elemento) {
+  return [...a, ...no(b, a, funcionClave)];
+}
+
+// Componente Lista de Transferencia Personalizada
+const ListaTransferenciaPersonalizada = ({
+                                           elementosDisponibles = [],
+                                           elementosSeleccionados = [],
+                                           alCambiarSeleccion,
+                                           tituloIzquierda = "Disponibles",
+                                           tituloDerecha = "Seleccionados",
+                                           obtenerEtiquetaElemento = (elemento) => elemento.etiqueta || elemento.nombre || String(elemento),
+                                           obtenerClaveElemento = (elemento) => elemento.id || elemento.clave || elemento,
+                                           deshabilitado = false,
+                                           alturaMaxima = 357,
+                                           ancho = 350
+                                         }) => {
+  const [marcados, setMarcados] = useState([]);
+  const [izquierda, setIzquierda] = useState(elementosDisponibles);
+  const [derecha, setDerecha] = useState(elementosSeleccionados);
+
+  // Use ref to track if we're in the middle of updating from props
+  const updatingFromPropsRef = useRef(false);
+
+  // Actualizar estado interno cuando cambien las props
+  useEffect(() => {
+    updatingFromPropsRef.current = true;
+    setIzquierda(elementosDisponibles);
+    updatingFromPropsRef.current = false;
+  }, [elementosDisponibles]);
+
+  useEffect(() => {
+    updatingFromPropsRef.current = true;
+    setDerecha(elementosSeleccionados);
+    updatingFromPropsRef.current = false;
+  }, [elementosSeleccionados]);
+
+  // Solo notificar al padre cuando el cambio venga de interacción de usuario
+  useEffect(() => {
+    if (alCambiarSeleccion && !updatingFromPropsRef.current) {
+      alCambiarSeleccion({
+        disponibles: izquierda,
+        seleccionados: derecha
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [izquierda, derecha]); // alCambiarSeleccion no debe estar en deps para evitar loops
+
+  const marcadosIzquierda = interseccion(marcados, izquierda, obtenerClaveElemento);
+  const marcadosDerecha = interseccion(marcados, derecha, obtenerClaveElemento);
+
+  const manejarAlternar = (valor) => () => {
+    const indiceActual = marcados.findIndex(elemento => obtenerClaveElemento(elemento) === obtenerClaveElemento(valor));
+    const nuevosMarcados = [...marcados];
+
+    if (indiceActual === -1) {
+      nuevosMarcados.push(valor);
+    } else {
+      nuevosMarcados.splice(indiceActual, 1);
+    }
+
+    setMarcados(nuevosMarcados);
+  };
+
+  const numeroDeMarcados = (elementos) => interseccion(marcados, elementos, obtenerClaveElemento).length;
+
+  const manejarAlternarTodos = (elementos) => () => {
+    if (numeroDeMarcados(elementos) === elementos.length) {
+      setMarcados(no(marcados, elementos, obtenerClaveElemento));
+    } else {
+      setMarcados(union(marcados, elementos, obtenerClaveElemento));
+    }
+  };
+
+  const manejarMarcadosADerecha = () => {
+    setDerecha(union(derecha, marcadosIzquierda, obtenerClaveElemento));
+    setIzquierda(no(izquierda, marcadosIzquierda, obtenerClaveElemento));
+    setMarcados(no(marcados, marcadosIzquierda, obtenerClaveElemento));
+  };
+
+  const manejarMarcadosAIzquierda = () => {
+    setIzquierda(union(izquierda, marcadosDerecha, obtenerClaveElemento));
+    setDerecha(no(derecha, marcadosDerecha, obtenerClaveElemento));
+    setMarcados(no(marcados, marcadosDerecha, obtenerClaveElemento));
+  };
+
+  const manejarTodoADerecha = () => {
+    setDerecha(union(derecha, izquierda, obtenerClaveElemento));
+    setIzquierda([]);
+    setMarcados([]);
+  };
+
+  const manejarTodoAIzquierda = () => {
+    setIzquierda(union(izquierda, derecha, obtenerClaveElemento));
+    setDerecha([]);
+    setMarcados([]);
+  };
+
+  const listaPersonalizada = (titulo, elementos) => (
+    <Card sx={{ width: ancho }}>
+      <CardHeader
+        sx={{ px: 2, py: 1 }}
+        avatar={
+          <Checkbox
+            onClick={manejarAlternarTodos(elementos)}
+            checked={numeroDeMarcados(elementos) === elementos.length && elementos.length !== 0}
+            indeterminate={
+              numeroDeMarcados(elementos) !== elementos.length && numeroDeMarcados(elementos) !== 0
+            }
+            disabled={elementos.length === 0 || deshabilitado}
+            inputProps={{
+              'aria-label': 'todos los elementos seleccionados',
+            }}
+          />
+        }
+        title={titulo}
+        subheader={`${numeroDeMarcados(elementos)}/${elementos.length} seleccionados`}
+      />
+      <Divider />
+      <List
+        sx={{
+          height: alturaMaxima,
+          bgcolor: 'background.paper',
+          overflow: 'auto',
+        }}
+        dense
+        component="div"
+        role="list"
+      >
+        {elementos.map((elemento, idx) => {
+          const claveElemento = obtenerClaveElemento(elemento);
+          const etiquetaElemento = obtenerEtiquetaElemento(elemento);
+          const estaMarcado = marcados.some(elementoMarcado => obtenerClaveElemento(elementoMarcado) === claveElemento);
+
+          return (
+            <ListItemButton
+              key={claveElemento ?? idx} // Asegura que siempre haya un key único
+              role="listitem"
+              onClick={manejarAlternar(elemento)}
+            >
+              <ListItemIcon>
+                <Checkbox
+                  checked={estaMarcado}
+                  tabIndex={-1}
+                  disableRipple
+                  disabled={deshabilitado}
+                  inputProps={{
+                    'aria-labelledby': `lista-transferencia-elemento-${claveElemento}-etiqueta`,
+                  }}
+                />
+              </ListItemIcon>
+              <ListItemText
+                id={`lista-transferencia-elemento-${claveElemento}-etiqueta`}
+                primary={etiquetaElemento}
+              />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Card>
+  );
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      sx={{ justifyContent: 'center', alignItems: 'center' }}
+    >
+      <Grid>{listaPersonalizada(tituloIzquierda, izquierda)}</Grid>
+      <Grid>
+        <Grid container direction="column" sx={{ alignItems: 'center' }}>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarTodoADerecha}
+            disabled={izquierda.length === 0 || deshabilitado}
+            aria-label="mover todo a la derecha"
+          >
+            <KeyboardDoubleArrowRightIcon/>
+          </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarMarcadosADerecha}
+            disabled={marcadosIzquierda.length === 0 || deshabilitado}
+            aria-label="mover seleccionados a la derecha"
+          >
+            <KeyboardArrowRightIcon/>
+          </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarMarcadosAIzquierda}
+            disabled={marcadosDerecha.length === 0 || deshabilitado}
+            aria-label="mover seleccionados a la izquierda"
+          >
+            <KeyboardArrowLeftIcon/>
+          </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={manejarTodoAIzquierda}
+            disabled={derecha.length === 0 || deshabilitado}
+            aria-label="mover todo a la izquierda"
+          >
+            <KeyboardDoubleArrowLeftIcon/>
+          </Button>
+        </Grid>
+      </Grid>
+      <Grid>{listaPersonalizada(tituloDerecha, derecha)}</Grid>
+    </Grid>
+  );
+};
+
+export default ListaTransferenciaPersonalizada;
diff --git a/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx b/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
new file mode 100644
index 00000000..04b31003
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Box, Button, useTheme } from '@mui/material';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import Alerta from '@Moleculas/Alerta';
+import CategoriaInfoEditable from '@Organismos/CategoriaInfoEditable';
+import { tokens } from '@SRC/theme';
+
+/**
+ * Modal para editar una categoría existente.
+ *
+ * RF49 - Actualizar Categoría
+ * @param {object} props - Propiedades del componente.
+ * @param {boolean} props.abierto - Si el modal está abierto.
+ * @param {function} props.onCerrar - Función para cerrar el modal.
+ * @param {object} props.categoria - Detalle de la categoría (nombre, descripción, productos).
+ * @param {function} props.onGuardar - Función a ejecutar al guardar los cambios.
+ * @param {function} props.onCambioTransferencia - Función para manejar el cambio en los productos asociados.
+ * @param {object} props.estadoActualizacion - Estado del proceso de actualización.
+ * @param {function} props.setCategoria - Función para actualizar el estado local de la categoría.
+ */
+const ModalEditarCategoria = ({
+  abierto,
+  onCerrar,
+  categoria,
+  onGuardar,
+  onCambioTransferencia,
+  estadoActualizacion,
+  setCategoria,
+}) => {
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+
+  const [errorNombre, setErrorNombre] = useState(false);
+
+  if (!categoria) return null;
+
+  const { cargando, error, exitoso, mensaje, limpiarEstado } = estadoActualizacion;
+
+  const manejarGuardar = () => {
+    if (!categoria.nombreCategoria.trim()) {
+      setErrorNombre(true);
+      return;
+    }
+
+    setErrorNombre(false);
+    onGuardar();
+  };
+
+  return (
+    <ModalFlotante
+      open={abierto}
+      onClose={onCerrar}
+      onConfirm={manejarGuardar}
+      titulo='Editar Categoría'
+      tituloVariant='h4'
+      customWidth={900}
+      botones={[]}
+    >
+      <CategoriaInfoEditable
+        nombre={categoria.nombreCategoria}
+        descripcion={categoria.descripcion}
+        productosDisponibles={categoria.productosDisponibles}
+        productosSeleccionados={categoria.productosSeleccionados}
+        onCambioNombre={(evento) => {
+          setCategoria({ ...categoria, nombreCategoria: evento.target.value });
+          if (evento.target.value.trim()) setErrorNombre(false);
+        }}
+        onCambioDescripcion={(evento) =>
+          setCategoria({ ...categoria, descripcion: evento.target.value })
+        }
+        onCambioTransferencia={onCambioTransferencia}
+        deshabilitado={cargando}
+        errorNombre={errorNombre}
+      />
+
+      {error && (
+        <Box mt={3}>
+          <Alerta tipo='error' mensaje={error} cerrable duracion={4000} onClose={limpiarEstado} />
+        </Box>
+      )}
+
+      {exitoso && mensaje && (
+        <Box mt={3}>
+          <Alerta tipo='success' mensaje={mensaje} cerrable duracion={3000} onClose={limpiarEstado} />
+        </Box>
+      )}
+
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 4 }}>
+        <Button
+          variant='contained'
+          onClick={manejarGuardar}
+          disabled={cargando}
+          sx={{ backgroundColor: colores.altertex[1], color: 'white' }}
+        >
+          GUARDAR
+        </Button>
+        <Button
+          variant='outlined'
+          onClick={onCerrar}
+          disabled={cargando}
+          sx={{ borderColor: colores.altertex[1], color: colores.altertex[1] }}
+        >
+          CANCELAR
+        </Button>
+      </Box>
+    </ModalFlotante>
+  );
+};
+
+export default ModalEditarCategoria;
\ No newline at end of file
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 8418f7b5..cbb330ed 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+// RF49 - Actualizar Categoría - ListaCategorias.jsx
+
+import React, { useState, useEffect } from 'react';
 import Tabla from '@Organismos/Tabla';
 import Alerta from '@Moleculas/Alerta';
 import ContenedorLista from '@Organismos/ContenedorLista';
@@ -6,14 +8,17 @@ import ModalEliminarCategoria from '@Organismos/ModalEliminarCategoria';
 import ModalCrearCategoria from '@Organismos/ModalCrearCategoria';
 import CategoriaInfo from '@Organismos/CategoriaInfo';
 import ModalFlotante from '@Organismos/ModalFlotante';
+import ModalEditarCategoria from '@Organismos/ModalEditarCategoria';
 import { useConsultarCategorias } from '@Hooks/Categorias/useConsultarCategorias';
 import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
+import useActualizarCategoria from '@Hooks/Categorias/useActualizarCategoria';
+import obtenerProductosCategoria from '@Servicios/obtenerProductosCategoria';
 import { Box, useTheme } from '@mui/material';
-import Texto from '@Atomos/Texto';
 import { tokens } from '@SRC/theme';
 
 const ListaCategorias = () => {
   const { categorias, cargando, error, recargar } = useConsultarCategorias();
+  const [productos, setProductos] = useState([]);
   const [seleccionados, setSeleccionados] = useState(new Set());
   const [alerta, setAlerta] = useState(null);
   const [idsCategoria, setIdsCategoria] = useState([]);
@@ -23,10 +28,32 @@ const ListaCategorias = () => {
   const [categoriaDetalle, setCategoriaDetalle] = useState(null);
   const [errorDetalle, setErrorDetalle] = useState(false);
   const [cargandoDetalle, setCargandoDetalle] = useState(false);
+  const [modalEditarAbierto, setModalEditarAbierto] = useState(false);
+  const [categoriaEditable, setCategoriaEditable] = useState(null);
+  const actualizar = useActualizarCategoria();
 
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
+  useEffect(() => {
+    const cargarProductos = async () => {
+      try {
+        const resultado = await obtenerProductosCategoria();
+        setProductos(resultado);
+      } catch (error) {
+        console.error('Error al cargar productos:', error);
+        setAlerta({
+          tipo: 'error',
+          mensaje: 'Error al cargar productos.',
+          icono: true,
+          cerrable: true,
+          centradoInferior: true,
+        });
+      }
+    };
+    cargarProductos();
+  }, []);
+
   const columns = [
     { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
     { field: 'descripcion', headerName: 'Descripción', flex: 2 },
@@ -46,14 +73,8 @@ const ListaCategorias = () => {
     idCliente: cat.idCliente,
   }));
 
-  const handleAbrirModalCrear = () => {
-    setModalCrearAbierto(true);
-  };
-
-  const handleCerrarModalCrear = () => {
-    setModalCrearAbierto(false);
-  };
-
+  const handleAbrirModalCrear = () => setModalCrearAbierto(true);
+  const handleCerrarModalCrear = () => setModalCrearAbierto(false);
   const handleCategoriaCreadaExitosamente = () => {
     handleCerrarModalCrear();
     recargar();
@@ -66,14 +87,11 @@ const ListaCategorias = () => {
 
     try {
       const detalle = await leerCategoria(idCategoria);
+      detalle.idCategoria = idCategoria;
       setCategoriaDetalle(detalle);
     } catch {
       setErrorDetalle(true);
-      setCategoriaDetalle({
-        nombreCategoria: '',
-        descripcion: '',
-        productos: [],
-      });
+      setCategoriaDetalle({ nombreCategoria: '', descripcion: '', productos: [] });
       setAlerta({
         tipo: 'error',
         mensaje: 'Error al obtener los datos de la categoría.',
@@ -87,6 +105,46 @@ const ListaCategorias = () => {
     }
   };
 
+  const manejarCambioTransferencia = ({ disponibles, seleccionados }) => {
+    setCategoriaEditable((prev) => ({
+      ...prev,
+      productosDisponibles: disponibles,
+      productosSeleccionados: seleccionados,
+    }));
+  };
+
+const manejarGuardarCategoria = async () => {
+  if (!categoriaEditable?.idCategoria) {
+    console.error('❌ ID de categoría no definido');
+    setAlerta({
+      tipo: 'error',
+      mensaje: 'No se pudo determinar el ID de la categoría.',
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
+    return;
+  }
+
+  const datos = {
+    nombreCategoria: categoriaEditable.nombreCategoria,
+    descripcion: categoriaEditable.descripcion,
+    productos: categoriaEditable.productosSeleccionados.map((producto) => producto.id),
+  };
+
+  const resultado = await actualizar.actualizarCategoria(categoriaEditable.idCategoria, datos);
+
+  if (resultado.success) {
+    // Esperar 2 segundos para mostrar la alerta antes de cerrar
+    setTimeout(() => {
+      setModalEditarAbierto(false);
+      setCategoriaEditable(null);
+      actualizar.limpiarEstado(); // evitar que persista en la siguiente apertura
+      recargar();
+    }, 2000);
+  }
+};
+
   const botones = [
     {
       label: 'Añadir',
@@ -99,7 +157,7 @@ const ListaCategorias = () => {
     {
       label: 'Eliminar',
       onClick: () => {
-        if (seleccionados.size === 0 || seleccionados.ids.size === 0) {
+        if (seleccionados.size === 0 || seleccionados.ids?.size === 0) {
           setAlerta({
             tipo: 'error',
             mensaje: 'Selecciona al menos una categoría para eliminar.',
@@ -131,14 +189,10 @@ const ListaCategorias = () => {
             columns={columns}
             rows={rows}
             loading={cargando}
-            disableRowSelectionOnClick={true}
+            disableRowSelectionOnClick
             checkboxSelection
-            onRowSelectionModelChange={(newSelection) => {
-              setSeleccionados(newSelection);
-            }}
-            onRowClick={(params) => {
-              mostrarDetalleCategoria(params.row.id);
-            }}
+            onRowSelectionModelChange={(newSelection) => setSeleccionados(newSelection)}
+            onRowClick={(params) => mostrarDetalleCategoria(params.row.id)}
           />
         </Box>
       </ContenedorLista>
@@ -189,7 +243,26 @@ const ListaCategorias = () => {
                     variant: 'contained',
                     color: 'error',
                     backgroundColor: colores.altertex[1],
-                    construccion: true,
+                    onClick: async () => {
+                      setModalDetalleAbierto(false);
+
+                    const productosAsociados = productos.filter((producto) =>
+                      categoriaDetalle.productos.includes(producto.nombre));
+
+                    const productosDisponibles = productos.filter(
+                      (producto) => !categoriaDetalle.productos.includes(producto.nombre)
+                    );
+
+
+                      setCategoriaEditable({
+                        idCategoria: categoriaDetalle.idCategoria,
+                        nombreCategoria: categoriaDetalle.nombreCategoria,
+                        descripcion: categoriaDetalle.descripcion,
+                        productosSeleccionados: productosAsociados,
+                        productosDisponibles,
+                      });
+                      setModalEditarAbierto(true);
+                    },
                   },
                   {
                     label: 'SALIR',
@@ -201,7 +274,7 @@ const ListaCategorias = () => {
                 ]
           }
         >
-          {errorDetalle ? null : (
+          {!errorDetalle && (
             <CategoriaInfo
               descripcion={categoriaDetalle?.descripcion}
               productos={categoriaDetalle?.productos}
@@ -210,6 +283,20 @@ const ListaCategorias = () => {
         </ModalFlotante>
       )}
 
+      <ModalEditarCategoria
+        abierto={modalEditarAbierto}
+        onCerrar={() => {
+          setModalEditarAbierto(false);
+          setCategoriaEditable(null);
+          actualizar.limpiarEstado();
+        }}
+        categoria={categoriaEditable}
+        onGuardar={manejarGuardarCategoria}
+        onCambioTransferencia={manejarCambioTransferencia}
+        estadoActualizacion={actualizar}
+        setCategoria={setCategoriaEditable}
+      />
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
@@ -225,4 +312,4 @@ const ListaCategorias = () => {
   );
 };
 
-export default ListaCategorias;
+export default ListaCategorias;
\ No newline at end of file
diff --git a/src/hooks/Categorias/useActualizarCategoria.js b/src/hooks/Categorias/useActualizarCategoria.js
new file mode 100644
index 00000000..1818ae2d
--- /dev/null
+++ b/src/hooks/Categorias/useActualizarCategoria.js
@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { RepositorioActualizarCategoria } from '@Repositorios/Categorias/repositorioActualizarCategoria';
+
+/**
+ * Hook personalizado para manejar la actualización de una categoría.
+ *
+ * RF49 - Actualizar Categoría
+ * @returns {object} Funciones y estados relacionados con la actualización.
+ */
+const useActualizarCategoria = () => {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [exitoso, setExitoso] = useState(false);
+  const [mensaje, setMensaje] = useState('');
+
+  /**
+   * Ejecuta la actualización de una categoría llamando al repositorio.
+   *
+   * @param {number} idCategoria - ID de la categoría a actualizar.
+   * @param {object} datosCategoria - Datos nuevos para la categoría.
+   * @returns {Promise<object>} - Resultado de la operación.
+   */
+  const actualizarCategoria = async (idCategoria, datosCategoria) => {
+    setCargando(true);
+    setError(null);
+    setExitoso(false);
+    setMensaje('');
+
+    try {
+      const respuesta = await RepositorioActualizarCategoria.actualizar(idCategoria, datosCategoria);
+      setMensaje(respuesta.mensaje || 'Categoría actualizada exitosamente');
+      setExitoso(true);
+      return { success: true, data: respuesta };
+    } catch (err) {
+      const mensajeError = err.message || 'Error al actualizar la categoría';
+      setError(mensajeError);
+      return { success: false, error: mensajeError };
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  /**
+   * Limpia los estados de error, éxito y mensaje del hook.
+   */
+  const limpiarEstado = () => {
+    setError(null);
+    setExitoso(false);
+    setMensaje('');
+  };
+
+  return {
+    actualizarCategoria,
+    cargando,
+    error,
+    exitoso,
+    mensaje,
+    limpiarEstado,
+  };
+};
+
+export default useActualizarCategoria;

From fab4d659e900efb66c451e786f5e8f7b664fc1e1 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Thu, 5 Jun 2025 16:46:16 -0600
Subject: [PATCH 090/160] errores lint y merge

---
 : | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 :

diff --git a/: b/:
new file mode 100644
index 00000000..f94bbb26
--- /dev/null
+++ b/:
@@ -0,0 +1,37 @@
+Merge branch 'MBI-1' of https://github.com/CodeAnd-Co/Frontend-Text-Lines into feature/HIML_49_actualizar-categorias
+
+# Conflicts:
+#	src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+#
+# It looks like you may be committing a merge.
+# If this is not correct, please run
+#	git update-ref -d MERGE_HEAD
+# and try again.
+
+
+# Please enter the commit message for your changes. Lines starting
+# with '#' will be ignored, and an empty message aborts the commit.
+#
+# On branch feature/HIML_49_actualizar-categorias
+# Your branch is up to date with 'origin/feature/HIML_49_actualizar-categorias'.
+#
+# All conflicts fixed but you are still merging.
+#
+# Changes to be committed:
+#	new file:   src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
+#	new file:   src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
+#	modified:   src/Utilidades/Constantes/rutasAPI.js
+#	modified:   src/Vistas/Componentes/Organismos/Cuotas/ModalCrearCuotaSet.jsx
+#	modified:   src/Vistas/Componentes/Organismos/Formularios/FormaCrearCuotaSet.jsx
+#	modified:   src/Vistas/Componentes/Organismos/Formularios/FormaCrearGrupoEmpleado.jsx
+#	modified:   src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+#	modified:   src/Vistas/Componentes/Organismos/ModalCrearGrupoEmpleado.jsx
+#	modified:   src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+#	modified:   src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+#	modified:   src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+#	modified:   src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+#	modified:   src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+#	modified:   src/Vistas/Paginas/Roles/ListaRoles.jsx
+#	new file:   src/hooks/Empleados/useExportarEmpleados.js
+#	new file:   src/hooks/Roles/useActualizarRol.js
+#

From 35bc89bb8ee319eab7444929fa52e24b1708b1b5 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Thu, 5 Jun 2025 18:07:26 -0600
Subject: [PATCH 091/160] =?UTF-8?q?Correcci=C3=B3n=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Componentes/Organismos/ModalActualizarCategoria.jsx      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx
index 22567a7f..dd9522d0 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarCategoria.jsx
@@ -20,9 +20,8 @@ const ModalActualizarCategoria = ({ open, onClose, categoria, onActualizado }) =
       setDescripcionCategoria(categoria.descripcion || '');
 
       // Asegurarse de transformar productos a IDs si vienen como objetos
-      const productosParseados = categoria.productos?.map((p) =>
-        typeof p === 'object' ? p.idProducto : p
-      );
+      const productosParseados = categoria.productos?.map((producto) =>
+        typeof producto === 'object' ? producto.idProducto : producto);
       setProductos(productosParseados || []);
     }
   }, [open, categoria]);

From e1a7d940cdaf58cdeda2333d1ae574f2313f5f12 Mon Sep 17 00:00:00 2001
From: PAOLA MARIA garrido <you@example.com>
Date: Thu, 5 Jun 2025 19:03:34 -0600
Subject: [PATCH 092/160] =?UTF-8?q?feat:=20se=20agreg=C3=B3=20vista,hook?=
 =?UTF-8?q?=20y=20repositorio=20de=20exportar=20productos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Productos/RepositorioExportarProducto.js  | 31 ++++++++
 src/Utilidades/Constantes/rutasAPI.js         |  3 +-
 .../Paginas/Empleados/ListaEmpleados.jsx      |  2 +-
 .../Paginas/Productos/ListaProductos.jsx      | 75 +++++++++++++++++--
 src/hooks/Productos/useExportarProductos.js   | 52 +++++++++++++
 5 files changed, 154 insertions(+), 9 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js
 create mode 100644 src/hooks/Productos/useExportarProductos.js

diff --git a/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js b/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js
new file mode 100644
index 00000000..16e4808c
--- /dev/null
+++ b/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js
@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+/**
+ * Solicita la exportación de productos seleccionados al backend y retorna el contenido.
+ *
+ * @param {number[]} idsProducto - Arreglo de IDs de productos seleccionados para exportar.
+ * @returns {Promise<Blob>} Contenido binario del archivo.
+ * @throws {Error} Si la petición falla o el servidor devuelve un mensaje de error.
+* @see [RF58 - Exportar Productos](https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF58) 
+*/
+export const exportarProductos = async (idsProducto) => {
+  try {
+    const response = await axios.post(
+      RUTAS_API.PRODUCTOS.EXPORTAR_PRODUCTOS,
+      { idsProducto },
+      {
+        withCredentials: true,
+        responseType: 'blob',
+        headers: { 'x-api-key': API_KEY },
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw new Error(
+      error.response?.data?.mensaje || 'Error al exportar productos en el servidor'
+    );
+  }
+};
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ec121f01..eca716e9 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -41,7 +41,8 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_PRODUCTOS}/consultar-lista`,
     CREAR: `${BASE_PRODUCTOS}/crear`,
     ELIMINAR_PRODUCTO: `${BASE_PRODUCTOS}/eliminar`,
-    LEER_PRODCUTO: `${BASE_PRODUCTOS}/leer-producto`
+    LEER_PRODCUTO: `${BASE_PRODUCTOS}/leer-producto`,
+    EXPORTAR_PRODUCTOS: `${BASE_PRODUCTOS}/exportar-productos`
   },
   PROVEEDORES: {
     BASE: BASE_PROVEEDORES,
diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index 589b02b4..c8baeac0 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -313,7 +313,7 @@ const ListaGrupoEmpleados = () => {
         confirmar={manejarConfirmarExportar}
         dialogo={MENSAJE_POPUP_EXPORTAR}
         labelCancelar = 'Cancelar'
-        labelConfirmar = 'Confirma'
+        labelConfirmar = 'Confirmar'
         disabledConfirmar={cargando}
       />
 
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 2e4bd6a5..2ef98251 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -1,8 +1,10 @@
 //RF[26] Crea Producto - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF26]
 //RF[27] Consulta Lista de Productos - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF27]
 //RF[30] Elimina Producto - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF30]
+//RF[58] - Exportar Productos - [https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF58]
+
 import { Box, useTheme, Chip } from '@mui/material';
-import { useState, useCallback, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import Alerta from '@Moleculas/Alerta';
@@ -17,6 +19,7 @@ import { PERMISOS } from '@Constantes/permisos';
 import ModalFlotante from '@Organismos/ModalFlotante.jsx';
 import InfoProducto from '@Moleculas/InfoProducto.jsx';
 import { useLeerProducto } from '@Hooks/Productos/useLeerProducto.js';
+import useExportarProductos from '@Hooks/Productos/useExportarProductos';
 
 const ListaProductos = () => {
   const { productos, cargando, error, recargar } = useConsultarProductos();
@@ -34,6 +37,54 @@ const ListaProductos = () => {
   const [abrirModalDetalle, setAbrirModalDetalle] = useState(false);
   const [imagenProducto, setImagenProducto] = useState('')
 
+  const [openModalExportar, setAbrirPopUpExportar] = useState(false);
+  const MENSAJE_POPUP_EXPORTAR = '¿Deseas exportar la lista de productos? El archivo será generado en formato .xlsx';
+  const manejarCancelarExportar = () => {
+    setAbrirPopUpExportar(false);
+  };
+
+  const manejarConfirmarExportar = async () => {
+    if (productosSeleccionados.length === 0) {
+      setAlerta({
+        tipo: 'warning',
+        mensaje: 'Selecciona al menos un producto para exportar.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+
+    await exportar(productosSeleccionados);
+    setAbrirPopUpExportar(false);
+  };
+
+  const { exportar, error: errorExportar, mensaje } = useExportarProductos();
+  
+  useEffect(() => {
+    if (errorExportar) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: errorExportar,
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    }
+  }, [errorExportar]);
+
+  useEffect(() => {
+    if (mensaje) {
+      setAlerta({
+        tipo: 'success',
+        mensaje,
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    }
+  }, [mensaje]);
+
   const {
     detalleProducto,
     cargando: cargandoDetalle,
@@ -170,12 +221,13 @@ const ListaProductos = () => {
       construccion: true,
     },
     {
+      variant: 'outlined',
       label: 'Exportar',
-      onClick: () => console.log('Exportar'),
+      onClick: () => setAbrirPopUpExportar(true),
       color: 'primary',
+      outlineColor: colores.altertex[1],
       size: 'large',
-      outlineColor: colores.primario[10],
-      construccion: true,
+      disabled: !usuario?.permisos?.includes(PERMISOS.EXPORTAR_PRODUCTOS),
     },
     {
       label: 'Eliminar',
@@ -231,9 +283,8 @@ const ListaProductos = () => {
             checkboxSelection
             rowHeight={80}
             onRowSelectionModelChange={(nuevosIds) => {
-              const ids = Array.isArray(nuevosIds)
-                ? nuevosIds
-                : Array.from(nuevosIds?.ids || []);
+              const ids = (Array.isArray(nuevosIds) ? nuevosIds : Array.from(nuevosIds?.ids || []))
+                .map(id => parseInt(id));
               setProductosSeleccionados(ids);
             }}
             onRowClick={(parametros) => {
@@ -264,6 +315,16 @@ const ListaProductos = () => {
         dialogo="¿Estás seguro de que deseas eliminar los productos seleccionados? Esta acción no se puede deshacer."
       />
 
+      <PopUp
+        abrir={openModalExportar}
+        cerrar={manejarCancelarExportar}
+        confirmar={manejarConfirmarExportar}
+        dialogo={MENSAJE_POPUP_EXPORTAR}
+        labelCancelar = 'Cancelar'
+        labelConfirmar = 'Confirmar'
+        disabledConfirmar={cargando}
+      />
+
       {abrirModalDetalle && (
         <ModalFlotante
           open={abrirModalDetalle}
diff --git a/src/hooks/Productos/useExportarProductos.js b/src/hooks/Productos/useExportarProductos.js
new file mode 100644
index 00000000..b222fc5b
--- /dev/null
+++ b/src/hooks/Productos/useExportarProductos.js
@@ -0,0 +1,52 @@
+// RF58 - Exportar Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF58
+
+import { useState } from 'react';
+import { exportarProductos as repoExportarProductos } from '@Repositorios/Productos/RepositorioExportarProducto';
+
+/**
+ * Hook para gestionar la exportación de productos en formato XLSX.
+ *
+ * @returns {{
+ *   exportar: (idsProductos: number[]) => Promise<void>,
+ *   cargando: boolean,
+ *   error: string | null,
+ *   mensaje: string
+ * }}
+ */
+const useExportarProductos = () => {
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [mensaje, setMensaje] = useState('');
+
+  const exportar = async (idsProducto) => {
+    setCargando(true);
+    setError(null);
+    setMensaje('');
+
+    try {
+      const response = await repoExportarProductos(idsProducto); 
+
+      const fecha = new Date().toISOString().split('T')[0];
+      const url = window.URL.createObjectURL(new Blob([response], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      }));
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `productos_${fecha}.xlsx`);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+
+      setMensaje('Archivo exportado exitosamente');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { exportar, cargando, error, mensaje };
+};
+
+export default useExportarProductos;
\ No newline at end of file

From 5a2fce2321bea66f88c848737550209fe0bbadfa Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Thu, 5 Jun 2025 19:50:48 -0600
Subject: [PATCH 093/160] Fix: Fechas en archivos, de exportar productos y
 empleados

---
 src/hooks/Empleados/useExportarEmpleados.js | 22 ++++++++++++++++++-
 src/hooks/Productos/useExportarProductos.js | 24 +++++++++++++++------
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/hooks/Empleados/useExportarEmpleados.js b/src/hooks/Empleados/useExportarEmpleados.js
index ed01a803..76661e2f 100644
--- a/src/hooks/Empleados/useExportarEmpleados.js
+++ b/src/hooks/Empleados/useExportarEmpleados.js
@@ -27,6 +27,26 @@ const useExportarEmpleados = () => {
 
     try {
       const { mensaje, csv } = await repoExportarEmpleados(idsEmpleado);
+
+      const fecha = new Date()
+        .toLocaleDateString('es-CO', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
+        .split('/')
+        .reverse()
+        .join('-');
+
+      const url = window.URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `empleados_${fecha}.csv`);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+
       setMensaje(mensaje);
       setCsv(csv);
     } catch (err) {
@@ -39,4 +59,4 @@ const useExportarEmpleados = () => {
   return { exportar, cargando, error, csv, mensaje };
 };
 
-export default useExportarEmpleados;
\ No newline at end of file
+export default useExportarEmpleados;
diff --git a/src/hooks/Productos/useExportarProductos.js b/src/hooks/Productos/useExportarProductos.js
index b222fc5b..92670a5f 100644
--- a/src/hooks/Productos/useExportarProductos.js
+++ b/src/hooks/Productos/useExportarProductos.js
@@ -24,12 +24,22 @@ const useExportarProductos = () => {
     setMensaje('');
 
     try {
-      const response = await repoExportarProductos(idsProducto); 
-
-      const fecha = new Date().toISOString().split('T')[0];
-      const url = window.URL.createObjectURL(new Blob([response], {
-        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-      }));
+      const response = await repoExportarProductos(idsProducto);
+
+      const fecha = new Date()
+        .toLocaleDateString('es-CO', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
+        .split('/')
+        .reverse()
+        .join('-');
+      const url = window.URL.createObjectURL(
+        new Blob([response], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        })
+      );
 
       const link = document.createElement('a');
       link.href = url;
@@ -49,4 +59,4 @@ const useExportarProductos = () => {
   return { exportar, cargando, error, mensaje };
 };
 
-export default useExportarProductos;
\ No newline at end of file
+export default useExportarProductos;

From 6b983fff395d61f077848b9d39ec643bb0814c52 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Thu, 5 Jun 2025 20:22:26 -0600
Subject: [PATCH 094/160] Co-authored-by: Nicolas Hood Figueroa
 <NicoH00d@users.noreply.github.com>

---
 .../Modelos/Usuarios/ActualizarUsuario.js     | 21 +++---
 .../FormularioActualizarUsuario.jsx           | 18 +-----
 .../Organismos/ModalActualizarUsuario.jsx     | 64 ++++++++++---------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |  8 ++-
 4 files changed, 53 insertions(+), 58 deletions(-)

diff --git a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
index 82e5ada2..f63613ed 100644
--- a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
@@ -4,6 +4,8 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
   const errores = {};
   const emailValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   const telefonoValido = /^\d{10}$/;
+  const tieneCaracterEspecial = /[!@#$%^&*(),.?":{}|<>]/;
+  const tieneMayuscula = /[A-Z]/;
 
   if (!datos.idUsuario) {
     errores.idUsuario = true;
@@ -29,16 +31,19 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
     errores.correoElectronico = 'Este correo ya está registrado';
   }
 
-  if (datos.contrasenia && datos.contrasenia.length < 6) {
-    errores.contrasenia = 'La contraseña debe tener al menos 6 caracteres';
+  if (datos.contrasenia && datos.contrasenia.length < 8) {
+    errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
+  } else if (datos.contrasenia && !tieneCaracterEspecial.test(datos.contrasenia)) {
+    errores.contrasenia =
+      'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+  } else if (datos.contrasenia && !tieneMayuscula.test(datos.contrasenia)) {
+    errores.contrasenia = 'Debe contener al menos una letra mayúscula';
   }
 
-  if (datos.contrasenia) {
-    if (!datos.confirmarContrasenia) {
-      errores.confirmarContrasenia = true;
-    } else if (datos.contrasenia !== datos.confirmarContrasenia) {
-      errores.confirmarContrasenia = 'Las contraseñas no coinciden';
-    }
+  if (datos.contrasenia && !datos.confirmarContrasenia) {
+    errores.confirmarContrasenia = true;
+  } else if (datos.contrasenia && datos.contrasenia !== datos.confirmarContrasenia) {
+    errores.confirmarContrasenia = 'Las contraseñas no coinciden';
   }
 
   if (!datos.numeroTelefono) {
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index aab1d241..031d17fb 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -64,22 +64,6 @@ const FormularioActualizarUsuario = ({
         />
       </Grid>
 
-      <Grid size={6} sx={estiloCuadricula}>
-        <CampoTexto
-          label='Apellido'
-          name='apellido'
-          value={datosUsuario.apellido}
-          onChange={manejarCambio}
-          required
-          size='medium'
-          error={!!erroresValidacion.apellido}
-          helperText={erroresValidacion.apellido && CAMPO_OBLIGATORIO}
-          inputProps={{
-            maxLength: 50,
-          }}
-        />
-      </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
           <DateField
@@ -224,7 +208,7 @@ const FormularioActualizarUsuario = ({
             value: cliente.idCliente,
             label: cliente.nombreComercial,
           }))}
-          disabled={esSuperAdmin}
+          //disabled={esSuperAdmin}
         />
       </Grid>
 
diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
index c9a9d0ab..2052bc6b 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -35,7 +35,7 @@ const ModalActualizarUsuario = ({
       limpiarFormulario();
       setTimeout(() => {
         onClose();
-      }, 1500);
+      }, 0);
     }
   };
 
@@ -45,36 +45,38 @@ const ModalActualizarUsuario = ({
   };
 
   return (
-    <ModalFlotante
-      open={open}
-      onClose={manejarCierre}
-      onConfirm={manejarConfirmacion}
-      titulo={esEdicion ? datosUsuario.nombreCompleto : 'Actualizar Usuario'}
-    >
-      <Box
-        component='form'
-        method='POST'
-        sx={{
-          flexGrow: 1,
-          '& .MuiTextField-root': { margin: 1, width: '30ch' },
-          '& .MuiFormControl-root': { margin: 1, width: '30ch' },
-        }}
-        noValidate
-        autoComplete='off'
+    <>
+      <ModalFlotante
+        open={open}
+        onClose={manejarCierre}
+        onConfirm={manejarConfirmacion}
+        titulo={esEdicion ? datosUsuario.nombreCompleto : 'Actualizar Usuario'}
       >
-        <FormularioActualizarUsuario
-          datosUsuario={datosUsuario}
-          erroresValidacion={erroresValidacion}
-          manejarCambio={manejarCambio}
-          manejarFechaNacimiento={manejarFechaNacimiento}
-          obtenerHelperText={obtenerHelperText}
-          roles={roles}
-          clientes={clientes}
-          esSuperAdmin={esSuperAdmin}
-          cargandoRoles={cargandoRoles}
-          cargando={cargando}
-        />
-      </Box>
+        <Box
+          component='form'
+          method='POST'
+          sx={{
+            flexGrow: 1,
+            '& .MuiTextField-root': { margin: 1, width: '30ch' },
+            '& .MuiFormControl-root': { margin: 1, width: '30ch' },
+          }}
+          noValidate
+          autoComplete='off'
+        >
+          <FormularioActualizarUsuario
+            datosUsuario={datosUsuario}
+            erroresValidacion={erroresValidacion}
+            manejarCambio={manejarCambio}
+            manejarFechaNacimiento={manejarFechaNacimiento}
+            obtenerHelperText={obtenerHelperText}
+            roles={roles}
+            clientes={clientes}
+            esSuperAdmin={esSuperAdmin}
+            cargandoRoles={cargandoRoles}
+            cargando={cargando}
+          />
+        </Box>
+      </ModalFlotante>
       {alerta && (
         <Alerta
           sx={{ marginBottom: 2 }}
@@ -84,7 +86,7 @@ const ModalActualizarUsuario = ({
           onClose={() => setAlerta(null)}
         />
       )}
-    </ModalFlotante>
+    </>
   );
 };
 
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index cafb1694..62e62f9d 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -397,6 +397,7 @@ const ListaUsuarios = () => {
                 onClick: () => {
                   setModalDetalleAbierto(false);
                   setTimeout(() => setModalActualizarAbierto(true), 100);
+                  console.log('Editar usuario:', usuario);
                 },
                 disabled: !usuarioAutenticado?.permisos?.includes(PERMISOS.ACTUALIZAR_USUARIO),
               },
@@ -453,7 +454,10 @@ const ListaUsuarios = () => {
             open={modalActualizarAbierto}
             onClose={() => setModalActualizarAbierto(false)}
             onAccion={recargar}
-            usuarioEdicion={usuario}
+            usuarioEdicion={{
+              ...usuario,
+              cliente: usuario.clientes ? usuario.clientes.map((c) => c.idCliente) : [],
+            }}
             roles={roles}
             clientes={clientes}
             esSuperAdmin={false}
@@ -471,4 +475,4 @@ const ListaUsuarios = () => {
   );
 };
 
-export default ListaUsuarios;
\ No newline at end of file
+export default ListaUsuarios;

From 0f739ee089ac9b0169f4a4d5cd0670094e8c71a8 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Thu, 5 Jun 2025 20:39:04 -0600
Subject: [PATCH 095/160] =?UTF-8?q?Fix:=20variable=20en=20espa=C3=B1ol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Productos/RepositorioExportarProducto.js       | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js b/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js
index 16e4808c..da092c63 100644
--- a/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js
+++ b/src/Dominio/Repositorios/Productos/RepositorioExportarProducto.js
@@ -9,11 +9,11 @@ const API_KEY = import.meta.env.VITE_API_KEY;
  * @param {number[]} idsProducto - Arreglo de IDs de productos seleccionados para exportar.
  * @returns {Promise<Blob>} Contenido binario del archivo.
  * @throws {Error} Si la petición falla o el servidor devuelve un mensaje de error.
-* @see [RF58 - Exportar Productos](https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF58) 
-*/
+ * @see [RF58 - Exportar Productos](https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF58)
+ */
 export const exportarProductos = async (idsProducto) => {
   try {
-    const response = await axios.post(
+    const respuesta = await axios.post(
       RUTAS_API.PRODUCTOS.EXPORTAR_PRODUCTOS,
       { idsProducto },
       {
@@ -22,10 +22,8 @@ export const exportarProductos = async (idsProducto) => {
         headers: { 'x-api-key': API_KEY },
       }
     );
-    return response.data;
+    return respuesta.data;
   } catch (error) {
-    throw new Error(
-      error.response?.data?.mensaje || 'Error al exportar productos en el servidor'
-    );
+    throw new Error(error.respuesta?.data?.mensaje || 'Error al exportar productos en el servidor');
   }
-};
\ No newline at end of file
+};

From 3eae1e519a0ad26d5e306bfc413e85b85cf7dffb Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Thu, 5 Jun 2025 21:03:24 -0600
Subject: [PATCH 096/160] =?UTF-8?q?Fix:=20variable=20en=20espa=C3=B1ol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/Productos/useExportarProductos.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/Productos/useExportarProductos.js b/src/hooks/Productos/useExportarProductos.js
index 92670a5f..ae7fd9dc 100644
--- a/src/hooks/Productos/useExportarProductos.js
+++ b/src/hooks/Productos/useExportarProductos.js
@@ -24,7 +24,7 @@ const useExportarProductos = () => {
     setMensaje('');
 
     try {
-      const response = await repoExportarProductos(idsProducto);
+      const respuesta = await repoExportarProductos(idsProducto);
 
       const fecha = new Date()
         .toLocaleDateString('es-CO', {
@@ -36,7 +36,7 @@ const useExportarProductos = () => {
         .reverse()
         .join('-');
       const url = window.URL.createObjectURL(
-        new Blob([response], {
+        new Blob([respuesta], {
           type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
         })
       );

From f19a1c445765eb9cd846330d9542308b38bde93b Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Thu, 5 Jun 2025 21:22:42 -0600
Subject: [PATCH 097/160] fix: remove unnecessary line breaks in user update
 form

---
 .../Formularios/FormularioActualizarUsuario.jsx      | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index 031d17fb..92b78866 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -63,7 +63,6 @@ const FormularioActualizarUsuario = ({
           }}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
           <DateField
@@ -85,7 +84,6 @@ const FormularioActualizarUsuario = ({
           />
         </LocalizationProvider>
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoSelect
           required
@@ -103,7 +101,6 @@ const FormularioActualizarUsuario = ({
           ]}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
           label='Correo Electrónico'
@@ -120,7 +117,6 @@ const FormularioActualizarUsuario = ({
           }
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
           label='Número de Teléfono'
@@ -140,7 +136,6 @@ const FormularioActualizarUsuario = ({
           }}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
           label='Dirección'
@@ -156,7 +151,6 @@ const FormularioActualizarUsuario = ({
           }}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoSelect
           label='Rol'
@@ -176,7 +170,6 @@ const FormularioActualizarUsuario = ({
           disabled={cargandoRoles}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoSelect
           label='Estatus'
@@ -193,12 +186,11 @@ const FormularioActualizarUsuario = ({
           ]}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoSelectMultiple
           label='Cliente'
           name='cliente'
-          value={datosUsuario.cliente}
+          value={datosUsuario.cliente[0] == null ? [] : datosUsuario.cliente} //datosUsuario.cliente || ['']}
           onChange={manejarCambio}
           required
           size='medium'
@@ -211,7 +203,6 @@ const FormularioActualizarUsuario = ({
           //disabled={esSuperAdmin}
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
           label='Contraseña'
@@ -229,7 +220,6 @@ const FormularioActualizarUsuario = ({
           }
         />
       </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
           label='Confirmar contraseña'

From 8997803dcf3436a13f67ca95c47c9a8e9153baa8 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Thu, 5 Jun 2025 21:25:03 -0600
Subject: [PATCH 098/160] Resolver conflictos en ListaCategorias

---
 .../Paginas/Categorias/ListaCategorias.jsx    | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index b5c2d965..e7d56132 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -74,12 +74,9 @@ const ListaCategorias = () => {
     },
   ];
 
-<<<<<<< HEAD
 
   // Las filas deben tener un campo `id`, usamos `idCategoria`
   // para que coincida con el campo `id` de la tabla.
-=======
->>>>>>> 35bc89bb8ee319eab7444929fa52e24b1708b1b5
   const rows = categorias.map((cat) => ({
     id: cat.idCategoria,
     nombreCategoria: cat.nombreCategoria,
@@ -120,9 +117,6 @@ const ListaCategorias = () => {
     }
   };
 
-<<<<<<< HEAD
-
-=======
   const manejarCambioTransferencia = ({ disponibles, seleccionados }) => {
     setCategoriaEditable((prev) => ({
       ...prev,
@@ -162,7 +156,6 @@ const manejarGuardarCategoria = async () => {
     }, 2000);
   }
 };
->>>>>>> 35bc89bb8ee319eab7444929fa52e24b1708b1b5
 
   const botones = [
     {
@@ -216,22 +209,12 @@ const manejarGuardarCategoria = async () => {
         </Box>
       </ContenedorLista>
 
-<<<<<<< HEAD
-      {/* Modal para crear categoria */}
-
-=======
->>>>>>> 35bc89bb8ee319eab7444929fa52e24b1708b1b5
       <ModalCrearCategoria
         abierto={modalCrearAbierto}
         onCerrar={handleCerrarModalCrear}
         onCreado={handleCategoriaCreadaExitosamente}
       />
 
-<<<<<<< HEAD
-      {/* Modal para eliminar categoria */}
-
-=======
->>>>>>> 35bc89bb8ee319eab7444929fa52e24b1708b1b5
       <ModalEliminarCategoria
         open={openModalEliminar}
         onClose={() => setOpenModalEliminar(false)}
@@ -240,10 +223,6 @@ const manejarGuardarCategoria = async () => {
         refrescarPagina={recargar}
       />
 
-<<<<<<< HEAD
-      {/* Alert that appears on the page level */}
-=======
->>>>>>> 35bc89bb8ee319eab7444929fa52e24b1708b1b5
       {modalDetalleAbierto && !cargandoDetalle && (
         <ModalFlotante
           open={modalDetalleAbierto}
@@ -316,8 +295,6 @@ const manejarGuardarCategoria = async () => {
         </ModalFlotante>
       )}
 
-<<<<<<< HEAD
-=======
       <ModalEditarCategoria
         abierto={modalEditarAbierto}
         onCerrar={() => {
@@ -332,7 +309,6 @@ const manejarGuardarCategoria = async () => {
         setCategoria={setCategoriaEditable}
       />
 
->>>>>>> 35bc89bb8ee319eab7444929fa52e24b1708b1b5
       {alerta && (
         <Alerta
           tipo={alerta.tipo}

From dad89f2b7d2e06d43ac4a2d9853e7c11fa6ae8b4 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 5 Jun 2025 21:40:09 -0600
Subject: [PATCH 099/160] fix: eliminar console log

---
 src/hooks/Productos/useImportarProductos.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/Productos/useImportarProductos.js b/src/hooks/Productos/useImportarProductos.js
index 14353aa5..eae0460c 100644
--- a/src/hooks/Productos/useImportarProductos.js
+++ b/src/hooks/Productos/useImportarProductos.js
@@ -22,7 +22,7 @@ const useImportarProductos = () => {
     setExito(false);
     
     try {
-      console.log('Importando productos:', productosParseados);
+
       const respuesta = await RepositorioImportarProductos.importarProductos(productosParseados);
 
       if (respuesta.errores) {

From 78419ad56f7b688ca90790989ae4792110f45113 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Thu, 5 Jun 2025 21:42:24 -0600
Subject: [PATCH 100/160] borrar archivo

---
 : | 37 -------------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 :

diff --git a/: b/:
deleted file mode 100644
index f94bbb26..00000000
--- a/:
+++ /dev/null
@@ -1,37 +0,0 @@
-Merge branch 'MBI-1' of https://github.com/CodeAnd-Co/Frontend-Text-Lines into feature/HIML_49_actualizar-categorias
-
-# Conflicts:
-#	src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
-#
-# It looks like you may be committing a merge.
-# If this is not correct, please run
-#	git update-ref -d MERGE_HEAD
-# and try again.
-
-
-# Please enter the commit message for your changes. Lines starting
-# with '#' will be ignored, and an empty message aborts the commit.
-#
-# On branch feature/HIML_49_actualizar-categorias
-# Your branch is up to date with 'origin/feature/HIML_49_actualizar-categorias'.
-#
-# All conflicts fixed but you are still merging.
-#
-# Changes to be committed:
-#	new file:   src/Dominio/Repositorios/Empleados/RepositorioExportarEmpleados.js
-#	new file:   src/Dominio/Repositorios/Roles/RepositorioActualizarRol.js
-#	modified:   src/Utilidades/Constantes/rutasAPI.js
-#	modified:   src/Vistas/Componentes/Organismos/Cuotas/ModalCrearCuotaSet.jsx
-#	modified:   src/Vistas/Componentes/Organismos/Formularios/FormaCrearCuotaSet.jsx
-#	modified:   src/Vistas/Componentes/Organismos/Formularios/FormaCrearGrupoEmpleado.jsx
-#	modified:   src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
-#	modified:   src/Vistas/Componentes/Organismos/ModalCrearGrupoEmpleado.jsx
-#	modified:   src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
-#	modified:   src/Vistas/Paginas/Categorias/ListaCategorias.jsx
-#	modified:   src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
-#	modified:   src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
-#	modified:   src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
-#	modified:   src/Vistas/Paginas/Roles/ListaRoles.jsx
-#	new file:   src/hooks/Empleados/useExportarEmpleados.js
-#	new file:   src/hooks/Roles/useActualizarRol.js
-#

From d07bb62093033aa64693ac41a5c3cc7ebe9be073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Thu, 5 Jun 2025 21:49:03 -0600
Subject: [PATCH 101/160] =?UTF-8?q?feat:=20Agregar=20l=C3=B3gica=20inicial?=
 =?UTF-8?q?=20para=20ediar=20set=20productos=20con=20listas=20trasnferible?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RepositorioActualizarSetProductos.js      |  45 +++
 .../RepositorioActualizarSetsProductos.js     |  25 --
 .../Servicios/obtenerGruposEmpleados.js       |  38 +++
 .../Moleculas/SetProductosEditable.jsx        | 273 ++++++++++++++++++
 .../SetsProductos/ListaSetsProductos.jsx      | 104 ++++++-
 .../useActualizarSetsProductos.js             |  65 ++++-
 6 files changed, 505 insertions(+), 45 deletions(-)
 create mode 100644 src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
 delete mode 100644 src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js
 create mode 100644 src/Dominio/Servicios/obtenerGruposEmpleados.js
 create mode 100644 src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx

diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
new file mode 100644
index 00000000..01ba00b5
--- /dev/null
+++ b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
@@ -0,0 +1,45 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarSetProductos {
+  /**
+   * Actualiza los datos de un set de productos específico
+   * @param {number} idSet - ID del set de productos a actualizar
+   * @param {string} nombre - Nuevo nombre del set
+   * @param {string} descripcion - Nueva descripción del set
+   * @param {array} productos - Lista de IDs de productos
+   * @param {array} grupos - Lista de IDs de grupos de empleados asignados
+   * @returns {Promise<{mensaje: string}>}
+   *
+   * @see [RF44] Actualizar set de productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
+   */
+  static async actualizarSetProductos(idSet, nombre, descripcion, productos, grupos) {
+    try {
+      const respuesta = await axios.put(
+        `${RUTAS_API.PRODUCTOS.ACTUALIZAR_SET}`,
+        {
+          idSetProductos: idSet,
+          nombre,
+          descripcion,
+          productos,
+          grupos,
+        },
+        {
+          headers: {
+            'x-api-key': API_KEY,
+          },
+          withCredentials: true,
+        }
+      );
+
+      return respuesta;
+    } catch (error) {
+      if (error.response?.data?.mensaje) {
+        throw new Error(error.response.data.mensaje);
+      }
+      throw error;
+    }
+  }
+}
diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js
deleted file mode 100644
index af4139f5..00000000
--- a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetsProductos.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import axios from 'axios';
-import { RUTAS_API } from '@Constantes/rutasAPI';
-
-// RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
-
-const API_KEY = import.meta.env.VITE_API_KEY;
-
-export class RepositorioActualizarSetProducto {
-  static async actualizar(formData) {
-    if (!formData) return;
-
-    try {
-      await axios.put(RUTAS_API.SETS_PRODUCTOS.ACTUALIZAR_SETS_PRODUCTO, formData, {
-        headers: {
-          'x-api-key': API_KEY,
-        },
-        withCredentials: true,
-      });
-    } catch (error) {
-      throw new Error(
-        error.response.data.mensaje || 'Ocurrió un error al actualizar el set de producto.'
-      );
-    }
-  }
-}
diff --git a/src/Dominio/Servicios/obtenerGruposEmpleados.js b/src/Dominio/Servicios/obtenerGruposEmpleados.js
new file mode 100644
index 00000000..66674e8b
--- /dev/null
+++ b/src/Dominio/Servicios/obtenerGruposEmpleados.js
@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL;
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+/**
+ * Servicio para consultar la lista de grupos de empleados.
+ * Basado en RF22: Consulta Lista de Grupo Empleados
+ * https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF22
+ */
+const obtenerGruposEmpleados = async (clienteSeleccionado) => {
+  try {
+    const respuesta = await axios.post(
+      `${API_URL}/api/empleados/consultar-grupos`,
+      { clienteSeleccionado },
+      {
+        headers: {
+          'x-api-key': API_KEY,
+        },
+        withCredentials: true,
+      }
+    );
+
+    const gruposFormateados = respuesta.data.grupos.map((grupo) => ({
+      id: grupo.idGrupo,
+      nombre: grupo.geNombre,
+      descripcion: grupo.descripcion,
+      totalEmpleados: grupo.totalEmpleados,
+    }));
+
+    return gruposFormateados;
+  } catch (error) {
+    console.error('Error al obtener grupos de empleados:', error);
+    return [];
+  }
+};
+
+export default obtenerGruposEmpleados;
diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
new file mode 100644
index 00000000..5f4d295c
--- /dev/null
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -0,0 +1,273 @@
+// RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
+
+// RF44 - Actualiza Set de Productos
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import CampoTexto from '@Atomos/CampoTexto';
+import Texto from '@Atomos/Texto';
+import obtenerProductos from '@Servicios/obtenerProductos';
+import { useAuth } from '@Hooks/AuthProvider';
+import {
+  Box,
+  Grid,
+  Card,
+  CardHeader,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Checkbox,
+  Divider,
+  Button,
+} from '@mui/material';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+
+const LIMITE_NOMBRE = 50;
+const LIMITE_DESCRIPCION = 150;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+
+const SetProductosEditable = ({
+  nombre: nombreInicial,
+  descripcion: descripcionInicial,
+  productos: productosInicial,
+  onFormDataChange,
+}) => {
+  const { usuario } = useAuth();
+  const referenciaFormData = useRef(null);
+  const clienteSeleccionado = usuario?.clienteSeleccionado;
+
+  const [nombre, setNombre] = useState(nombreInicial || '');
+  const [descripcion, setDescripcion] = useState(descripcionInicial || '');
+  const [todosProductos, setTodosProductos] = useState([]);
+  const [productosDerecha, setProductosDerecha] = useState(productosInicial || []);
+  const [productosSeleccionados, setProductosSeleccionados] = useState([]);
+  const [productosSeleccionadosIzquierda, setSeleccionadosIzquierda] = useState([]);
+  const [productosSeleccionadosDerecha, setSeleccionadosDerecha] = useState([]);
+  const [errores, setErrores] = useState({ nombre: false, descripcion: false });
+
+  const cargarProductos = useCallback(async () => {
+    try {
+      const prods = await obtenerProductos(clienteSeleccionado);
+      setTodosProductos(prods);
+    } catch (error) {
+      console.error('Error al cargar productos:', error);
+    }
+  }, [clienteSeleccionado]);
+
+  useEffect(() => {
+    cargarProductos();
+  }, [cargarProductos]);
+
+  const productosIzquierda = useMemo(() => {
+    return todosProductos
+      .filter((p) => !productosDerecha.some((pd) => pd.id === p.id))
+      .sort((a, b) => (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre));
+  }, [todosProductos, productosDerecha]);
+
+  const manejarSeleccion = (id, lado) => {
+    const producto = todosProductos.find((p) => p.id === id);
+    if (!producto) return; // Previene errores si no se encuentra el producto
+
+    const esIzquierda = lado === 'izquierda';
+    const seleccionados = esIzquierda
+      ? productosSeleccionadosIzquierda
+      : productosSeleccionadosDerecha;
+    const setSeleccionados = esIzquierda ? setSeleccionadosIzquierda : setSeleccionadosDerecha;
+
+    const yaEsta = seleccionados.some((p) => p.id === id);
+    const nuevoEstado = yaEsta
+      ? seleccionados.filter((p) => p.id !== id)
+      : [...seleccionados, producto];
+
+    setSeleccionados(nuevoEstado);
+  };
+
+  const transferir = () => {
+    const nuevos = [...productosDerecha, ...productosSeleccionadosIzquierda];
+    nuevos.sort((a, b) =>
+      (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
+    );
+    setProductosDerecha(nuevos);
+    setSeleccionadosIzquierda([]);
+  };
+
+  const quitar = () => {
+    setProductosDerecha((prev) =>
+      prev.filter((p) => !productosSeleccionadosDerecha.find((s) => s.id === p.id))
+    );
+    setSeleccionadosDerecha([]);
+  };
+
+  // Mover todos los productos disponibles a la derecha
+  const transferirTodos = () => {
+    const nuevos = [...productosDerecha, ...productosIzquierda];
+    nuevos.sort((a, b) =>
+      (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
+    );
+    setProductosDerecha(nuevos);
+    setSeleccionadosIzquierda([]);
+  };
+
+  // Mover todos los productos seleccionados a la izquierda (quitar todos)
+  const quitarTodos = () => {
+    setProductosDerecha([]); // elimina todos los productos de la derecha
+    setSeleccionadosDerecha([]);
+  };
+
+  useEffect(() => {
+    const nombreVacio = nombre.trim() === '';
+    const descripcionVacia = descripcion.trim() === '';
+    const esValido = !nombreVacio && !descripcionVacia;
+    setErrores({ nombre: nombreVacio, descripcion: descripcionVacia });
+
+    const formData = {
+      nombre: nombre.trim(),
+      descripcion: descripcion.trim(),
+      productos: productosDerecha.map((p) => p.id),
+      esValido,
+    };
+
+    const current = JSON.stringify(formData);
+    if (current !== JSON.stringify(referenciaFormData.current)) {
+      referenciaFormData.current = formData;
+      onFormDataChange?.(formData);
+    }
+  }, [nombre, descripcion, productosDerecha]);
+
+  const renderLista = (titulo, items, lado) => {
+    const seleccionados =
+      lado === 'izquierda' ? productosSeleccionadosIzquierda : productosSeleccionadosDerecha;
+
+    const manejarSeleccionTodos = (e) => {
+      const esSeleccionarTodo = e.target.checked;
+      if (lado === 'izquierda') {
+        setSeleccionadosIzquierda(esSeleccionarTodo ? [...items] : []);
+      } else {
+        setSeleccionadosDerecha(esSeleccionarTodo ? [...items] : []);
+      }
+    };
+
+    const estaTodoSeleccionado = seleccionados.length === items.length && items.length !== 0;
+    const estaIndeterminado = seleccionados.length > 0 && seleccionados.length < items.length;
+
+    const tituloFinal = lado === 'izquierda' ? 'Productos Disponibles' : 'Sets Seleccionados';
+    const subheader = `${seleccionados.length}/${items.length} seleccionados`;
+
+    return (
+      <Card>
+        <CardHeader
+          avatar={
+            <Checkbox
+              onChange={manejarSeleccionTodos}
+              checked={estaTodoSeleccionado}
+              indeterminate={estaIndeterminado}
+              disabled={items.length === 0}
+              inputProps={{
+                'aria-label': 'seleccionar todos los elementos',
+              }}
+            />
+          }
+          title={tituloFinal}
+          subheader={subheader}
+          sx={{ px: 2, py: 1 }}
+          titleTypographyProps={{ variant: 'subtitle1' }}
+          subheaderTypographyProps={{ variant: 'caption' }}
+        />
+        <Divider />
+        <List sx={{ width: 350, height: 300, overflow: 'auto' }}>
+          {items.map((item) => (
+            <ListItemButton key={item.id} onClick={() => manejarSeleccion(item.id, lado)}>
+              <ListItemIcon>
+                <Checkbox checked={seleccionados.some((s) => s.id === item.id)} />
+              </ListItemIcon>
+              <ListItemText primary={item.nombreProducto || item.nombre} />
+            </ListItemButton>
+          ))}
+        </List>
+      </Card>
+    );
+  };
+
+  return (
+    <Box sx={{ width: '100%', maxWidth: 1000, mx: 'auto' }}>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={4}>
+          <Texto variant='h6'>Nombre:</Texto>
+          <CampoTexto
+            fullWidth
+            value={nombre}
+            onChange={(e) => setNombre(e.target.value.slice(0, LIMITE_NOMBRE))}
+            error={errores.nombre}
+            helperText={
+              errores.nombre
+                ? 'Campo obligatorio'
+                : `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`
+            }
+            sx={{ mt: 1, mb: 2, mr: 8, width: '300px', overflow: 'auto' }}
+          />
+        </Grid>
+
+        <Grid item xs={12} md={8}>
+          <Texto variant='h6'>Descripción:</Texto>
+          <CampoTexto
+            fullWidth
+            value={descripcion}
+            onChange={(e) => setDescripcion(e.target.value.slice(0, LIMITE_DESCRIPCION))}
+            error={errores.descripcion}
+            helperText={
+              errores.descripcion
+                ? 'Campo obligatorio'
+                : `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
+            }
+            sx={{ mt: 1, mb: 2, width: '400px', overflow: 'auto' }}
+          />
+        </Grid>
+
+        <Grid item xs={12}>
+          <Texto variant='h6'>Productos:</Texto>
+          <Grid container spacing={2} alignItems='center' justifyContent='center'>
+            <Grid item>{renderLista('Disponibles', productosIzquierda, 'izquierda')}</Grid>
+            <Grid item>
+              <Grid item>
+                <Grid container direction='column' spacing={1}>
+                  {/* Mover todos a la derecha */}
+                  <Button onClick={transferirTodos} disabled={!productosIzquierda.length}>
+                    <KeyboardDoubleArrowRightIcon />
+                  </Button>
+
+                  {/* Mover seleccionados a la derecha */}
+                  <Button onClick={transferir} disabled={!productosSeleccionadosIzquierda.length}>
+                    <KeyboardArrowRightIcon />
+                  </Button>
+
+                  {/* Mover seleccionados a la izquierda */}
+                  <Button onClick={quitar} disabled={!productosSeleccionadosDerecha.length}>
+                    <KeyboardArrowLeftIcon />
+                  </Button>
+
+                  {/* Mover todos a la izquierda */}
+                  <Button onClick={quitarTodos} disabled={!productosDerecha.length}>
+                    <KeyboardDoubleArrowLeftIcon />
+                  </Button>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item>{renderLista('Seleccionados', productosDerecha, 'derecha')}</Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+SetProductosEditable.propTypes = {
+  nombre: PropTypes.string,
+  descripcion: PropTypes.string,
+  productos: PropTypes.array,
+  onFormDataChange: PropTypes.func,
+};
+
+export default SetProductosEditable;
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index fc77623c..876f4f1d 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -1,6 +1,7 @@
 // RF42 - Super Administrador, Cliente Consulta Lista de Sets de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF42
 // RF45 - Eliminar set de productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF45
 // RF48 - Super Administrador, Cliente Lee Categoria de Productos - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/rf48/
+// RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
 
 import React, { useState } from 'react';
 import Tabla from '@Organismos/Tabla';
@@ -17,13 +18,15 @@ import { tokens } from '@SRC/theme';
 import { PERMISOS } from '@Utilidades/Constantes/permisos';
 import { useAuth } from '@Hooks/AuthProvider';
 import ModalCrearSetsProductos from '@Organismos/ModalCrearSetsProductos.jsx';
+import InfoSetProductosEditable from '@SRC/Vistas/Componentes/Moleculas/SetProductosEditable';
+import { useActualizarSetsProductos } from '@Hooks/SetsProductos/useActualizarSetsProductos';
 
 const ListaSetsProductos = () => {
   const { setsDeProductos, cargando, error, recargar } = useConsultarSetsProductos();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR
-    = '¿Estás seguro de que deseas eliminar los sets de productos seleccionados?';
+  const MENSAJE_POPUP_ELIMINAR =
+    '¿Estás seguro de que deseas eliminar los sets de productos seleccionados?';
 
   const [seleccionados, setSeleccionados] = useState([]);
   const [alerta, setAlerta] = useState(null);
@@ -31,6 +34,8 @@ const ListaSetsProductos = () => {
   const [setSeleccionado, setSetSeleccionado] = useState(null);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
   const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
+  const [abrirModalEditar, setAbrirModalEditar] = useState(false);
+  const [formData, setFormData] = useState(null);
   const { eliminar } = useEliminarSetProductos();
   const { usuario } = useAuth();
 
@@ -63,15 +68,60 @@ const ListaSetsProductos = () => {
     }
   };
 
-
   const handleCerrarModalCrear = () => {
-    setModalCrearAbierto(false)
-  }
+    setModalCrearAbierto(false);
+  };
 
   const handleSetProductoCreadoExitosamente = () => {
-    handleCerrarModalCrear()
-    recargar()
-  }
+    handleCerrarModalCrear();
+    recargar();
+  };
+
+  const handleFormDataChange = (data) => {
+    setFormData(data);
+  };
+
+  const { actualizarSet } = useActualizarSetsProductos();
+
+  const handleGuardar = async () => {
+    if (!formData?.esValido()) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'El nombre y la descripción son obligatorios.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+
+    try {
+      await actualizarSet(
+        setSeleccionado.idSetProducto,
+        formData.nombre,
+        formData.descripcion,
+        formData.productos,
+        formData.grupos
+      );
+      await recargar();
+      setAbrirModalEditar(false);
+      setAlerta({
+        tipo: 'success',
+        mensaje: 'Set de productos actualizado correctamente.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    } catch (error) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: error?.message || 'Error al actualizar el set de productos.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+    }
+  };
 
   const columns = [
     {
@@ -230,7 +280,10 @@ const ListaSetsProductos = () => {
               variant: 'contained',
               color: 'error',
               backgroundColor: colores.altertex[1],
-              construccion: true,
+              onClick: () => {
+                setModalDetalleAbierto(false);
+                setAbrirModalEditar(true);
+              },
             },
             {
               label: 'SALIR',
@@ -249,6 +302,39 @@ const ListaSetsProductos = () => {
           />
         </ModalFlotante>
       )}
+      {abrirModalEditar && (
+        <ModalFlotante
+          open={abrirModalEditar}
+          onClose={() => setAbrirModalEditar(false)}
+          titulo='Editar Set de Productos'
+          tituloVariant='h4'
+          customWidth={900}
+          botones={[
+            {
+              label: 'Guardar',
+              variant: 'contained',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: handleGuardar,
+            },
+            {
+              label: 'Cancelar',
+              variant: 'outlined',
+              color: 'primary',
+              outlineColor: colores.primario[10],
+              onClick: () => setAbrirModalEditar(false),
+            },
+          ]}
+        >
+          <InfoSetProductosEditable
+            nombre={setSeleccionado?.nombre || ''}
+            descripcion={setSeleccionado?.descripcion || ''}
+            productos={setSeleccionado?.productos || []}
+            grupos={setSeleccionado?.grupos || []}
+            onFormDataChange={handleFormDataChange}
+          />
+        </ModalFlotante>
+      )}
     </>
   );
 };
diff --git a/src/hooks/SetsProductos/useActualizarSetsProductos.js b/src/hooks/SetsProductos/useActualizarSetsProductos.js
index deff53f6..fe24e637 100644
--- a/src/hooks/SetsProductos/useActualizarSetsProductos.js
+++ b/src/hooks/SetsProductos/useActualizarSetsProductos.js
@@ -1,26 +1,69 @@
 // RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
 
 import { useState } from 'react';
-import { RepositorioActualizarSetProducto } from '@Repositorios/SetsProductos/RepositorioActualizarSetProducto';
+import { RepositorioActualizarSetProductos } from '@Repositorios/SetsProductos/RepositorioActualizarSetProductos';
 
-export function useActualizarEmpleado() {
-  const [cargando, setCargando] = useState(false);
-  const [error, setError] = useState(null);
+/**
+ * Hook para actualizar los datos de un set de productos
+ * @returns {Object} Objeto con la función de actualización y estados
+ */
+export const useActualizarSetsProductos = () => {
   const [mensaje, setMensaje] = useState('');
+  const [exito, setExito] = useState(false);
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(false);
+
+  const actualizarSetProductos = async (idSet, nombre, descripcion, productos, grupos) => {
+    if (!idSet) return;
 
-  const actualizar = async (cambios) => {
     setCargando(true);
-    setError(null);
+    setExito(false);
+    setError(false);
     setMensaje('');
 
     try {
-      const respuesta = await RepositorioActualizarSetProducto.actualizar(cambios);
-      setMensaje(respuesta.mensaje || 'Actualización exitosa');
+      const resultado = await RepositorioActualizarSetProductos.actualizarSetProductos(
+        idSet,
+        nombre,
+        descripcion,
+        productos,
+        grupos
+      );
+
+      setExito(true);
+      setMensaje(resultado?.data?.mensaje || 'Set de productos actualizado exitosamente');
+      return resultado;
     } catch (err) {
-      setError(err.message || 'Ocurrió un error');
+      setExito(false);
+      setError(true);
+      const errorMessage =
+        err?.response?.data?.mensaje ||
+        err?.response?.data?.error ||
+        err?.message ||
+        'Ocurrió un error al actualizar el set de productos';
+
+      setMensaje(errorMessage);
+      throw err;
     } finally {
       setCargando(false);
     }
   };
-  return { actualizar, cargando, error, mensaje };
-}
+
+  const resetEstado = () => {
+    setExito(false);
+    setError(false);
+    setMensaje('');
+  };
+
+  return {
+    actualizarSetProductos,
+    cargando,
+    exito,
+    error,
+    mensaje,
+    setError,
+    resetEstado,
+  };
+};
+
+export default useActualizarSetsProductos;

From 60fb3aa75743fe5da628e75f3dba55e7e8bec81c Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Thu, 5 Jun 2025 22:12:24 -0600
Subject: [PATCH 102/160] Ya no se renderiza la tabla de editar categoria a
 cada segundo

---
 .../Servicios/obtenerProductosCategoria.js    |   3 +-
 .../Organismos/CategoriaInfoEditable.jsx      |   3 +-
 .../Organismos/ModalEditarCategoria.jsx       |  86 +++---
 .../Paginas/Categorias/ListaCategorias.jsx    | 245 +++++++++---------
 4 files changed, 178 insertions(+), 159 deletions(-)

diff --git a/src/Dominio/Servicios/obtenerProductosCategoria.js b/src/Dominio/Servicios/obtenerProductosCategoria.js
index 8ce4d147..4d2fcbf5 100644
--- a/src/Dominio/Servicios/obtenerProductosCategoria.js
+++ b/src/Dominio/Servicios/obtenerProductosCategoria.js
@@ -30,8 +30,7 @@ const obtenerProductosCategoria = async () => {
     }));
 
     return productosFormateados;
-  } catch (error) {
-    console.error('❌ Error al obtener productos:', error);
+  } catch {
     return [];
   }
 };
diff --git a/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx b/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx
index 0045ebf2..351a74fc 100644
--- a/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx
+++ b/src/Vistas/Componentes/Organismos/CategoriaInfoEditable.jsx
@@ -71,4 +71,5 @@ const CategoriaInfoEditable = ({
   );
 };
 
-export default CategoriaInfoEditable;
\ No newline at end of file
+// Exportar con React.memo para optimización
+export default React.memo(CategoriaInfoEditable);
\ No newline at end of file
diff --git a/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx b/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
index 04b31003..ff029d8c 100644
--- a/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Box, Button, useTheme } from '@mui/material';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import Alerta from '@Moleculas/Alerta';
@@ -9,14 +9,6 @@ import { tokens } from '@SRC/theme';
  * Modal para editar una categoría existente.
  *
  * RF49 - Actualizar Categoría
- * @param {object} props - Propiedades del componente.
- * @param {boolean} props.abierto - Si el modal está abierto.
- * @param {function} props.onCerrar - Función para cerrar el modal.
- * @param {object} props.categoria - Detalle de la categoría (nombre, descripción, productos).
- * @param {function} props.onGuardar - Función a ejecutar al guardar los cambios.
- * @param {function} props.onCambioTransferencia - Función para manejar el cambio en los productos asociados.
- * @param {object} props.estadoActualizacion - Estado del proceso de actualización.
- * @param {function} props.setCategoria - Función para actualizar el estado local de la categoría.
  */
 const ModalEditarCategoria = ({
   abierto,
@@ -32,19 +24,38 @@ const ModalEditarCategoria = ({
 
   const [errorNombre, setErrorNombre] = useState(false);
 
-  if (!categoria) return null;
+  // Funciones memoizadas para evitar re-renders
+  const manejarCambioNombre = useCallback((evento) => {
+    const nuevoNombre = evento.target.value;
+    setCategoria(prev => ({
+      ...prev,
+      nombreCategoria: nuevoNombre
+    }));
+    if (nuevoNombre.trim()) {
+      setErrorNombre(false);
+    }
+  }, [setCategoria]);
 
-  const { cargando, error, exitoso, mensaje, limpiarEstado } = estadoActualizacion;
+  const manejarCambioDescripcion = useCallback((evento) => {
+    const nuevaDescripcion = evento.target.value;
+    setCategoria(prev => ({
+      ...prev,
+      descripcion: nuevaDescripcion
+    }));
+  }, [setCategoria]);
 
-  const manejarGuardar = () => {
-    if (!categoria.nombreCategoria.trim()) {
+  const manejarGuardar = useCallback(() => {
+    if (!categoria?.nombreCategoria?.trim()) {
       setErrorNombre(true);
       return;
     }
-
     setErrorNombre(false);
     onGuardar();
-  };
+  }, [categoria?.nombreCategoria, onGuardar]);
+
+  if (!categoria) return null;
+
+  const { cargando, error, exitoso, mensaje, limpiarEstado } = estadoActualizacion || {};
 
   return (
     <ModalFlotante
@@ -57,31 +68,38 @@ const ModalEditarCategoria = ({
       botones={[]}
     >
       <CategoriaInfoEditable
-        nombre={categoria.nombreCategoria}
-        descripcion={categoria.descripcion}
-        productosDisponibles={categoria.productosDisponibles}
-        productosSeleccionados={categoria.productosSeleccionados}
-        onCambioNombre={(evento) => {
-          setCategoria({ ...categoria, nombreCategoria: evento.target.value });
-          if (evento.target.value.trim()) setErrorNombre(false);
-        }}
-        onCambioDescripcion={(evento) =>
-          setCategoria({ ...categoria, descripcion: evento.target.value })
-        }
+        nombre={categoria.nombreCategoria || ''}
+        descripcion={categoria.descripcion || ''}
+        productosDisponibles={categoria.productosDisponibles || []}
+        productosSeleccionados={categoria.productosSeleccionados || []}
+        onCambioNombre={manejarCambioNombre}
+        onCambioDescripcion={manejarCambioDescripcion}
         onCambioTransferencia={onCambioTransferencia}
-        deshabilitado={cargando}
+        deshabilitado={cargando || false}
         errorNombre={errorNombre}
       />
 
       {error && (
         <Box mt={3}>
-          <Alerta tipo='error' mensaje={error} cerrable duracion={4000} onClose={limpiarEstado} />
+          <Alerta 
+            tipo='error' 
+            mensaje={error} 
+            cerrable 
+            duracion={4000} 
+            onClose={limpiarEstado} 
+          />
         </Box>
       )}
 
       {exitoso && mensaje && (
         <Box mt={3}>
-          <Alerta tipo='success' mensaje={mensaje} cerrable duracion={3000} onClose={limpiarEstado} />
+          <Alerta 
+            tipo='success' 
+            mensaje={mensaje} 
+            cerrable 
+            duracion={3000} 
+            onClose={limpiarEstado} 
+          />
         </Box>
       )}
 
@@ -90,7 +108,10 @@ const ModalEditarCategoria = ({
           variant='contained'
           onClick={manejarGuardar}
           disabled={cargando}
-          sx={{ backgroundColor: colores.altertex[1], color: 'white' }}
+          sx={{ 
+            backgroundColor: colores.altertex[1], 
+            color: 'white' 
+          }}
         >
           GUARDAR
         </Button>
@@ -98,7 +119,10 @@ const ModalEditarCategoria = ({
           variant='outlined'
           onClick={onCerrar}
           disabled={cargando}
-          sx={{ borderColor: colores.altertex[1], color: colores.altertex[1] }}
+          sx={{ 
+            borderColor: colores.altertex[1], 
+            color: colores.altertex[1] 
+          }}
         >
           CANCELAR
         </Button>
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index e7d56132..3540b966 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -1,6 +1,6 @@
 // RF49 - Actualizar Categoría - ListaCategorias.jsx
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import Tabla from '@Organismos/Tabla';
 import Alerta from '@Moleculas/Alerta';
 import ContenedorLista from '@Organismos/ContenedorLista';
@@ -16,15 +16,6 @@ import { Box, useTheme } from '@mui/material';
 import { tokens } from '@SRC/theme';
 import ModalCrearCategoria from '@Organismos/ModalCrearCategoria';
 
-/**
- * Página para consultar y mostrar la lista de categorías en una tabla.
- *
- * Muestra los resultados en un CustomDataGrid, incluyendo
- * nombre, descripción y número de productos de cada categoría.
- *
- * @see [RF[47] Consulta lista de categorías](https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF47)
- */
-
 const ListaCategorias = () => {
   const { categorias, cargando, error, recargar } = useConsultarCategorias();
   const [productos, setProductos] = useState([]);
@@ -39,18 +30,36 @@ const ListaCategorias = () => {
   const [cargandoDetalle, setCargandoDetalle] = useState(false);
   const [modalEditarAbierto, setModalEditarAbierto] = useState(false);
   const [categoriaEditable, setCategoriaEditable] = useState(null);
+  
   const actualizar = useActualizarCategoria();
-
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
+  const columns = useMemo(() => [
+    { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
+    { field: 'descripcion', headerName: 'Descripción', flex: 2 },
+    {
+      field: 'cantidadProductos',
+      headerName: 'Número de productos asociados',
+      type: 'number',
+      flex: 1,
+    },
+  ], []);
+
+  const rows = useMemo(() => categorias.map((cat) => ({
+    id: cat.idCategoria,
+    nombreCategoria: cat.nombreCategoria,
+    descripcion: cat.descripcion,
+    cantidadProductos: cat.cantidadProductos,
+    idCliente: cat.idCliente,
+  })), [categorias]);
+
   useEffect(() => {
     const cargarProductos = async () => {
       try {
         const resultado = await obtenerProductosCategoria();
         setProductos(resultado);
       } catch (error) {
-        console.error('Error al cargar productos:', error);
         setAlerta({
           tipo: 'error',
           mensaje: 'Error al cargar productos.',
@@ -63,36 +72,14 @@ const ListaCategorias = () => {
     cargarProductos();
   }, []);
 
-  const columns = [
-    { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
-    { field: 'descripcion', headerName: 'Descripción', flex: 2 },
-    {
-      field: 'cantidadProductos',
-      headerName: 'Número de productos asociados',
-      type: 'number',
-      flex: 1,
-    },
-  ];
-
-
-  // Las filas deben tener un campo `id`, usamos `idCategoria`
-  // para que coincida con el campo `id` de la tabla.
-  const rows = categorias.map((cat) => ({
-    id: cat.idCategoria,
-    nombreCategoria: cat.nombreCategoria,
-    descripcion: cat.descripcion,
-    cantidadProductos: cat.cantidadProductos,
-    idCliente: cat.idCliente,
-  }));
-
-  const handleAbrirModalCrear = () => setModalCrearAbierto(true);
-  const handleCerrarModalCrear = () => setModalCrearAbierto(false);
-  const handleCategoriaCreadaExitosamente = () => {
+  const handleAbrirModalCrear = useCallback(() => setModalCrearAbierto(true), []);
+  const handleCerrarModalCrear = useCallback(() => setModalCrearAbierto(false), []);
+  const handleCategoriaCreadaExitosamente = useCallback(() => {
     handleCerrarModalCrear();
     recargar();
-  };
+  }, [recargar]);
 
-  const mostrarDetalleCategoria = async (idCategoria) => {
+  const mostrarDetalleCategoria = useCallback(async (idCategoria) => {
     setCargandoDetalle(true);
     setCategoriaDetalle(null);
     setErrorDetalle(false);
@@ -115,56 +102,82 @@ const ListaCategorias = () => {
       setCargandoDetalle(false);
       setModalDetalleAbierto(true);
     }
-  };
+  }, []);
 
-  const manejarCambioTransferencia = ({ disponibles, seleccionados }) => {
+  const manejarCambioTransferencia = useCallback(({ disponibles, seleccionados }) => {
     setCategoriaEditable((prev) => ({
       ...prev,
       productosDisponibles: disponibles,
       productosSeleccionados: seleccionados,
     }));
-  };
+  }, []);
+
+  const manejarGuardarCategoria = useCallback(async () => {
+    if (!categoriaEditable?.idCategoria) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'No se pudo determinar el ID de la categoría.',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+      return;
+    }
+
+    const datos = {
+      nombreCategoria: categoriaEditable.nombreCategoria,
+      descripcion: categoriaEditable.descripcion,
+      productos: categoriaEditable.productosSeleccionados.map((producto) => producto.id),
+    };
+
+    const resultado = await actualizar.actualizarCategoria(categoriaEditable.idCategoria, datos);
 
-const manejarGuardarCategoria = async () => {
-  if (!categoriaEditable?.idCategoria) {
-    console.error('❌ ID de categoría no definido');
-    setAlerta({
-      tipo: 'error',
-      mensaje: 'No se pudo determinar el ID de la categoría.',
-      icono: true,
-      cerrable: true,
-      centradoInferior: true,
-    });
-    return;
-  }
+    if (resultado.success) {
+      setTimeout(() => {
+        setModalEditarAbierto(false);
+        setCategoriaEditable(null);
+        actualizar.limpiarEstado();
+        recargar();
+      }, 2000);
+    }
+  }, [categoriaEditable, actualizar, recargar]);
 
-  const datos = {
-    nombreCategoria: categoriaEditable.nombreCategoria,
-    descripcion: categoriaEditable.descripcion,
-    productos: categoriaEditable.productosSeleccionados.map((producto) => producto.id),
-  };
+  const cerrarModalEditar = useCallback(() => {
+    setModalEditarAbierto(false);
+    setCategoriaEditable(null);
+    actualizar.limpiarEstado();
+  }, [actualizar]);
 
-  const resultado = await actualizar.actualizarCategoria(categoriaEditable.idCategoria, datos);
+  const abrirModalEditar = useCallback(async () => {
+    setModalDetalleAbierto(false);
 
-  if (resultado.success) {
-    // Esperar 2 segundos para mostrar la alerta antes de cerrar
-    setTimeout(() => {
-      setModalEditarAbierto(false);
-      setCategoriaEditable(null);
-      actualizar.limpiarEstado(); // evitar que persista en la siguiente apertura
-      recargar();
-    }, 2000);
-  }
-};
+    const productosAsociados = productos.filter((producto) =>
+      categoriaDetalle.productos.includes(producto.nombre));
 
-  const botones = [
+    const productosDisponibles = productos.filter(
+      (producto) => !categoriaDetalle.productos.includes(producto.nombre)
+    );
+
+    const nuevaCategoriaEditable = {
+      idCategoria: categoriaDetalle.idCategoria,
+      nombreCategoria: categoriaDetalle.nombreCategoria,
+      descripcion: categoriaDetalle.descripcion,
+      productosSeleccionados: productosAsociados,
+      productosDisponibles,
+    };
+
+    setCategoriaEditable(nuevaCategoriaEditable);
+    setModalEditarAbierto(true);
+  }, [productos, categoriaDetalle]);
+
+  const botones = useMemo(() => [
     {
       label: 'Añadir',
       variant: 'contained',
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: handleAbrirModalCrear, // Ahora abre el modal para crear
+      onClick: handleAbrirModalCrear,
     },
     {
       label: 'Eliminar',
@@ -186,7 +199,38 @@ const manejarGuardarCategoria = async () => {
       size: 'large',
       backgroundColor: colores.altertex[1],
     },
-  ];
+  ], [colores.altertex, handleAbrirModalCrear, seleccionados]);
+
+  const botonesModalDetalle = useMemo(() => {
+    if (errorDetalle) {
+      return [
+        {
+          label: 'SALIR',
+          variant: 'outlined',
+          color: 'primary',
+          outlineColor: colores.primario[1],
+          onClick: () => setModalDetalleAbierto(false),
+        },
+      ];
+    }
+
+    return [
+      {
+        label: 'EDITAR',
+        variant: 'contained',
+        color: 'error',
+        backgroundColor: colores.altertex[1],
+        onClick: abrirModalEditar,
+      },
+      {
+        label: 'SALIR',
+        variant: 'outlined',
+        color: 'primary',
+        outlineColor: colores.primario[1],
+        onClick: () => setModalDetalleAbierto(false),
+      },
+    ];
+  }, [errorDetalle, colores.primario, colores.altertex, abrirModalEditar]);
 
   return (
     <>
@@ -238,53 +282,7 @@ const manejarGuardarCategoria = async () => {
               : categoriaDetalle?.nombreCategoria || 'Detalles de la categoría'
           }
           tituloVariant='h4'
-          botones={
-            errorDetalle
-              ? [
-                  {
-                    label: 'SALIR',
-                    variant: 'outlined',
-                    color: 'primary',
-                    outlineColor: colores.primario[1],
-                    onClick: () => setModalDetalleAbierto(false),
-                  },
-                ]
-              : [
-                  {
-                    label: 'EDITAR',
-                    variant: 'contained',
-                    color: 'error',
-                    backgroundColor: colores.altertex[1],
-                    onClick: async () => {
-                      setModalDetalleAbierto(false);
-
-                    const productosAsociados = productos.filter((producto) =>
-                      categoriaDetalle.productos.includes(producto.nombre));
-
-                    const productosDisponibles = productos.filter(
-                      (producto) => !categoriaDetalle.productos.includes(producto.nombre)
-                    );
-
-
-                      setCategoriaEditable({
-                        idCategoria: categoriaDetalle.idCategoria,
-                        nombreCategoria: categoriaDetalle.nombreCategoria,
-                        descripcion: categoriaDetalle.descripcion,
-                        productosSeleccionados: productosAsociados,
-                        productosDisponibles,
-                      });
-                      setModalEditarAbierto(true);
-                    },
-                  },
-                  {
-                    label: 'SALIR',
-                    variant: 'outlined',
-                    color: 'primary',
-                    outlineColor: colores.primario[1],
-                    onClick: () => setModalDetalleAbierto(false),
-                  },
-                ]
-          }
+          botones={botonesModalDetalle}
         >
           {!errorDetalle && (
             <CategoriaInfo
@@ -296,12 +294,9 @@ const manejarGuardarCategoria = async () => {
       )}
 
       <ModalEditarCategoria
+        key={categoriaEditable?.idCategoria || 'sin-categoria'}
         abierto={modalEditarAbierto}
-        onCerrar={() => {
-          setModalEditarAbierto(false);
-          setCategoriaEditable(null);
-          actualizar.limpiarEstado();
-        }}
+        onCerrar={cerrarModalEditar}
         categoria={categoriaEditable}
         onGuardar={manejarGuardarCategoria}
         onCambioTransferencia={manejarCambioTransferencia}

From b53f77ad65c806af0d2a480ad00f9606d564370b Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 5 Jun 2025 23:14:16 -0600
Subject: [PATCH 103/160] =?UTF-8?q?feat:=20a=C3=B1adir=20archivo=20de=20ej?=
 =?UTF-8?q?emplo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/ejemplo_importar_productos.csv         | 26 +++++++++++++++++++
 .../Organismos/ModalImportarProductos.jsx     |  4 +--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 public/ejemplo_importar_productos.csv

diff --git a/public/ejemplo_importar_productos.csv b/public/ejemplo_importar_productos.csv
new file mode 100644
index 00000000..de0b3dcb
--- /dev/null
+++ b/public/ejemplo_importar_productos.csv
@@ -0,0 +1,26 @@
+idProducto,idProveedor,nombreProducto,nombreComercial,descripcionProducto,tipoProducto,marca,modelo,costo,precioVenta,precioCliente,precioPuntos,impuesto,descuento,estado,envio,nombreVariante,descripcionVariante,valorOpcion,SKUcomercial,cantidad,costoAdicional,descuentoOpcion,estadoOpcion
+P1,101,Próducto 1,Comercial 1,Descripcion del producto 2,GENERAL,Marca1,M1,100,296.33,221.59,1,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion1,SKU-COM-1-1-1,1,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 2,GENERAL,Marca1,M1,62.33,263.27,244.53,2,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion2,SKU-COM-1-1-2,17,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 3,GENERAL,Marca1,M1,107.98,231.79,220.49,12,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion3,SKU-COM-1-1-3,17,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 4,GENERAL,Marca1,M1,93.12,272.66,188.36,2,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion4,SKU-COM-1-1-4,17,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 4,GENERAL,Marca1,M1,138.69,200.79,200.09,2,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion5,SKU-COM-1-1-5,8,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 6,GENERAL,Marca1,M1,147.27,223.37,227.69,2,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion1,SKU-COM-1-2-1,14,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 7,GENERAL,Marca1,M1,127.97,223.77,237.18,10,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion2,SKU-COM-1-2-2,11,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 8,GENERAL,Marca1,M1,80.96,258.27,248.53,1,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion3,SKU-COM-1-2-3,13,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 9,GENERAL,Marca1,M1,80.96,293.5,221.5,44,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion4,SKU-COM-1-2-4,12,0,0,1
+P1,101,Producto 1,Comercial 1,Descripcion del producto 10,GENERAL,Marca1,M1,65.27,293.5,190.15,2,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion5,SKU-COM-1-2-5,12,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 11,GENERAL,Marca2,M2,56.48,229.2,190.15,12,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion1,SKU-COM-2-1-1,7,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 12,GENERAL,Marca2,M2,92.84,276.09,228.83,12,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion2,SKU-COM-2-1-2,11,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 13,GENERAL,Marca2,M2,65.02,298.79,208.32,13,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion3,SKU-COM-2-1-3,13,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 14,GENERAL,Marca2,M2,90.59,248.85,207.37,38,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion4,SKU-COM-2-1-4,17,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 15,GENERAL,Marca2,M2,100.71,234.96,181.22,36,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion5,SKU-COM-2-1-5,6,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 16,GENERAL,Marca2,M2,100.5,272.05,208.56,43,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion1,SKU-COM-2-2-1,18,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 17,GENERAL,Marca2,M2,97.94,294.75,238.41,45,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion2,SKU-COM-2-2-2,5,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 18,GENERAL,Marca2,M2,90.33,291.47,245.24,18,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion3,SKU-COM-2-2-3,13,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 19,GENERAL,Marca2,M2,82.33,267.53,214.53,20,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion4,SKU-COM-2-2-4,18,0,0,1
+P2,101,Producto 2,Comercial 2,Descripcion del producto 20,GENERAL,Marca2,M2,91.09,201.15,231.24,37,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion5,SKU-COM-2-2-5,11,0,0,1
+P3,101,Producto 3,Comercial 3,Descripcion del producto 22,GENERAL,Marca3,M3,80.76,289.09,186.15,45,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion1,SKU-COM-3-1-1,18,0,0,1
+P3,101,Producto 3,Comercial 3,Descripcion del producto 22,GENERAL,Marca3,M3,102.27,295.23,201.39,25,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion2,SKU-COM-3-1-2,18,0,0,1
+P3,101,Producto 3,Comercial 3,Descripcion del producto 23,GENERAL,Marca3,M3,133.76,275.16,245.96,30,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion3,SKU-COM-3-1-3,18,0,0,1
+P3,101,Producto 3,Comercial 3,Descripcion del producto 24,GENERAL,Marca3,M3,67.6,246.28,186.47,23,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion4,SKU-COM-3-1-4,14,0,0,1
+P3,101,Producto 3,Comercial 3,Descripcion del producto 25,GENERAL,Marca3,M3,109.33,277.54,189.88,47,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion5,SKU-COM-3-1-5,11,0,0,1
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index 85339b54..3e9c0ad5 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -159,8 +159,8 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
       )}
 
       <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
-        <a href="/plantilla_importar_productos.csv" download="plantilla_importar_productos.csv">
-          Descargar plantilla CSV
+        <a href="/ejemplo_importar_productos.csv" download="ejemplo_importar_productos.csv">
+          Descargar ejemplo de plantilla CSV
         </a>
         <InfoImportar 
           open={abririnfo}

From 2c34d8395ced7637b2668ac352184bbd59dbf92c Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 5 Jun 2025 23:49:59 -0600
Subject: [PATCH 104/160] fix: mejorar documentacion para importar

---
 .../Organismos/ModalImportarProductos.jsx        | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index 3e9c0ad5..ce3f6e93 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -176,9 +176,19 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   <br /><br />
                   Así se puede importar correctamente todo: producto, variantes y sus opciones.
                   <br /><br />
-                  <strong>Importante:</strong><br />
-                  Asegúrate de que el <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto.
-                  Tambien, asegúrate de que la primera fila de cada producto no tenga campos vacíos, ya que el sistema la usa para identificar el producto principal.
+                  
+                  <strong>Asegúrate de lo sigiente:</strong>
+                  <ul>
+                    <li>
+                      El <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto.
+                    </li>
+                    <li>
+                      La primera fila de cada producto no debe tener campos vacíos, ya que el sistema la usa para identificar el producto principal. Por cada campo vacío, el sistema podría generar varios productos con el mismo nombre.
+                    </li>
+                    <li>
+                      El csv tenga formato UTF-8 para evitar problemas con caracteres especiales.
+                    </li>
+                  </ul>
 
                   <h3>Producto</h3>
                   <strong>idProducto</strong> permite al sistema saber qué filas pertenecen al mismo producto, aunque estén en diferentes líneas del CSV. Es necesario para poder agruparlo.<br />

From e75096c3a6ba702b22790ca5c7bd482a4db05cc5 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Thu, 5 Jun 2025 23:57:39 -0600
Subject: [PATCH 105/160] fix: arreglar alertas en crear categorias

---
 .../Formularios/FormaCrearCategoria.jsx       |  51 +++----
 .../Organismos/ModalCrearCategoria.jsx        |  15 +-
 .../Paginas/Categorias/ListaCategorias.jsx    | 132 +++++-------------
 3 files changed, 61 insertions(+), 137 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
index a6840661..918b19f5 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearCategoria.jsx
@@ -1,3 +1,4 @@
+import Alerta from '@Moleculas/Alerta';
 import CampoTexto from '@Atomos/CampoTexto';
 import { useState, useEffect } from 'react';
 import obtenerProductos from '@Servicios/obtenerProductos';
@@ -19,17 +20,17 @@ const LIMITE_DESCRIPCION = 150;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 const FormaCrearCategorias = ({
-  nombreCategoria,
-  setNombreCategoria,
-  descripcionCategoria,
-  setDescripcionCategoria,
-  productos,
-  setProductos,
-  mostrarAlerta,
-  setMostrarAlerta,
-  errores,
-  intentoEnviar,
-}) => {
+                                nombreCategoria,
+                                setNombreCategoria,
+                                descripcionCategoria,
+                                setDescripcionCategoria,
+                                productos,
+                                setProductos,
+                                mostrarAlerta,
+                                setMostrarAlerta,
+                                errores,
+                                intentoEnviar,
+                              }) => {
   const [rows, setRows] = useState([]);
   const { usuario } = useAuth();
   const clienteSeleccionado = usuario.clienteSeleccionado;
@@ -55,12 +56,15 @@ const FormaCrearCategorias = ({
   const handleFilaSeleccion = (itemSeleccion) => {
     const ids = Array.isArray(itemSeleccion) ? itemSeleccion : Array.from(itemSeleccion?.ids || []);
 
+    // Get the products that correspond to the selected IDs
     const productosSeleccionados = ids
       .map((id) => rows.find((row) => row.id === id))
-      .filter((fila) => fila);
+      .filter((fila) => fila); // Remove any undefined entries
 
+    // Update the productos state to match exactly what's selected
     setProductos(productosSeleccionados);
 
+    // Clear the validation alert when products are selected
     if (productosSeleccionados.length > 0 && mostrarAlerta) {
       setMostrarAlerta(false);
     }
@@ -76,8 +80,7 @@ const FormaCrearCategorias = ({
         onChange={(evento) => setNombreCategoria(evento.target.value.slice(0, LIMITE_NOMBRE))}
         inputProps={{ maxLength: LIMITE_NOMBRE }}
         helperText={
-          errores?.nombreCategoria
-          || `${nombreCategoria.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
+          errores?.nombreCategoria || `${nombreCategoria.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
         }
         error={intentoEnviar && !!errores?.nombreCategoria}
         required
@@ -100,13 +103,10 @@ const FormaCrearCategorias = ({
         fullWidth
         type='text'
         value={descripcionCategoria}
-        onChange={(evento) =>
-          setDescripcionCategoria(evento.target.value.slice(0, LIMITE_DESCRIPCION))
-        }
+        onChange={(evento) => setDescripcionCategoria(evento.target.value.slice(0, LIMITE_DESCRIPCION))}
         inputProps={{ maxLength: LIMITE_DESCRIPCION }}
         helperText={
-          errores?.descripcionCategoria
-          || `${descripcionCategoria.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`
+          errores?.descripcionCategoria || `${descripcionCategoria.length}/${LIMITE_DESCRIPCION} - ${MENSAJE_LIMITE}`
         }
         error={intentoEnviar && !!errores?.descripcionCategoria}
         required
@@ -114,19 +114,10 @@ const FormaCrearCategorias = ({
         multiline
         rows={3}
       />
-      {mostrarAlerta && (
-        <Alerta
-          tipo='warning'
-          mensaje={'Ingresa el nombre y selecciona al menos un producto.'}
-          cerrable
-          duracion={3000}
-          onClose={() => setMostrarAlerta(false)}
-          sx={{ mb: 2, mt: 2 }}
-        />
-      )}
 
+      {/* Alert moved to parent component */}
     </>
   );
 };
 
-export default FormaCrearCategorias;
+export default FormaCrearCategorias;
\ No newline at end of file
diff --git a/src/Vistas/Componentes/Organismos/ModalCrearCategoria.jsx b/src/Vistas/Componentes/Organismos/ModalCrearCategoria.jsx
index f316c6bc..0463797b 100644
--- a/src/Vistas/Componentes/Organismos/ModalCrearCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalCrearCategoria.jsx
@@ -35,6 +35,7 @@ const ModalCrearCategoria = ({ abierto = false, onCerrar, onCreado, onError }) =
 
   useEffect(() => {
     if (exito) {
+      // Close modal immediately and let parent handle success alert
       if (onCreado) {
         onCreado();
       } else {
@@ -45,7 +46,9 @@ const ModalCrearCategoria = ({ abierto = false, onCerrar, onCreado, onError }) =
 
   useEffect(() => {
     if (error && onError) {
+      // Let parent handle error alert, but keep modal open
       onError(mensaje);
+      // Reset the error state to prevent loop
       setError(false);
     }
   }, [error, mensaje, onError, setError]);
@@ -68,6 +71,7 @@ const ModalCrearCategoria = ({ abierto = false, onCerrar, onCreado, onError }) =
 
     if (productos.length === 0) {
       setMostrarAlerta(true);
+      // Notify parent about validation error
       if (onError) {
         onError('Ingresa el nombre y selecciona al menos un producto.');
       }
@@ -106,17 +110,6 @@ const ModalCrearCategoria = ({ abierto = false, onCerrar, onCreado, onError }) =
         errores={errores}
         intentoEnviar={intentoEnviar}
       />
-      {(exito || error) && (
-        <Alerta
-          tipo={exito ? 'success' : 'error'}
-          mensaje={mensaje}
-          duracion={exito ? 3000 :3000 }
-          sx={{ margin: 3 }}
-          cerrable
-          onClose={error ? () => setError(false) : undefined}
-        />
-      )}
-
     </ModalFlotante>
   );
 };
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index fa211b40..2066b081 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -3,12 +3,8 @@ import Tabla from '@Organismos/Tabla';
 import Alerta from '@Moleculas/Alerta';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import ModalEliminarCategoria from '@Organismos/ModalEliminarCategoria';
-import CategoriaInfo from '@Organismos/CategoriaInfo';
-import ModalFlotante from '@Organismos/ModalFlotante';
 import { useConsultarCategorias } from '@Hooks/Categorias/useConsultarCategorias';
-import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
 import { Box, useTheme } from '@mui/material';
-import Texto from '@Atomos/Texto';
 import { tokens } from '@SRC/theme';
 import ModalCrearCategoria from '@Organismos/ModalCrearCategoria';
 
@@ -26,16 +22,16 @@ const ListaCategorias = () => {
   const [seleccionados, setSeleccionados] = useState(new Set());
   const [alerta, setAlerta] = useState(null);
   const [idsCategoria, setIdsCategoria] = useState([]);
-  const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
-  const [openModalEliminar, setOpenModalEliminar] = useState(false);
-  const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
-  const [categoriaDetalle, setCategoriaDetalle] = useState(null);
-  const [errorDetalle, setErrorDetalle] = useState(false);
-  const [cargandoDetalle, setCargandoDetalle] = useState(false);
-
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
+  // Estado para controlar la visualización del modal crear
+  const [modalCrearAbierto, setModalCrearAbierto] = useState(false);
+
+  // Estado para controlar la visualización del modal eliminar
+  const [openModalEliminar, setOpenModalEliminar] = useState(false);
+
+  // Columnas para el DataGrid
   const columns = [
     { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
     { field: 'descripcion', headerName: 'Descripción', flex: 2 },
@@ -47,6 +43,7 @@ const ListaCategorias = () => {
     },
   ];
 
+  // Las filas deben tener un campo `id`, usamos `idCategoria`
   const rows = categorias.map((cat) => ({
     id: cat.idCategoria,
     nombreCategoria: cat.nombreCategoria,
@@ -55,45 +52,40 @@ const ListaCategorias = () => {
     idCliente: cat.idCliente,
   }));
 
+  // Manejador para abrir el modal
   const handleAbrirModalCrear = () => {
     setModalCrearAbierto(true);
   };
 
+  // Manejador para cerrar el modal
   const handleCerrarModalCrear = () => {
     setModalCrearAbierto(false);
   };
 
+  // Manejador para cuando se crea una nueva categoría
   const handleCategoriaCreadaExitosamente = () => {
     handleCerrarModalCrear();
+    // Recarga la lista de categorías
     recargar();
+    // Show success alert
+    setAlerta({
+      tipo: 'success',
+      mensaje: 'Categoría creada exitosamente.',
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
   };
 
-  const mostrarDetalleCategoria = async (idCategoria) => {
-    setCargandoDetalle(true);
-    setCategoriaDetalle(null);
-    setErrorDetalle(false);
-
-    try {
-      const detalle = await leerCategoria(idCategoria);
-      setCategoriaDetalle(detalle);
-    } catch {
-      setErrorDetalle(true);
-      setCategoriaDetalle({
-        nombreCategoria: '',
-        descripcion: '',
-        productos: [],
-      });
-      setAlerta({
-        tipo: 'error',
-        mensaje: 'Error al obtener los datos de la categoría.',
-        icono: true,
-        cerrable: true,
-        centradoInferior: true,
-      });
-    } finally {
-      setCargandoDetalle(false);
-      setModalDetalleAbierto(true);
-    }
+  // Manejador para errores al crear categoría
+  const handleErrorCrearCategoria = (mensajeError) => {
+    setAlerta({
+      tipo: 'error',
+      mensaje: mensajeError,
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
   };
 
   const botones = [
@@ -103,7 +95,7 @@ const ListaCategorias = () => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      onClick: handleAbrirModalCrear, // Ahora abre el modal para crear
+      onClick: handleAbrirModalCrear,
     },
     {
       label: 'Eliminar',
@@ -145,19 +137,19 @@ const ListaCategorias = () => {
             onRowSelectionModelChange={(newSelection) => {
               setSeleccionados(newSelection);
             }}
-            onRowClick={(params) => {
-              mostrarDetalleCategoria(params.row.id);
-            }}
           />
         </Box>
       </ContenedorLista>
 
+      {/* Modal para crear categoria */}
       <ModalCrearCategoria
         abierto={modalCrearAbierto}
         onCerrar={handleCerrarModalCrear}
         onCreado={handleCategoriaCreadaExitosamente}
+        onError={handleErrorCrearCategoria}
       />
 
+      {/* Modal para eliminar categoria */}
       <ModalEliminarCategoria
         open={openModalEliminar}
         onClose={() => setOpenModalEliminar(false)}
@@ -166,66 +158,14 @@ const ListaCategorias = () => {
         refrescarPagina={recargar}
       />
 
-      {modalDetalleAbierto && !cargandoDetalle && (
-        <ModalFlotante
-          open={modalDetalleAbierto}
-          onClose={() => {
-            setModalDetalleAbierto(false);
-            setCategoriaDetalle(null);
-            setErrorDetalle(false);
-          }}
-          onConfirm={() => setModalDetalleAbierto(false)}
-          titulo={
-            errorDetalle
-              ? 'Cargando...'
-              : categoriaDetalle?.nombreCategoria || 'Detalles de la categoría'
-          }
-          tituloVariant='h4'
-          botones={
-            errorDetalle
-              ? [
-                  {
-                    label: 'SALIR',
-                    variant: 'outlined',
-                    color: 'primary',
-                    outlineColor: colores.primario[1],
-                    onClick: () => setModalDetalleAbierto(false),
-                  },
-                ]
-              : [
-                  {
-                    label: 'EDITAR',
-                    variant: 'contained',
-                    color: 'error',
-                    backgroundColor: colores.altertex[1],
-                    construccion: true,
-                  },
-                  {
-                    label: 'SALIR',
-                    variant: 'outlined',
-                    color: 'primary',
-                    outlineColor: colores.primario[1],
-                    onClick: () => setModalDetalleAbierto(false),
-                  },
-                ]
-          }
-        >
-          {errorDetalle ? null : (
-            <CategoriaInfo
-              descripcion={categoriaDetalle?.descripcion}
-              productos={categoriaDetalle?.productos}
-            />
-          )}
-        </ModalFlotante>
-      )}
-
+      {/* Alert that appears on the page level */}
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
           mensaje={alerta.mensaje}
           icono={alerta.icono}
           cerrable={alerta.cerrable}
-          duracion={2500}
+          duracion={3000}
           centradoInferior={alerta.centradoInferior}
           onClose={() => setAlerta(null)}
         />
@@ -234,4 +174,4 @@ const ListaCategorias = () => {
   );
 };
 
-export default ListaCategorias;
+export default ListaCategorias;
\ No newline at end of file

From a22b06cac4b1749f4f1f7a4c5feef31d64b66d08 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Fri, 6 Jun 2025 00:26:56 -0600
Subject: [PATCH 106/160] mover la alerta afuera del modal

---
 .../Organismos/ModalEditarCategoria.jsx       | 28 +------------------
 .../Paginas/Categorias/ListaCategorias.jsx    | 19 ++++++++++++-
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx b/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
index ff029d8c..d47ed2be 100644
--- a/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalEditarCategoria.jsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { Box, Button, useTheme } from '@mui/material';
 import ModalFlotante from '@Organismos/ModalFlotante';
-import Alerta from '@Moleculas/Alerta';
 import CategoriaInfoEditable from '@Organismos/CategoriaInfoEditable';
 import { tokens } from '@SRC/theme';
 
@@ -24,7 +23,6 @@ const ModalEditarCategoria = ({
 
   const [errorNombre, setErrorNombre] = useState(false);
 
-  // Funciones memoizadas para evitar re-renders
   const manejarCambioNombre = useCallback((evento) => {
     const nuevoNombre = evento.target.value;
     setCategoria(prev => ({
@@ -55,7 +53,7 @@ const ModalEditarCategoria = ({
 
   if (!categoria) return null;
 
-  const { cargando, error, exitoso, mensaje, limpiarEstado } = estadoActualizacion || {};
+  const { cargando } = estadoActualizacion || {};
 
   return (
     <ModalFlotante
@@ -79,30 +77,6 @@ const ModalEditarCategoria = ({
         errorNombre={errorNombre}
       />
 
-      {error && (
-        <Box mt={3}>
-          <Alerta 
-            tipo='error' 
-            mensaje={error} 
-            cerrable 
-            duracion={4000} 
-            onClose={limpiarEstado} 
-          />
-        </Box>
-      )}
-
-      {exitoso && mensaje && (
-        <Box mt={3}>
-          <Alerta 
-            tipo='success' 
-            mensaje={mensaje} 
-            cerrable 
-            duracion={3000} 
-            onClose={limpiarEstado} 
-          />
-        </Box>
-      )}
-
       <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 4 }}>
         <Button
           variant='contained'
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 3540b966..27a784ec 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -59,7 +59,7 @@ const ListaCategorias = () => {
       try {
         const resultado = await obtenerProductosCategoria();
         setProductos(resultado);
-      } catch (error) {
+      } catch {
         setAlerta({
           tipo: 'error',
           mensaje: 'Error al cargar productos.',
@@ -133,12 +133,29 @@ const ListaCategorias = () => {
     const resultado = await actualizar.actualizarCategoria(categoriaEditable.idCategoria, datos);
 
     if (resultado.success) {
+      setAlerta({
+        tipo: 'success',
+        mensaje: actualizar.mensaje || 'Categoría actualizada correctamente',
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
+
       setTimeout(() => {
         setModalEditarAbierto(false);
         setCategoriaEditable(null);
         actualizar.limpiarEstado();
+        setAlerta(null); 
         recargar();
       }, 2000);
+    } else if (actualizar.error) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: actualizar.error,
+        icono: true,
+        cerrable: true,
+        centradoInferior: true,
+      });
     }
   }, [categoriaEditable, actualizar, recargar]);
 

From 263045f74934fa07fbd49bf8eaff7cccb79d0459 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Fri, 6 Jun 2025 01:30:02 -0600
Subject: [PATCH 107/160] fix: arreglar ancho de modal de leer producto

---
 src/Vistas/Componentes/Moleculas/InfoProducto.jsx | 2 +-
 src/Vistas/Paginas/Productos/ListaProductos.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
index 8cf0050e..6c99f52f 100644
--- a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
+++ b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
@@ -20,7 +20,7 @@ const InfoProducto = ({detalleProducto, imagenProducto}) => {
   };
 
   return <>
-    <Grid container spacing={9} wrap='nowrap'>
+    <Grid container spacing={15} wrap='nowrap'>
       {/*Información General*/}
       <Grid >
         <Box sx={{maxWidth: '100%'}}>
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 2ef98251..20f0f1bd 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -331,7 +331,7 @@ const ListaProductos = () => {
           onClose={() => setAbrirModalDetalle(false)}
           titulo={detalleProducto?.nombreComun || 'Cargando...'}
           tituloVariant='h4'
-          customWidth={750}
+          customWidth={950}
           botones={[
             {
               label: 'Editar',

From e80d34233c914cf2409901965c0937a16210aeab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 01:33:00 -0600
Subject: [PATCH 108/160] feat: Agregar switch de activo

---
 .../RepositorioActualizarSetProductos.js      |   6 +-
 .../Moleculas/SetProductosEditable.jsx        | 149 +++++++++++-------
 .../SetsProductos/ListaSetsProductos.jsx      |  24 ++-
 .../useActualizarSetsProductos.js             |   8 +-
 4 files changed, 113 insertions(+), 74 deletions(-)

diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
index 01ba00b5..0f28dc99 100644
--- a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
+++ b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
@@ -10,21 +10,19 @@ export class RepositorioActualizarSetProductos {
    * @param {string} nombre - Nuevo nombre del set
    * @param {string} descripcion - Nueva descripción del set
    * @param {array} productos - Lista de IDs de productos
-   * @param {array} grupos - Lista de IDs de grupos de empleados asignados
    * @returns {Promise<{mensaje: string}>}
    *
    * @see [RF44] Actualizar set de productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
    */
-  static async actualizarSetProductos(idSet, nombre, descripcion, productos, grupos) {
+  static async actualizarSetProductos(idSet, nombre, descripcion, productos) {
     try {
       const respuesta = await axios.put(
-        `${RUTAS_API.PRODUCTOS.ACTUALIZAR_SET}`,
+        `${RUTAS_API.SETS_PRODUCTOS.ACTUALIZAR_SETS_PRODUCTO}`,
         {
           idSetProductos: idSet,
           nombre,
           descripcion,
           productos,
-          grupos,
         },
         {
           headers: {
diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index 5f4d295c..c1e732f3 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -19,6 +19,8 @@ import {
   Checkbox,
   Divider,
   Button,
+  Switch,
+  FormControlLabel,
 } from '@mui/material';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
@@ -26,12 +28,15 @@ import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArro
 import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 
 const LIMITE_NOMBRE = 50;
+const LIMITE_NOMBRE_VISIBLE = 50;
 const LIMITE_DESCRIPCION = 150;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 const SetProductosEditable = ({
   nombre: nombreInicial,
+  //nombreVisible: nombreVisibleInicial,
   descripcion: descripcionInicial,
+  activo: activoInicial = true,
   productos: productosInicial,
   onFormDataChange,
 }) => {
@@ -40,10 +45,11 @@ const SetProductosEditable = ({
   const clienteSeleccionado = usuario?.clienteSeleccionado;
 
   const [nombre, setNombre] = useState(nombreInicial || '');
+  //const [nombreVisible, setNombreVisible] = useState(nombreVisibleInicial || '');
   const [descripcion, setDescripcion] = useState(descripcionInicial || '');
+  const [activo, setActivo] = useState(activoInicial);
   const [todosProductos, setTodosProductos] = useState([]);
   const [productosDerecha, setProductosDerecha] = useState(productosInicial || []);
-  const [productosSeleccionados, setProductosSeleccionados] = useState([]);
   const [productosSeleccionadosIzquierda, setSeleccionadosIzquierda] = useState([]);
   const [productosSeleccionadosDerecha, setSeleccionadosDerecha] = useState([]);
   const [errores, setErrores] = useState({ nombre: false, descripcion: false });
@@ -119,13 +125,16 @@ const SetProductosEditable = ({
 
   useEffect(() => {
     const nombreVacio = nombre.trim() === '';
+    //const nombreVisibleVacio = nombreVisible.trim() === '';
     const descripcionVacia = descripcion.trim() === '';
     const esValido = !nombreVacio && !descripcionVacia;
     setErrores({ nombre: nombreVacio, descripcion: descripcionVacia });
 
     const formData = {
       nombre: nombre.trim(),
+      //nombreVisible: nombreVisibleVacio,
       descripcion: descripcion.trim(),
+      activo,
       productos: productosDerecha.map((p) => p.id),
       esValido,
     };
@@ -135,7 +144,8 @@ const SetProductosEditable = ({
       referenciaFormData.current = formData;
       onFormDataChange?.(formData);
     }
-  }, [nombre, descripcion, productosDerecha]);
+  }, [nombre, descripcion, activo, productosDerecha]);
+  //}, [nombre, nombreVisible, descripcion, activo, productosDerecha]);
 
   const renderLista = (titulo, items, lado) => {
     const seleccionados =
@@ -153,7 +163,7 @@ const SetProductosEditable = ({
     const estaTodoSeleccionado = seleccionados.length === items.length && items.length !== 0;
     const estaIndeterminado = seleccionados.length > 0 && seleccionados.length < items.length;
 
-    const tituloFinal = lado === 'izquierda' ? 'Productos Disponibles' : 'Sets Seleccionados';
+    const tituloFinal = lado === 'izquierda' ? 'Productos Disponibles' : 'Productos Seleccionados';
     const subheader = `${seleccionados.length}/${items.length} seleccionados`;
 
     return (
@@ -193,70 +203,85 @@ const SetProductosEditable = ({
 
   return (
     <Box sx={{ width: '100%', maxWidth: 1000, mx: 'auto' }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12} md={4}>
-          <Texto variant='h6'>Nombre:</Texto>
-          <CampoTexto
-            fullWidth
-            value={nombre}
-            onChange={(e) => setNombre(e.target.value.slice(0, LIMITE_NOMBRE))}
-            error={errores.nombre}
-            helperText={
-              errores.nombre
-                ? 'Campo obligatorio'
-                : `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`
-            }
-            sx={{ mt: 1, mb: 2, mr: 8, width: '300px', overflow: 'auto' }}
-          />
-        </Grid>
+      {/* Switch Activo/Inactivo */}
+      <Grid item xs={12} sx={{ mb: 2 }}>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={activo}
+              onChange={(e) => setActivo(e.target.checked)}
+              color='primary'
+            />
+          }
+          label={activo ? 'Activo' : 'Inactivo'}
+        />
+      </Grid>
 
-        <Grid item xs={12} md={8}>
-          <Texto variant='h6'>Descripción:</Texto>
-          <CampoTexto
-            fullWidth
-            value={descripcion}
-            onChange={(e) => setDescripcion(e.target.value.slice(0, LIMITE_DESCRIPCION))}
-            error={errores.descripcion}
-            helperText={
-              errores.descripcion
-                ? 'Campo obligatorio'
-                : `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
-            }
-            sx={{ mt: 1, mb: 2, width: '400px', overflow: 'auto' }}
-          />
+      {/* Nombre y Nombre Visible */}
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={6}>
+          <Texto variant='h6'>Nombre:</Texto>
+          <Box sx={{ width: '100%' }}>
+            <CampoTexto
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value.slice(0, LIMITE_NOMBRE))}
+              error={errores.nombre}
+              helperText={
+                errores.nombre
+                  ? 'Campo obligatorio'
+                  : `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`
+              }
+              sx={{ mt: 1, mb: 2, mr: 4, width: '385px', overflow: 'auto' }}
+            />
+          </Box>
         </Grid>
+      </Grid>
 
-        <Grid item xs={12}>
-          <Texto variant='h6'>Productos:</Texto>
-          <Grid container spacing={2} alignItems='center' justifyContent='center'>
-            <Grid item>{renderLista('Disponibles', productosIzquierda, 'izquierda')}</Grid>
-            <Grid item>
-              <Grid item>
-                <Grid container direction='column' spacing={1}>
-                  {/* Mover todos a la derecha */}
-                  <Button onClick={transferirTodos} disabled={!productosIzquierda.length}>
-                    <KeyboardDoubleArrowRightIcon />
-                  </Button>
-
-                  {/* Mover seleccionados a la derecha */}
-                  <Button onClick={transferir} disabled={!productosSeleccionadosIzquierda.length}>
-                    <KeyboardArrowRightIcon />
-                  </Button>
-
-                  {/* Mover seleccionados a la izquierda */}
-                  <Button onClick={quitar} disabled={!productosSeleccionadosDerecha.length}>
-                    <KeyboardArrowLeftIcon />
-                  </Button>
+      {/* Descripción */}
+      <Grid item xs={12}>
+        <Texto variant='h6'>Descripción:</Texto>
+        <CampoTexto
+          fullWidth
+          value={descripcion}
+          onChange={(e) => setDescripcion(e.target.value.slice(0, LIMITE_DESCRIPCION))}
+          error={errores.descripcion}
+          helperText={
+            errores.descripcion
+              ? 'Campo obligatorio'
+              : `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
+          }
+          sx={{ mt: 1, mb: 2, width: '815px', overflow: 'auto' }}
+        />
+      </Grid>
 
-                  {/* Mover todos a la izquierda */}
-                  <Button onClick={quitarTodos} disabled={!productosDerecha.length}>
-                    <KeyboardDoubleArrowLeftIcon />
-                  </Button>
-                </Grid>
-              </Grid>
+      {/* Productos */}
+      <Grid item xs={12}>
+        <Texto variant='h6'>Productos:</Texto>
+        <Grid
+          container
+          spacing={2}
+          alignItems='center'
+          justifyContent='center'
+          sx={{ mb: 5 }} // Espacio extra debajo de la tabla de productos
+        >
+          <Grid item>{renderLista('Disponibles', productosIzquierda, 'izquierda')}</Grid>
+          <Grid item>
+            <Grid container direction='column' spacing={1}>
+              <Button onClick={transferirTodos} disabled={!productosIzquierda.length}>
+                <KeyboardDoubleArrowRightIcon />
+              </Button>
+              <Button onClick={transferir} disabled={!productosSeleccionadosIzquierda.length}>
+                <KeyboardArrowRightIcon />
+              </Button>
+              <Button onClick={quitar} disabled={!productosSeleccionadosDerecha.length}>
+                <KeyboardArrowLeftIcon />
+              </Button>
+              <Button onClick={quitarTodos} disabled={!productosDerecha.length}>
+                <KeyboardDoubleArrowLeftIcon />
+              </Button>
             </Grid>
-            <Grid item>{renderLista('Seleccionados', productosDerecha, 'derecha')}</Grid>
           </Grid>
+          <Grid item>{renderLista('Seleccionados', productosDerecha, 'derecha')}</Grid>
         </Grid>
       </Grid>
     </Box>
@@ -265,7 +290,9 @@ const SetProductosEditable = ({
 
 SetProductosEditable.propTypes = {
   nombre: PropTypes.string,
+  //nombreVisible: PropTypes.string,
   descripcion: PropTypes.string,
+  activo: PropTypes.bool,
   productos: PropTypes.array,
   onFormDataChange: PropTypes.func,
 };
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index 876f4f1d..190d564c 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -83,8 +83,12 @@ const ListaSetsProductos = () => {
 
   const { actualizarSet } = useActualizarSetsProductos();
 
+  const esValido = (data) => {
+    return data?.nombre?.trim() !== '' && data?.descripcion?.trim() !== '';
+  };
+
   const handleGuardar = async () => {
-    if (!formData?.esValido()) {
+    if (!esValido(formData)) {
       setAlerta({
         tipo: 'error',
         mensaje: 'El nombre y la descripción son obligatorios.',
@@ -94,14 +98,24 @@ const ListaSetsProductos = () => {
       });
       return;
     }
+    // Log para ver los datos que se enviarán
+    console.log('Datos que se enviarán para actualizar el set:', {
+      idSetProducto: setSeleccionado.idSetProducto,
+      nombre: formData.nombre,
+      //nombreVisible: formData.nombreVisible,
+      descripcion: formData.descripcion,
+      activo: formData.activo ? 1 : 0,
+      productos: formData.productos,
+    });
 
     try {
       await actualizarSet(
         setSeleccionado.idSetProducto,
         formData.nombre,
+        //formData.nombreVisible,
         formData.descripcion,
-        formData.productos,
-        formData.grupos
+        formData.activo,
+        formData.productos
       );
       await recargar();
       setAbrirModalEditar(false);
@@ -298,7 +312,6 @@ const ListaSetsProductos = () => {
             nombre={''}
             descripcion={setSeleccionado.descripcion}
             productos={setSeleccionado.productos || []}
-            grupos={setSeleccionado.grupos || []}
           />
         </ModalFlotante>
       )}
@@ -328,9 +341,10 @@ const ListaSetsProductos = () => {
         >
           <InfoSetProductosEditable
             nombre={setSeleccionado?.nombre || ''}
+            //nombreVisible={setSeleccionado?.nombreVisible ?? ''}
             descripcion={setSeleccionado?.descripcion || ''}
             productos={setSeleccionado?.productos || []}
-            grupos={setSeleccionado?.grupos || []}
+            activo={setSeleccionado?.activo ?? 1}
             onFormDataChange={handleFormDataChange}
           />
         </ModalFlotante>
diff --git a/src/hooks/SetsProductos/useActualizarSetsProductos.js b/src/hooks/SetsProductos/useActualizarSetsProductos.js
index fe24e637..e309b173 100644
--- a/src/hooks/SetsProductos/useActualizarSetsProductos.js
+++ b/src/hooks/SetsProductos/useActualizarSetsProductos.js
@@ -13,7 +13,7 @@ export const useActualizarSetsProductos = () => {
   const [cargando, setCargando] = useState(false);
   const [error, setError] = useState(false);
 
-  const actualizarSetProductos = async (idSet, nombre, descripcion, productos, grupos) => {
+  const actualizarSet = async (idSet, nombre, descripcion, activo, productos) => {
     if (!idSet) return;
 
     setCargando(true);
@@ -26,8 +26,8 @@ export const useActualizarSetsProductos = () => {
         idSet,
         nombre,
         descripcion,
-        productos,
-        grupos
+        activo,
+        productos
       );
 
       setExito(true);
@@ -56,7 +56,7 @@ export const useActualizarSetsProductos = () => {
   };
 
   return {
-    actualizarSetProductos,
+    actualizarSet,
     cargando,
     exito,
     error,

From 615d3573794f8a77d1be44b99e8502cc30843b3a Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Fri, 6 Jun 2025 02:11:07 -0600
Subject: [PATCH 109/160] Cambiar colores altertex

---
 src/Vistas/Paginas/Categorias/ListaCategorias.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 3f0eaa18..8c88d74a 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -247,7 +247,7 @@ const ListaCategorias = () => {
           label: 'SALIR',
           variant: 'outlined',
           color: 'primary',
-          outlineColor: colores.primario[1],
+          outlineColor: colores.altertex[1],
           onClick: () => setModalDetalleAbierto(false),
         },
       ];
@@ -265,7 +265,7 @@ const ListaCategorias = () => {
         label: 'SALIR',
         variant: 'outlined',
         color: 'primary',
-        outlineColor: colores.primario[1],
+        outlineColor: colores.altertex[1],
         onClick: () => setModalDetalleAbierto(false),
       },
     ];

From fcdacdef0e9f24679b2dd3613ea4c55ed96957dc Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Fri, 6 Jun 2025 03:05:20 -0600
Subject: [PATCH 110/160] feat: agregar csrf y corregir defecto en leer
 producto

---
 .../Componentes/Moleculas/InfoProducto.jsx    |  2 +-
 src/hooks/AuthProvider.jsx                    | 72 +++++++++++++++----
 2 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
index 8cf0050e..31aa95c9 100644
--- a/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
+++ b/src/Vistas/Componentes/Moleculas/InfoProducto.jsx
@@ -166,7 +166,7 @@ const InfoProducto = ({detalleProducto, imagenProducto}) => {
               ]}
               rows={varianteSeleccionada.opciones.map((opcion, index) => ({
                 id: index + 1,
-                opcion: `Opción ${index + 1}`,
+                opcion: opcion.valorOpcion || 'No disponible',
                 skuComercial: opcion.SKUcomercial || 'No disponible',
                 skuAutomatico: opcion.SKUautomatico || 'No disponible',
                 costo: opcion.costoAdicional ? `${opcion.costoAdicional}` : '$0',
diff --git a/src/hooks/AuthProvider.jsx b/src/hooks/AuthProvider.jsx
index f95880e2..b377b1cf 100644
--- a/src/hooks/AuthProvider.jsx
+++ b/src/hooks/AuthProvider.jsx
@@ -11,41 +11,82 @@ const AuthContext = createContext(null);
 export const AuthProvider = ({ children }) => {
   const [usuario, setUsuario] = useState(null);
   const [nombreUsuario, setNombreUsuario] = useState(() => {
-    // Obtener el nombre de usuario del localStorage
     const nombreUsuarioGuardado = localStorage.getItem('nombreUsuario');
     return nombreUsuarioGuardado ? JSON.parse(nombreUsuarioGuardado) : null;
   });
   const [cargando, setCargando] = useState(true);
+  const [csrfToken, setCsrfToken] = useState(null);
   const { toggleColorMode } = useMode();
 
+  // Configure axios interceptor for CSRF token
+  useEffect(() => {
+    const requestInterceptor = axios.interceptors.request.use(
+      (config) => {
+        // Add CSRF token to non-GET requests
+        if (csrfToken && config.method !== 'get') {
+          config.headers['X-CSRF-Token'] = csrfToken;
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+
+    const responseInterceptor = axios.interceptors.response.use(
+      (response) => response,
+      async (error) => {
+        // If CSRF token is invalid, refresh it
+        if (error.response?.status === 403 && error.response?.data?.code === 'EBADCSRFTOKEN') {
+          await obtenerCSRFToken();
+          // Retry the original request
+          const originalRequest = error.config;
+          originalRequest.headers['X-CSRF-Token'] = csrfToken;
+          return axios.request(originalRequest);
+        }
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      axios.interceptors.request.eject(requestInterceptor);
+      axios.interceptors.response.eject(responseInterceptor);
+    };
+  }, [csrfToken]);
+
   useEffect(() => {
     verificarSesion();
+    obtenerCSRFToken();
   }, []);
 
   useEffect(() => {
-    // Guardar el nombre de usuario en el localStorage
     if (nombreUsuario) {
       localStorage.setItem('nombreUsuario', JSON.stringify(nombreUsuario));
     }
   }, [nombreUsuario]);
 
+  const obtenerCSRFToken = async () => {
+    try {
+      const respuesta = await axios.get(`${API_URL}/api/csrf-token`, {
+        headers: { 'x-api-key': API_KEY },
+        withCredentials: true,
+      });
+      console.log(respuesta)
+      setCsrfToken(respuesta.data.csrfToken);
+    } catch (error) {
+      console.error('Error al obtener token CSRF:', error);
+    }
+  };
+
   const resetearTema = () => {
-    // Obtener el tema actual del localStorage
     const temaActual = localStorage.getItem('tema');
-
-    // Si el tema actual es oscuro, cambiarlo a claro
     if (temaActual && JSON.parse(temaActual) === 'dark') {
       toggleColorMode();
     }
-
-    // Borrar el tema del localStorage
     localStorage.removeItem('tema');
   };
 
   const cerrarSesion = async () => {
     const resultado = await Swal.fire({
       title: '¿Estás seguro que quieres cerrar sesión?',
-
       showCancelButton: true,
       confirmButtonColor: 'rgba(24, 50, 165, 1)',
       cancelButtonColor: '#c62828',
@@ -69,6 +110,7 @@ export const AuthProvider = ({ children }) => {
       console.error('Error al cerrar sesión:', error);
     } finally {
       setUsuario(null);
+      setCsrfToken(null);
     }
   };
 
@@ -87,18 +129,20 @@ export const AuthProvider = ({ children }) => {
   };
 
   return (
-    <AuthContext.Provider value={{ 
-      usuario, 
-      setUsuario, 
+    <AuthContext.Provider value={{
+      usuario,
+      setUsuario,
       nombreUsuario,
       setNombreUsuario,
-      cargando, 
-      cerrarSesion, 
+      cargando,
+      cerrarSesion,
       verificarSesion,
+      csrfToken,
+      obtenerCSRFToken
     }}>
       {children}
     </AuthContext.Provider>
   );
 };
 
-export const useAuth = () => useContext(AuthContext);
+export const useAuth = () => useContext(AuthContext);
\ No newline at end of file

From 1d368a1eb7d3fff833ed72102f199864e7b5a00c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 04:26:34 -0600
Subject: [PATCH 111/160] feat: Lista de transferencia

---
 .../Moleculas/SetProductosEditable.jsx        | 522 +++++++++++-------
 .../SetsProductos/ListaSetsProductos.jsx      |  11 +-
 2 files changed, 318 insertions(+), 215 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index c1e732f3..391932eb 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -1,7 +1,6 @@
 // RF44 - Actualiza Set de Productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
 
-// RF44 - Actualiza Set de Productos
-import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import CampoTexto from '@Atomos/CampoTexto';
 import Texto from '@Atomos/Texto';
@@ -22,189 +21,245 @@ import {
   Switch,
   FormControlLabel,
 } from '@mui/material';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
-import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import {
+  KeyboardArrowRight,
+  KeyboardArrowLeft,
+  KeyboardDoubleArrowRight,
+  KeyboardDoubleArrowLeft,
+} from '@mui/icons-material';
 
+// Constantes
 const LIMITE_NOMBRE = 50;
-const LIMITE_NOMBRE_VISIBLE = 50;
 const LIMITE_DESCRIPCION = 150;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 const SetProductosEditable = ({
-  nombre: nombreInicial,
-  //nombreVisible: nombreVisibleInicial,
-  descripcion: descripcionInicial,
+  nombre: nombreInicial = '',
+  descripcion: descripcionInicial = '',
   activo: activoInicial = true,
-  productos: productosInicial,
+  productos: productosInicial = [],
   onFormDataChange,
 }) => {
   const { usuario } = useAuth();
-  const referenciaFormData = useRef(null);
-  const clienteSeleccionado = usuario?.clienteSeleccionado;
+  const formDataRef = useRef(null);
 
-  const [nombre, setNombre] = useState(nombreInicial || '');
-  //const [nombreVisible, setNombreVisible] = useState(nombreVisibleInicial || '');
-  const [descripcion, setDescripcion] = useState(descripcionInicial || '');
+  // Estados
+  const [nombre, setNombre] = useState(nombreInicial);
   const [activo, setActivo] = useState(activoInicial);
+  const [descripcion, setDescripcion] = useState(descripcionInicial);
   const [todosProductos, setTodosProductos] = useState([]);
-  const [productosDerecha, setProductosDerecha] = useState(productosInicial || []);
-  const [productosSeleccionadosIzquierda, setSeleccionadosIzquierda] = useState([]);
-  const [productosSeleccionadosDerecha, setSeleccionadosDerecha] = useState([]);
-  const [errores, setErrores] = useState({ nombre: false, descripcion: false });
-
-  const cargarProductos = useCallback(async () => {
-    try {
-      const prods = await obtenerProductos(clienteSeleccionado);
-      setTodosProductos(prods);
-    } catch (error) {
-      console.error('Error al cargar productos:', error);
-    }
-  }, [clienteSeleccionado]);
+  const [productosSeleccionados, setProductosSeleccionados] = useState([]);
+  const [productosAsignados, setProductosAsignados] = useState(productosInicial);
 
+  const [loading, setLoading] = useState(true);
+  const [errores, setErrores] = useState({
+    nombre: false,
+    descripcion: false,
+  });
+
+  // Obtener productos del servidor
   useEffect(() => {
+    const cargarProductos = async () => {
+      try {
+        const productos = await obtenerProductos(usuario.clienteSeleccionado);
+        setTodosProductos(productos);
+        setLoading(false);
+      } catch (error) {
+        console.error('Error al cargar productos:', error);
+        setLoading(false);
+      }
+    };
+
     cargarProductos();
-  }, [cargarProductos]);
+  }, [usuario.clienteSeleccionado]);
 
-  const productosIzquierda = useMemo(() => {
+  // Productos disponibles (no asignados)
+  const productosDisponibles = useMemo(() => {
     return todosProductos
-      .filter((p) => !productosDerecha.some((pd) => pd.id === p.id))
+      .filter((p) => !productosAsignados.some((pa) => pa.id === p.id))
       .sort((a, b) => (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre));
-  }, [todosProductos, productosDerecha]);
-
-  const manejarSeleccion = (id, lado) => {
-    const producto = todosProductos.find((p) => p.id === id);
-    if (!producto) return; // Previene errores si no se encuentra el producto
-
-    const esIzquierda = lado === 'izquierda';
-    const seleccionados = esIzquierda
-      ? productosSeleccionadosIzquierda
-      : productosSeleccionadosDerecha;
-    const setSeleccionados = esIzquierda ? setSeleccionadosIzquierda : setSeleccionadosDerecha;
-
-    const yaEsta = seleccionados.some((p) => p.id === id);
-    const nuevoEstado = yaEsta
-      ? seleccionados.filter((p) => p.id !== id)
-      : [...seleccionados, producto];
-
-    setSeleccionados(nuevoEstado);
-  };
-
-  const transferir = () => {
-    const nuevos = [...productosDerecha, ...productosSeleccionadosIzquierda];
-    nuevos.sort((a, b) =>
-      (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
-    );
-    setProductosDerecha(nuevos);
-    setSeleccionadosIzquierda([]);
-  };
+  }, [todosProductos, productosAsignados]);
 
-  const quitar = () => {
-    setProductosDerecha((prev) =>
-      prev.filter((p) => !productosSeleccionadosDerecha.find((s) => s.id === p.id))
-    );
-    setSeleccionadosDerecha([]);
-  };
-
-  // Mover todos los productos disponibles a la derecha
-  const transferirTodos = () => {
-    const nuevos = [...productosDerecha, ...productosIzquierda];
-    nuevos.sort((a, b) =>
-      (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
-    );
-    setProductosDerecha(nuevos);
-    setSeleccionadosIzquierda([]);
-  };
-
-  // Mover todos los productos seleccionados a la izquierda (quitar todos)
-  const quitarTodos = () => {
-    setProductosDerecha([]); // elimina todos los productos de la derecha
-    setSeleccionadosDerecha([]);
-  };
+  // Validación de campos
+  const validarCampos = useCallback(() => {
+    const nuevosErrores = {
+      nombre: nombre.trim() === '',
+      descripcion: descripcion.trim() === '',
+    };
+    setErrores(nuevosErrores);
+    return !nuevosErrores.nombre && !nuevosErrores.descripcion;
+  }, [nombre, descripcion]);
 
+  // Actualizar datos del formulario
   useEffect(() => {
-    const nombreVacio = nombre.trim() === '';
-    //const nombreVisibleVacio = nombreVisible.trim() === '';
-    const descripcionVacia = descripcion.trim() === '';
-    const esValido = !nombreVacio && !descripcionVacia;
-    setErrores({ nombre: nombreVacio, descripcion: descripcionVacia });
+    if (loading) return;
 
     const formData = {
       nombre: nombre.trim(),
-      //nombreVisible: nombreVisibleVacio,
-      descripcion: descripcion.trim(),
       activo,
-      productos: productosDerecha.map((p) => p.id),
-      esValido,
+      descripcion: descripcion.trim(),
+      productos: productosAsignados.map((p) => p.id),
+      esValido: validarCampos(),
     };
 
-    const current = JSON.stringify(formData);
-    if (current !== JSON.stringify(referenciaFormData.current)) {
-      referenciaFormData.current = formData;
+    const formDataStr = JSON.stringify(formData);
+    if (formDataStr !== JSON.stringify(formDataRef.current)) {
+      formDataRef.current = formData;
       onFormDataChange?.(formData);
     }
-  }, [nombre, descripcion, activo, productosDerecha]);
-  //}, [nombre, nombreVisible, descripcion, activo, productosDerecha]);
+  }, [nombre, activo, descripcion, productosAsignados, loading, validarCampos, onFormDataChange]);
+
+  // Manejar selección de productos
+  const toggleSeleccionProducto = useCallback((producto) => {
+    setProductosSeleccionados((prev) =>
+      prev.some((p) => p.id === producto.id)
+        ? prev.filter((p) => p.id !== producto.id)
+        : [...prev, producto]
+    );
+  }, []);
+
+  // Transferir productos
+  const transferirSeleccionados = useCallback(() => {
+    const paraTransferir = productosSeleccionados.filter((p) =>
+      productosDisponibles.some((pd) => pd.id === p.id)
+    );
+
+    setProductosAsignados((prev) =>
+      [...prev, ...paraTransferir].sort((a, b) =>
+        (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
+      )
+    );
+    setProductosSeleccionados((prev) =>
+      prev.filter((p) => !paraTransferir.some((pt) => pt.id === p.id))
+    );
+  }, [productosSeleccionados, productosDisponibles]);
+
+  const quitarSeleccionados = useCallback(() => {
+    const paraQuitar = productosSeleccionados.filter((p) =>
+      productosAsignados.some((pa) => pa.id === p.id)
+    );
+
+    setProductosAsignados((prev) => prev.filter((p) => !paraQuitar.some((pq) => pq.id === p.id)));
+    setProductosSeleccionados((prev) =>
+      prev.filter((p) => !paraQuitar.some((pq) => pq.id === p.id))
+    );
+  }, [productosSeleccionados, productosAsignados]);
+
+  const transferirTodos = useCallback(() => {
+    setProductosAsignados((prev) =>
+      [...prev, ...productosDisponibles].sort((a, b) =>
+        (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
+      )
+    );
+    setProductosSeleccionados((prev) =>
+      prev.filter((p) => !productosDisponibles.some((pd) => pd.id === p.id))
+    );
+  }, [productosDisponibles]);
+
+  const quitarTodos = useCallback(() => {
+    setProductosAsignados([]);
+    setProductosSeleccionados((prev) =>
+      prev.filter((p) => !productosAsignados.some((pa) => pa.id === p.id))
+    );
+  }, [productosAsignados]);
 
-  const renderLista = (titulo, items, lado) => {
-    const seleccionados =
-      lado === 'izquierda' ? productosSeleccionadosIzquierda : productosSeleccionadosDerecha;
+  // Seleccionar/deseleccionar todos
+  const toggleSeleccionTodos = useCallback(
+    (productos, esDisponibles) => {
+      const todosSeleccionados = productos.every((p) =>
+        productosSeleccionados.some((ps) => ps.id === p.id)
+      );
 
-    const manejarSeleccionTodos = (e) => {
-      const esSeleccionarTodo = e.target.checked;
-      if (lado === 'izquierda') {
-        setSeleccionadosIzquierda(esSeleccionarTodo ? [...items] : []);
+      if (todosSeleccionados) {
+        setProductosSeleccionados((prev) =>
+          prev.filter((p) => !productos.some((prod) => prod.id === p.id))
+        );
       } else {
-        setSeleccionadosDerecha(esSeleccionarTodo ? [...items] : []);
+        setProductosSeleccionados((prev) => [
+          ...prev,
+          ...productos.filter(
+            (p) =>
+              !prev.some((ps) => ps.id === p.id) &&
+              (esDisponibles
+                ? !productosAsignados.some((pa) => pa.id === p.id)
+                : productosAsignados.some((pa) => pa.id === p.id))
+          ),
+        ]);
       }
-    };
+    },
+    [productosSeleccionados, productosAsignados]
+  );
 
-    const estaTodoSeleccionado = seleccionados.length === items.length && items.length !== 0;
-    const estaIndeterminado = seleccionados.length > 0 && seleccionados.length < items.length;
-
-    const tituloFinal = lado === 'izquierda' ? 'Productos Disponibles' : 'Productos Seleccionados';
-    const subheader = `${seleccionados.length}/${items.length} seleccionados`;
-
-    return (
-      <Card>
-        <CardHeader
-          avatar={
-            <Checkbox
-              onChange={manejarSeleccionTodos}
-              checked={estaTodoSeleccionado}
-              indeterminate={estaIndeterminado}
-              disabled={items.length === 0}
-              inputProps={{
-                'aria-label': 'seleccionar todos los elementos',
-              }}
-            />
-          }
-          title={tituloFinal}
-          subheader={subheader}
-          sx={{ px: 2, py: 1 }}
-          titleTypographyProps={{ variant: 'subtitle1' }}
-          subheaderTypographyProps={{ variant: 'caption' }}
-        />
-        <Divider />
-        <List sx={{ width: 350, height: 300, overflow: 'auto' }}>
-          {items.map((item) => (
-            <ListItemButton key={item.id} onClick={() => manejarSeleccion(item.id, lado)}>
-              <ListItemIcon>
-                <Checkbox checked={seleccionados.some((s) => s.id === item.id)} />
-              </ListItemIcon>
-              <ListItemText primary={item.nombreProducto || item.nombre} />
-            </ListItemButton>
-          ))}
-        </List>
-      </Card>
-    );
-  };
+  // Componente de lista de productos
+  const ListaProductos = useCallback(
+    ({ titulo, productos, esDisponibles }) => {
+      const seleccionadosEnLista = productos.filter((p) =>
+        productosSeleccionados.some((ps) => ps.id === p.id)
+      ).length;
+
+      const todosSeleccionados = productos.length > 0 && seleccionadosEnLista === productos.length;
+      const algunosSeleccionados =
+        seleccionadosEnLista > 0 && seleccionadosEnLista < productos.length;
+
+      return (
+        <Card>
+          <CardHeader
+            avatar={
+              <Checkbox
+                checked={todosSeleccionados}
+                indeterminate={algunosSeleccionados}
+                onChange={() => toggleSeleccionTodos(productos, esDisponibles)}
+                disabled={productos.length === 0}
+                inputProps={{ 'aria-label': `Seleccionar todos ${titulo}` }}
+              />
+            }
+            title={titulo}
+            subheader={`${seleccionadosEnLista}/${productos.length} seleccionados`}
+            sx={{ px: 2, py: 1 }}
+          />
+          <Divider />
+          <List sx={{ width: 350, height: 300, overflow: 'auto' }}>
+            {productos.map((producto) => {
+              // Asegurarse de que el ID existe y es único
+              const itemKey = producto.id
+                ? `producto-${producto.id}`
+                : `producto-${Math.random().toString(36).substr(2, 9)}`;
+
+              return (
+                <ListItemButton
+                  key={itemKey}
+                  onClick={() => toggleSeleccionProducto(producto)}
+                  dense
+                >
+                  <ListItemIcon>
+                    <Checkbox
+                      checked={productosSeleccionados.some((p) => p.id === producto.id)}
+                      tabIndex={-1}
+                      disableRipple
+                    />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={producto.nombreProducto || producto.nombre || 'Sin nombre'}
+                    secondary={`ID: ${producto.id || 'N/A'}`}
+                  />
+                </ListItemButton>
+              );
+            })}
+          </List>
+        </Card>
+      );
+    },
+    [productosSeleccionados, toggleSeleccionProducto, toggleSeleccionTodos]
+  );
+
+  if (loading) {
+    return <Box sx={{ p: 3, textAlign: 'center' }}>Cargando productos...</Box>;
+  }
 
   return (
-    <Box sx={{ width: '100%', maxWidth: 1000, mx: 'auto' }}>
-      {/* Switch Activo/Inactivo */}
-      <Grid item xs={12} sx={{ mb: 2 }}>
+    <Box sx={{ maxWidth: 1000, mx: 'auto', p: 2 }}>
+      {/* Campos de texto */}
+      <Grid item xs={12}>
         <FormControlLabel
           control={
             <Switch
@@ -214,74 +269,111 @@ const SetProductosEditable = ({
             />
           }
           label={activo ? 'Activo' : 'Inactivo'}
+          sx={{ mb: 2 }}
         />
       </Grid>
-
-      {/* Nombre y Nombre Visible */}
-      <Grid container spacing={2}>
+      <Grid container spacing={3}>
         <Grid item xs={12} md={6}>
           <Texto variant='h6'>Nombre:</Texto>
-          <Box sx={{ width: '100%' }}>
-            <CampoTexto
-              value={nombre}
-              onChange={(e) => setNombre(e.target.value.slice(0, LIMITE_NOMBRE))}
-              error={errores.nombre}
-              helperText={
-                errores.nombre
-                  ? 'Campo obligatorio'
-                  : `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`
-              }
-              sx={{ mt: 1, mb: 2, mr: 4, width: '385px', overflow: 'auto' }}
-            />
-          </Box>
+          <CampoTexto
+            fullWidth
+            value={nombre}
+            onChange={(e) => setNombre(e.target.value.slice(0, LIMITE_NOMBRE))}
+            error={errores.nombre}
+            helperText={
+              errores.nombre
+                ? 'Campo obligatorio'
+                : `${nombre.length}/${LIMITE_NOMBRE} ${MENSAJE_LIMITE}`
+            }
+            inputProps={{ maxLength: LIMITE_NOMBRE }}
+            sx={{ mt: 1, width: '385px' }}
+          />
         </Grid>
-      </Grid>
 
-      {/* Descripción */}
-      <Grid item xs={12}>
-        <Texto variant='h6'>Descripción:</Texto>
-        <CampoTexto
-          fullWidth
-          value={descripcion}
-          onChange={(e) => setDescripcion(e.target.value.slice(0, LIMITE_DESCRIPCION))}
-          error={errores.descripcion}
-          helperText={
-            errores.descripcion
-              ? 'Campo obligatorio'
-              : `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
-          }
-          sx={{ mt: 1, mb: 2, width: '815px', overflow: 'auto' }}
-        />
-      </Grid>
+        <Grid item xs={12}>
+          <Texto variant='h6'>Descripción:</Texto>
+          <CampoTexto
+            fullWidth
+            multiline
+            rows={3}
+            value={descripcion}
+            onChange={(e) => setDescripcion(e.target.value.slice(0, LIMITE_DESCRIPCION))}
+            error={errores.descripcion}
+            helperText={
+              errores.descripcion
+                ? 'Campo obligatorio'
+                : `${descripcion.length}/${LIMITE_DESCRIPCION} ${MENSAJE_LIMITE}`
+            }
+            inputProps={{ maxLength: LIMITE_DESCRIPCION }}
+            sx={{ mt: 1, width: '385px' }}
+          />
+        </Grid>
 
-      {/* Productos */}
-      <Grid item xs={12}>
-        <Texto variant='h6'>Productos:</Texto>
-        <Grid
-          container
-          spacing={2}
-          alignItems='center'
-          justifyContent='center'
-          sx={{ mb: 5 }} // Espacio extra debajo de la tabla de productos
-        >
-          <Grid item>{renderLista('Disponibles', productosIzquierda, 'izquierda')}</Grid>
-          <Grid item>
-            <Grid container direction='column' spacing={1}>
-              <Button onClick={transferirTodos} disabled={!productosIzquierda.length}>
-                <KeyboardDoubleArrowRightIcon />
-              </Button>
-              <Button onClick={transferir} disabled={!productosSeleccionadosIzquierda.length}>
-                <KeyboardArrowRightIcon />
-              </Button>
-              <Button onClick={quitar} disabled={!productosSeleccionadosDerecha.length}>
-                <KeyboardArrowLeftIcon />
-              </Button>
-              <Button onClick={quitarTodos} disabled={!productosDerecha.length}>
-                <KeyboardDoubleArrowLeftIcon />
-              </Button>
+        {/* Selector de productos */}
+        <Grid item xs={12}>
+          <Texto variant='h6'>Productos:</Texto>
+          <Grid container spacing={2} justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
+            <Grid item>
+              <ListaProductos
+                titulo='Disponibles'
+                productos={productosDisponibles}
+                esDisponibles={true}
+              />
+            </Grid>
+
+            <Grid item>
+              <Grid container direction='column' alignItems='center' spacing={1}>
+                <Button
+                  variant='outlined'
+                  size='small'
+                  onClick={transferirTodos}
+                  disabled={productosDisponibles.length === 0}
+                  aria-label='Mover todos a seleccionados'
+                  startIcon={<KeyboardDoubleArrowRight />}
+                ></Button>
+                <Button
+                  variant='outlined'
+                  size='small'
+                  onClick={transferirSeleccionados}
+                  disabled={
+                    productosSeleccionados.filter((p) =>
+                      productosDisponibles.some((pd) => pd.id === p.id)
+                    ).length === 0
+                  }
+                  aria-label='Mover seleccionados a seleccionados'
+                  startIcon={<KeyboardArrowRight />}
+                ></Button>
+                <Button
+                  variant='outlined'
+                  size='small'
+                  onClick={quitarSeleccionados}
+                  disabled={
+                    productosSeleccionados.filter((p) =>
+                      productosAsignados.some((pa) => pa.id === p.id)
+                    ).length === 0
+                  }
+                  aria-label='Quitar seleccionados'
+                  startIcon={<KeyboardArrowLeft />}
+                ></Button>
+                <Button
+                  variant='outlined'
+                  size='small'
+                  onClick={quitarTodos}
+                  disabled={productosAsignados.length === 0}
+                  aria-label='Quitar todos'
+                  startIcon={<KeyboardDoubleArrowLeft />}
+                ></Button>
+              </Grid>
+            </Grid>
+
+            <Grid item>
+              <ListaProductos
+                titulo='Seleccionados'
+                productos={productosAsignados}
+                esDisponibles={false}
+              />
             </Grid>
           </Grid>
-          <Grid item>{renderLista('Seleccionados', productosDerecha, 'derecha')}</Grid>
         </Grid>
       </Grid>
     </Box>
@@ -290,11 +382,21 @@ const SetProductosEditable = ({
 
 SetProductosEditable.propTypes = {
   nombre: PropTypes.string,
-  //nombreVisible: PropTypes.string,
   descripcion: PropTypes.string,
-  activo: PropTypes.bool,
-  productos: PropTypes.array,
+  productos: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      nombre: PropTypes.string,
+      nombreProducto: PropTypes.string,
+    })
+  ),
   onFormDataChange: PropTypes.func,
 };
 
+SetProductosEditable.defaultProps = {
+  nombre: '',
+  descripcion: '',
+  productos: [],
+};
+
 export default SetProductosEditable;
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index 190d564c..45ccb8c4 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -18,7 +18,7 @@ import { tokens } from '@SRC/theme';
 import { PERMISOS } from '@Utilidades/Constantes/permisos';
 import { useAuth } from '@Hooks/AuthProvider';
 import ModalCrearSetsProductos from '@Organismos/ModalCrearSetsProductos.jsx';
-import InfoSetProductosEditable from '@SRC/Vistas/Componentes/Moleculas/SetProductosEditable';
+import SetProductosEditable from '@SRC/Vistas/Componentes/Moleculas/SetProductosEditable';
 import { useActualizarSetsProductos } from '@Hooks/SetsProductos/useActualizarSetsProductos';
 
 const ListaSetsProductos = () => {
@@ -102,7 +102,6 @@ const ListaSetsProductos = () => {
     console.log('Datos que se enviarán para actualizar el set:', {
       idSetProducto: setSeleccionado.idSetProducto,
       nombre: formData.nombre,
-      //nombreVisible: formData.nombreVisible,
       descripcion: formData.descripcion,
       activo: formData.activo ? 1 : 0,
       productos: formData.productos,
@@ -112,7 +111,6 @@ const ListaSetsProductos = () => {
       await actualizarSet(
         setSeleccionado.idSetProducto,
         formData.nombre,
-        //formData.nombreVisible,
         formData.descripcion,
         formData.activo,
         formData.productos
@@ -295,6 +293,8 @@ const ListaSetsProductos = () => {
               color: 'error',
               backgroundColor: colores.altertex[1],
               onClick: () => {
+                console.log('productos:', setSeleccionado.productos);
+                console.log('idsProductos:', setSeleccionado.idsProductos);
                 setModalDetalleAbierto(false);
                 setAbrirModalEditar(true);
               },
@@ -312,6 +312,7 @@ const ListaSetsProductos = () => {
             nombre={''}
             descripcion={setSeleccionado.descripcion}
             productos={setSeleccionado.productos || []}
+            idsProductos={setSeleccionado?.idsProductos || []}
           />
         </ModalFlotante>
       )}
@@ -339,11 +340,11 @@ const ListaSetsProductos = () => {
             },
           ]}
         >
-          <InfoSetProductosEditable
+          <SetProductosEditable
             nombre={setSeleccionado?.nombre || ''}
-            //nombreVisible={setSeleccionado?.nombreVisible ?? ''}
             descripcion={setSeleccionado?.descripcion || ''}
             productos={setSeleccionado?.productos || []}
+            idsProductos={setSeleccionado?.idsProductos || []}
             activo={setSeleccionado?.activo ?? 1}
             onFormDataChange={handleFormDataChange}
           />

From cbf74d953d34f0fe546824e4510d6ca934ff0000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 05:23:30 -0600
Subject: [PATCH 112/160] =?UTF-8?q?feat:=20Actualizaci=C3=B3n=20de=20sets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SetsProductos/RepositorioActualizarSetProductos.js         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
index 0f28dc99..83fc47e7 100644
--- a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
+++ b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
@@ -14,13 +14,14 @@ export class RepositorioActualizarSetProductos {
    *
    * @see [RF44] Actualizar set de productos - https://codeandco-wiki.netlify.app/docs/next/proyectos/textiles/documentacion/requisitos/RF44
    */
-  static async actualizarSetProductos(idSet, nombre, descripcion, productos) {
+  static async actualizarSetProductos(idSet, nombre, activo, descripcion, productos) {
     try {
       const respuesta = await axios.put(
         `${RUTAS_API.SETS_PRODUCTOS.ACTUALIZAR_SETS_PRODUCTO}`,
         {
           idSetProductos: idSet,
           nombre,
+          activo,
           descripcion,
           productos,
         },

From 37f866294ecafe58121d8f890c26e3c0281da882 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 06:14:14 -0600
Subject: [PATCH 113/160] feat: Desplegar los productos iniciales para
 actualizar set

---
 .../Modelos/SetsProductos/SetProductos.js        |  3 ++-
 .../RepositorioActualizarSetProductos.js         |  2 +-
 .../Moleculas/SetProductosEditable.jsx           | 16 +++++++++++++++-
 .../SetsProductos/useConsultarSetsProductos.js   |  1 -
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/Dominio/Modelos/SetsProductos/SetProductos.js b/src/Dominio/Modelos/SetsProductos/SetProductos.js
index b36cd24a..5335ac36 100644
--- a/src/Dominio/Modelos/SetsProductos/SetProductos.js
+++ b/src/Dominio/Modelos/SetsProductos/SetProductos.js
@@ -7,12 +7,13 @@
  */
 
 export class SetProductos {
-  constructor({ idSetProducto, nombre, descripcion, activo, productos, grupos }) {
+  constructor({ idSetProducto, nombre, descripcion, activo, productos, grupos, idsProductos }) {
     this.idSetProducto = idSetProducto;
     this.nombre = nombre;
     this.descripcion = descripcion;
     this.activo = activo;
     this.productos = productos;
     this.grupos = grupos;
+    this.idsProductos = idsProductos;
   }
 }
diff --git a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
index 83fc47e7..98c82c13 100644
--- a/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
+++ b/src/Dominio/Repositorios/SetsProductos/RepositorioActualizarSetProductos.js
@@ -19,7 +19,7 @@ export class RepositorioActualizarSetProductos {
       const respuesta = await axios.put(
         `${RUTAS_API.SETS_PRODUCTOS.ACTUALIZAR_SETS_PRODUCTO}`,
         {
-          idSetProductos: idSet,
+          idSetProducto: idSet,
           nombre,
           activo,
           descripcion,
diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index 391932eb..51320289 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -38,6 +38,7 @@ const SetProductosEditable = ({
   descripcion: descripcionInicial = '',
   activo: activoInicial = true,
   productos: productosInicial = [],
+  idsProductos = [],
   onFormDataChange,
 }) => {
   const { usuario } = useAuth();
@@ -49,7 +50,10 @@ const SetProductosEditable = ({
   const [descripcion, setDescripcion] = useState(descripcionInicial);
   const [todosProductos, setTodosProductos] = useState([]);
   const [productosSeleccionados, setProductosSeleccionados] = useState([]);
-  const [productosAsignados, setProductosAsignados] = useState(productosInicial);
+  //const [productosAsignados, setProductosAsignados] = useState(productosInicial);
+  const [productosAsignados, setProductosAsignados] = useState(() => {
+    return productosInicial.filter((p) => p && p.id); // Filtra productos válidos
+  });
 
   const [loading, setLoading] = useState(true);
   const [errores, setErrores] = useState({
@@ -73,6 +77,16 @@ const SetProductosEditable = ({
     cargarProductos();
   }, [usuario.clienteSeleccionado]);
 
+  // Sincronizar productos asignados con los IDs recibidos
+  useEffect(() => {
+    if (!loading && idsProductos && idsProductos.length > 0 && todosProductos.length > 0) {
+      const productosAsignadosIniciales = todosProductos.filter((p) => idsProductos.includes(p.id));
+
+      console.log('Productos asignados iniciales:', productosAsignadosIniciales);
+      setProductosAsignados(productosAsignadosIniciales);
+    }
+  }, [loading, idsProductos, todosProductos]);
+
   // Productos disponibles (no asignados)
   const productosDisponibles = useMemo(() => {
     return todosProductos
diff --git a/src/hooks/SetsProductos/useConsultarSetsProductos.js b/src/hooks/SetsProductos/useConsultarSetsProductos.js
index 0bbec6ab..31047e0d 100644
--- a/src/hooks/SetsProductos/useConsultarSetsProductos.js
+++ b/src/hooks/SetsProductos/useConsultarSetsProductos.js
@@ -32,7 +32,6 @@ export function useConsultarSetsProductos() {
 
       try {
         const { setsDeProductos, mensaje } = await RepositorioConsultarSetsProductos.obtenerLista();
-
         setSetsProductos(setsDeProductos);
         setMensaje(mensaje);
       } catch (err) {

From 9cee82e74e5f9be9ff12798d87f0adf599c854ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 06:45:01 -0600
Subject: [PATCH 114/160] fix: Corregir errores de lint

---
 .../Moleculas/SetProductosEditable.jsx        | 108 ++++++++----------
 .../SetsProductos/ListaSetsProductos.jsx      |  14 +--
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx | 103 ++++++++---------
 .../useActualizarSetsProductos.js             |  10 +-
 4 files changed, 106 insertions(+), 129 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index 51320289..21ae0272 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -52,7 +52,7 @@ const SetProductosEditable = ({
   const [productosSeleccionados, setProductosSeleccionados] = useState([]);
   //const [productosAsignados, setProductosAsignados] = useState(productosInicial);
   const [productosAsignados, setProductosAsignados] = useState(() => {
-    return productosInicial.filter((p) => p && p.id); // Filtra productos válidos
+    return productosInicial.filter((pro) => pro && pro.id); // Filtra productos válidos
   });
 
   const [loading, setLoading] = useState(true);
@@ -80,9 +80,9 @@ const SetProductosEditable = ({
   // Sincronizar productos asignados con los IDs recibidos
   useEffect(() => {
     if (!loading && idsProductos && idsProductos.length > 0 && todosProductos.length > 0) {
-      const productosAsignadosIniciales = todosProductos.filter((p) => idsProductos.includes(p.id));
+      const productosAsignadosIniciales = todosProductos.filter((pro) =>
+        idsProductos.includes(pro.id));
 
-      console.log('Productos asignados iniciales:', productosAsignadosIniciales);
       setProductosAsignados(productosAsignadosIniciales);
     }
   }, [loading, idsProductos, todosProductos]);
@@ -90,8 +90,9 @@ const SetProductosEditable = ({
   // Productos disponibles (no asignados)
   const productosDisponibles = useMemo(() => {
     return todosProductos
-      .filter((p) => !productosAsignados.some((pa) => pa.id === p.id))
-      .sort((a, b) => (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre));
+      .filter((pro) => !productosAsignados.some((pa) => pa.id === pro.id))
+      .sort((prodA, prodB) =>
+        (prodA.nombreProducto || prodA.nombre).localeCompare(prodB.nombreProducto || prodB.nombre));
   }, [todosProductos, productosAsignados]);
 
   // Validación de campos
@@ -112,7 +113,7 @@ const SetProductosEditable = ({
       nombre: nombre.trim(),
       activo,
       descripcion: descripcion.trim(),
-      productos: productosAsignados.map((p) => p.id),
+      productos: productosAsignados.map((pro) => pro.id),
       esValido: validarCampos(),
     };
 
@@ -126,77 +127,65 @@ const SetProductosEditable = ({
   // Manejar selección de productos
   const toggleSeleccionProducto = useCallback((producto) => {
     setProductosSeleccionados((prev) =>
-      prev.some((p) => p.id === producto.id)
-        ? prev.filter((p) => p.id !== producto.id)
-        : [...prev, producto]
-    );
+      prev.some((pro) => pro.id === producto.id)
+        ? prev.filter((pro) => pro.id !== producto.id)
+        : [...prev, producto]);
   }, []);
 
   // Transferir productos
   const transferirSeleccionados = useCallback(() => {
-    const paraTransferir = productosSeleccionados.filter((p) =>
-      productosDisponibles.some((pd) => pd.id === p.id)
-    );
+    const paraTransferir = productosSeleccionados.filter((pro) =>
+      productosDisponibles.some((pd) => pd.id === pro.id));
 
     setProductosAsignados((prev) =>
-      [...prev, ...paraTransferir].sort((a, b) =>
-        (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
-      )
-    );
+      [...prev, ...paraTransferir].sort((prodA, prodB) =>
+        (prodA.nombreProducto || prodA.nombre).localeCompare(prodB.nombreProducto || prodB.nombre)));
     setProductosSeleccionados((prev) =>
-      prev.filter((p) => !paraTransferir.some((pt) => pt.id === p.id))
-    );
+      prev.filter((pro) => !paraTransferir.some((pt) => pt.id === pro.id)));
   }, [productosSeleccionados, productosDisponibles]);
 
   const quitarSeleccionados = useCallback(() => {
-    const paraQuitar = productosSeleccionados.filter((p) =>
-      productosAsignados.some((pa) => pa.id === p.id)
-    );
+    const paraQuitar = productosSeleccionados.filter((pro) =>
+      productosAsignados.some((pa) => pa.id === pro.id));
 
-    setProductosAsignados((prev) => prev.filter((p) => !paraQuitar.some((pq) => pq.id === p.id)));
+    setProductosAsignados((prev) =>
+      prev.filter((pro) => !paraQuitar.some((pq) => pq.id === pro.id)));
     setProductosSeleccionados((prev) =>
-      prev.filter((p) => !paraQuitar.some((pq) => pq.id === p.id))
-    );
+      prev.filter((pro) => !paraQuitar.some((pq) => pq.id === pro.id)));
   }, [productosSeleccionados, productosAsignados]);
 
   const transferirTodos = useCallback(() => {
     setProductosAsignados((prev) =>
-      [...prev, ...productosDisponibles].sort((a, b) =>
-        (a.nombreProducto || a.nombre).localeCompare(b.nombreProducto || b.nombre)
-      )
-    );
+      [...prev, ...productosDisponibles].sort((prodA, prodB) =>
+        (prodA.nombreProducto || prodA.nombre).localeCompare(prodB.nombreProducto || prodB.nombre)));
     setProductosSeleccionados((prev) =>
-      prev.filter((p) => !productosDisponibles.some((pd) => pd.id === p.id))
-    );
+      prev.filter((pro) => !productosDisponibles.some((pd) => pd.id === pro.id)));
   }, [productosDisponibles]);
 
   const quitarTodos = useCallback(() => {
     setProductosAsignados([]);
     setProductosSeleccionados((prev) =>
-      prev.filter((p) => !productosAsignados.some((pa) => pa.id === p.id))
-    );
+      prev.filter((pro) => !productosAsignados.some((pa) => pa.id === pro.id)));
   }, [productosAsignados]);
 
   // Seleccionar/deseleccionar todos
   const toggleSeleccionTodos = useCallback(
     (productos, esDisponibles) => {
-      const todosSeleccionados = productos.every((p) =>
-        productosSeleccionados.some((ps) => ps.id === p.id)
-      );
+      const todosSeleccionados = productos.every((pro) =>
+        productosSeleccionados.some((ps) => ps.id === pro.id));
 
       if (todosSeleccionados) {
         setProductosSeleccionados((prev) =>
-          prev.filter((p) => !productos.some((prod) => prod.id === p.id))
-        );
+          prev.filter((pro) => !productos.some((prod) => prod.id === pro.id)));
       } else {
         setProductosSeleccionados((prev) => [
           ...prev,
           ...productos.filter(
-            (p) =>
-              !prev.some((ps) => ps.id === p.id) &&
-              (esDisponibles
-                ? !productosAsignados.some((pa) => pa.id === p.id)
-                : productosAsignados.some((pa) => pa.id === p.id))
+            (pro) =>
+              !prev.some((ps) => ps.id === pro.id)
+              && (esDisponibles
+                ? !productosAsignados.some((pa) => pa.id === pro.id)
+                : productosAsignados.some((pa) => pa.id === pro.id))
           ),
         ]);
       }
@@ -207,13 +196,12 @@ const SetProductosEditable = ({
   // Componente de lista de productos
   const ListaProductos = useCallback(
     ({ titulo, productos, esDisponibles }) => {
-      const seleccionadosEnLista = productos.filter((p) =>
-        productosSeleccionados.some((ps) => ps.id === p.id)
-      ).length;
+      const seleccionadosEnLista = productos.filter((pro) =>
+        productosSeleccionados.some((ps) => ps.id === pro.id)).length;
 
       const todosSeleccionados = productos.length > 0 && seleccionadosEnLista === productos.length;
-      const algunosSeleccionados =
-        seleccionadosEnLista > 0 && seleccionadosEnLista < productos.length;
+      const algunosSeleccionados
+        = seleccionadosEnLista > 0 && seleccionadosEnLista < productos.length;
 
       return (
         <Card>
@@ -247,7 +235,7 @@ const SetProductosEditable = ({
                 >
                   <ListItemIcon>
                     <Checkbox
-                      checked={productosSeleccionados.some((p) => p.id === producto.id)}
+                      checked={productosSeleccionados.some((pro) => pro.id === producto.id)}
                       tabIndex={-1}
                       disableRipple
                     />
@@ -267,18 +255,18 @@ const SetProductosEditable = ({
   );
 
   if (loading) {
-    return <Box sx={{ p: 3, textAlign: 'center' }}>Cargando productos...</Box>;
+    return <Box sx={{ pro: 3, textAlign: 'center' }}>Cargando productos...</Box>;
   }
 
   return (
-    <Box sx={{ maxWidth: 1000, mx: 'auto', p: 2 }}>
+    <Box sx={{ maxWidth: 1000, mx: 'auto', pro: 2 }}>
       {/* Campos de texto */}
       <Grid item xs={12}>
         <FormControlLabel
           control={
             <Switch
               checked={activo}
-              onChange={(e) => setActivo(e.target.checked)}
+              onChange={(evento) => setActivo(evento.target.checked)}
               color='primary'
             />
           }
@@ -292,7 +280,7 @@ const SetProductosEditable = ({
           <CampoTexto
             fullWidth
             value={nombre}
-            onChange={(e) => setNombre(e.target.value.slice(0, LIMITE_NOMBRE))}
+            onChange={(evento) => setNombre(evento.target.value.slice(0, LIMITE_NOMBRE))}
             error={errores.nombre}
             helperText={
               errores.nombre
@@ -311,7 +299,7 @@ const SetProductosEditable = ({
             multiline
             rows={3}
             value={descripcion}
-            onChange={(e) => setDescripcion(e.target.value.slice(0, LIMITE_DESCRIPCION))}
+            onChange={(evento) => setDescripcion(evento.target.value.slice(0, LIMITE_DESCRIPCION))}
             error={errores.descripcion}
             helperText={
               errores.descripcion
@@ -350,9 +338,8 @@ const SetProductosEditable = ({
                   size='small'
                   onClick={transferirSeleccionados}
                   disabled={
-                    productosSeleccionados.filter((p) =>
-                      productosDisponibles.some((pd) => pd.id === p.id)
-                    ).length === 0
+                    productosSeleccionados.filter((pro) =>
+                      productosDisponibles.some((pd) => pd.id === pro.id)).length === 0
                   }
                   aria-label='Mover seleccionados a seleccionados'
                   startIcon={<KeyboardArrowRight />}
@@ -362,9 +349,8 @@ const SetProductosEditable = ({
                   size='small'
                   onClick={quitarSeleccionados}
                   disabled={
-                    productosSeleccionados.filter((p) =>
-                      productosAsignados.some((pa) => pa.id === p.id)
-                    ).length === 0
+                    productosSeleccionados.filter((pro) =>
+                      productosAsignados.some((pa) => pa.id === pro.id)).length === 0
                   }
                   aria-label='Quitar seleccionados'
                   startIcon={<KeyboardArrowLeft />}
@@ -380,7 +366,7 @@ const SetProductosEditable = ({
               </Grid>
             </Grid>
 
-            <Grid item>
+            <Grid item sx={{ my: 2 }}>
               <ListaProductos
                 titulo='Seleccionados'
                 productos={productosAsignados}
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index 45ccb8c4..c6603891 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -25,8 +25,8 @@ const ListaSetsProductos = () => {
   const { setsDeProductos, cargando, error, recargar } = useConsultarSetsProductos();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los sets de productos seleccionados?';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los sets de productos seleccionados?';
 
   const [seleccionados, setSeleccionados] = useState([]);
   const [alerta, setAlerta] = useState(null);
@@ -98,14 +98,6 @@ const ListaSetsProductos = () => {
       });
       return;
     }
-    // Log para ver los datos que se enviarán
-    console.log('Datos que se enviarán para actualizar el set:', {
-      idSetProducto: setSeleccionado.idSetProducto,
-      nombre: formData.nombre,
-      descripcion: formData.descripcion,
-      activo: formData.activo ? 1 : 0,
-      productos: formData.productos,
-    });
 
     try {
       await actualizarSet(
@@ -293,8 +285,6 @@ const ListaSetsProductos = () => {
               color: 'error',
               backgroundColor: colores.altertex[1],
               onClick: () => {
-                console.log('productos:', setSeleccionado.productos);
-                console.log('idsProductos:', setSeleccionado.idsProductos);
                 setModalDetalleAbierto(false);
                 setAbrirModalEditar(true);
               },
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 521e0699..efcead6a 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -44,7 +44,7 @@ const ListaUsuarios = () => {
   const navigate = useNavigate();
   const [alerta, setAlerta] = useState(null);
   const { usuarios, cargando, error, recargar } = useConsultarListaUsuarios();
-  const { roles} = useConsultarRoles();
+  const { roles } = useConsultarRoles();
   const { usuario: usuarioAutenticado } = useAuth();
   const [modalCrearUsuarioAbierto, setModalCrearUsuarioAbierto] = useState(false);
   const [idUsuarioSeleccionado, setIdUsuarioSeleccionado] = useState(null);
@@ -55,10 +55,10 @@ const ListaUsuarios = () => {
     error: errorDetalle,
   } = useUsuarioId(modalDetalleAbierto ? idUsuarioSeleccionado : null);
 
-    const [modal2FAAbierto, setModal2FAAbierto] = useState(false);
-    const { qrCode, cargando: cargandoQR, error: errorQR, setQrCode } = useActivar2FA();
+  const [modal2FAAbierto, setModal2FAAbierto] = useState(false);
+  const { qrCode, cargando: cargandoQR, error: errorQR, setQrCode } = useActivar2FA();
 
-    /** const manejarActivar2FA = async () => {
+  /** const manejarActivar2FA = async () => {
       await activar2FA({
         idUsuario: usuarioAutenticado?.idUsuario,
         nombre: usuarioAutenticado?.nombre,
@@ -68,7 +68,7 @@ const ListaUsuarios = () => {
     };
     */
   const opcionesRol = roles.map((rol) => ({
-    value: rol.idRol, 
+    value: rol.idRol,
     label: rol.nombre,
   }));
 
@@ -85,21 +85,21 @@ const ListaUsuarios = () => {
     await cerrarSesion();
   };
   const { cerrarSesion } = useAuth();
-const {
-  usuariosAEliminar,
-  abrirPopUp,
-  abrirModal2FA,
-  error2FA,
-  cargando2FA,
-  manejarSeleccion,
-  manejarAbrirPopUp,
-  manejarCerrarPopUp,
-  eliminarUsuarios,
-  manejarVerificar2FA,
-  manejarCerrarModal2FA,
-  codigo2FA,          
-  setCodigo2FA 
-} = useEliminarUsuarios(setAlerta, recargar);
+  const {
+    usuariosAEliminar,
+    abrirPopUp,
+    abrirModal2FA,
+    error2FA,
+    cargando2FA,
+    manejarSeleccion,
+    manejarAbrirPopUp,
+    manejarCerrarPopUp,
+    eliminarUsuarios,
+    manejarVerificar2FA,
+    manejarCerrarModal2FA,
+    codigo2FA,
+    setCodigo2FA,
+  } = useEliminarUsuarios(setAlerta, recargar);
 
   useEffect(() => {}, [usuariosAEliminar]);
 
@@ -257,7 +257,8 @@ const {
       backgroundColor: colores.verde[1],
       disabled: !usuarioAutenticado?.permisos?.includes(PERMISOS.ACTIVAR_2FA_SUPERADMIN),
     },
-  */];
+  */
+  ];
 
   const redirigirATienda = () => {
     navigate(RUTAS.SISTEMA_TIENDA.BASE, { replace: true });
@@ -389,7 +390,7 @@ const {
                 color: 'primary',
                 backgroundColor: colores.altertex[1],
                 onClick: () => console.log('Editar usuario'),
-                disabled: true, 
+                disabled: true,
               },
               {
                 label: 'SALIR',
@@ -404,34 +405,34 @@ const {
               <p>Cargando usuario...</p>
             ) : usuario ? (
               <>
-              <InfoUsuario
-                modoEdicion={false}
-                cliente={
-                  usuario.clientes?.some((cliente) => cliente?.nombreCliente)
-                    ? usuario.clientes
-                        .filter((cliente) => cliente?.nombreCliente)
-                        .map((cliente) => cliente.nombreCliente)
-                        .join(', ')
-                    : 'Sin cliente asignado'
-                }
-                rol={obtenerIdRolPorNombre(usuario.rol)}
-                datosContacto={{
-                  email: usuario.correoElectronico,
-                  telefono: usuario.numeroTelefono,
-                  direccion: usuario.direccion,
-                }}
-                datosAdicionales={{
-                  nacimiento: new Date(usuario.fechaNacimiento).toLocaleDateString('es-MX'),
-                  genero: usuario.genero,
-                }}
-                estadoUsuario={{
-                  label: usuario.estatus === 1 ? 'Activo' : 'Inactivo',
-                  color: 'primary',
-                  shape: 'circular',
-                  backgroundColor: 'rgba(24, 50, 165, 1)',
-                }}
-                opcionesRol={opcionesRol}
-              />
+                <InfoUsuario
+                  modoEdicion={false}
+                  cliente={
+                    usuario.clientes?.some((cliente) => cliente?.nombreCliente)
+                      ? usuario.clientes
+                          .filter((cliente) => cliente?.nombreCliente)
+                          .map((cliente) => cliente.nombreCliente)
+                          .join(', ')
+                      : 'Sin cliente asignado'
+                  }
+                  rol={obtenerIdRolPorNombre(usuario.rol)}
+                  datosContacto={{
+                    email: usuario.correoElectronico,
+                    telefono: usuario.numeroTelefono,
+                    direccion: usuario.direccion,
+                  }}
+                  datosAdicionales={{
+                    nacimiento: new Date(usuario.fechaNacimiento).toLocaleDateString('es-MX'),
+                    genero: usuario.genero,
+                  }}
+                  estadoUsuario={{
+                    label: usuario.estatus === 1 ? 'Activo' : 'Inactivo',
+                    color: 'primary',
+                    shape: 'circular',
+                    backgroundColor: 'rgba(24, 50, 165, 1)',
+                  }}
+                  opcionesRol={opcionesRol}
+                />
               </>
             ) : (
               <p>No se encontró información del usuario.</p>
@@ -449,4 +450,4 @@ const {
   );
 };
 
-export default ListaUsuarios;
\ No newline at end of file
+export default ListaUsuarios;
diff --git a/src/hooks/SetsProductos/useActualizarSetsProductos.js b/src/hooks/SetsProductos/useActualizarSetsProductos.js
index e309b173..d620d583 100644
--- a/src/hooks/SetsProductos/useActualizarSetsProductos.js
+++ b/src/hooks/SetsProductos/useActualizarSetsProductos.js
@@ -36,11 +36,11 @@ export const useActualizarSetsProductos = () => {
     } catch (err) {
       setExito(false);
       setError(true);
-      const errorMessage =
-        err?.response?.data?.mensaje ||
-        err?.response?.data?.error ||
-        err?.message ||
-        'Ocurrió un error al actualizar el set de productos';
+      const errorMessage
+        = err?.response?.data?.mensaje
+        || err?.response?.data?.error
+        || err?.message
+        || 'Ocurrió un error al actualizar el set de productos';
 
       setMensaje(errorMessage);
       throw err;

From 0039bcf4c58e6b94036ae5f508895b85c4e2f56a Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 07:32:14 -0600
Subject: [PATCH 115/160] Prueba semi funcional de actualizar set de cuotas

---
 .../Cuotas/repositorioActualizarCuota.js      |  23 +
 .../repositorioObtenerOpcionesCuotas.js       |  27 +
 src/Utilidades/Constantes/rutasAPI.js         |   2 +
 .../Organismos/Cuotas/ModalEditarCuotas.jsx   | 519 ++++++++++++++++++
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx     |  60 +-
 src/hooks/Cuotas/useActualizarCuota.js        |  31 ++
 src/hooks/Cuotas/useObtenerOpcionesCuotas.js  |  48 ++
 7 files changed, 708 insertions(+), 2 deletions(-)
 create mode 100644 src/Dominio/Repositorios/Cuotas/repositorioActualizarCuota.js
 create mode 100644 src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
 create mode 100644 src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
 create mode 100644 src/hooks/Cuotas/useActualizarCuota.js
 create mode 100644 src/hooks/Cuotas/useObtenerOpcionesCuotas.js

diff --git a/src/Dominio/Repositorios/Cuotas/repositorioActualizarCuota.js b/src/Dominio/Repositorios/Cuotas/repositorioActualizarCuota.js
new file mode 100644
index 00000000..44152a2c
--- /dev/null
+++ b/src/Dominio/Repositorios/Cuotas/repositorioActualizarCuota.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarCuota {
+  static async actualizarSetCuotas(datosActualizacion) {
+    try {
+      const respuesta = await axios.put(
+        RUTAS_API.CUOTAS.ACTUALIZAR_SET_CUOTAS,
+        datosActualizacion,
+        {
+          headers: { 'x-api-key': API_KEY },
+          withCredentials: true,
+        }
+      );
+      return respuesta.data;
+    } catch (error) {
+      const mensaje = error.response?.data?.mensaje || 'Error al actualizar el set de cuotas.';
+      throw new Error(mensaje);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js b/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
new file mode 100644
index 00000000..c11d8138
--- /dev/null
+++ b/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
@@ -0,0 +1,27 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioObtenerOpcionesCuotas {
+  static async obtenerOpciones(idCliente) {
+    try {
+      console.log('🔍 Solicitando opciones para cliente:', idCliente);
+      
+      const respuesta = await axios.get(
+        `${RUTAS_API.CUOTAS.OBTENER_OPCIONES}?idCliente=${idCliente}`,
+        {
+          headers: { 'x-api-key': API_KEY },
+          withCredentials: true,
+        }
+      );
+      
+      console.log('🔍 Respuesta del backend - opciones:', respuesta.data);
+      return respuesta.data;
+    } catch (error) {
+      console.error('❌ Error en repositorio opciones:', error);
+      const mensaje = error.response?.data?.mensaje || 'Error al obtener opciones de productos.';
+      throw new Error(mensaje);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ec121f01..2a7effc6 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -82,6 +82,8 @@ export const RUTAS_API = {
     CONSULTAR_LISTA: `${BASE_CUOTAS}/consultar-lista`,
     ELIMINAR_SET_CUOTAS: `${BASE_CUOTAS}/eliminar-set-cuotas`,
     LEER_SET_CUOTAS: `${BASE_CUOTAS}/leer-set-cuotas`,
+    ACTUALIZAR_SET_CUOTAS: `${BASE_CUOTAS}/actualizar-set-cuotas`,
+    OBTENER_OPCIONES: `${BASE_CUOTAS}/obtener-opciones`,
   },
   ROLES: {
     BASE: BASE_ROLES,
diff --git a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
new file mode 100644
index 00000000..d436f414
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
@@ -0,0 +1,519 @@
+import { useState, useEffect } from 'react';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import CampoTexto from '@Atomos/CampoTexto';
+import { NumeroInput } from '@Atomos/NumeroInput';
+import Switch from '@Atomos/Switch';
+import Alerta from '@Moleculas/Alerta';
+import { useActualizarCuota } from '@Hooks/Cuotas/useActualizarCuota';
+import { useObtenerOpcionesCuotas } from '@Hooks/Cuotas/useObtenerOpcionesCuotas';
+import { 
+  Box, 
+  Typography, 
+  IconButton, 
+  Select, 
+  MenuItem, 
+  FormControl, 
+  InputLabel,
+  TextField
+} from '@mui/material';
+import { Delete as DeleteIcon, Add as AddIcon } from '@mui/icons-material';
+
+const ModalEditarCuotas = ({ 
+  open, 
+  cuotaOriginal, 
+  onClose, 
+  onActualizado, 
+  cargandoDetalle, 
+  errorDetalle 
+}) => {
+  const { actualizarCuota, cargando, exito, error, mensaje, setError } = useActualizarCuota();
+  const { opciones, cargando: cargandoOpciones } = useObtenerOpcionesCuotas();
+  
+  const [cuota, setCuota] = useState({
+    idCuotaSet: null,
+    nombre: '',
+    descripcion: '',
+    periodoRenovacion: 6,
+    renovacionHabilitada: false,
+    productos: []
+  });
+
+  const [alertaLocal, setAlertaLocal] = useState(null);
+
+  // 🔥 FUNCIÓN PARA CONVERTIR PRODUCTOS DEL BACKEND AL FORMATO DEL MODAL
+  const convertirProductosParaEdicion = (productosBackend, opcionesProductos) => {
+    console.log('🔍 convertirProductosParaEdicion - productos recibidos:', productosBackend);
+    console.log('🔍 convertirProductosParaEdicion - opciones disponibles:', opcionesProductos);
+    
+    if (!productosBackend || !Array.isArray(productosBackend)) {
+      return [];
+    }
+
+    return productosBackend.map((producto, index) => {
+      // Los productos vienen como objetos con 'valor', necesitamos buscar por nombre si está disponible
+      // Como no tenemos las opciones disponibles, creamos productos básicos
+      
+      console.log(`🔍 Procesando producto ${index}:`, producto);
+
+      return {
+        idProducto: '', // Lo dejaremos vacío hasta que las opciones se carguen
+        limite: producto.valor || producto.cuota_valor || 0,
+        limiteActual: producto.valor || producto.cuota_valor || 0,
+        nombreProducto: producto.nombre || producto.nombreComun || `Producto ${index + 1}`
+      };
+    });
+  };
+
+  // Efecto para cargar datos cuando se abre el modal (PRIMERA CARGA)
+  useEffect(() => {
+    if (cuotaOriginal && open) {
+      console.log('🔍 PRIMERA CARGA - Datos originales de la cuota:', cuotaOriginal);
+      console.log('🔍 PRIMERA CARGA - Opciones disponibles:', opciones);
+
+      // ✅ CORREGIDO: Usar idSetCuota (sin "s") como viene del backend
+      const idCuotaSet = cuotaOriginal.idCuotaSet || cuotaOriginal.idSetCuota;
+
+      // Cargar datos básicos inmediatamente
+      setCuota(prev => ({
+        ...prev,
+        idCuotaSet: idCuotaSet,
+        nombre: cuotaOriginal.nombre || '',
+        descripcion: cuotaOriginal.descripcion || '',
+        periodoRenovacion: cuotaOriginal.periodoRenovacion || 6,
+        renovacionHabilitada: cuotaOriginal.renovacionHabilitada || false,
+      }));
+
+      // Cargar productos inmediatamente, sin esperar opciones
+      if (cuotaOriginal.productos && Array.isArray(cuotaOriginal.productos)) {
+        const productosConvertidos = convertirProductosParaEdicion(cuotaOriginal.productos, opciones);
+        setCuota(prev => ({
+          ...prev,
+          productos: productosConvertidos
+        }));
+      }
+      
+      setError(false);
+      setAlertaLocal(null);
+    }
+  }, [cuotaOriginal, open, setError]);
+
+  // Efecto separado para actualizar productos cuando las opciones estén disponibles
+  useEffect(() => {
+    if (cuotaOriginal && open && opciones && opciones.length > 0 && cuota.productos.length > 0) {
+      console.log('🔍 ACTUALIZANDO PRODUCTOS CON OPCIONES - Iniciando actualización');
+      
+      // Actualizar productos existentes con los IDs correctos
+      const productosActualizados = cuota.productos.map(producto => {
+        const opcionEncontrada = opciones.find(opcion => 
+          opcion.nombreProducto === producto.nombreProducto
+        );
+
+        console.log(`🔍 Buscando "${producto.nombreProducto}" en opciones:`, opcionEncontrada);
+
+        return {
+          ...producto,
+          idProducto: opcionEncontrada?.id || ''
+        };
+      });
+
+      console.log('🔍 PRODUCTOS ACTUALIZADOS con IDs:', productosActualizados);
+
+      setCuota(prev => ({
+        ...prev,
+        productos: productosActualizados
+      }));
+    }
+  }, [opciones, open]);
+
+  // Limpiar estados al cerrar
+  useEffect(() => {
+    if (!open) {
+      setAlertaLocal(null);
+      setError(false);
+    }
+  }, [open, setError]);
+
+  const handleAgregarProducto = () => {
+    setCuota(prev => ({
+      ...prev,
+      productos: [
+        ...prev.productos,
+        { idProducto: '', limite: 0, limiteActual: 0, nombreProducto: '' }
+      ]
+    }));
+  };
+
+  const handleEliminarProducto = (index) => {
+    setCuota(prev => ({
+      ...prev,
+      productos: prev.productos.filter((_, i) => i !== index)
+    }));
+  };
+
+  const handleCambiarProducto = (index, campo, valor) => {
+    setCuota(prev => ({
+      ...prev,
+      productos: prev.productos.map((producto, i) => {
+        if (i === index) {
+          const nuevoProducto = { ...producto, [campo]: valor };
+          
+          // Si cambia el producto, actualizar el nombre
+          if (campo === 'idProducto') {
+            const opcionSeleccionada = opciones?.find(opcion => opcion.id === valor);
+            nuevoProducto.nombreProducto = opcionSeleccionada?.nombreProducto || '';
+          }
+          
+          return nuevoProducto;
+        }
+        return producto;
+      })
+    }));
+  };
+
+  const validarFormulario = () => {
+    if (!cuota.nombre.trim()) {
+      setAlertaLocal({
+        tipo: 'error',
+        mensaje: 'El nombre es obligatorio.'
+      });
+      return false;
+    }
+
+    if (cuota.periodoRenovacion < 1 || cuota.periodoRenovacion > 12) {
+      setAlertaLocal({
+        tipo: 'error',
+        mensaje: 'El período de renovación debe estar entre 1 y 12 meses.'
+      });
+      return false;
+    }
+
+    // Validar productos - solo si hay opciones disponibles
+    if (opciones && opciones.length > 0) {
+      for (let i = 0; i < cuota.productos.length; i++) {
+        const producto = cuota.productos[i];
+        
+        if (!producto.idProducto) {
+          setAlertaLocal({
+            tipo: 'error',
+            mensaje: `Debes seleccionar un producto en la posición ${i + 1}.`
+          });
+          return false;
+        }
+        
+        if (producto.limite < 0) {
+          setAlertaLocal({
+            tipo: 'error',
+            mensaje: `El límite del producto "${producto.nombreProducto}" debe ser mayor o igual a 0.`
+          });
+          return false;
+        }
+        
+        if (producto.limiteActual < 0) {
+          setAlertaLocal({
+            tipo: 'error',
+            mensaje: `El límite actual del producto "${producto.nombreProducto}" debe ser mayor o igual a 0.`
+          });
+          return false;
+        }
+      }
+    }
+
+    return true;
+  };
+
+  const handleGuardar = async () => {
+    setAlertaLocal(null);
+    
+    if (!validarFormulario()) {
+      return;
+    }
+
+    const datosActualizacion = {
+      idCuotaSet: cuota.idCuotaSet,
+      cambios: {
+        nombre: cuota.nombre.trim(),
+        descripcion: cuota.descripcion.trim(),
+        periodoRenovacion: cuota.periodoRenovacion,
+        renovacionHabilitada: cuota.renovacionHabilitada,
+        productos: cuota.productos.map(producto => ({
+          idProducto: producto.idProducto || 1, // Fallback si no hay ID
+          limite: producto.limite,
+          limiteActual: producto.limiteActual
+        }))
+      }
+    };
+
+    console.log('📤 Enviando datos de actualización:', datosActualizacion);
+
+    try {
+      const resultado = await actualizarCuota(datosActualizacion);
+      if (resultado) {
+        onActualizado();
+        onClose();
+      }
+    } catch (err) {
+      console.error('Error al actualizar cuota:', err);
+    }
+  };
+
+  // Si está cargando los detalles, mostrar loading
+  if (cargandoDetalle) {
+    return (
+      <ModalFlotante
+        open={open}
+        onClose={onClose}
+        titulo="Cargando..."
+      >
+        <Box sx={{ p: 3, textAlign: 'center' }}>
+          <Typography>Cargando información del set de cuotas...</Typography>
+        </Box>
+      </ModalFlotante>
+    );
+  }
+
+  // Si hay error al cargar detalles
+  if (errorDetalle) {
+    return (
+      <ModalFlotante
+        open={open}
+        onClose={onClose}
+        titulo="Error"
+        cancelLabel="Cerrar"
+      >
+        <Box sx={{ p: 2 }}>
+          <Alerta 
+            tipo="error" 
+            mensaje={`Error al cargar la información: ${errorDetalle}`} 
+          />
+        </Box>
+      </ModalFlotante>
+    );
+  }
+
+  return (
+    <ModalFlotante
+      open={open}
+      onClose={onClose}
+      onConfirm={handleGuardar}
+      titulo={`Editar: ${cuota.nombre || 'Set de Cuotas'}`}
+      confirmLabel={cargando ? 'Guardando...' : 'Guardar'}
+      cancelLabel="Cancelar"
+      disabledConfirm={cargando || cargandoOpciones}
+      customWidth={800}
+    >
+      <Box sx={{ maxHeight: '70vh', overflow: 'auto', p: 1 }}>
+        {/* Alertas */}
+        {alertaLocal && (
+          <Alerta 
+            tipo={alertaLocal.tipo} 
+            mensaje={alertaLocal.mensaje} 
+            sx={{ mb: 2 }}
+            onClose={() => setAlertaLocal(null)}
+            cerrable
+          />
+        )}
+        
+        {error && (
+          <Alerta 
+            tipo="error" 
+            mensaje={mensaje} 
+            sx={{ mb: 2 }} 
+          />
+        )}
+
+        {/* 🔍 DEBUG INFO - Botón temporal */}
+        <button 
+          onClick={() => {
+            console.log('🔍 DATOS ACTUALES:', {
+              cuotaOriginal,
+              opciones,
+              cuotaState: cuota,
+              opcionesLength: opciones?.length,
+              productosLength: cuota.productos?.length
+            });
+          }}
+          style={{ margin: '10px', padding: '5px', background: 'orange', color: 'white', border: 'none', borderRadius: '4px' }}
+        >
+          DEBUG: Ver datos en consola
+        </button>
+
+        {/* 🔍 DEBUG INFO - Info visual */}
+        <Box sx={{ mb: 2, p: 1, backgroundColor: '#f0f0f0', fontSize: '12px' }}>
+          <Typography variant="caption">
+            <strong>Debug:</strong> Productos cargados: {cuota.productos.length} | 
+            Opciones disponibles: {opciones?.length || 0} | 
+            Nombre: {cuota.nombre || 'Sin nombre'}
+          </Typography>
+        </Box>
+
+        {/* Información básica */}
+        <Typography variant="h6" sx={{ mb: 2 }}>
+          Información Básica
+        </Typography>
+
+        <CampoTexto
+          label="Nombre *"
+          value={cuota.nombre || ''}
+          onChange={(e) => setCuota(prev => ({ ...prev, nombre: e.target.value }))}
+          fullWidth
+          sx={{ mb: 2 }}
+          error={!cuota.nombre.trim()}
+          helperText={!cuota.nombre.trim() ? 'El nombre es obligatorio' : ''}
+        />
+
+        <CampoTexto
+          label="Descripción"
+          value={cuota.descripcion || ''}
+          onChange={(e) => setCuota(prev => ({ ...prev, descripcion: e.target.value }))}
+          fullWidth
+          multiline
+          rows={3}
+          sx={{ mb: 2 }}
+        />
+
+        <Box sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
+          <NumeroInput
+            label="Período de Renovación (meses) *"
+            value={cuota.periodoRenovacion || 6}
+            onChange={(e) => setCuota(prev => ({ 
+              ...prev, 
+              periodoRenovacion: parseInt(e.target.value) || 6 
+            }))}
+            min={1}
+            max={12}
+            sx={{ flex: 1 }}
+          />
+
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Switch
+              label="Renovación Habilitada"
+              checked={cuota.renovacionHabilitada || false}
+              onChange={(e) => setCuota(prev => ({ 
+                ...prev, 
+                renovacionHabilitada: e.target.checked 
+              }))}
+            />
+          </Box>
+        </Box>
+
+        {/* Productos */}
+        <Box sx={{ mt: 3 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+            <Typography variant="h6">
+              Productos Asociados ({cuota.productos.length})
+            </Typography>
+            <IconButton 
+              color="primary" 
+              onClick={handleAgregarProducto}
+              disabled={cargandoOpciones}
+            >
+              <AddIcon />
+            </IconButton>
+          </Box>
+
+          {cargandoOpciones && (
+            <Typography color="textSecondary" sx={{ textAlign: 'center', py: 2 }}>
+              Cargando opciones de productos...
+            </Typography>
+          )}
+
+          {/* Mensaje si no hay opciones disponibles */}
+          {!cargandoOpciones && (!opciones || opciones.length === 0) && (
+            <Box sx={{ p: 2, backgroundColor: '#fff3cd', borderRadius: 1, mb: 2 }}>
+              <Typography variant="body2" color="warning.main">
+                ⚠️ No se pudieron cargar las opciones de productos. Los productos existentes se mostrarán pero no podrás editarlos completamente hasta que se solucione el problema de conexión con el backend.
+              </Typography>
+            </Box>
+          )}
+
+          {cuota.productos.length === 0 ? (
+            <Typography color="textSecondary" sx={{ textAlign: 'center', py: 2 }}>
+              No hay productos asociados. Haz clic en + para agregar uno.
+            </Typography>
+          ) : (
+            cuota.productos.map((producto, index) => (
+              <Box 
+                key={index} 
+                sx={{ 
+                  border: '1px solid #e0e0e0', 
+                  borderRadius: 1, 
+                  p: 2, 
+                  mb: 2,
+                  backgroundColor: '#fafafa'
+                }}
+              >
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                  <Typography variant="subtitle2">
+                    Producto {index + 1} {producto.nombreProducto && `(${producto.nombreProducto})`}
+                  </Typography>
+                  <IconButton 
+                    color="error" 
+                    size="small"
+                    onClick={() => handleEliminarProducto(index)}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Box>
+
+                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+                  {/* Select de Producto - solo si hay opciones */}
+                  {opciones && opciones.length > 0 ? (
+                    <FormControl sx={{ minWidth: 250, flex: 1 }}>
+                      <InputLabel>Producto *</InputLabel>
+                      <Select
+                        value={producto.idProducto || ''}
+                        onChange={(e) => handleCambiarProducto(index, 'idProducto', e.target.value)}
+                        disabled={cargandoOpciones}
+                        label="Producto *"
+                      >
+                        <MenuItem value="">
+                          <em>Seleccione un producto</em>
+                        </MenuItem>
+                        {opciones.map((opcion) => (
+                          <MenuItem key={opcion.id} value={opcion.id}>
+                            {opcion.nombreProducto} ({opcion.tipo})
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  ) : (
+                    <TextField
+                      label="Nombre del Producto"
+                      value={producto.nombreProducto || ''}
+                      onChange={(e) => handleCambiarProducto(index, 'nombreProducto', e.target.value)}
+                      sx={{ minWidth: 250, flex: 1 }}
+                      disabled
+                      helperText="Opciones no disponibles"
+                    />
+                  )}
+
+                  {/* Campo de Límite */}
+                  <TextField
+                    label="Límite *"
+                    type="number"
+                    value={producto.limite || 0}
+                    onChange={(e) => handleCambiarProducto(index, 'limite', parseInt(e.target.value) || 0)}
+                    inputProps={{ min: 0 }}
+                    sx={{ minWidth: 120 }}
+                  />
+
+                  {/* Campo de Límite Actual */}
+                  <TextField
+                    label="Límite Actual *"
+                    type="number"
+                    value={producto.limiteActual || 0}
+                    onChange={(e) => handleCambiarProducto(index, 'limiteActual', parseInt(e.target.value) || 0)}
+                    inputProps={{ min: 0 }}
+                    sx={{ minWidth: 120 }}
+                  />
+                </Box>
+              </Box>
+            ))
+          )}
+        </Box>
+      </Box>
+    </ModalFlotante>
+  );
+};
+
+export default ModalEditarCuotas;
\ No newline at end of file
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index b6fa34ca..f3347100 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -11,6 +11,7 @@ import ContenedorLista from '@Organismos/ContenedorLista';
 import Tabla from '@Organismos/Tabla';
 import Chip from '@Atomos/Chip';
 import ModalCrearCuotaSet from '@Organismos/Cuotas/ModalCrearCuotaSet';
+import ModalEditarCuotas from '@Organismos/Cuotas/ModalEditarCuotas';
 import Alerta from '@Moleculas/Alerta';
 import { useCuotaId } from '@Hooks/Cuotas/useLeerCuota';
 import PopUpEliminar from '@Moleculas/PopUp';
@@ -34,13 +35,25 @@ const ListaCuotas = () => {
   const [alerta, setAlerta] = useState(null);
   const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
+  const [modalEditarAbierto, setModalEditarAbierto] = useState(false);
   const [idSetCuotaSeleccionado, setIdSetCuotaSeleccionado] = useState(null);
 
   const {
     cuota,
     cargando: cargandoDetalle,
     error: errorDetalle,
-  } = useCuotaId(modalDetalleAbierto ? idSetCuotaSeleccionado : null);
+  } = useCuotaId(modalDetalleAbierto || modalEditarAbierto ? idSetCuotaSeleccionado : null);
+
+  // 🔍 DEBUG - Agregar este console.log
+  useEffect(() => {
+    if (cuota) {
+      console.log('🔍 DATOS DE CUOTA CARGADOS:', {
+        cuota,
+        productos: cuota?.productos,
+        estructura: JSON.stringify(cuota, null, 2)
+      });
+    }
+  }, [cuota]);
 
   useEffect(() => {
     if (!usuario?.clienteSeleccionado) {
@@ -121,6 +134,31 @@ const ListaCuotas = () => {
     }
   };
 
+  // 👈 FUNCIONES CORREGIDAS
+  const handleAbrirEditar = () => {
+    console.log('🔍 ABRIENDO MODAL EDITAR - Datos de cuota:', cuota);
+    setModalDetalleAbierto(false);
+    setModalEditarAbierto(true);
+  };
+
+  const handleCerrarEditar = () => {
+    setModalEditarAbierto(false);
+    // NO limpies el idSetCuotaSeleccionado aquí para mantener los datos
+  };
+
+  const handleCuotaActualizada = async () => {
+    await recargar();
+    setModalEditarAbierto(false);
+    setIdSetCuotaSeleccionado(null); // Ahora sí limpia aquí
+    setAlerta({
+      tipo: 'success',
+      mensaje: 'Set de cuotas actualizado correctamente.',
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
+  };
+
   const botones = [
     {
       label: 'Añadir',
@@ -202,6 +240,7 @@ const ListaCuotas = () => {
         dialogo='¿Estás seguro de que deseas eliminar los sets de cuotas seleccionados? Esta acción no se puede deshacer.'
       />
 
+      {/* MODAL DE DETALLE */}
       {modalDetalleAbierto && (
         <ModalFlotante
           open={modalDetalleAbierto}
@@ -210,6 +249,13 @@ const ListaCuotas = () => {
           tituloVariant='h4'
           customWidth={530}
           botones={[
+            ...(usuario?.permisos?.includes(PERMISOS.ACTUALIZAR_SET_CUOTAS) ? [{
+              label: 'EDITAR',
+              variant: 'contained',
+              color: 'error',
+              backgroundColor: colores.altertex[1],
+              onClick: handleAbrirEditar,
+            }] : []),
             {
               label: 'Salir',
               variant: 'outlined',
@@ -230,6 +276,16 @@ const ListaCuotas = () => {
         </ModalFlotante>
       )}
 
+      {/* MODAL DE EDITAR */}
+      <ModalEditarCuotas
+        open={modalEditarAbierto}
+        cuotaOriginal={cuota} // 👈 Pasa el objeto completo 'cuota'
+        onClose={handleCerrarEditar}
+        onActualizado={handleCuotaActualizada}
+        cargandoDetalle={cargandoDetalle}
+        errorDetalle={errorDetalle}
+      />
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
@@ -245,4 +301,4 @@ const ListaCuotas = () => {
   );
 };
 
-export default ListaCuotas;
+export default ListaCuotas;
\ No newline at end of file
diff --git a/src/hooks/Cuotas/useActualizarCuota.js b/src/hooks/Cuotas/useActualizarCuota.js
new file mode 100644
index 00000000..0b71ef6e
--- /dev/null
+++ b/src/hooks/Cuotas/useActualizarCuota.js
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { RepositorioActualizarCuota } from '@Repositorios/Cuotas/repositorioActualizarCuota';
+
+export const useActualizarCuota = () => {
+  const [cargando, setCargando] = useState(false);
+  const [exito, setExito] = useState(false);
+  const [error, setError] = useState(false);
+  const [mensaje, setMensaje] = useState('');
+
+  const actualizarCuota = async (datosActualizacion) => {
+    setCargando(true);
+    setExito(false);
+    setError(false);
+    setMensaje('');
+
+    try {
+      const resultado = await RepositorioActualizarCuota.actualizarSetCuotas(datosActualizacion);
+      setExito(true);
+      setMensaje(resultado.mensaje);
+      return resultado;
+    } catch (err) {
+      setError(true);
+      setMensaje(err.message);
+      return false;
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { actualizarCuota, cargando, exito, error, mensaje, setError };
+};
\ No newline at end of file
diff --git a/src/hooks/Cuotas/useObtenerOpcionesCuotas.js b/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
new file mode 100644
index 00000000..a0c898da
--- /dev/null
+++ b/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '@Hooks/AuthProvider';
+import { RepositorioObtenerOpcionesCuotas } from '@Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas';
+
+export const useObtenerOpcionesCuotas = () => {
+  const { usuario } = useAuth();
+  const [opciones, setOpciones] = useState([]);
+  const [cargando, setCargando] = useState(false);
+  const [error, setError] = useState(null);
+
+  const obtenerOpciones = async () => {
+    if (!usuario?.clienteSeleccionado?.idCliente) {
+      setError('No hay cliente seleccionado');
+      return;
+    }
+
+    setCargando(true);
+    setError(null);
+
+    try {
+      const resultado = await RepositorioObtenerOpcionesCuotas.obtenerOpciones(
+        usuario.clienteSeleccionado.idCliente
+      );
+      
+      console.log('🔍 Opciones obtenidas del backend:', resultado);
+      setOpciones(resultado || []);
+    } catch (err) {
+      console.error('❌ Error al obtener opciones:', err);
+      setError(err.message || 'Error al obtener opciones de productos');
+      setOpciones([]);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  useEffect(() => {
+    if (usuario?.clienteSeleccionado?.idCliente) {
+      obtenerOpciones();
+    }
+  }, [usuario?.clienteSeleccionado?.idCliente]);
+
+  return {
+    opciones,
+    cargando,
+    error,
+    recargar: obtenerOpciones
+  };
+};
\ No newline at end of file

From aa21341a7d12f0377c24cafc7539760f61cb4af2 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 11:28:42 -0600
Subject: [PATCH 116/160] Campos Completos de pedidos al editar

---
 src/Dominio/Modelos/Pedidos/PedidoModelo.js   |   9 ++
 .../Pedidos/repositorioActualizarPedido.js    |  27 ++++
 src/Utilidades/Constantes/rutasAPI.js         |   1 +
 .../Organismos/ModalEditarPedido.jsx          | 147 ++++++++++++++++++
 src/Vistas/Paginas/Pedidos/ListaPedidos.jsx   |  98 +++++++-----
 src/hooks/Pedidos/useActualizarPedido.js      |  20 +++
 6 files changed, 262 insertions(+), 40 deletions(-)
 create mode 100644 src/Dominio/Modelos/Pedidos/PedidoModelo.js
 create mode 100644 src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
 create mode 100644 src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
 create mode 100644 src/hooks/Pedidos/useActualizarPedido.js

diff --git a/src/Dominio/Modelos/Pedidos/PedidoModelo.js b/src/Dominio/Modelos/Pedidos/PedidoModelo.js
new file mode 100644
index 00000000..8a19a7ca
--- /dev/null
+++ b/src/Dominio/Modelos/Pedidos/PedidoModelo.js
@@ -0,0 +1,9 @@
+export class PedidoModelo {
+  constructor({ idPedido, estado, precioTotal, idEnvio, idPago }) {
+    this.idPedido = idPedido || '';
+    this.estado = estado || '';
+    this.precioTotal = precioTotal || 0;
+    this.idEnvio = idEnvio || '';
+    this.idPago = idPago || '';
+  }
+}
diff --git a/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js b/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
new file mode 100644
index 00000000..1d8a61a5
--- /dev/null
+++ b/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
@@ -0,0 +1,27 @@
+import axios from 'axios';
+import { RUTAS_API } from '@Constantes/rutasAPI';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+export class RepositorioActualizarPedido {
+  static async actualizarPedido(pedido) {
+    const config = {
+      headers: {
+        'x-api-key': API_KEY,
+      },
+    };
+
+    try {
+      const respuesta = await axios.put(
+        RUTAS_API.PEDIDOS.ACTUALIZAR_PEDIDO,
+        pedido, // <--- aquí se manda directamente el objeto plano
+        config
+      );
+
+      return respuesta.data;
+    } catch (error) {
+      console.error('❌ Error al actualizar el pedido:', error);
+      return null;
+    }
+  }
+}
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index aa76af69..4d9f0d92 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -97,6 +97,7 @@ export const RUTAS_API = {
     BASE: BASE_PEDIDOS,
     CONSULTAR_LISTA: `${BASE_PEDIDOS}/consultar-lista`,
     ELIMINAR_PEDIDO: `${BASE_PEDIDOS}/eliminar`,
+    ACTUALIZAR_PEDIDO: `${BASE_PEDIDOS}/actualizar-pedido`,
   },
   EVENTOS: {
     BASE: BASE_EVENTOS,
diff --git a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
new file mode 100644
index 00000000..1c23311c
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
@@ -0,0 +1,147 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Box, Button, useTheme } from '@mui/material';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import CampoTexto from '@Atomos/CampoTexto';
+import Alerta from '@Moleculas/Alerta';
+import { useActualizarPedido } from '@Hooks/Pedidos/useActualizarPedido';
+import { tokens } from '@SRC/theme';
+
+const ModalEditarPedido = ({ abierto, onCerrar, datosIniciales, onActualizar, onMostrarAlerta }) => {
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+  const { actualizarPedido, cargando } = useActualizarPedido();
+
+  const [pedido, setPedido] = useState({});
+  const [errores, setErrores] = useState({});
+
+  useEffect(() => {
+    if (abierto && datosIniciales) {
+      setPedido({ ...datosIniciales });
+      setErrores({});
+    }
+  }, [abierto, datosIniciales]);
+
+  const manejarCambio = useCallback((e) => {
+    const { name, value } = e.target;
+    setPedido(prev => ({ ...prev, [name]: value }));
+    setErrores(prev => ({ ...prev, [name]: false }));
+  }, []);
+
+  const validarCampos = () => {
+    const nuevosErrores = {};
+    if (!pedido.estatusPedido?.trim()) nuevosErrores.estatusPedido = true;
+    if (!pedido.precioTotal?.toString().trim()) nuevosErrores.precioTotal = true;
+    if (!pedido.estatusPago?.trim()) nuevosErrores.estatusPago = true;
+    if (!pedido.estatusEnvio?.trim()) nuevosErrores.estatusEnvio = true;
+    setErrores(nuevosErrores);
+    return Object.keys(nuevosErrores).length === 0;
+  };
+
+  const manejarGuardar = async () => {
+    if (!validarCampos()) {
+      onMostrarAlerta('Completa todos los campos obligatorios.', 'error');
+      return;
+    }
+
+    if (!pedido.idPedido) {
+      onMostrarAlerta('Falta el ID del pedido. No se puede actualizar.', 'error');
+      return;
+    }
+
+    // ✅ Mapeo de campos como espera el backend
+    const pedidoMapeado = {
+      idPedido: pedido.idPedido,
+      estado: pedido.estatusPedido, // Mapeo correcto para el backend
+      precioTotal: parseFloat(pedido.precioTotal),
+      idPago: pedido.idPago,
+      idEnvio: pedido.idEnvio,
+    };
+
+    const exito = await actualizarPedido(pedidoMapeado);
+    if (exito) {
+      onMostrarAlerta('Pedido actualizado correctamente', 'success');
+      onActualizar();
+      onCerrar();
+    } else {
+      onMostrarAlerta('Error al actualizar el pedido.', 'error');
+    }
+  };
+
+  if (!pedido) return null;
+
+  return (
+    <ModalFlotante
+      open={abierto}
+      onClose={onCerrar}
+      onConfirm={manejarGuardar}
+      titulo='Editar Pedido'
+      tituloVariant='h4'
+      customWidth={800}
+      botones={[]}
+    >
+      <Box display='grid' gridTemplateColumns='1fr 1fr' gap={2}>
+        <CampoTexto
+          label='Empleado'
+          name='nombreEmpleado'
+          value={pedido.nombreEmpleado || ''}
+          disabled
+        />
+        <CampoTexto
+          label='Fecha de Orden'
+          name='fechaOrden'
+          value={pedido.fechaOrden || ''}
+          disabled
+        />
+        <CampoTexto
+          label='Estatus del Pedido'
+          name='estatusPedido'
+          value={pedido.estatusPedido || ''}
+          onChange={manejarCambio}
+          error={errores.estatusPedido}
+        />
+        <CampoTexto
+          label='Precio Total'
+          name='precioTotal'
+          value={pedido.precioTotal || ''}
+          onChange={manejarCambio}
+          error={errores.precioTotal}
+        />
+        <CampoTexto
+          label='Estatus de Pago'
+          name='estatusPago'
+          value={pedido.estatusPago || ''}
+          onChange={manejarCambio}
+          error={errores.estatusPago}
+        />
+        <CampoTexto
+          label='Estatus de Envío'
+          name='estatusEnvio'
+          value={pedido.estatusEnvio || ''}
+          onChange={manejarCambio}
+          error={errores.estatusEnvio}
+        />
+      </Box>
+
+      <Box display='flex' justifyContent='flex-end' gap={2} mt={4}>
+        <Button
+          variant='outlined'
+          onClick={onCerrar}
+          sx={{ borderColor: colores.altertex[1], color: colores.altertex[1] }}
+          disabled={cargando}
+        >
+          CANCELAR
+        </Button>
+        <Button
+          variant='contained'
+          onClick={manejarGuardar}
+          sx={{ backgroundColor: colores.altertex[1], color: 'white' }}
+          disabled={cargando}
+        >
+          GUARDAR
+        </Button>
+      </Box>
+    </ModalFlotante>
+  );
+};
+
+export default ModalEditarPedido;
diff --git a/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx b/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
index ae3aca97..f29654f6 100644
--- a/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
+++ b/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
@@ -7,6 +7,8 @@ import ContenedorLista from '@Organismos/ContenedorLista';
 import Tabla from '@Organismos/Tabla';
 import Alerta from '@Moleculas/Alerta';
 import PopUp from '@Moleculas/PopUp';
+import Boton from '@Atomos/Boton';
+import ModalEditarPedido from '@Organismos/ModalEditarPedido';
 import { tokens } from '@SRC/theme';
 import { useConsultarPedidos } from '@Hooks/Pedidos/useConsultarPedidos';
 import { useEliminarPedido } from '@Hooks/Pedidos/useEliminarPedido';
@@ -23,12 +25,16 @@ const ListaPedidos = () => {
   const [alerta, setAlerta] = useState(null);
   const { eliminar } = useEliminarPedido();
 
-  // Estado para controlar la visualización del modal eliminar
-  const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
+  const { usuario } = useAuth();
+
+  // 🆕 Estados para actualizar pedido
+  const [modalAbierto, setModalAbierto] = useState(false);
+  const [pedidoSeleccionado, setPedidoSeleccionado] = useState(null);
+
   const manejarCancelarEliminar = () => {
     setAbrirPopUpEliminar(false);
   };
-  const { usuario } = useAuth();
+
   const manejarConfirmarEliminar = async () => {
     try {
       await eliminar(seleccionados);
@@ -54,42 +60,40 @@ const ListaPedidos = () => {
     }
   };
 
+  const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
+
+  // 🆕 Funciones para editar pedido
+  const abrirModalEditar = (pedido) => {
+    console.log('Fila seleccionada:', pedido);
+    setPedidoSeleccionado(pedido);
+    setModalAbierto(true);
+  };
+
+  const cerrarModal = () => {
+    setPedidoSeleccionado(null);
+    setModalAbierto(false);
+  };
+
+  const mostrarAlerta = (mensaje, tipo) => {
+    setAlerta({
+      tipo,
+      mensaje,
+      icono: true,
+      cerrable: true,
+      centradoInferior: true,
+    });
+    setTimeout(() => setAlerta(null), 3000);
+  };
+
   const columnas = [
-    {
-      field: 'pedido',
-      headerName: 'Pedido ID',
-      flex: 1,
-    },
-    {
-      field: 'nombreEmpleado',
-      headerName: 'Empleado',
-      flex: 1,
-    },
-    {
-      field: 'fechaOrden',
-      headerName: 'Fecha',
-      flex: 1,
-    },
-    {
-      field: 'estatusPedido',
-      headerName: 'Estatus',
-      flex: 1,
-    },
-    {
-      field: 'precioTotal',
-      headerName: 'Precio Total',
-      flex: 1,
-    },
-    {
-      field: 'estatusPago',
-      headerName: 'Pago',
-      flex: 1,
-    },
-    {
-      field: 'estatusEnvio',
-      headerName: 'Envio',
-      flex: 1,
-    },
+    { field: 'pedido', headerName: 'Pedido ID', flex: 1 },
+    { field: 'nombreEmpleado', headerName: 'Empleado', flex: 1 },
+    { field: 'fechaOrden', headerName: 'Fecha', flex: 1 },
+    { field: 'estatusPedido', headerName: 'Estatus', flex: 1 },
+    { field: 'precioTotal', headerName: 'Precio Total', flex: 1 },
+    { field: 'estatusPago', headerName: 'Pago', flex: 1 },
+    { field: 'estatusEnvio', headerName: 'Envio', flex: 1 },
+    
   ];
 
   const botones = [
@@ -148,14 +152,18 @@ const ListaPedidos = () => {
               rows={filas}
               disableRowSelectionOnClick={true}
               checkboxSelection
+              onRowClick={({ row }) => abrirModalEditar(row)}
               onRowSelectionModelChange={(seleccion) => {
-                const ids = Array.isArray(seleccion) ? seleccion : Array.from(seleccion?.ids || []);
+                const ids = Array.isArray(seleccion)
+                  ? seleccion
+                  : Array.from(seleccion?.ids || []);
                 setSeleccionados(ids);
               }}
             />
           )}
         </Box>
       </ContenedorLista>
+
       {alerta && (
         <Alerta
           tipo={alerta.tipo}
@@ -167,14 +175,24 @@ const ListaPedidos = () => {
           onClose={() => setAlerta(null)}
         />
       )}
+
       <PopUp
         abrir={abrirPopUpEliminar}
         cerrar={manejarCancelarEliminar}
         confirmar={manejarConfirmarEliminar}
         dialogo={MENSAJE_POPUP_ELIMINAR}
       />
+
+      {/* 🆕 Modal Editar Pedido */}
+      <ModalEditarPedido
+        abierto={modalAbierto}
+        onCerrar={cerrarModal}
+        datosIniciales={pedidoSeleccionado}
+        onActualizar={recargar}
+        onMostrarAlerta={mostrarAlerta}
+      />
     </>
   );
 };
 
-export default ListaPedidos;
+export default ListaPedidos;
\ No newline at end of file
diff --git a/src/hooks/Pedidos/useActualizarPedido.js b/src/hooks/Pedidos/useActualizarPedido.js
new file mode 100644
index 00000000..ba66bc06
--- /dev/null
+++ b/src/hooks/Pedidos/useActualizarPedido.js
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { RepositorioActualizarPedido } from '@Dominio/Repositorios/Pedidos/repositorioActualizarPedido';
+
+export const useActualizarPedido = () => {
+  const [cargando, setCargando] = useState(false);
+
+  const actualizarPedido = async (pedido) => {
+    setCargando(true);
+    try {
+      const respuesta = await RepositorioActualizarPedido.actualizarPedido(pedido);
+      return respuesta !== null;
+    } catch {
+      return false;
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  return { actualizarPedido, cargando };
+};
\ No newline at end of file

From dc725a98e0f77de7c89e48af2b991c4f65a4d5af Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 12:00:20 -0600
Subject: [PATCH 117/160] fix: opacidad de alerta y neuvo csv de ejemplo

---
 public/ejemplo_importar_productos.csv       | 44 ++++++++++-----------
 src/Vistas/Componentes/Moleculas/Alerta.jsx |  2 +-
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/public/ejemplo_importar_productos.csv b/public/ejemplo_importar_productos.csv
index de0b3dcb..31627a64 100644
--- a/public/ejemplo_importar_productos.csv
+++ b/public/ejemplo_importar_productos.csv
@@ -1,26 +1,26 @@
 idProducto,idProveedor,nombreProducto,nombreComercial,descripcionProducto,tipoProducto,marca,modelo,costo,precioVenta,precioCliente,precioPuntos,impuesto,descuento,estado,envio,nombreVariante,descripcionVariante,valorOpcion,SKUcomercial,cantidad,costoAdicional,descuentoOpcion,estadoOpcion
 P1,101,Próducto 1,Comercial 1,Descripcion del producto 2,GENERAL,Marca1,M1,100,296.33,221.59,1,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion1,SKU-COM-1-1-1,1,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 2,GENERAL,Marca1,M1,62.33,263.27,244.53,2,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion2,SKU-COM-1-1-2,17,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 3,GENERAL,Marca1,M1,107.98,231.79,220.49,12,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion3,SKU-COM-1-1-3,17,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 4,GENERAL,Marca1,M1,93.12,272.66,188.36,2,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion4,SKU-COM-1-1-4,17,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 4,GENERAL,Marca1,M1,138.69,200.79,200.09,2,16,0,1,1,Variante 1,Variante 1 del producto 1,Opcion5,SKU-COM-1-1-5,8,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 6,GENERAL,Marca1,M1,147.27,223.37,227.69,2,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion1,SKU-COM-1-2-1,14,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 7,GENERAL,Marca1,M1,127.97,223.77,237.18,10,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion2,SKU-COM-1-2-2,11,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 8,GENERAL,Marca1,M1,80.96,258.27,248.53,1,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion3,SKU-COM-1-2-3,13,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 9,GENERAL,Marca1,M1,80.96,293.5,221.5,44,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion4,SKU-COM-1-2-4,12,0,0,1
-P1,101,Producto 1,Comercial 1,Descripcion del producto 10,GENERAL,Marca1,M1,65.27,293.5,190.15,2,16,0,1,1,Variante 2,Variante 2 del producto 1,Opcion5,SKU-COM-1-2-5,12,0,0,1
+P1,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 1,Opcion2,SKU-COM-1-1-2,17,0,0,1
+P1,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 1,Opcion3,SKU-COM-1-1-3,17,0,0,1
+P1,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 1,Opcion4,SKU-COM-1-1-4,17,0,0,1
+P1,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 1,Opcion5,SKU-COM-1-1-5,8,0,0,1
+P1,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 1,Opcion1,SKU-COM-1-2-1,14,20,0,1
+P1,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 1,Opcion2,SKU-COM-1-2-2,11,20,0,1
+P1,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 1,Opcion3,SKU-COM-1-2-3,13,20,0,1
+P1,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 1,Opcion4,SKU-COM-1-2-4,12,20,0,1
+P1,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 1,Opcion5,SKU-COM-1-2-5,12,20,0,1
 P2,101,Producto 2,Comercial 2,Descripcion del producto 11,GENERAL,Marca2,M2,56.48,229.2,190.15,12,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion1,SKU-COM-2-1-1,7,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 12,GENERAL,Marca2,M2,92.84,276.09,228.83,12,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion2,SKU-COM-2-1-2,11,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 13,GENERAL,Marca2,M2,65.02,298.79,208.32,13,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion3,SKU-COM-2-1-3,13,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 14,GENERAL,Marca2,M2,90.59,248.85,207.37,38,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion4,SKU-COM-2-1-4,17,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 15,GENERAL,Marca2,M2,100.71,234.96,181.22,36,16,0,1,1,Variante 1,Variante 1 del producto 2,Opcion5,SKU-COM-2-1-5,6,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 16,GENERAL,Marca2,M2,100.5,272.05,208.56,43,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion1,SKU-COM-2-2-1,18,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 17,GENERAL,Marca2,M2,97.94,294.75,238.41,45,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion2,SKU-COM-2-2-2,5,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 18,GENERAL,Marca2,M2,90.33,291.47,245.24,18,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion3,SKU-COM-2-2-3,13,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 19,GENERAL,Marca2,M2,82.33,267.53,214.53,20,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion4,SKU-COM-2-2-4,18,0,0,1
-P2,101,Producto 2,Comercial 2,Descripcion del producto 20,GENERAL,Marca2,M2,91.09,201.15,231.24,37,16,0,1,1,Variante 2,Variante 2 del producto 2,Opcion5,SKU-COM-2-2-5,11,0,0,1
+P2,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 2,Opcion2,SKU-COM-2-1-2,11,0,0,1
+P2,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 2,Opcion3,SKU-COM-2-1-3,13,0,0,1
+P2,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 2,Opcion4,SKU-COM-2-1-4,17,0,0,1
+P2,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 2,Opcion5,SKU-COM-2-1-5,6,0,0,1
+P2,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 2,Opcion1,SKU-COM-2-2-1,18,10,0,1
+P2,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 2,Opcion2,SKU-COM-2-2-2,5,10,0,1
+P2,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 2,Opcion3,SKU-COM-2-2-3,13,10,0,1
+P2,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 2,Opcion4,SKU-COM-2-2-4,18,10,0,1
+P2,,,,,,,,,,,,,,,,Variante 2,Variante 2 del producto 2,Opcion5,SKU-COM-2-2-5,11,10,0,1
 P3,101,Producto 3,Comercial 3,Descripcion del producto 22,GENERAL,Marca3,M3,80.76,289.09,186.15,45,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion1,SKU-COM-3-1-1,18,0,0,1
-P3,101,Producto 3,Comercial 3,Descripcion del producto 22,GENERAL,Marca3,M3,102.27,295.23,201.39,25,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion2,SKU-COM-3-1-2,18,0,0,1
-P3,101,Producto 3,Comercial 3,Descripcion del producto 23,GENERAL,Marca3,M3,133.76,275.16,245.96,30,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion3,SKU-COM-3-1-3,18,0,0,1
-P3,101,Producto 3,Comercial 3,Descripcion del producto 24,GENERAL,Marca3,M3,67.6,246.28,186.47,23,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion4,SKU-COM-3-1-4,14,0,0,1
-P3,101,Producto 3,Comercial 3,Descripcion del producto 25,GENERAL,Marca3,M3,109.33,277.54,189.88,47,16,0,1,1,Variante 1,Variante 1 del producto 3,Opcion5,SKU-COM-3-1-5,11,0,0,1
+P3,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 3,Opcion2,SKU-COM-3-1-2,18,0,0,1
+P3,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 3,Opcion3,SKU-COM-3-1-3,18,0,0,1
+P3,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 3,Opcion4,SKU-COM-3-1-4,14,0,0,1
+P3,,,,,,,,,,,,,,,,Variante 1,Variante 1 del producto 3,Opcion5,SKU-COM-3-1-5,11,0,0,1
diff --git a/src/Vistas/Componentes/Moleculas/Alerta.jsx b/src/Vistas/Componentes/Moleculas/Alerta.jsx
index 934c72f3..63fb63c7 100644
--- a/src/Vistas/Componentes/Moleculas/Alerta.jsx
+++ b/src/Vistas/Componentes/Moleculas/Alerta.jsx
@@ -47,7 +47,7 @@ const Alerta = ({
 
   if (!visible) return null;
 
-  const colorFondo = `${coloresPorTipo[tipo]}20`;
+  const colorFondo = `${coloresPorTipo[tipo]}50`;
   const colorPrincipal = coloresPorTipo[tipo];
   const iconoMostrar = iconoNombre || iconosPorTipo[tipo];
 

From 2b80bff97fabacafbc45b881e8cb5adddc5b911b Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 13:10:25 -0600
Subject: [PATCH 118/160] fix:agregar Timeout al descargar plantillas para
 importar

---
 .../Organismos/ModalImportarEmpleados.jsx     | 19 ++++++++--
 .../Organismos/ModalImportarProductos.jsx     | 37 ++++++++++++++-----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx b/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
index f2c256ae..4085273d 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarEmpleados.jsx
@@ -7,6 +7,7 @@ import Alerta from '@Moleculas/Alerta';
 import { tokens } from '@SRC/theme';
 import InfoImportar from '@Organismos/InfoImportar';
 import CajaDesplazable from '@Organismos/CajaDesplazable';
+import Boton from '@Atomos/Boton';
 
 const ModalImportarEmpleados = ({ abierto, onCerrar, onConfirm, cargando, errores, exito, recargar }) => {
   const [archivo, setFile] = useState(null);
@@ -17,6 +18,7 @@ const ModalImportarEmpleados = ({ abierto, onCerrar, onConfirm, cargando, errore
   const colores = tokens(theme.palette.mode);
   const [abririnfo, setAbrirInfo] = useState(false);
   const [mensajeErrores, setMensajeErrores] = useState('');
+  const [descargarCSV, setDescargarCSV] = useState(false);
 
   // Manejo de errores en la importación
   useEffect(() => {
@@ -50,6 +52,19 @@ const ModalImportarEmpleados = ({ abierto, onCerrar, onConfirm, cargando, errore
     }
   }, [exito, onCerrar, recargar]);
 
+  const handleDescargarPlantilla = useCallback(() => {
+    setDescargarCSV(true);
+    const link = document.createElement('a');
+    link.href = '/plantilla_importar_empleados.csv';
+    link.download = 'plantilla_importar_empleados.csv';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => {
+      setDescargarCSV(false);
+    }, 2000);
+  }, []);
+
   // Manejo de cierre del modal de importar
   const handleCerrar = useCallback(() => {
     onCerrar(false);
@@ -159,9 +174,7 @@ const ModalImportarEmpleados = ({ abierto, onCerrar, onConfirm, cargando, errore
       )}
 
       <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
-        <a href="/plantilla_importar_empleados.csv" download="plantilla_importar_empleados.csv">
-          Descargar plantilla CSV
-        </a>
+          <Boton style={{border: "none", textDecoration: 'underline', color: colores.altertex[1]}} onClick={handleDescargarPlantilla} label="Descargar plantilla CSV" variant="outlined" deshabilitado={descargarCSV} />
         <InfoImportar 
           open={abririnfo}
           onClose={() => setAbrirInfo(false)}> 
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index ce3f6e93..c6ce0999 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -7,6 +7,7 @@ import { tokens } from '@SRC/theme';
 import InfoImportar from '@Organismos/InfoImportar';
 import CajaDesplazable from '@Organismos/CajaDesplazable';
 import ContenedorImportarProductos from './ContenedorImportarProductos';
+import Boton from '../Atomos/Boton';
 
 const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errores, exito, recargar }) => {
   const [archivo, setFile] = useState(null);
@@ -17,6 +18,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
   const colores = tokens(theme.palette.mode);
   const [abririnfo, setAbrirInfo] = useState(false);
   const [mensajeErrores, setMensajeErrores] = useState('');
+  const [descargarCSV, setDescargarCSV] = useState(false);
 
   // Manejo de errores en la importación
   useEffect(() => {
@@ -50,6 +52,19 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
     }
   }, [exito, onCerrar, recargar]);
 
+  const handleDescargarPlantilla = useCallback(() => {
+    setDescargarCSV(true);
+    const link = document.createElement('a');
+    link.href = '/ejemplo_importar_productos.csv';
+    link.download = 'ejemplo_importar_productos.csv';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => {
+      setDescargarCSV(false);
+    }, 2000);
+  }, []);
+
   // Manejo de cierre del modal de importar
   const handleCerrar = useCallback(() => {
     onCerrar(false);
@@ -159,20 +174,19 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
       )}
 
       <Box mt={2} display="inline-flex" alignItems="center" gap={1}>
-        <a href="/ejemplo_importar_productos.csv" download="ejemplo_importar_productos.csv">
-          Descargar ejemplo de plantilla CSV
-        </a>
+        <Boton style={{border: "none", textDecoration: 'underline', color: colores.altertex[1]}} onClick={handleDescargarPlantilla} label="Descargar plantilla de ejemplo CSV" variant="outlined" deshabilitado={descargarCSV} />
         <InfoImportar 
           open={abririnfo}
           onClose={() => setAbrirInfo(false)}> 
                 <>
                   <strong>¿Cómo funciona la estructura del archivo CSV?</strong>
                   <br /><br />
-                  Cada fila del archivo representa una opción específica de un producto. Por eso, en cada fila se debe repetir la información general del producto.
-                  El sistema necesita saber qué filas pertenecen al mismo producto. Para eso sirve el campo <strong>idProducto</strong>.
+                  Cada fila del archivo representa una opción específica de un producto. El sistema necesita saber qué filas pertenecen al mismo producto. Para eso sirve el campo <strong>idProducto</strong>.
                   <br /><br />
                   Dentro de ese producto, se organizan las <strong>variantes</strong> usando el campo <strong>nombreVariante</strong>.
-                  Y dentro de cada variante, se agrupan las <strong>opciones</strong> como "Rojo", "M", "32GB", etc.
+                  Y dentro de cada variante, se agrupan las <strong>opciones</strong> como "Rojo", "M", "32GB", etc. Consulta el siguente archivo de ejemplo: <a href="/ejemplo_importar_productos.csv" download="ejemplo_importar_productos.csv">
+                  Descargar ejemplo de plantilla CSV.
+                  </a>
                   <br /><br />
                   Así se puede importar correctamente todo: producto, variantes y sus opciones.
                   <br /><br />
@@ -180,19 +194,22 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   <strong>Asegúrate de lo sigiente:</strong>
                   <ul>
                     <li>
-                      El <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto.
+                      El <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto. Por cada campo vacío de idProducto, el sistema podría generar varios productos con el mismo nombre.
                     </li>
                     <li>
-                      La primera fila de cada producto no debe tener campos vacíos, ya que el sistema la usa para identificar el producto principal. Por cada campo vacío, el sistema podría generar varios productos con el mismo nombre.
+                      La primera fila de cada producto no debe tener campos vacíos, ya que el sistema la usa para identificar el producto principal. 
                     </li>
                     <li>
                       El csv tenga formato UTF-8 para evitar problemas con caracteres especiales.
                     </li>
+                    <li>
+                      El idProveedor exista en el sistema. El campo puede estar vacío si no se usa.
+                    </li>
                   </ul>
 
                   <h3>Producto</h3>
                   <strong>idProducto</strong> permite al sistema saber qué filas pertenecen al mismo producto, aunque estén en diferentes líneas del CSV. Es necesario para poder agruparlo.<br />
-                  <strong>idProveedor:</strong>Identificador del proveedor del producto. Puede ser un campo vacío <br />
+                  <strong>idProveedor (opcional): </strong>Identificador del proveedor del producto. Puede ser un campo vacío <br />
                   <strong>nombreProducto, nombreComercial:</strong> Nombres básicos<br />
                   <strong>descripcionProducto:</strong> Descripción del producto<br />
                   <strong>marca, modelo, tipoProducto:</strong> Datos básicos del producto<br />
@@ -203,7 +220,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   <strong>envio:</strong> 1 = disponible, 0 = no disponible<br /><br />
                   <h3>Variante</h3>
                   <strong>nombreVariante:</strong> Ej. "Color", "Tamaño"<br />
-                  <strong>descripcionVariante:</strong> (opcional)<br /><br />
+                  <strong>descripcionVariante:</strong> Descripción de la variante <br /><br />
                   <h3>Opción</h3>
                   <strong>valorOpcion:</strong> Ej. "Rojo", "XL"<br />
                   <strong>SKUautomatico:</strong> Obligatorio<br />

From 287f40dfd8253a5bec6082f8871bdc82fb4cdd6d Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Fri, 6 Jun 2025 13:59:07 -0600
Subject: [PATCH 119/160] =?UTF-8?q?Fix:=20Manejo=20de=20errores,=20alertas?=
 =?UTF-8?q?,=20logica=20de=20petici=C3=B3n=20axios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pedidos/repositorioActualizarPedido.js    | 44 ++++++++++-----
 .../Organismos/ModalEditarPedido.jsx          | 55 +++++++++++++------
 src/hooks/Pedidos/useActualizarPedido.js      | 35 ++++++++++--
 3 files changed, 99 insertions(+), 35 deletions(-)

diff --git a/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js b/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
index 1d8a61a5..6fb55f57 100644
--- a/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
+++ b/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
@@ -4,24 +4,42 @@ import { RUTAS_API } from '@Constantes/rutasAPI';
 const API_KEY = import.meta.env.VITE_API_KEY;
 
 export class RepositorioActualizarPedido {
+  /**
+   * * Actualiza los datos de un pedido específico
+   * @param {Object} pedido - Objeto que contiene los datos del pedido a actualizar
+   * @returns {Promise<{mensaje: string}>}
+   *
+   * @see [RF[62] Actualizar pedido - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF62)]
+   */
   static async actualizarPedido(pedido) {
-    const config = {
-      headers: {
-        'x-api-key': API_KEY,
-      },
-    };
-
+    console.log('[DEBUG] RepositorioActualizarPedido - Pedido a actualizar:', pedido);
     try {
       const respuesta = await axios.put(
-        RUTAS_API.PEDIDOS.ACTUALIZAR_PEDIDO,
-        pedido, // <--- aquí se manda directamente el objeto plano
-        config
+        `${RUTAS_API.PEDIDOS.ACTUALIZAR_PEDIDO}`,
+        {
+          idPedido: pedido.idPedido,
+          estado: pedido.estado,
+          precioTotal: pedido.precioTotal,
+          idEnvio: pedido.idEnvio,
+          idPago: pedido.idPago,
+        },
+        {
+          headers: {
+            'x-api-key': API_KEY,
+          },
+          withCredentials: true,
+        }
       );
-
-      return respuesta.data;
+      return respuesta;
     } catch (error) {
-      console.error('❌ Error al actualizar el pedido:', error);
-      return null;
+      console.error('[Error RepositorioActualizarPedido]:', error.response?.data || error.message);
+
+      // Lanzar el error con el mensaje del backend si existe
+      if (error.response?.data?.mensaje) {
+        throw new Error(error.response.data.mensaje);
+      }
+      // Si no hay mensaje del backend, lanzar el error original
+      throw error;
     }
   }
 }
diff --git a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
index 1c23311c..d36c2e57 100644
--- a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
@@ -6,7 +6,13 @@ import Alerta from '@Moleculas/Alerta';
 import { useActualizarPedido } from '@Hooks/Pedidos/useActualizarPedido';
 import { tokens } from '@SRC/theme';
 
-const ModalEditarPedido = ({ abierto, onCerrar, datosIniciales, onActualizar, onMostrarAlerta }) => {
+const ModalEditarPedido = ({
+  abierto,
+  onCerrar,
+  datosIniciales,
+  onActualizar,
+  onMostrarAlerta,
+}) => {
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
   const { actualizarPedido, cargando } = useActualizarPedido();
@@ -23,8 +29,8 @@ const ModalEditarPedido = ({ abierto, onCerrar, datosIniciales, onActualizar, on
 
   const manejarCambio = useCallback((e) => {
     const { name, value } = e.target;
-    setPedido(prev => ({ ...prev, [name]: value }));
-    setErrores(prev => ({ ...prev, [name]: false }));
+    setPedido((prev) => ({ ...prev, [name]: value }));
+    setErrores((prev) => ({ ...prev, [name]: false }));
   }, []);
 
   const validarCampos = () => {
@@ -36,34 +42,51 @@ const ModalEditarPedido = ({ abierto, onCerrar, datosIniciales, onActualizar, on
     setErrores(nuevosErrores);
     return Object.keys(nuevosErrores).length === 0;
   };
-
   const manejarGuardar = async () => {
+    console.log('Iniciando manejarGuardar');
+    console.log('Pedido actual:', pedido);
     if (!validarCampos()) {
+      console.log('Validación de campos falló');
       onMostrarAlerta('Completa todos los campos obligatorios.', 'error');
       return;
     }
 
-    if (!pedido.idPedido) {
+    if (!pedido.id) {
+      console.log('Falta ID del pedido');
       onMostrarAlerta('Falta el ID del pedido. No se puede actualizar.', 'error');
       return;
     }
+    console.log('Validaciones pasadas correctamente');
 
-    // ✅ Mapeo de campos como espera el backend
+    // ✅ Mapeo de campos como espera el backend    console.log('Preparando datos para mapeo');
     const pedidoMapeado = {
-      idPedido: pedido.idPedido,
+      idPedido: pedido.id.toString(),
       estado: pedido.estatusPedido, // Mapeo correcto para el backend
       precioTotal: parseFloat(pedido.precioTotal),
-      idPago: pedido.idPago,
-      idEnvio: pedido.idEnvio,
+      idEnvio: pedido.estatusEnvio,
+      idPago: pedido.estatusPago,
     };
 
-    const exito = await actualizarPedido(pedidoMapeado);
-    if (exito) {
-      onMostrarAlerta('Pedido actualizado correctamente', 'success');
-      onActualizar();
-      onCerrar();
-    } else {
-      onMostrarAlerta('Error al actualizar el pedido.', 'error');
+    console.log('[DEBUG] Pedido original:', pedido);
+    console.log('[DEBUG] Pedido mapeado:', pedidoMapeado);
+    console.log('Intentando actualizar pedido...');
+
+    try {
+      const resultado = await actualizarPedido(pedidoMapeado);
+      console.log('Resultado de actualización:', resultado);
+
+      if (resultado.exito) {
+        console.log('Actualización exitosa');
+        onMostrarAlerta(resultado.mensaje, 'success');
+        onActualizar();
+        onCerrar();
+      } else {
+        console.log('Actualización fallida:', resultado.mensaje);
+        onMostrarAlerta(resultado.mensaje, 'error');
+      }
+    } catch (error) {
+      console.error('Error en la actualización:', error);
+      onMostrarAlerta(error.message || 'Error al actualizar el pedido.', 'error');
     }
   };
 
diff --git a/src/hooks/Pedidos/useActualizarPedido.js b/src/hooks/Pedidos/useActualizarPedido.js
index ba66bc06..bd9ee0d4 100644
--- a/src/hooks/Pedidos/useActualizarPedido.js
+++ b/src/hooks/Pedidos/useActualizarPedido.js
@@ -2,19 +2,42 @@ import { useState } from 'react';
 import { RepositorioActualizarPedido } from '@Dominio/Repositorios/Pedidos/repositorioActualizarPedido';
 
 export const useActualizarPedido = () => {
+  const [mensaje, setMensaje] = useState('');
+  const [exito, setExito] = useState(false);
   const [cargando, setCargando] = useState(false);
-
+  const [error, setError] = useState(false);
   const actualizarPedido = async (pedido) => {
+    if (!pedido || !pedido.idPedido) {
+      setError(true);
+      setMensaje('Datos del pedido incompletos');
+      return { exito: false, mensaje: 'Datos del pedido incompletos' };
+    }
+
     setCargando(true);
+    setExito(false);
+    setError(false);
+    setMensaje('');
     try {
       const respuesta = await RepositorioActualizarPedido.actualizarPedido(pedido);
-      return respuesta !== null;
-    } catch {
-      return false;
+      setExito(true);
+      setMensaje(respuesta.data.mensaje || 'Pedido actualizado correctamente');
+      return {
+        exito: true,
+        mensaje: respuesta.data.mensaje || 'Pedido actualizado correctamente',
+        data: respuesta,
+      };
+    } catch (error) {
+      setExito(false);
+      setError(true);
+      const mensajeError = error.message || 'Error al actualizar el pedido';
+      setMensaje(mensajeError);
+      return { exito: false, mensaje: mensajeError };
     } finally {
       setCargando(false);
     }
   };
 
-  return { actualizarPedido, cargando };
-};
\ No newline at end of file
+  return { actualizarPedido, cargando, exito, error, mensaje, setError };
+};
+
+export default useActualizarPedido;

From b26725bbbcf7e584712079ed095053beae1c8aa4 Mon Sep 17 00:00:00 2001
From: Krlos7121 <a0771689@tec.mx>
Date: Fri, 6 Jun 2025 13:26:47 -0600
Subject: [PATCH 120/160] feature: RF16 agregar empleado

---
 .../Modelos/Empleados/CrearEmpleado.js        | 115 ++++++
 .../Modelos/Usuarios/modeloCrearUsuario.js    |  20 +-
 .../Empleados/RepositorioCrearEmpleado.js     |  28 +-
 src/Utilidades/Constantes/rutasAPI.js         |   4 +-
 ...pleado.jsx => FormaActualizarEmpleado.jsx} |  97 +++--
 .../Formularios/FormaCrearEmpleado.jsx        | 339 ++++++++++++++++++
 .../Formularios/FormularioCrearUsuario.jsx    |  68 ++--
 ...leados.jsx => ModalActualizarEmpleado.jsx} |  22 +-
 .../Organismos/ModalCrearEmpleado.jsx         |  83 +++++
 .../Paginas/Empleados/ListaEmpleados.jsx      |  28 +-
 src/hooks/Empleados/useAccionesEmpleado.js    | 212 -----------
 src/hooks/Empleados/useActualizarEmpleado.js  | 190 +++++++++-
 src/hooks/Empleados/useCrearEmpleado.js       | 226 ++++++++++++
 13 files changed, 1067 insertions(+), 365 deletions(-)
 create mode 100644 src/Dominio/Modelos/Empleados/CrearEmpleado.js
 rename src/Vistas/Componentes/Organismos/Formularios/{FormaEmpleado.jsx => FormaActualizarEmpleado.jsx} (64%)
 create mode 100644 src/Vistas/Componentes/Organismos/Formularios/FormaCrearEmpleado.jsx
 rename src/Vistas/Componentes/Organismos/{ModalEmpleados.jsx => ModalActualizarEmpleado.jsx} (78%)
 create mode 100644 src/Vistas/Componentes/Organismos/ModalCrearEmpleado.jsx
 delete mode 100644 src/hooks/Empleados/useAccionesEmpleado.js
 create mode 100644 src/hooks/Empleados/useCrearEmpleado.js

diff --git a/src/Dominio/Modelos/Empleados/CrearEmpleado.js b/src/Dominio/Modelos/Empleados/CrearEmpleado.js
new file mode 100644
index 00000000..a9756d6e
--- /dev/null
+++ b/src/Dominio/Modelos/Empleados/CrearEmpleado.js
@@ -0,0 +1,115 @@
+//RF16 - Crear empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF16
+
+/**
+ * Valida los datos del formulario para crear un empleado.
+ * Devuelve un objeto con los campos que tienen errores.
+ * @param {Object} datos - Datos del empleado
+ * @returns {Object} errores - Campos con error
+ */
+
+export const validarDatosCrearEmpleado = (datos, empleadosExistentes = []) => {
+  const errores = {};
+
+  if (!datos.nombreCompleto || datos.nombreCompleto.trim() === '') {
+    errores.nombreCompleto = 'El campo es obligatorio';
+  }
+
+  if (!datos.fechaNacimiento) {
+    s;
+    errores.fechaNacimiento = 'El campo es obligatorio';
+  } else {
+    const hoy = new Date();
+    const fecha = new Date(datos.fechaNacimiento);
+
+    if (fecha > hoy) {
+      errores.fechaNacimiento = 'La fecha no puede ser futura';
+    } else {
+      // Calcular la fecha mínima permitida (18 años antes de hoy)
+      const fechaMinima = new Date(hoy.getFullYear() - 18, hoy.getMonth(), hoy.getDate());
+      if (fecha > fechaMinima) {
+        errores.fechaNacimiento = 'El empleado debe tener al menos 18 años al día de hoy';
+      }
+    }
+  }
+
+  const tieneCaracterEspecial = /[!@#$%^&*(),.?":{}|<>]/;
+  const tieneMayuscula = /[A-Z]/;
+
+  if (!datos.genero) errores.genero = true;
+
+  const correoValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!datos.correoElectronico) {
+    errores.correoElectronico = true;
+  } else if (!correoValido.test(datos.correoElectronico)) {
+    errores.correoElectronico = 'Correo electrónico no válido';
+  }
+  const telefonoValido = /^\d{10}$/;
+
+  if (!datos.numeroTelefono) {
+    errores.numeroTelefono = true;
+  } else if (!telefonoValido.test(datos.numeroTelefono)) {
+    errores.numeroTelefono = 'El número de teléfono debe tener exactamente 10 dígitos';
+  } else if (empleadosExistentes.some((empleado) => empleado.telefono === datos.numeroTelefono)) {
+    errores.numeroTelefono = 'Este número ya está registrado';
+  }
+
+  if (!datos.direccion || datos.direccion.trim() === '') {
+    errores.direccion = true;
+  }
+
+  if (!datos.contrasenia || datos.contrasenia.trim() === '') {
+    errores.contrasenia = true;
+  } else {
+    const contraseniaSinEspacios = datos.contrasenia.replace(/\s/g, '');
+    if (datos.contrasenia.length < 8) {
+      errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
+    } else if (!tieneCaracterEspecial.test(datos.contrasenia)) {
+      errores.contrasenia =
+        'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+    } else if (contraseniaSinEspacios.length < 2) {
+      errores.contrasenia =
+        'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+    } else if (!tieneMayuscula.test(datos.contrasenia)) {
+      errores.contrasenia = 'Debe contener al menos una letra mayúscula';
+    }
+  }
+  if (!datos.confirmarContrasenia || datos.confirmarContrasenia.trim() === '') {
+    errores.confirmarContrasenia = true;
+  } else if (datos.contrasenia !== datos.confirmarContrasenia) {
+    errores.confirmarContrasenia = 'Las contraseñas no coinciden';
+  }
+
+  if (!datos.numeroEmergencia || datos.numeroEmergencia.trim() === '') {
+    errores.numeroEmergencia = true;
+  } else if (!telefonoValido.test(datos.numeroEmergencia)) {
+    errores.numeroEmergencia = 'El número de emergencia debe tener exactamente 10 dígitos';
+  }
+  if (!datos.areaTrabajo || datos.areaTrabajo.trim() === '') {
+    errores.areaTrabajo = 'El campo no puede estar vacío ni contener sólo espacios';
+  }
+  if (!datos.areaTrabajo || datos.areaTrabajo.trim() === '') {
+    errores.areaTrabajo = true;
+  }
+  if (!datos.posicion || datos.posicion.trim() === '') {
+    errores.posicion = 'El campo no puede estar vacío ni contener sólo espacios';
+  }
+
+  if (!datos.cantidadPuntos || isNaN(datos.cantidadPuntos) || datos.cantidadPuntos < 0) {
+    errores.cantidadPuntos = 'La cantidad de puntos debe ser un número positivo';
+  }
+
+  if (!datos.antiguedad) {
+    errores.antiguedad = 'La antigüedad es requerida';
+  } else {
+    const hoy = new Date();
+    const antiguedadFecha = new Date(datos.antiguedad);
+    if (antiguedadFecha > hoy) {
+      errores.antiguedad = 'La antigüedad no puede ser una fecha futura';
+    }
+  }
+  if (!datos.antiguedad) {
+    errores.antiguedad = true;
+  }
+
+  return errores;
+};
diff --git a/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js b/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js
index ee46b317..0a238489 100644
--- a/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js
@@ -27,11 +27,7 @@ export const validarDatosCrearUsuario = (datos, usuariosExistentes = []) => {
     errores.numeroTelefono = true;
   } else if (!telefonoValido.test(datos.numeroTelefono)) {
     errores.numeroTelefono = 'El número de teléfono debe tener exactamente 10 dígitos';
-  } else if (
-    usuariosExistentes.some(
-      (usuario) => usuario.telefono === datos.numeroTelefono
-    )
-  ) {
+  } else if (usuariosExistentes.some((usuario) => usuario.telefono === datos.numeroTelefono)) {
     errores.numeroTelefono = 'Este número ya está registrado';
   }
   if (!datos.direccion || datos.direccion.trim() === '') {
@@ -58,20 +54,20 @@ export const validarDatosCrearUsuario = (datos, usuariosExistentes = []) => {
     errores.contrasenia = true;
   } else {
     const contraseniaSinEspacios = datos.contrasenia.replace(/\s/g, ''); // elimina todos los espacios
-  
+
     if (datos.contrasenia.length < 8) {
       errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
     } else if (!tieneCaracterEspecial.test(datos.contrasenia)) {
-      errores.contrasenia 
-        = 'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+      errores.contrasenia =
+        'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
     } else if (contraseniaSinEspacios.length < 2) {
-      errores.contrasenia 
-        = 'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
-    }  else if (!tieneMayuscula.test(datos.contrasenia)) {
+      errores.contrasenia =
+        'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+    } else if (!tieneMayuscula.test(datos.contrasenia)) {
       errores.contrasenia = 'Debe contener al menos una letra mayúscula';
     }
   }
-  
+
   if (!datos.confirmarContrasenia) {
     errores.confirmarContrasenia = true;
   } else if (datos.contrasenia !== datos.confirmarContrasenia) {
diff --git a/src/Dominio/Repositorios/Empleados/RepositorioCrearEmpleado.js b/src/Dominio/Repositorios/Empleados/RepositorioCrearEmpleado.js
index 9e001690..dbd88182 100644
--- a/src/Dominio/Repositorios/Empleados/RepositorioCrearEmpleado.js
+++ b/src/Dominio/Repositorios/Empleados/RepositorioCrearEmpleado.js
@@ -1,27 +1,27 @@
 //RF[16] Crea Empleado - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF16]
 
-import axios from 'axios';
 import { RUTAS_API } from '@Constantes/rutasAPI';
+import axios from 'axios';
 
 const API_KEY = import.meta.env.VITE_API_KEY;
 
+/**
+ * Crea un nuevo empleado
+ * @param {Object} datosEmpleado - Los datos del empleado a crear
+ * @returns {Promise} - Promise con la respuesta del servidor
+ */
 export class RepositorioCrearEmpleado {
-  static async crear(datos) {
+  static async crear(cambios) {
     try {
-      const respuesta = await axios.post(
-        RUTAS_API.EMPLEADOS.CREAR_EMPLEADO,
-        { datos },
-        {
-          withCredentials: true,
-          headers: {
-            'x-api-key': API_KEY,
-          },
-        }
-      );
+      const respuesta = await axios.post(RUTAS_API.EMPLEADOS.CREAR, cambios, {
+        withCredentials: true,
+        headers: {
+          'x-api-key': API_KEY,
+        },
+      });
       return respuesta.data;
     } catch (error) {
-      const mensaje = error?.response?.data?.mensaje || 'Error al crear';
-      throw new Error(mensaje);
+      throw new Error(error?.response?.data?.mensaje || 'Error al crear empleado');
     }
   }
 }
diff --git a/src/Utilidades/Constantes/rutasAPI.js b/src/Utilidades/Constantes/rutasAPI.js
index ea8837c0..5c81401b 100644
--- a/src/Utilidades/Constantes/rutasAPI.js
+++ b/src/Utilidades/Constantes/rutasAPI.js
@@ -13,7 +13,6 @@ const BASE_EVENTOS = `${BASE_URL}/api/eventos`;
 const BASE_PAGOS = `${BASE_URL}/api/pagos`;
 const BASE_AUTENTICACION = `${BASE_URL}/api/autenticacion`;
 
-
 export const RUTAS_API = {
   USUARIOS: {
     BASE: BASE_USUARIOS,
@@ -27,7 +26,7 @@ export const RUTAS_API = {
     ACTIVAR_2FA: `${BASE_AUTENTICACION}/activar-2fa`,
     VERIFICAR_2FA: `${BASE_AUTENTICACION}/verificar-2fa`,
   },
-  
+
   CATEGORIAS: {
     BASE: BASE_CATEGORIAS,
     CONSULTAR_LISTA: `${BASE_CATEGORIAS}/consultar-lista-categorias`,
@@ -61,6 +60,7 @@ export const RUTAS_API = {
   },
   EMPLEADOS: {
     BASE: BASE_EMPLEADOS,
+    CREAR: `${BASE_EMPLEADOS}/crear`,
     CONSULTAR_LISTA: `${BASE_EMPLEADOS}/consultar-lista`,
     CONSULTAR_GRUPOS: `${BASE_EMPLEADOS}/consultar-grupo`,
     ELIMINAR_EMPLEADO: `${BASE_EMPLEADOS}/eliminar`,
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaEmpleado.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaActualizarEmpleado.jsx
similarity index 64%
rename from src/Vistas/Componentes/Organismos/Formularios/FormaEmpleado.jsx
rename to src/Vistas/Componentes/Organismos/Formularios/FormaActualizarEmpleado.jsx
index 2417e688..cb981ca6 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaEmpleado.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaActualizarEmpleado.jsx
@@ -4,13 +4,20 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import CampoTexto from '@Atomos/CampoTexto';
 
-const FormaEmpleado = ({
+// Límites para los campos
+const LIMITE_NUMERO_EMERGENCIA = 10;
+const LIMITE_AREA_TRABAJO = 50;
+const LIMITE_POSICION = 50;
+const LIMITE_CANTIDAD_PUNTOS = 10;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+const CAMPO_OBLIGATORIO = 'Este campo es obligatorio';
+
+const FormaActualizarEmpleado = ({
   datosEmpleado,
   erroresValidacion,
   manejarCambio,
   manejarAntiguedad,
   obtenerHelperText,
-  esEdicion,
 }) => {
   const estiloCuadricula = {
     display: 'flex',
@@ -18,46 +25,6 @@ const FormaEmpleado = ({
   };
   return (
     <Grid container columns={12}>
-      <Grid size={6} sx={estiloCuadricula}>
-        <CampoTexto
-          label='ID Empleado'
-          name='idEmpleado'
-          disabled={esEdicion}
-          value={datosEmpleado.idEmpleado}
-          onChange={manejarCambio}
-          required
-          size='medium'
-          error={!!erroresValidacion.idEmpleado}
-          helperText={obtenerHelperText('idEmpleado')}
-          inputProps={{
-            maxLength: 8,
-            type: 'number',
-            min: 1,
-            step: 1,
-          }}
-        />
-      </Grid>
-
-      <Grid size={6} sx={estiloCuadricula}>
-        <CampoTexto
-          label='ID Usuario'
-          name='idUsuario'
-          disabled={esEdicion}
-          value={datosEmpleado.idUsuario}
-          onChange={manejarCambio}
-          required
-          size='medium'
-          error={!!erroresValidacion.idUsuario}
-          helperText={obtenerHelperText('idUsuario')}
-          inputProps={{
-            maxLength: 8,
-            type: 'number',
-            min: 1,
-            step: 1,
-          }}
-        />
-      </Grid>
-
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
           label='Número de Emergencia'
@@ -67,9 +34,13 @@ const FormaEmpleado = ({
           required
           size='medium'
           error={!!erroresValidacion.numeroEmergencia}
-          helperText={obtenerHelperText('numeroEmergencia')}
+          helperText={
+            erroresValidacion.numeroEmergencia
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.numeroEmergencia.length}/${LIMITE_NUMERO_EMERGENCIA} - ${MENSAJE_LIMITE}`
+          }
           inputProps={{
-            maxLength: 10,
+            maxLength: LIMITE_NUMERO_EMERGENCIA,
             type: 'text',
             inputMode: 'numeric',
             pattern: '[0-9]*',
@@ -91,9 +62,13 @@ const FormaEmpleado = ({
           required
           size='medium'
           error={!!erroresValidacion.areaTrabajo}
-          helperText={obtenerHelperText('areaTrabajo')}
+          helperText={
+            erroresValidacion.areaTrabajo
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.areaTrabajo.length}/${LIMITE_AREA_TRABAJO} - ${MENSAJE_LIMITE}`
+          }
           inputProps={{
-            maxLength: 50,
+            maxLength: LIMITE_AREA_TRABAJO,
           }}
         />
       </Grid>
@@ -114,9 +89,13 @@ const FormaEmpleado = ({
           required
           size='medium'
           error={!!erroresValidacion.posicion}
-          helperText={obtenerHelperText('posicion')}
+          helperText={
+            erroresValidacion.posicion
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.posicion.length}/${LIMITE_POSICION} - ${MENSAJE_LIMITE}`
+          }
           inputProps={{
-            maxLength: 40,
+            maxLength: LIMITE_POSICION,
           }}
         />
       </Grid>
@@ -126,16 +105,24 @@ const FormaEmpleado = ({
           label='Cantidad de Puntos'
           name='cantidadPuntos'
           value={datosEmpleado.cantidadPuntos}
-          onChange={manejarCambio}
+          onChange={(num) => {
+            const soloNumeros = num.target.value.replace(/\D/g, '');
+            manejarCambio({ target: { name: 'cantidadPuntos', value: soloNumeros } });
+          }}
           required
           size='medium'
           error={!!erroresValidacion.cantidadPuntos}
-          helperText={obtenerHelperText('cantidadPuntos')}
+          helperText={
+            erroresValidacion.cantidadPuntos
+              ? CAMPO_OBLIGATORIO
+              : `${
+                  (datosEmpleado.cantidadPuntos || '').toString().length
+                }/${LIMITE_CANTIDAD_PUNTOS} - ${MENSAJE_LIMITE}`
+          }
           inputProps={{
-            maxLength: 10,
-            type: 'number',
-            min: 0,
-            step: 1,
+            maxLength: LIMITE_CANTIDAD_PUNTOS,
+            inputMode: 'numeric',
+            pattern: '[0-9]*',
           }}
         />
       </Grid>
@@ -162,4 +149,4 @@ const FormaEmpleado = ({
   );
 };
 
-export default FormaEmpleado;
+export default FormaActualizarEmpleado;
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearEmpleado.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearEmpleado.jsx
new file mode 100644
index 00000000..e2911b14
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearEmpleado.jsx
@@ -0,0 +1,339 @@
+import { Grid } from '@mui/material';
+import { DateField } from '@mui/x-date-pickers';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import CampoTexto from '@Atomos/CampoTexto';
+import CampoSelect from '@Atomos/CampoSelect';
+
+// Límites para los campos
+const LIMITE_NUMERO_EMERGENCIA = 10;
+const LIMITE_NOMBRE_COMPLETO = 100;
+const LIMITE_AREA_TRABAJO = 50;
+const LIMITE_POSICION = 50;
+const LIMITE_CORREO = 100;
+const LIMITE_TELEFONO = 10;
+const LIMITE_DIRECCION = 100;
+const LIMITE_CONTRASENIA = 64;
+const LIMITE_CANTIDAD_PUNTOS = 10;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+const CAMPO_OBLIGATORIO = 'Este campo es obligatorio';
+
+const FormaCrearEmpleado = ({
+  datosEmpleado,
+  erroresValidacion,
+  manejarCambio,
+  manejarAntiguedad,
+  manejarFechaNacimiento,
+  obtenerHelperText,
+}) => {
+  const estiloCuadricula = {
+    display: 'flex',
+    justifyContent: 'center',
+  };
+  return (
+    <Grid container columns={12}>
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Nombre Completo'
+          name='nombreCompleto'
+          value={datosEmpleado.nombreCompleto}
+          onChange={(letra) => {
+            const soloLetras = letra.target.value.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑ\s]/g, ''); // solo letras y espacios
+            manejarCambio({ target: { name: 'nombreCompleto', value: soloLetras } });
+          }}
+          required
+          size='medium'
+          error={!!erroresValidacion.nombreCompleto}
+          helperText={
+            erroresValidacion.nombreCompleto
+              ? erroresValidacion.nombreCompleto === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.nombreCompleto
+              : `${datosEmpleado.nombreCompleto.length}/${LIMITE_NOMBRE_COMPLETO} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_NOMBRE_COMPLETO,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
+          <DateField
+            required
+            label='Fecha de nacimiento'
+            value={datosEmpleado.fechaNacimiento}
+            onChange={manejarFechaNacimiento}
+            format='DD/MM/YYYY'
+            sx={{ width: '30ch' }}
+            slotProps={{
+              textField: {
+                error: !!erroresValidacion.fechaNacimiento,
+                helperText:
+                  erroresValidacion.fechaNacimiento === true
+                    ? CAMPO_OBLIGATORIO
+                    : erroresValidacion.fechaNacimiento || '',
+              },
+            }}
+          />
+        </LocalizationProvider>
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoSelect
+          required
+          label='Género'
+          name='genero'
+          value={datosEmpleado.genero}
+          onChange={manejarCambio}
+          size='medium'
+          error={!!erroresValidacion.genero}
+          helperText={erroresValidacion.genero && CAMPO_OBLIGATORIO}
+          options={[
+            { value: 'Hombre', label: 'Hombre' },
+            { value: 'Mujer', label: 'Mujer' },
+            { value: 'Otro', label: 'Otro' },
+          ]}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Correo Electrónico'
+          name='correoElectronico'
+          value={datosEmpleado.correoElectronico}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.correoElectronico}
+          helperText={
+            erroresValidacion.correoElectronico
+              ? erroresValidacion.correoElectronico === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.correoElectronico
+              : `${datosEmpleado.correoElectronico.length}/${LIMITE_CORREO} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_CORREO,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Número de Teléfono'
+          name='numeroTelefono'
+          value={datosEmpleado.numeroTelefono}
+          onChange={(num) => {
+            const soloNumeros = num.target.value.replace(/\D/g, ''); // elimina todo lo que no es dígito
+            manejarCambio({ target: { name: 'numeroTelefono', value: soloNumeros } });
+          }}
+          required
+          size='medium'
+          error={!!erroresValidacion.numeroTelefono}
+          helperText={
+            erroresValidacion.numeroTelefono
+              ? erroresValidacion.numeroTelefono === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.numeroTelefono
+              : `${datosEmpleado.numeroTelefono.length}/${LIMITE_TELEFONO} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_TELEFONO,
+            inputMode: 'numeric', // para teclado numérico en móviles
+            pattern: '[0-9]*',
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Dirección'
+          name='direccion'
+          value={datosEmpleado.direccion}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.direccion}
+          helperText={
+            erroresValidacion.direccion
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.direccion.length}/${LIMITE_DIRECCION} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_DIRECCION,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Contraseña'
+          name='contrasenia'
+          type='password'
+          value={datosEmpleado.contrasenia}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.contrasenia}
+          autoComplete='new-password'
+          helperText={
+            erroresValidacion.contrasenia
+              ? erroresValidacion.contrasenia === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.contrasenia
+              : `${datosEmpleado.contrasenia.length}/${LIMITE_CONTRASENIA} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_CONTRASENIA,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Confirmar contraseña'
+          name='confirmarContrasenia'
+          type='password'
+          value={datosEmpleado.confirmarContrasenia}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.confirmarContrasenia}
+          autoComplete='new-password'
+          helperText={
+            erroresValidacion.confirmarContrasenia
+              ? erroresValidacion.confirmarContrasenia === true
+                ? CAMPO_OBLIGATORIO
+                : erroresValidacion.confirmarContrasenia
+              : `${datosEmpleado.confirmarContrasenia.length}/${LIMITE_CONTRASENIA} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_CONTRASENIA,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Número de Emergencia'
+          name='numeroEmergencia'
+          value={datosEmpleado.numeroEmergencia}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.numeroEmergencia}
+          helperText={
+            erroresValidacion.numeroEmergencia
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.numeroEmergencia.length}/${LIMITE_NUMERO_EMERGENCIA} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_NUMERO_EMERGENCIA,
+            type: 'text',
+            inputMode: 'numeric',
+            pattern: '[0-9]*',
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Área de Trabajo'
+          name='areaTrabajo'
+          value={datosEmpleado.areaTrabajo}
+          onKeyPress={(event) => {
+            if (!/^[a-zA-Z\s]*$/.test(event.key)) {
+              event.preventDefault();
+            }
+          }}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.areaTrabajo}
+          helperText={
+            erroresValidacion.areaTrabajo
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.areaTrabajo.length}/${LIMITE_AREA_TRABAJO} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_AREA_TRABAJO,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Posición'
+          name='posicion'
+          value={datosEmpleado.posicion}
+          type='text'
+          inputMode='text'
+          onKeyPress={(event) => {
+            if (!/^[a-zA-Z\s]*$/.test(event.key)) {
+              event.preventDefault();
+            }
+          }}
+          onChange={manejarCambio}
+          required
+          size='medium'
+          error={!!erroresValidacion.posicion}
+          helperText={
+            erroresValidacion.posicion
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.posicion.length}/${LIMITE_POSICION} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_POSICION,
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <CampoTexto
+          label='Cantidad de Puntos'
+          name='cantidadPuntos'
+          value={datosEmpleado.cantidadPuntos}
+          onChange={(num) => {
+            const soloNumeros = num.target.value.replace(/\D/g, '');
+            manejarCambio({ target: { name: 'cantidadPuntos', value: soloNumeros } });
+          }}
+          required
+          size='medium'
+          error={!!erroresValidacion.cantidadPuntos}
+          helperText={
+            erroresValidacion.cantidadPuntos
+              ? CAMPO_OBLIGATORIO
+              : `${datosEmpleado.cantidadPuntos.length}/${LIMITE_CANTIDAD_PUNTOS} - ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_CANTIDAD_PUNTOS,
+            inputMode: 'numeric',
+            pattern: '[0-9]',
+          }}
+        />
+      </Grid>
+
+      <Grid size={6} sx={estiloCuadricula}>
+        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es'>
+          <DateField
+            required
+            label='Antigüedad'
+            value={datosEmpleado.antiguedad}
+            onChange={manejarAntiguedad}
+            format='DD/MM/YYYY'
+            sx={{ width: '30ch' }}
+            slotProps={{
+              textField: {
+                error: !!erroresValidacion.antiguedad,
+                helperText: obtenerHelperText('antiguedad'),
+              },
+            }}
+          />
+        </LocalizationProvider>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default FormaCrearEmpleado;
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearUsuario.jsx
index 74bc8678..59f05533 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioCrearUsuario.jsx
@@ -19,7 +19,7 @@ const LIMITE_APELLIDO = 50;
 const LIMITE_CORREO = 100;
 const LIMITE_TELEFONO = 10;
 const LIMITE_DIRECCION = 100;
-const LIMITE_CONTRASENIA = 64; 
+const LIMITE_CONTRASENIA = 64;
 const MENSAJE_LIMITE = 'Máximo caracteres';
 
 const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
@@ -85,7 +85,7 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
         setAlerta({
           tipo: 'success',
           mensaje: resumenUsuario,
-          icono: true, 
+          icono: true,
           cerrable: true,
           centradoInferior: true,
           duracion: 3000,
@@ -172,7 +172,7 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
                 size='medium'
                 error={!!errores.nombreCompleto}
                 helperText={
-                errores.nombreCompleto
+                  errores.nombreCompleto
                     ? CAMPO_OBLIGATORIO
                     : `${datosUsuario.nombreCompleto.length}/${LIMITE_NOMBRE} - ${MENSAJE_LIMITE}`
                 }
@@ -192,7 +192,7 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
                 size='medium'
                 error={!!errores.apellido}
                 helperText={
-                errores.apellido
+                  errores.apellido
                     ? CAMPO_OBLIGATORIO
                     : `${datosUsuario.apellido.length}/${LIMITE_APELLIDO} - ${MENSAJE_LIMITE}`
                 }
@@ -253,7 +253,9 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
                 error={!!errores.correoElectronico}
                 helperText={
                   errores.correoElectronico
-                    ? (errores.correoElectronico === true ? CAMPO_OBLIGATORIO : errores.correoElectronico)
+                    ? errores.correoElectronico === true
+                      ? CAMPO_OBLIGATORIO
+                      : errores.correoElectronico
                     : `${datosUsuario.correoElectronico.length}/${LIMITE_CORREO} - ${MENSAJE_LIMITE}`
                 }
                 inputProps={{
@@ -264,28 +266,29 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
 
             <Grid size={6} sx={estiloCuadricula}>
               <CampoTexto
-              label='Número de Teléfono'
-              name='numeroTelefono'
-              value={datosUsuario.numeroTelefono}
-              onChange={(num) => {
-                const soloNumeros = num.target.value.replace(/\D/g, ''); // elimina todo lo que no es dígito
-                manejarCambio({ target: { name: 'numeroTelefono', value: soloNumeros } });
-              }}
-              required
-              size='medium'
-              error={!!errores.numeroTelefono}
-              helperText={
-                errores.numeroTelefono
-                  ? (errores.numeroTelefono === true ? CAMPO_OBLIGATORIO : errores.numeroTelefono)
-                  : `${datosUsuario.numeroTelefono.length}/${LIMITE_TELEFONO} - ${MENSAJE_LIMITE}`
-              }
-              inputProps={{
-                maxLength: LIMITE_TELEFONO,
-                inputMode: 'numeric', // para teclado numérico en móviles
-                pattern: '[0-9]*',
-              }}
-            />
-
+                label='Número de Teléfono'
+                name='numeroTelefono'
+                value={datosUsuario.numeroTelefono}
+                onChange={(num) => {
+                  const soloNumeros = num.target.value.replace(/\D/g, ''); // elimina todo lo que no es dígito
+                  manejarCambio({ target: { name: 'numeroTelefono', value: soloNumeros } });
+                }}
+                required
+                size='medium'
+                error={!!errores.numeroTelefono}
+                helperText={
+                  errores.numeroTelefono
+                    ? errores.numeroTelefono === true
+                      ? CAMPO_OBLIGATORIO
+                      : errores.numeroTelefono
+                    : `${datosUsuario.numeroTelefono.length}/${LIMITE_TELEFONO} - ${MENSAJE_LIMITE}`
+                }
+                inputProps={{
+                  maxLength: LIMITE_TELEFONO,
+                  inputMode: 'numeric', // para teclado numérico en móviles
+                  pattern: '[0-9]*',
+                }}
+              />
             </Grid>
 
             <Grid size={6} sx={estiloCuadricula}>
@@ -298,7 +301,7 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
                 size='medium'
                 error={!!errores.direccion}
                 helperText={
-                errores.direccion
+                  errores.direccion
                     ? CAMPO_OBLIGATORIO
                     : `${datosUsuario.direccion.length}/${LIMITE_DIRECCION} - ${MENSAJE_LIMITE}`
                 }
@@ -359,13 +362,14 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
                 autoComplete='new-password'
                 helperText={
                   errores.contrasenia
-                    ? (errores.contrasenia === true ? CAMPO_OBLIGATORIO : errores.contrasenia)
+                    ? errores.contrasenia === true
+                      ? CAMPO_OBLIGATORIO
+                      : errores.contrasenia
                     : `${datosUsuario.contrasenia.length}/${LIMITE_CONTRASENIA} - ${MENSAJE_LIMITE}`
                 }
                 inputProps={{
                   maxLength: LIMITE_CONTRASENIA,
                 }}
-                
               />
             </Grid>
 
@@ -382,7 +386,9 @@ const FormularioCrearUsuario = ({ open, onClose, onUsuarioCreado }) => {
                 autoComplete='new-password'
                 helperText={
                   errores.confirmarContrasenia
-                    ? (errores.confirmarContrasenia === true ? CAMPO_OBLIGATORIO : errores.confirmarContrasenia)
+                    ? errores.confirmarContrasenia === true
+                      ? CAMPO_OBLIGATORIO
+                      : errores.confirmarContrasenia
                     : `${datosUsuario.confirmarContrasenia.length}/${LIMITE_CONTRASENIA} - ${MENSAJE_LIMITE}`
                 }
                 inputProps={{
diff --git a/src/Vistas/Componentes/Organismos/ModalEmpleados.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarEmpleado.jsx
similarity index 78%
rename from src/Vistas/Componentes/Organismos/ModalEmpleados.jsx
rename to src/Vistas/Componentes/Organismos/ModalActualizarEmpleado.jsx
index fb0be117..e577113a 100644
--- a/src/Vistas/Componentes/Organismos/ModalEmpleados.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarEmpleado.jsx
@@ -3,22 +3,22 @@
 import { Box } from '@mui/material';
 import Alerta from '@Moleculas/Alerta';
 import ModalFlotante from '@Organismos/ModalFlotante';
-import FormaEmpleado from '@Organismos/Formularios/FormaEmpleado';
-import { useAccionesEmpleado } from '@Hooks/Empleados/useAccionesEmpleado';
+import FormaActualizarEmpleado from '@Organismos/Formularios/FormaActualizarEmpleado';
+import { useActualizarEmpleado } from '@SRC/hooks/Empleados/useActualizarEmpleado';
 
-const ModalEmpleados = ({ open, onClose, onAccion, empleadoEdicion }) => {
+const ModalActualizarEmpleado = ({ open, onClose, onAccion, empleadoEdicion }) => {
   const {
     datosEmpleado,
     erroresValidacion,
     alerta,
     setAlerta,
-    esEdicion,
     manejarCambio,
     manejarAntiguedad,
     obtenerHelperText,
     handleGuardar,
     limpiarFormulario,
-  } = useAccionesEmpleado(empleadoEdicion);
+    cargando,
+  } = useActualizarEmpleado(empleadoEdicion);
 
   const manejarConfirmacion = async () => {
     const resultado = await handleGuardar();
@@ -26,9 +26,7 @@ const ModalEmpleados = ({ open, onClose, onAccion, empleadoEdicion }) => {
     if (resultado?.exito) {
       if (onAccion) await onAccion();
 
-      if (!esEdicion) {
-        limpiarFormulario();
-      }
+      limpiarFormulario();
 
       // Esperar un momento para que el usuario vea el mensaje de éxito
       setTimeout(() => {
@@ -47,7 +45,8 @@ const ModalEmpleados = ({ open, onClose, onAccion, empleadoEdicion }) => {
       open={open}
       onClose={manejarCierre}
       onConfirm={manejarConfirmacion}
-      titulo={esEdicion ? datosEmpleado.nombreCompleto : 'Agregar Empleado'}
+      titulo={datosEmpleado.nombreCompleto}
+      loading={cargando}
     >
       <Box
         component='form'
@@ -60,13 +59,12 @@ const ModalEmpleados = ({ open, onClose, onAccion, empleadoEdicion }) => {
         noValidate
         autoComplete='off'
       >
-        <FormaEmpleado
+        <FormaActualizarEmpleado
           datosEmpleado={datosEmpleado}
           erroresValidacion={erroresValidacion}
           manejarCambio={manejarCambio}
           manejarAntiguedad={manejarAntiguedad}
           obtenerHelperText={obtenerHelperText}
-          esEdicion={esEdicion}
         />
       </Box>
 
@@ -83,4 +81,4 @@ const ModalEmpleados = ({ open, onClose, onAccion, empleadoEdicion }) => {
   );
 };
 
-export default ModalEmpleados;
+export default ModalActualizarEmpleado;
diff --git a/src/Vistas/Componentes/Organismos/ModalCrearEmpleado.jsx b/src/Vistas/Componentes/Organismos/ModalCrearEmpleado.jsx
new file mode 100644
index 00000000..e8cb85ee
--- /dev/null
+++ b/src/Vistas/Componentes/Organismos/ModalCrearEmpleado.jsx
@@ -0,0 +1,83 @@
+//RF16 - Agregar empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF16
+//RF19 - Actualizar empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF19
+import { Box } from '@mui/material';
+import Alerta from '@Moleculas/Alerta';
+import ModalFlotante from '@Organismos/ModalFlotante';
+import FormaCrearEmpleado from '@Organismos/Formularios/FormaCrearEmpleado';
+import { useCrearEmpleado } from '@SRC/hooks/Empleados/useCrearEmpleado';
+
+const ModalCrearEmpleado = ({ open, onClose, onAccion }) => {
+  const {
+    datosEmpleado,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    manejarCambio,
+    manejarFechaNacimiento,
+    manejarAntiguedad,
+    obtenerHelperText,
+    handleGuardar,
+    cargando,
+  } = useCrearEmpleado();
+
+  const manejarConfirmacion = async () => {
+    const resultado = await handleGuardar();
+
+    if (resultado?.exito) {
+      if (onAccion) await onAccion();
+
+      // Esperar un momento para que el usuario vea el mensaje de éxito
+      setTimeout(() => {
+        onClose();
+      }, 1500);
+    }
+  };
+
+  const manejarCierre = () => {
+    setAlerta(null);
+    onClose();
+  };
+
+  return (
+    <ModalFlotante
+      open={open}
+      onClose={manejarCierre}
+      onConfirm={manejarConfirmacion}
+      titulo='Añadir Empleados'
+      loading={cargando}
+    >
+      <Box
+        component='form'
+        method='POST'
+        sx={{
+          flexGrow: 1,
+          '& .MuiTextField-root': { margin: 1, width: '30ch' },
+          '& .MuiFormControl-root': { margin: 1, width: '30ch' },
+        }}
+        noValidate
+        autoComplete='off'
+      >
+        <FormaCrearEmpleado
+          erroresValidacion={erroresValidacion}
+          manejarCambio={manejarCambio}
+          manejarFechaNacimiento={manejarFechaNacimiento}
+          manejarAntiguedad={manejarAntiguedad}
+          obtenerHelperText={obtenerHelperText}
+          datosEmpleado={datosEmpleado}
+        />
+      </Box>
+
+      {alerta && (
+        <Alerta
+          sx={{ marginBottom: 2 }}
+          tipo={alerta.tipo}
+          mensaje={alerta.mensaje}
+          duracion='3000'
+          onClose={() => setAlerta(null)}
+        />
+      )}
+    </ModalFlotante>
+  );
+};
+
+export default ModalCrearEmpleado;
diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index d962012c..66b6a6c6 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -5,7 +5,8 @@ import { Box, useTheme } from '@mui/material';
 import Tabla from '@Organismos/Tabla';
 import ContenedorLista from '@Organismos/ContenedorLista';
 import ModalFlotante from '@Organismos/ModalFlotante';
-import ModalEmpleados from '@Organismos/ModalEmpleados';
+import ModalActualizarEmpleado from '@Organismos/ModalActualizarEmpleado';
+import ModalCrearEmpleado from '@Organismos/ModalCrearEmpleado';
 import InfoEmpleado from '@Moleculas/EmpleadoInfo';
 import PopUp from '@Moleculas/PopUp';
 import Alerta from '@Moleculas/Alerta';
@@ -31,8 +32,8 @@ const ListaGrupoEmpleados = () => {
   const [openModalEliminar, setAbrirPopUpEliminar] = useState(false);
   const [empleadoSeleccionado, setEmpleadoSeleccionado] = useState(null);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
-  const MENSAJE_POPUP_ELIMINAR
-    = '¿Estás seguro de que deseas eliminar los empleados seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR =
+    '¿Estás seguro de que deseas eliminar los empleados seleccionados? Esta acción no se puede deshacer.';
   const handleAbrirImportar = () => setModalImportarAbierto(true);
   const manejarCancelarEliminar = () => {
     setAbrirPopUpEliminar(false);
@@ -97,7 +98,7 @@ const ListaGrupoEmpleados = () => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
-      construccion: true,
+      disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_EMPLEADO),
     },
     {
       variant: 'outlined',
@@ -214,18 +215,10 @@ const ListaGrupoEmpleados = () => {
           />
         </ModalFlotante>
       )}
-      {/* Modal para agregar empleado */}
-      {modalAgregarAbierto && (
-        <ModalEmpleados
-          open={modalAgregarAbierto}
-          onClose={manejarCerrarAgregar}
-          onUsuarioCreado={recargar}
-        />
-      )}
 
       {/* Modal para actualizar empleado */}
       {modalActualizarAbierto && (
-        <ModalEmpleados
+        <ModalActualizarEmpleado
           open={modalActualizarAbierto}
           onClose={() => setModalActualizarAbierto(false)}
           onAccion={recargar}
@@ -233,6 +226,15 @@ const ListaGrupoEmpleados = () => {
         />
       )}
 
+      {/* Modal para agregar empleado */}
+      {modalAgregarAbierto && (
+        <ModalCrearEmpleado
+          open={modalAgregarAbierto}
+          onClose={manejarCerrarAgregar}
+          onAccion={recargar}
+        />
+      )}
+
       {/* PopUp de confirmación para eliminar */}
       <PopUp
         abrir={openModalEliminar}
diff --git a/src/hooks/Empleados/useAccionesEmpleado.js b/src/hooks/Empleados/useAccionesEmpleado.js
deleted file mode 100644
index 6825a653..00000000
--- a/src/hooks/Empleados/useAccionesEmpleado.js
+++ /dev/null
@@ -1,212 +0,0 @@
-//RF19 - Actualizar empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF19
-import { useState } from 'react';
-import dayjs from 'dayjs';
-import { RepositorioActualizarEmpleado } from '@Repositorios/Empleados/RepositorioActualizarEmpleado';
-import { validarDatosActualizarEmpleado } from '@Modelos/Empleados/ActualizarEmpleado';
-
-export const useAccionesEmpleado = (empleadoInicial = null) => {
-  const esEdicion = !!empleadoInicial;
-  const [erroresValidacion, setErroresValidacion] = useState({});
-  const [cargando, setCargando] = useState(false);
-  const [alerta, setAlerta] = useState(null);
-
-  // Inicializar con datos de edición o vacío
-  const [datosEmpleado, setDatosEmpleado] = useState(() => {
-    if (esEdicion) {
-      let fechaAntiguedad = null;
-      if (empleadoInicial.antiguedadDate) {
-        fechaAntiguedad = dayjs(empleadoInicial.antiguedadDate);
-      }
-      return {
-        ...empleadoInicial,
-        idEmpleado: empleadoInicial.id,
-        nombreCompleto: empleadoInicial.nombreCompleto,
-        correoElectronico: empleadoInicial.correoElectronico,
-        antiguedad: fechaAntiguedad,
-      };
-    }
-
-    return {
-      nombre: '',
-      nombreCompleto: '',
-      correoElectronico: '',
-      idEmpleado: '',
-      idUsuario: '',
-      numeroEmergencia: '',
-      areaTrabajo: '',
-      posicion: '',
-      cantidadPuntos: '',
-      antiguedad: null,
-    };
-  });
-
-  const CAMPO_OBLIGATORIO = 'Este campo es obligatorio';
-
-  // Función para verificar si se han realizado cambios
-  const hayCambios = () => {
-    if (!esEdicion) return true; // Si es creación, siempre hay cambios
-
-    const camposAComparar = [
-      'nombreCompleto',
-      'correoElectronico',
-      'numeroEmergencia',
-      'areaTrabajo',
-      'posicion',
-      'cantidadPuntos',
-    ];
-
-    // Comparar campos simples
-    const cambioCamposSimples = camposAComparar.some(
-      (campo) => datosEmpleado[campo]?.toString() !== empleadoInicial[campo]?.toString()
-    );
-
-    // Comparar fecha de antigüedad
-    const fechaAntigua = empleadoInicial.antiguedadDate
-      ? dayjs(empleadoInicial.antiguedadDate).format('YYYY-MM-DD')
-      : null;
-    const fechaNueva = datosEmpleado.antiguedad
-      ? datosEmpleado.antiguedad.format('YYYY-MM-DD')
-      : null;
-    const cambioFecha = fechaAntigua !== fechaNueva;
-
-    return cambioCamposSimples || cambioFecha;
-  };
-
-  // Métodos para manejar cambios
-  const manejarCambio = (evento) => {
-    const { name, value } = evento.target;
-
-    if (name === 'numeroEmergencia') {
-      const soloNumeros = value.replace(/\D/g, '').slice(0, 10);
-      setDatosEmpleado((prev) => ({ ...prev, [name]: soloNumeros }));
-    } else {
-      setDatosEmpleado((prev) => ({ ...prev, [name]: value }));
-    }
-  };
-
-  const manejarAntiguedad = (nuevaFecha) => {
-    setDatosEmpleado((prev) => ({
-      ...prev,
-      antiguedad: nuevaFecha,
-    }));
-  };
-
-  const obtenerHelperText = (campo) => {
-    const err = erroresValidacion[campo];
-    if (err) {
-      return typeof err === 'string' ? err : CAMPO_OBLIGATORIO;
-    }
-    if (
-      !esEdicion
-      && [
-        'idEmpleado',
-        'idUsuario',
-        'numeroEmergencia',
-        'areaTrabajo',
-        'posicion',
-        'cantidadPuntos',
-        'antiguedad',
-      ].includes(campo)
-    ) {
-      return CAMPO_OBLIGATORIO;
-    }
-    return '';
-  };
-
-  const handleGuardar = async () => {
-    if (esEdicion && !hayCambios()) {
-      setAlerta({
-        tipo: 'warning',
-        mensaje: 'No se han realizado cambios',
-      });
-      return { exito: false, mensaje: 'No se han realizado cambios' };
-    }
-
-    const datosProcesados = {
-      ...datosEmpleado,
-      id: esEdicion ? empleadoInicial.id : datosEmpleado.idEmpleado,
-      nombreCompleto: datosEmpleado.nombreCompleto || datosEmpleado.nombre,
-      correoElectronico: datosEmpleado.correoElectronico,
-      antiguedad: datosEmpleado.antiguedad?.format('YYYY-MM-DD'),
-    };
-
-    const erroresCampos = {};
-    if (!datosProcesados.areaTrabajo || datosProcesados.areaTrabajo.trim() === '') {
-      erroresCampos.areaTrabajo = 'El campo no puede estar vacío ni contener sólo espacios';
-    }
-    if (!datosProcesados.posicion || datosProcesados.posicion.trim() === '') {
-      erroresCampos.posicion = 'El campo no puede estar vacío ni contener sólo espacios';
-    }
-
-    const nuevosErrores = {
-      ...erroresCampos,
-      ...validarDatosActualizarEmpleado(datosProcesados),
-    };
-
-    if (Object.keys(nuevosErrores).length > 0) {
-      setErroresValidacion(nuevosErrores);
-      setAlerta({
-        tipo: 'error',
-        mensaje: 'Corrige los errores en el formulario antes de guardar.',
-      });
-      return { exito: false };
-    }
-
-    setErroresValidacion({});
-    setAlerta(null);
-    setCargando(true);
-
-    try {
-      await RepositorioActualizarEmpleado.actualizar(datosProcesados);
-      setAlerta({
-        tipo: 'success',
-        mensaje: esEdicion ? 'Empleado actualizado correctamente' : 'Empleado creado correctamente',
-      });
-      return {
-        exito: true,
-        mensaje: esEdicion ? 'Empleado actualizado correctamente' : 'Empleado creado correctamente',
-      };
-    } catch (error) {
-      setAlerta({
-        tipo: 'error',
-        mensaje: error.message || 'Error al guardar el empleado',
-      });
-      return { exito: false, mensaje: error.message || 'Error al guardar el empleado' };
-    } finally {
-      setCargando(false);
-    }
-  };
-
-  const limpiarFormulario = () => {
-    setDatosEmpleado({
-      nombre: '',
-      nombreCompleto: '',
-      correoElectronico: '',
-      idEmpleado: '',
-      idUsuario: '',
-      numeroEmergencia: '',
-      areaTrabajo: '',
-      posicion: '',
-      cantidadPuntos: '',
-      antiguedad: null,
-    });
-    setErroresValidacion({});
-    setAlerta(null);
-  };
-
-  return {
-    datosEmpleado,
-    setDatosEmpleado,
-    erroresValidacion,
-    alerta,
-    setAlerta,
-    cargando,
-    esEdicion,
-    manejarCambio,
-    manejarAntiguedad,
-    obtenerHelperText,
-    handleGuardar,
-    limpiarFormulario,
-    CAMPO_OBLIGATORIO,
-  };
-};
diff --git a/src/hooks/Empleados/useActualizarEmpleado.js b/src/hooks/Empleados/useActualizarEmpleado.js
index cbf6abe2..8f7caa3d 100644
--- a/src/hooks/Empleados/useActualizarEmpleado.js
+++ b/src/hooks/Empleados/useActualizarEmpleado.js
@@ -1,26 +1,188 @@
-//RF[19] Super Administrador Actualiza Empleado - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF19]
-
+//RF19 - Actualizar empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF19
 import { useState } from 'react';
+import dayjs from 'dayjs';
 import { RepositorioActualizarEmpleado } from '@Repositorios/Empleados/RepositorioActualizarEmpleado';
+import { validarDatosActualizarEmpleado } from '@Modelos/Empleados/ActualizarEmpleado';
 
-export function useActualizarEmpleado() {
+export const useActualizarEmpleado = (empleadoInicial = null) => {
+  const esEdicion = !!empleadoInicial;
+  const [erroresValidacion, setErroresValidacion] = useState({});
   const [cargando, setCargando] = useState(false);
-  const [error, setError] = useState(null);
-  const [mensaje, setMensaje] = useState('');
+  const [alerta, setAlerta] = useState(null);
+
+  // Inicializar con datos de edición o vacío
+  const [datosEmpleado, setDatosEmpleado] = useState(() => {
+    if (esEdicion) {
+      let fechaAntiguedad = null;
+      if (empleadoInicial.antiguedadDate) {
+        fechaAntiguedad = dayjs(empleadoInicial.antiguedadDate);
+      }
+      return {
+        ...empleadoInicial,
+        idEmpleado: empleadoInicial.id,
+        antiguedad: fechaAntiguedad,
+      };
+    }
+
+    return {
+      numeroEmergencia: '',
+      areaTrabajo: '',
+      posicion: '',
+      cantidadPuntos: '',
+      antiguedad: null,
+    };
+  });
+
+  const CAMPO_OBLIGATORIO = 'Este campo es obligatorio';
+
+  // Función para verificar si se han realizado cambios
+  const hayCambios = () => {
+    if (!esEdicion) return true; // Si es creación, siempre hay cambios
+
+    const camposAComparar = ['numeroEmergencia', 'areaTrabajo', 'posicion', 'cantidadPuntos'];
+
+    // Comparar campos simples
+    const cambioCamposSimples = camposAComparar.some(
+      (campo) => datosEmpleado[campo]?.toString() !== empleadoInicial[campo]?.toString()
+    );
+
+    // Comparar fecha de antigüedad
+    const fechaAntigua = empleadoInicial.antiguedadDate
+      ? dayjs(empleadoInicial.antiguedadDate).format('YYYY-MM-DD')
+      : null;
+    const fechaNueva = datosEmpleado.antiguedad
+      ? datosEmpleado.antiguedad.format('YYYY-MM-DD')
+      : null;
+    const cambioFecha = fechaAntigua !== fechaNueva;
+
+    return cambioCamposSimples || cambioFecha;
+  };
+
+  // Métodos para manejar cambios
+  const manejarCambio = (evento) => {
+    const { name, value } = evento.target;
+
+    if (name === 'numeroEmergencia') {
+      const soloNumeros = value.replace(/\D/g, '').slice(0, 10);
+      setDatosEmpleado((prev) => ({ ...prev, [name]: soloNumeros }));
+    } else {
+      setDatosEmpleado((prev) => ({ ...prev, [name]: value }));
+    }
+  };
+
+  const manejarAntiguedad = (nuevaFecha) => {
+    setDatosEmpleado((prev) => ({
+      ...prev,
+      antiguedad: nuevaFecha,
+    }));
+  };
 
-  const actualizar = async (cambios) => {
+  const obtenerHelperText = (campo) => {
+    const err = erroresValidacion[campo];
+    if (err) {
+      return typeof err === 'string' ? err : CAMPO_OBLIGATORIO;
+    }
+    if (
+      !esEdicion &&
+      ['numeroEmergencia', 'areaTrabajo', 'posicion', 'cantidadPuntos', 'antiguedad'].includes(
+        campo
+      )
+    ) {
+      return CAMPO_OBLIGATORIO;
+    }
+    return '';
+  };
+
+  const handleGuardar = async () => {
+    if (esEdicion && !hayCambios()) {
+      setAlerta({
+        tipo: 'warning',
+        mensaje: 'No se han realizado cambios',
+      });
+      return { exito: false, mensaje: 'No se han realizado cambios' };
+    }
+
+    const datosProcesados = {
+      ...datosEmpleado,
+      id: esEdicion ? empleadoInicial.id : datosEmpleado.idEmpleado,
+      nombreCompleto: datosEmpleado.nombreCompleto || datosEmpleado.nombre,
+      correoElectronico: datosEmpleado.correoElectronico,
+      antiguedad: datosEmpleado.antiguedad?.format('YYYY-MM-DD'),
+    };
+
+    const erroresCampos = {};
+    if (!datosProcesados.areaTrabajo || datosProcesados.areaTrabajo.trim() === '') {
+      erroresCampos.areaTrabajo = 'El campo no puede estar vacío ni contener sólo espacios';
+    }
+    if (!datosProcesados.posicion || datosProcesados.posicion.trim() === '') {
+      erroresCampos.posicion = 'El campo no puede estar vacío ni contener sólo espacios';
+    }
+
+    const nuevosErrores = {
+      ...erroresCampos,
+      ...validarDatosActualizarEmpleado(datosProcesados),
+    };
+
+    if (Object.keys(nuevosErrores).length > 0) {
+      setErroresValidacion(nuevosErrores);
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Corrige los errores en el formulario antes de guardar.',
+      });
+      return { exito: false };
+    }
+
+    setErroresValidacion({});
+    setAlerta(null);
     setCargando(true);
-    setError(null);
-    setMensaje('');
 
     try {
-      const respuesta = await RepositorioActualizarEmpleado.actualizar(cambios);
-      setMensaje(respuesta.mensaje || 'Actualización exitosa');
-    } catch (err) {
-      setError(err.message || 'Ocurrió un error');
+      await RepositorioActualizarEmpleado.actualizar(datosProcesados);
+      setAlerta({
+        tipo: 'success',
+        mensaje: esEdicion ? 'Empleado actualizado correctamente' : 'Empleado creado correctamente',
+      });
+      return {
+        exito: true,
+        mensaje: esEdicion ? 'Empleado actualizado correctamente' : 'Empleado creado correctamente',
+      };
+    } catch (error) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: error.message || 'Error al guardar el empleado',
+      });
+      return { exito: false, mensaje: error.message || 'Error al guardar el empleado' };
     } finally {
       setCargando(false);
     }
   };
-  return { actualizar, cargando, error, mensaje };
-}
+
+  const limpiarFormulario = () => {
+    setDatosEmpleado({
+      ...datosEmpleado,
+      idEmpleado: null,
+      numeroEmergencia: '',
+      areaTrabajo: '',
+      posicion: '',
+      cantidadPuntos: '',
+      antiguedad: null,
+    });
+    setErroresValidacion({});
+  };
+
+  return {
+    datosEmpleado,
+    setDatosEmpleado,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    cargando,
+    esEdicion,
+    manejarCambio,
+    manejarAntiguedad,
+    obtenerHelperText,
+    handleGuardar,
+    limpiarFormulario,
+    CAMPO_OBLIGATORIO,
+  };
+};
diff --git a/src/hooks/Empleados/useCrearEmpleado.js b/src/hooks/Empleados/useCrearEmpleado.js
new file mode 100644
index 00000000..98ba6395
--- /dev/null
+++ b/src/hooks/Empleados/useCrearEmpleado.js
@@ -0,0 +1,226 @@
+//RF16 - Crear empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF16
+import { useState } from 'react';
+import dayjs from 'dayjs';
+import { useAuth } from '@Hooks/AuthProvider';
+import { RepositorioCrearEmpleado } from '@Repositorios/Empleados/RepositorioCrearEmpleado';
+
+// --- Validación robusta ---
+const validarDatosCrearEmpleado = (datos) => {
+  const errores = {};
+  const correoValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const telefonoValido = /^\d{10}$/;
+  const tieneCaracterEspecial = /[!@#$%^&*(),.?":{}|<>]/;
+  const tieneMayuscula = /[A-Z]/;
+  const tieneMinuscula = /[a-z]/;
+  const tieneNumero = /\d/;
+
+  if (!datos.nombreCompleto || datos.nombreCompleto.trim() === '') {
+    errores.nombreCompleto = true;
+  } else if (datos.nombreCompleto.length < 3) {
+    errores.nombreCompleto = 'El nombre completo debe tener al menos 3 caracteres';
+  } else if (!datos.nombreCompleto.includes(' ')) {
+    errores.nombreCompleto = 'Debe ingresar al menos un nombre y un apellido';
+  } else if (datos.nombreCompleto.startsWith(' ') || datos.nombreCompleto.endsWith(' ')) {
+    errores.nombreCompleto = 'El nombre completo no debe tener espacios al inicio o al final';
+  } else if (datos.nombreCompleto.includes('  ')) {
+    errores.nombreCompleto = 'El nombre completo no debe contener dos o más espacios seguidos';
+  }
+
+  if (!datos.fechaNacimiento) {
+    errores.fechaNacimiento = true;
+  }
+
+  if (!datos.genero) errores.genero = true;
+  if (!datos.correoElectronico) {
+    errores.correoElectronico = true;
+  } else if (!correoValido.test(datos.correoElectronico)) {
+    errores.correoElectronico = 'Correo electrónico no válido';
+  }
+  if (!datos.numeroTelefono) {
+    errores.numeroTelefono = true;
+  } else if (!telefonoValido.test(datos.numeroTelefono)) {
+    errores.numeroTelefono = 'El número de teléfono debe tener exactamente 10 dígitos';
+  }
+  if (!datos.direccion || datos.direccion.trim() === '') {
+    errores.direccion = true;
+  }
+  if (!datos.contrasenia || datos.contrasenia.trim() === '') {
+    errores.contrasenia = true;
+  } else if (datos.contrasenia.length < 8) {
+    errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
+  } else if (!tieneCaracterEspecial.test(datos.contrasenia)) {
+    errores.contrasenia = 'Debe contener al menos un carácter especial';
+  } else if (!tieneMayuscula.test(datos.contrasenia)) {
+    errores.contrasenia = 'Debe contener al menos una letra mayúscula';
+  } else if (!tieneMinuscula.test(datos.contrasenia)) {
+    errores.contrasenia = 'Debe contener al menos una letra minúscula';
+  } else if (!tieneNumero.test(datos.contrasenia)) {
+    errores.contrasenia = 'Debe contener al menos un número';
+  } else if (datos.contrasenia.replace(/\s/g, '').length < 2) {
+    errores.contrasenia =
+      'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+  }
+
+  if (!datos.confirmarContrasenia || datos.confirmarContrasenia.trim() === '') {
+    errores.confirmarContrasenia = true;
+  } else if (datos.contrasenia !== datos.confirmarContrasenia) {
+    errores.confirmarContrasenia = 'Las contraseñas no coinciden';
+  }
+  if (!datos.antiguedad) {
+    errores.antiguedad = true;
+  }
+  if (!datos.areaTrabajo || datos.areaTrabajo.trim() === '') {
+    errores.areaTrabajo = true;
+  }
+  if (!datos.posicion || datos.posicion.trim() === '') {
+    errores.posicion = true;
+  }
+  if (
+    !datos.cantidadPuntos ||
+    isNaN(Number(datos.cantidadPuntos)) ||
+    Number(datos.cantidadPuntos) < 0
+  ) {
+    errores.cantidadPuntos = 'La cantidad de puntos debe ser un número positivo';
+  }
+  if (!datos.numeroEmergencia || !telefonoValido.test(datos.numeroEmergencia)) {
+    errores.numeroEmergencia = !datos.numeroEmergencia
+      ? true
+      : 'El número de emergencia debe tener exactamente 10 dígitos';
+  }
+  return errores;
+};
+
+export const useCrearEmpleado = () => {
+  const { usuario } = useAuth();
+  const idCliente = usuario?.clienteSeleccionado?.idCliente || usuario?.clienteSeleccionado;
+
+  const estadoInicial = {
+    nombreCompleto: '',
+    correoElectronico: '',
+    contrasenia: '',
+    confirmarContrasenia: '',
+    numeroTelefono: '',
+    direccion: '',
+    fechaNacimiento: null,
+    numeroEmergencia: '',
+    genero: '',
+    areaTrabajo: '',
+    posicion: '',
+    cantidadPuntos: '',
+    antiguedad: null,
+    estatus: '1',
+    idCliente: idCliente,
+    idRol: '3',
+  };
+
+  const [datosEmpleado, setDatosEmpleado] = useState(estadoInicial);
+  const [erroresValidacion, setErroresValidacion] = useState({});
+  const [cargando, setCargando] = useState(false);
+  const [alerta, setAlerta] = useState(null);
+
+  const CAMPO_OBLIGATORIO = 'Este campo es obligatorio';
+
+  const manejarCambio = (evento) => {
+    const { name, value } = evento.target;
+    let nuevoValor = value;
+
+    // Solo números para ciertos campos
+    if (['numeroEmergencia', 'numeroTelefono', 'cantidadPuntos'].includes(name)) {
+      nuevoValor = value.replace(/\D/g, '').slice(0, 10);
+    }
+
+    setDatosEmpleado((prev) => ({
+      ...prev,
+      [name]: nuevoValor,
+    }));
+  };
+
+  const manejarAntiguedad = (nuevaFecha) => {
+    setDatosEmpleado((prev) => ({
+      ...prev,
+      antiguedad: nuevaFecha,
+    }));
+  };
+
+  const manejarFechaNacimiento = (nuevaFecha) => {
+    setDatosEmpleado((prev) => ({
+      ...prev,
+      fechaNacimiento: nuevaFecha,
+    }));
+  };
+
+  const obtenerHelperText = (campo) => {
+    const err = erroresValidacion[campo];
+    if (err) {
+      return typeof err === 'string' ? err : CAMPO_OBLIGATORIO;
+    }
+    return '';
+  };
+
+  const handleGuardar = async () => {
+    const datosProcesados = {
+      ...datosEmpleado,
+      antiguedad: datosEmpleado.antiguedad?.format?.('YYYY-MM-DD') || datosEmpleado.antiguedad,
+      fechaNacimiento:
+        datosEmpleado.fechaNacimiento?.format?.('YYYY-MM-DD') || datosEmpleado.fechaNacimiento,
+    };
+
+    const errores = validarDatosCrearEmpleado(datosProcesados) || {};
+
+    if (Object.keys(errores).length > 0) {
+      setErroresValidacion(errores);
+      setAlerta({
+        tipo: 'error',
+        mensaje: 'Corrige los errores en el formulario antes de guardar.',
+      });
+      return { exito: false };
+    }
+
+    setErroresValidacion({});
+    setAlerta(null);
+    setCargando(true);
+
+    try {
+      const respuesta = await RepositorioCrearEmpleado.crear(datosProcesados);
+      setAlerta({
+        tipo: 'success',
+        mensaje: 'Empleado creado correctamente',
+      });
+      limpiarFormulario();
+      return {
+        exito: true,
+        mensaje: 'Empleado creado correctamente',
+        datos: respuesta,
+      };
+    } catch (error) {
+      setAlerta({
+        tipo: 'error',
+        mensaje: error.message || 'Error al guardar el empleado',
+      });
+      return { exito: false, mensaje: error.message || 'Error al guardar el empleado' };
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  const limpiarFormulario = () => {
+    setDatosEmpleado(estadoInicial);
+    setErroresValidacion({});
+  };
+
+  return {
+    datosEmpleado,
+    setDatosEmpleado,
+    erroresValidacion,
+    alerta,
+    setAlerta,
+    cargando,
+    manejarCambio,
+    manejarAntiguedad,
+    manejarFechaNacimiento,
+    obtenerHelperText,
+    handleGuardar,
+    limpiarFormulario,
+    CAMPO_OBLIGATORIO,
+  };
+};

From 06a5d079f9dfc3c60c87cf693e1fe3d4baf3be3b Mon Sep 17 00:00:00 2001
From: Krlos7121 <a0771689@tec.mx>
Date: Fri, 6 Jun 2025 14:12:09 -0600
Subject: [PATCH 121/160] fix: corregir errores de lint

---
 src/Dominio/Modelos/Empleados/CrearEmpleado.js     |  9 ++++-----
 src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js |  8 ++++----
 src/Vistas/Paginas/Empleados/ListaEmpleados.jsx    |  4 ++--
 src/hooks/Empleados/useActualizarEmpleado.js       |  4 ++--
 src/hooks/Empleados/useCrearEmpleado.js            | 13 ++++++-------
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/Dominio/Modelos/Empleados/CrearEmpleado.js b/src/Dominio/Modelos/Empleados/CrearEmpleado.js
index a9756d6e..b2982c6b 100644
--- a/src/Dominio/Modelos/Empleados/CrearEmpleado.js
+++ b/src/Dominio/Modelos/Empleados/CrearEmpleado.js
@@ -15,7 +15,6 @@ export const validarDatosCrearEmpleado = (datos, empleadosExistentes = []) => {
   }
 
   if (!datos.fechaNacimiento) {
-    s;
     errores.fechaNacimiento = 'El campo es obligatorio';
   } else {
     const hoy = new Date();
@@ -64,11 +63,11 @@ export const validarDatosCrearEmpleado = (datos, empleadosExistentes = []) => {
     if (datos.contrasenia.length < 8) {
       errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
     } else if (!tieneCaracterEspecial.test(datos.contrasenia)) {
-      errores.contrasenia =
-        'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+      errores.contrasenia
+        = 'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
     } else if (contraseniaSinEspacios.length < 2) {
-      errores.contrasenia =
-        'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+      errores.contrasenia
+        = 'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
     } else if (!tieneMayuscula.test(datos.contrasenia)) {
       errores.contrasenia = 'Debe contener al menos una letra mayúscula';
     }
diff --git a/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js b/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js
index 0a238489..b2e70466 100644
--- a/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/modeloCrearUsuario.js
@@ -58,11 +58,11 @@ export const validarDatosCrearUsuario = (datos, usuariosExistentes = []) => {
     if (datos.contrasenia.length < 8) {
       errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
     } else if (!tieneCaracterEspecial.test(datos.contrasenia)) {
-      errores.contrasenia =
-        'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+      errores.contrasenia
+        = 'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
     } else if (contraseniaSinEspacios.length < 2) {
-      errores.contrasenia =
-        'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+      errores.contrasenia
+        = 'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
     } else if (!tieneMayuscula.test(datos.contrasenia)) {
       errores.contrasenia = 'Debe contener al menos una letra mayúscula';
     }
diff --git a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
index 4d1827d2..21a58b19 100644
--- a/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaEmpleados.jsx
@@ -35,8 +35,8 @@ const ListaGrupoEmpleados = () => {
   const [openModalEliminar, setAbrirPopUpEliminar] = useState(false);
   const [empleadoSeleccionado, setEmpleadoSeleccionado] = useState(null);
   const [modalDetalleAbierto, setModalDetalleAbierto] = useState(false);
-  const MENSAJE_POPUP_ELIMINAR =
-    '¿Estás seguro de que deseas eliminar los empleados seleccionados? Esta acción no se puede deshacer.';
+  const MENSAJE_POPUP_ELIMINAR
+    = '¿Estás seguro de que deseas eliminar los empleados seleccionados? Esta acción no se puede deshacer.';
   const handleAbrirImportar = () => setModalImportarAbierto(true);
   const manejarCancelarEliminar = () => {
     setAbrirPopUpEliminar(false);
diff --git a/src/hooks/Empleados/useActualizarEmpleado.js b/src/hooks/Empleados/useActualizarEmpleado.js
index 8f7caa3d..4dbfd431 100644
--- a/src/hooks/Empleados/useActualizarEmpleado.js
+++ b/src/hooks/Empleados/useActualizarEmpleado.js
@@ -83,8 +83,8 @@ export const useActualizarEmpleado = (empleadoInicial = null) => {
       return typeof err === 'string' ? err : CAMPO_OBLIGATORIO;
     }
     if (
-      !esEdicion &&
-      ['numeroEmergencia', 'areaTrabajo', 'posicion', 'cantidadPuntos', 'antiguedad'].includes(
+      !esEdicion
+      && ['numeroEmergencia', 'areaTrabajo', 'posicion', 'cantidadPuntos', 'antiguedad'].includes(
         campo
       )
     ) {
diff --git a/src/hooks/Empleados/useCrearEmpleado.js b/src/hooks/Empleados/useCrearEmpleado.js
index 98ba6395..7e1d21b2 100644
--- a/src/hooks/Empleados/useCrearEmpleado.js
+++ b/src/hooks/Empleados/useCrearEmpleado.js
@@ -1,6 +1,5 @@
 //RF16 - Crear empleado - https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF16
 import { useState } from 'react';
-import dayjs from 'dayjs';
 import { useAuth } from '@Hooks/AuthProvider';
 import { RepositorioCrearEmpleado } from '@Repositorios/Empleados/RepositorioCrearEmpleado';
 
@@ -57,8 +56,8 @@ const validarDatosCrearEmpleado = (datos) => {
   } else if (!tieneNumero.test(datos.contrasenia)) {
     errores.contrasenia = 'Debe contener al menos un número';
   } else if (datos.contrasenia.replace(/\s/g, '').length < 2) {
-    errores.contrasenia =
-      'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+    errores.contrasenia
+      = 'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
   }
 
   if (!datos.confirmarContrasenia || datos.confirmarContrasenia.trim() === '') {
@@ -76,9 +75,9 @@ const validarDatosCrearEmpleado = (datos) => {
     errores.posicion = true;
   }
   if (
-    !datos.cantidadPuntos ||
-    isNaN(Number(datos.cantidadPuntos)) ||
-    Number(datos.cantidadPuntos) < 0
+    !datos.cantidadPuntos
+    || isNaN(Number(datos.cantidadPuntos))
+    || Number(datos.cantidadPuntos) < 0
   ) {
     errores.cantidadPuntos = 'La cantidad de puntos debe ser un número positivo';
   }
@@ -109,7 +108,7 @@ export const useCrearEmpleado = () => {
     cantidadPuntos: '',
     antiguedad: null,
     estatus: '1',
-    idCliente: idCliente,
+    idCliente,
     idRol: '3',
   };
 

From d1afe4283436fccd4db1846e4e719bbb0ca5db30 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Fri, 6 Jun 2025 15:01:38 -0600
Subject: [PATCH 122/160] Fix: espacio entre campos

---
 .../Organismos/ModalEditarPedido.jsx          | 218 ++++++++++++++----
 1 file changed, 177 insertions(+), 41 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
index d36c2e57..26aeed81 100644
--- a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
@@ -6,6 +6,14 @@ import Alerta from '@Moleculas/Alerta';
 import { useActualizarPedido } from '@Hooks/Pedidos/useActualizarPedido';
 import { tokens } from '@SRC/theme';
 
+// Constantes para los límites de caracteres
+const LIMITE_ESTATUS = 50;
+const MENSAJE_LIMITE = 'Máximo caracteres';
+
+// Expresiones regulares para validación
+const REGEX_PRECIO = /^\d{1,8}(\.\d{0,2})?$/;
+const REGEX_SOLO_LETRAS = /^[A-Za-záéíóúÁÉÍÓÚñÑ\s]*$/;
+
 const ModalEditarPedido = ({
   abierto,
   onCerrar,
@@ -20,77 +28,167 @@ const ModalEditarPedido = ({
   const [pedido, setPedido] = useState({});
   const [errores, setErrores] = useState({});
 
+  // Reiniciar estado cuando se abre/cierra el modal
   useEffect(() => {
     if (abierto && datosIniciales) {
       setPedido({ ...datosIniciales });
       setErrores({});
+    } else if (!abierto) {
+      // Limpiar estado cuando se cierra
+      setPedido({});
+      setErrores({});
     }
   }, [abierto, datosIniciales]);
 
-  const manejarCambio = useCallback((e) => {
-    const { name, value } = e.target;
-    setPedido((prev) => ({ ...prev, [name]: value }));
-    setErrores((prev) => ({ ...prev, [name]: false }));
-  }, []);
+  const manejarCambio = useCallback(
+    (e) => {
+      const { name, value } = e.target;
+      setPedido((prev) => ({ ...prev, [name]: value }));
+
+      // Limpiar error específico del campo
+      if (errores[name]) {
+        setErrores((prev) => ({ ...prev, [name]: false }));
+      }
+    },
+    [errores]
+  );
 
-  const validarCampos = () => {
+  const validarCampos = useCallback(() => {
     const nuevosErrores = {};
-    if (!pedido.estatusPedido?.trim()) nuevosErrores.estatusPedido = true;
-    if (!pedido.precioTotal?.toString().trim()) nuevosErrores.precioTotal = true;
-    if (!pedido.estatusPago?.trim()) nuevosErrores.estatusPago = true;
-    if (!pedido.estatusEnvio?.trim()) nuevosErrores.estatusEnvio = true;
+
+    // Validar estatus del pedido
+    if (!pedido.estatusPedido?.trim()) {
+      nuevosErrores.estatusPedido = true;
+    }
+
+    // Validar precio total
+    if (!pedido.precioTotal) {
+      nuevosErrores.precioTotal = true;
+    } else {
+      const valor = pedido.precioTotal.toString().trim();
+      const esValido = REGEX_PRECIO.test(valor) && parseFloat(valor) >= 0;
+
+      if (!esValido) {
+        nuevosErrores.precioTotal = true;
+      }
+    }
+
+    // Validar estatus de pago
+    if (!pedido.estatusPago?.trim()) {
+      nuevosErrores.estatusPago = true;
+    }
+
+    // Validar estatus de envío
+    if (!pedido.estatusEnvio?.trim()) {
+      nuevosErrores.estatusEnvio = true;
+    }
+
     setErrores(nuevosErrores);
     return Object.keys(nuevosErrores).length === 0;
-  };
-  const manejarGuardar = async () => {
-    console.log('Iniciando manejarGuardar');
-    console.log('Pedido actual:', pedido);
+  }, [pedido]);
+
+  const manejarGuardar = useCallback(async () => {
     if (!validarCampos()) {
-      console.log('Validación de campos falló');
-      onMostrarAlerta('Completa todos los campos obligatorios.', 'error');
+      onMostrarAlerta('Completa todos los campos obligatorios correctamente.', 'error');
       return;
     }
 
     if (!pedido.id) {
-      console.log('Falta ID del pedido');
       onMostrarAlerta('Falta el ID del pedido. No se puede actualizar.', 'error');
       return;
     }
-    console.log('Validaciones pasadas correctamente');
 
-    // ✅ Mapeo de campos como espera el backend    console.log('Preparando datos para mapeo');
+    // Mapeo de campos para el backend
     const pedidoMapeado = {
       idPedido: pedido.id.toString(),
-      estado: pedido.estatusPedido, // Mapeo correcto para el backend
+      estado: pedido.estatusPedido.trim(),
       precioTotal: parseFloat(pedido.precioTotal),
-      idEnvio: pedido.estatusEnvio,
-      idPago: pedido.estatusPago,
+      idEnvio: pedido.estatusEnvio.trim(),
+      idPago: pedido.estatusPago.trim(),
     };
 
-    console.log('[DEBUG] Pedido original:', pedido);
-    console.log('[DEBUG] Pedido mapeado:', pedidoMapeado);
-    console.log('Intentando actualizar pedido...');
-
     try {
       const resultado = await actualizarPedido(pedidoMapeado);
-      console.log('Resultado de actualización:', resultado);
 
       if (resultado.exito) {
-        console.log('Actualización exitosa');
         onMostrarAlerta(resultado.mensaje, 'success');
         onActualizar();
         onCerrar();
       } else {
-        console.log('Actualización fallida:', resultado.mensaje);
         onMostrarAlerta(resultado.mensaje, 'error');
       }
     } catch (error) {
-      console.error('Error en la actualización:', error);
+      console.error('Error al actualizar pedido:', error);
       onMostrarAlerta(error.message || 'Error al actualizar el pedido.', 'error');
     }
+  }, [pedido, validarCampos, actualizarPedido, onMostrarAlerta, onActualizar, onCerrar]);
+
+  const manejarCambioPrecio = useCallback(
+    (e) => {
+      const value = e.target.value;
+
+      // Permitir campo vacío
+      if (value === '') {
+        manejarCambio(e);
+        return;
+      }
+
+      // Validar formato mientras se escribe
+      if (REGEX_PRECIO.test(value)) {
+        manejarCambio(e);
+      }
+    },
+    [manejarCambio]
+  );
+
+  const manejarCambioEstatus = useCallback(
+    (e) => {
+      const value = e.target.value;
+
+      // Solo permitir letras, espacios y caracteres especiales del español
+      if (REGEX_SOLO_LETRAS.test(value)) {
+        manejarCambio(e);
+      }
+    },
+    [manejarCambio]
+  );
+
+  const manejarCambioEstatusPago = useCallback(
+    (e) => {
+      const value = e.target.value;
+
+      // Solo permitir letras, espacios y caracteres especiales del español
+      if (REGEX_SOLO_LETRAS.test(value)) {
+        manejarCambio(e);
+      }
+    },
+    [manejarCambio]
+  );
+
+  const manejarCambioEstatusEnvio = useCallback(
+    (e) => {
+      const value = e.target.value;
+
+      // Solo permitir letras, espacios y caracteres especiales del español
+      if (REGEX_SOLO_LETRAS.test(value)) {
+        manejarCambio(e);
+      }
+    },
+    [manejarCambio]
+  );
+
+  // Mostrar mensaje de error específico para precio
+  const obtenerMensajeErrorPrecio = () => {
+    if (!errores.precioTotal) return '';
+
+    if (!pedido.precioTotal) {
+      return 'El precio total es requerido';
+    }
+
+    return 'El precio debe tener máximo 8 dígitos enteros y hasta 2 decimales';
   };
 
-  if (!pedido) return null;
+  if (!pedido || !abierto) return null;
 
   return (
     <ModalFlotante
@@ -102,46 +200,84 @@ const ModalEditarPedido = ({
       customWidth={800}
       botones={[]}
     >
-      <Box display='grid' gridTemplateColumns='1fr 1fr' gap={2}>
+      <Box display='grid' gridTemplateColumns='1fr 1fr' gap={3}>
         <CampoTexto
           label='Empleado'
           name='nombreEmpleado'
           value={pedido.nombreEmpleado || ''}
+          style={{ marginBottom: '2rem' }}
           disabled
         />
+
         <CampoTexto
           label='Fecha de Orden'
           name='fechaOrden'
           value={pedido.fechaOrden || ''}
+          style={{ marginBottom: '2rem' }}
           disabled
         />
+
         <CampoTexto
-          label='Estatus del Pedido'
+          label='Estatus del Pedido *'
           name='estatusPedido'
           value={pedido.estatusPedido || ''}
-          onChange={manejarCambio}
+          onChange={manejarCambioEstatus}
           error={errores.estatusPedido}
+          helperText={
+            errores.estatusPedido
+              ? 'Este campo es requerido'
+              : `${(pedido.estatusPedido || '').length}/${LIMITE_ESTATUS} ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_ESTATUS,
+          }}
         />
+
         <CampoTexto
-          label='Precio Total'
+          label='Precio Total *'
           name='precioTotal'
+          type='text'
           value={pedido.precioTotal || ''}
-          onChange={manejarCambio}
+          onChange={manejarCambioPrecio}
           error={errores.precioTotal}
+          helperText={obtenerMensajeErrorPrecio()}
+          inputProps={{
+            maxLength: 11, // 8 dígitos + punto + 2 decimales
+            inputMode: 'decimal',
+            placeholder: 'Ej: 12345678.00',
+          }}
         />
+
         <CampoTexto
-          label='Estatus de Pago'
+          label='Estatus de Pago *'
           name='estatusPago'
           value={pedido.estatusPago || ''}
-          onChange={manejarCambio}
+          onChange={manejarCambioEstatusPago}
           error={errores.estatusPago}
+          helperText={
+            errores.estatusPago
+              ? 'Este campo es requerido'
+              : `${(pedido.estatusPago || '').length}/${LIMITE_ESTATUS} ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_ESTATUS,
+          }}
         />
+
         <CampoTexto
-          label='Estatus de Envío'
+          label='Estatus de Envío *'
           name='estatusEnvio'
           value={pedido.estatusEnvio || ''}
-          onChange={manejarCambio}
+          onChange={manejarCambioEstatusEnvio}
           error={errores.estatusEnvio}
+          helperText={
+            errores.estatusEnvio
+              ? 'Este campo es requerido'
+              : `${(pedido.estatusEnvio || '').length}/${LIMITE_ESTATUS} ${MENSAJE_LIMITE}`
+          }
+          inputProps={{
+            maxLength: LIMITE_ESTATUS,
+          }}
         />
       </Box>
 
@@ -160,7 +296,7 @@ const ModalEditarPedido = ({
           sx={{ backgroundColor: colores.altertex[1], color: 'white' }}
           disabled={cargando}
         >
-          GUARDAR
+          {cargando ? 'GUARDANDO...' : 'GUARDAR'}
         </Button>
       </Box>
     </ModalFlotante>

From 17d7a3baef539f7594592a564515566ab6e793d2 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Fri, 6 Jun 2025 15:22:33 -0600
Subject: [PATCH 123/160] fix: eliminar comentarios innecesarios y variables en
 ingles

---
 src/hooks/AuthProvider.jsx | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/hooks/AuthProvider.jsx b/src/hooks/AuthProvider.jsx
index b377b1cf..e55fcada 100644
--- a/src/hooks/AuthProvider.jsx
+++ b/src/hooks/AuthProvider.jsx
@@ -18,37 +18,33 @@ export const AuthProvider = ({ children }) => {
   const [csrfToken, setCsrfToken] = useState(null);
   const { toggleColorMode } = useMode();
 
-  // Configure axios interceptor for CSRF token
   useEffect(() => {
-    const requestInterceptor = axios.interceptors.request.use(
-      (config) => {
-        // Add CSRF token to non-GET requests
-        if (csrfToken && config.method !== 'get') {
-          config.headers['X-CSRF-Token'] = csrfToken;
+    const reqInterceptor = axios.interceptors.request.use(
+      (configuracion) => {
+        if (csrfToken && configuracion.method !== 'get') {
+          configuracion.headers['X-CSRF-Token'] = csrfToken;
         }
-        return config;
+        return configuracion;
       },
       (error) => Promise.reject(error)
     );
 
-    const responseInterceptor = axios.interceptors.response.use(
+    const resInterceptor = axios.interceptors.response.use(
       (response) => response,
       async (error) => {
-        // If CSRF token is invalid, refresh it
         if (error.response?.status === 403 && error.response?.data?.code === 'EBADCSRFTOKEN') {
           await obtenerCSRFToken();
-          // Retry the original request
-          const originalRequest = error.config;
-          originalRequest.headers['X-CSRF-Token'] = csrfToken;
-          return axios.request(originalRequest);
+          const reqOriginal = error.config;
+          reqOriginal.headers['X-CSRF-Token'] = csrfToken;
+          return axios.request(reqOriginal);
         }
         return Promise.reject(error);
       }
     );
 
     return () => {
-      axios.interceptors.request.eject(requestInterceptor);
-      axios.interceptors.response.eject(responseInterceptor);
+      axios.interceptors.request.eject(reqInterceptor);
+      axios.interceptors.response.eject(resInterceptor);
     };
   }, [csrfToken]);
 

From be8cb230abd34e622b4378eb143ac0d8dda730bc Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 15:41:57 -0600
Subject: [PATCH 124/160] fix: errores menores

---
 .../Organismos/ModalImportarProductos.jsx     | 28 +++++++++----------
 .../Paginas/Productos/ListaProductos.jsx      | 16 ++++-------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index c6ce0999..fecfd14d 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -10,15 +10,15 @@ import ContenedorImportarProductos from './ContenedorImportarProductos';
 import Boton from '../Atomos/Boton';
 
 const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errores, exito, recargar }) => {
-  const [archivo, setFile] = useState(null);
+  const [archivo, setArchivo] = useState(null);
   const [estado, setEstado] = useState('idle'); 
   const [infoJson, setInfoJson] = useState([]);
   const [alerta, setAlerta] = useState(null); 
-  const theme = useTheme();
-  const colores = tokens(theme.palette.mode);
   const [abririnfo, setAbrirInfo] = useState(false);
   const [mensajeErrores, setMensajeErrores] = useState('');
   const [descargarCSV, setDescargarCSV] = useState(false);
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
 
   // Manejo de errores en la importación
   useEffect(() => {
@@ -45,7 +45,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
       });
       recargar();
       setInfoJson([]);
-      setFile(null);
+      setArchivo(null);
       setEstado('idle');
       onCerrar(false);
       setMensajeErrores('');
@@ -54,12 +54,12 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
 
   const handleDescargarPlantilla = useCallback(() => {
     setDescargarCSV(true);
-    const link = document.createElement('a');
-    link.href = '/ejemplo_importar_productos.csv';
-    link.download = 'ejemplo_importar_productos.csv';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    const enlace = document.createElement('a');
+    enlace.href = '/ejemplo_importar_productos.csv';
+    enlace.download = 'ejemplo_importar_productos.csv';
+    document.body.appendChild(enlace);
+    enlace.click();
+    document.body.removeChild(enlace);
     setTimeout(() => {
       setDescargarCSV(false);
     }, 2000);
@@ -69,7 +69,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
   const handleCerrar = useCallback(() => {
     onCerrar(false);
     setInfoJson([]);
-    setFile(null);
+    setArchivo(null);
     setEstado('idle');
     setAlerta(null);
     setMensajeErrores('');
@@ -77,7 +77,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
 
   // Manejo de archivo aceptados
   const handleFileAccepted = (archivo, data) => {
-    setFile(archivo);
+    setArchivo(archivo);
     setEstado('loading');
     setInfoJson(data);
     setEstado('complete');
@@ -85,7 +85,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
 
   // Manejo de eliminación de archivo
   const handleEliminar = () => {
-    setFile(null);
+    setArchivo(null);
     setEstado('idle');
     setInfoJson([]);
   };
@@ -103,7 +103,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
       return;
     }
     onConfirm(infoJson);
-    setFile(null);
+    setArchivo(null);
     setEstado('idle');
     setAlerta(null);
     setInfoJson([]);
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 770b14c3..49648296 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -24,12 +24,6 @@ import { useLeerProducto } from '@Hooks/Productos/useLeerProducto.js';
 import useExportarProductos from '@Hooks/Productos/useExportarProductos';
 
 const ListaProductos = () => {
-  const { productos, cargando, error, recargar } = useConsultarProductos();
-  const { eliminar } = useEliminarProductos();
-  const theme = useTheme();
-  const colores = tokens(theme.palette.mode);
-  const { usuario } = useAuth();
-
   const [productosSeleccionados, setProductosSeleccionados] = useState([]);
   const [productoDetalleSeleccionado, setProductoDetalleSeleccionado] = useState(null);
   const [mostrarModalProveedor, setMostrarModalProveedor] = useState(false);
@@ -37,13 +31,15 @@ const ListaProductos = () => {
   const [alerta, setAlerta] = useState(null);
   const [openModalEliminar, setAbrirPopUp] = useState(false);
   const [modalImportarAbierto, setModalImportarAbierto] = useState(false);
-  const { importar, errores, exito, cargando: cargandoImportacion } = useImportarProductos();
- 
-  
   const [abrirModalDetalle, setAbrirModalDetalle] = useState(false);
   const [imagenProducto, setImagenProducto] = useState('')
-
   const [openModalExportar, setAbrirPopUpExportar] = useState(false);
+  const { productos, cargando, error, recargar } = useConsultarProductos();
+  const { eliminar } = useEliminarProductos();
+  const { importar, errores, exito, cargando: cargandoImportacion } = useImportarProductos();
+  const colores = tokens(theme.palette.mode);
+  const theme = useTheme();
+  const { usuario } = useAuth();
   const MENSAJE_POPUP_EXPORTAR = '¿Deseas exportar la lista de productos? El archivo será generado en formato .xlsx';
   const manejarCancelarExportar = () => {
     setAbrirPopUpExportar(false);

From 397e28121411d51e4b867e71155407c7aa9e311b Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 15:46:39 -0600
Subject: [PATCH 125/160] fix: improve user update handling and validation
 messages

---
 .../Organismos/ModalActualizarUsuario.jsx     | 23 +++++++++--------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |  1 -
 src/hooks/Usuarios/useAccionesUsuario.js      | 25 +++++++++++--------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
index 2052bc6b..46a20957 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -32,10 +32,10 @@ const ModalActualizarUsuario = ({
     const resultado = await handleGuardar();
     if (resultado?.exito) {
       if (onAccion) await onAccion();
-      limpiarFormulario();
       setTimeout(() => {
+        limpiarFormulario();
         onClose();
-      }, 0);
+      }, 800);
     }
   };
 
@@ -76,16 +76,17 @@ const ModalActualizarUsuario = ({
             cargando={cargando}
           />
         </Box>
+
+        {alerta && (
+          <Alerta
+            sx={{ marginBottom: 2 }}
+            tipo={alerta.tipo}
+            mensaje={alerta.mensaje}
+            duracion='2000'
+            onClose={() => setAlerta(null)}
+          />
+        )}
       </ModalFlotante>
-      {alerta && (
-        <Alerta
-          sx={{ marginBottom: 2 }}
-          tipo={alerta.tipo}
-          mensaje={alerta.mensaje}
-          duracion='3000'
-          onClose={() => setAlerta(null)}
-        />
-      )}
     </>
   );
 };
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 62e62f9d..f82f74de 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -397,7 +397,6 @@ const ListaUsuarios = () => {
                 onClick: () => {
                   setModalDetalleAbierto(false);
                   setTimeout(() => setModalActualizarAbierto(true), 100);
-                  console.log('Editar usuario:', usuario);
                 },
                 disabled: !usuarioAutenticado?.permisos?.includes(PERMISOS.ACTUALIZAR_USUARIO),
               },
diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
index 1c80edb4..474b4d43 100644
--- a/src/hooks/Usuarios/useAccionesUsuario.js
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -45,7 +45,13 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
         fechaNacimiento,
         genero,
         idRol: idRol ?? '',
-        cliente: usuarioInicial.cliente ?? [],
+        cliente: Array.isArray(usuarioInicial.cliente)
+          ? usuarioInicial.cliente
+          : usuarioInicial.idCliente
+          ? [usuarioInicial.idCliente]
+          : typeof usuarioInicial.cliente === 'number'
+          ? [usuarioInicial.cliente]
+          : [],
         estatus: usuarioInicial.estatus !== undefined ? usuarioInicial.estatus : 1,
       };
     }
@@ -99,12 +105,8 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
       apellido: datosUsuario.apellido,
     };
 
-    console.log('Enviando al backend:', datosProcesados);
-
     const nuevosErrores = validarDatosActualizarUsuario(datosProcesados);
 
-    console.log('Errores de validación:', nuevosErrores);
-
     if (Object.keys(nuevosErrores).length > 0) {
       setErroresValidacion(nuevosErrores);
       setAlerta({
@@ -119,21 +121,24 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
     setCargando(true);
 
     try {
-      await RepositorioActualizarUsuario.actualizar(datosProcesados);
+      const respuesta = await RepositorioActualizarUsuario.actualizar(datosProcesados);
       setAlerta({
         tipo: 'success',
-        mensaje: esEdicion ? 'Usuario actualizado correctamente' : 'Usuario creado correctamente',
+        mensaje: respuesta?.mensaje || 'Usuario actualizado correctamente',
       });
       return {
         exito: true,
-        mensaje: esEdicion ? 'Usuario actualizado correctamente' : 'Usuario creado correctamente',
+        mensaje: respuesta?.mensaje || (esEdicion ? 'Usuario actualizado correctamente' : ''),
       };
     } catch (error) {
       setAlerta({
         tipo: 'error',
-        mensaje: error.message || 'Error al guardar el usuario',
+        mensaje: error?.message || 'Error al guardar el usuario',
       });
-      return { exito: false, mensaje: error.message || 'Error al guardar el usuario' };
+      return {
+        exito: false,
+        mensaje: error?.message || 'Error al guardar el usuario',
+      };
     } finally {
       setCargando(false);
     }

From 11a7bc00276e054ab41705b117b43873901a1736 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 16:04:55 -0600
Subject: [PATCH 126/160] implementar funcionalidad de actualizar set de cuotas

---
 .../Organismos/Cuotas/ModalEditarCuotas.jsx   | 567 +++++++-----------
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx     |  11 -
 src/hooks/Cuotas/useActualizarCuota.js        |  31 +-
 src/hooks/Cuotas/useObtenerOpcionesCuotas.js  |  62 +-
 4 files changed, 252 insertions(+), 419 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
index d436f414..b81372d0 100644
--- a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
@@ -3,19 +3,9 @@ import ModalFlotante from '@Organismos/ModalFlotante';
 import CampoTexto from '@Atomos/CampoTexto';
 import { NumeroInput } from '@Atomos/NumeroInput';
 import Switch from '@Atomos/Switch';
-import Alerta from '@Moleculas/Alerta';
 import { useActualizarCuota } from '@Hooks/Cuotas/useActualizarCuota';
 import { useObtenerOpcionesCuotas } from '@Hooks/Cuotas/useObtenerOpcionesCuotas';
-import { 
-  Box, 
-  Typography, 
-  IconButton, 
-  Select, 
-  MenuItem, 
-  FormControl, 
-  InputLabel,
-  TextField
-} from '@mui/material';
+import { Box, Typography, IconButton, Select, MenuItem, FormControl, InputLabel, TextField, Alert} from '@mui/material';
 import { Delete as DeleteIcon, Add as AddIcon } from '@mui/icons-material';
 
 const ModalEditarCuotas = ({ 
@@ -26,10 +16,10 @@ const ModalEditarCuotas = ({
   cargandoDetalle, 
   errorDetalle 
 }) => {
-  const { actualizarCuota, cargando, exito, error, mensaje, setError } = useActualizarCuota();
+  const { actualizarCuota, cargando, error } = useActualizarCuota();
   const { opciones, cargando: cargandoOpciones } = useObtenerOpcionesCuotas();
   
-  const [cuota, setCuota] = useState({
+  const [datos, setDatos] = useState({
     idCuotaSet: null,
     nombre: '',
     descripcion: '',
@@ -37,130 +27,82 @@ const ModalEditarCuotas = ({
     renovacionHabilitada: false,
     productos: []
   });
+  
+  const [alerta, setAlerta] = useState('');
 
-  const [alertaLocal, setAlertaLocal] = useState(null);
-
-  // 🔥 FUNCIÓN PARA CONVERTIR PRODUCTOS DEL BACKEND AL FORMATO DEL MODAL
-  const convertirProductosParaEdicion = (productosBackend, opcionesProductos) => {
-    console.log('🔍 convertirProductosParaEdicion - productos recibidos:', productosBackend);
-    console.log('🔍 convertirProductosParaEdicion - opciones disponibles:', opcionesProductos);
-    
-    if (!productosBackend || !Array.isArray(productosBackend)) {
-      return [];
-    }
-
-    return productosBackend.map((producto, index) => {
-      // Los productos vienen como objetos con 'valor', necesitamos buscar por nombre si está disponible
-      // Como no tenemos las opciones disponibles, creamos productos básicos
-      
-      console.log(`🔍 Procesando producto ${index}:`, producto);
-
-      return {
-        idProducto: '', // Lo dejaremos vacío hasta que las opciones se carguen
-        limite: producto.valor || producto.cuota_valor || 0,
-        limiteActual: producto.valor || producto.cuota_valor || 0,
-        nombreProducto: producto.nombre || producto.nombreComun || `Producto ${index + 1}`
-      };
-    });
-  };
-
-  // Efecto para cargar datos cuando se abre el modal (PRIMERA CARGA)
+  // Cargar datos cuando se abre el modal
   useEffect(() => {
     if (cuotaOriginal && open) {
-      console.log('🔍 PRIMERA CARGA - Datos originales de la cuota:', cuotaOriginal);
-      console.log('🔍 PRIMERA CARGA - Opciones disponibles:', opciones);
-
-      // ✅ CORREGIDO: Usar idSetCuota (sin "s") como viene del backend
-      const idCuotaSet = cuotaOriginal.idCuotaSet || cuotaOriginal.idSetCuota;
-
-      // Cargar datos básicos inmediatamente
-      setCuota(prev => ({
-        ...prev,
-        idCuotaSet: idCuotaSet,
+      const productosFormateados = (cuotaOriginal.productos || []).map(p => ({
+        idProducto: p.idProducto ? String(p.idProducto) : '',
+        nombreProducto: p.nombreProducto || p.nombreComun || p.nombre || '',
+        limite: p.limite || p.cuota_valor || 0,
+        limiteActual: p.limiteActual || p.limite_actual || 0
+      }));
+      
+      setDatos({
+        idCuotaSet: cuotaOriginal.idCuotaSet || cuotaOriginal.idSetCuota,
         nombre: cuotaOriginal.nombre || '',
         descripcion: cuotaOriginal.descripcion || '',
         periodoRenovacion: cuotaOriginal.periodoRenovacion || 6,
-        renovacionHabilitada: cuotaOriginal.renovacionHabilitada || false,
-      }));
-
-      // Cargar productos inmediatamente, sin esperar opciones
-      if (cuotaOriginal.productos && Array.isArray(cuotaOriginal.productos)) {
-        const productosConvertidos = convertirProductosParaEdicion(cuotaOriginal.productos, opciones);
-        setCuota(prev => ({
-          ...prev,
-          productos: productosConvertidos
-        }));
-      }
-      
-      setError(false);
-      setAlertaLocal(null);
+        renovacionHabilitada: cuotaOriginal.renovacionHabilitada === 1 || cuotaOriginal.renovacionHabilitada === true,
+        productos: productosFormateados
+      });
+      setAlerta('');
     }
-  }, [cuotaOriginal, open, setError]);
+  }, [cuotaOriginal, open]);
 
-  // Efecto separado para actualizar productos cuando las opciones estén disponibles
+  // Limpiar al cerrar
   useEffect(() => {
-    if (cuotaOriginal && open && opciones && opciones.length > 0 && cuota.productos.length > 0) {
-      console.log('🔍 ACTUALIZANDO PRODUCTOS CON OPCIONES - Iniciando actualización');
-      
-      // Actualizar productos existentes con los IDs correctos
-      const productosActualizados = cuota.productos.map(producto => {
-        const opcionEncontrada = opciones.find(opcion => 
-          opcion.nombreProducto === producto.nombreProducto
-        );
-
-        console.log(`🔍 Buscando "${producto.nombreProducto}" en opciones:`, opcionEncontrada);
-
-        return {
-          ...producto,
-          idProducto: opcionEncontrada?.id || ''
-        };
-      });
-
-      console.log('🔍 PRODUCTOS ACTUALIZADOS con IDs:', productosActualizados);
-
-      setCuota(prev => ({
-        ...prev,
-        productos: productosActualizados
-      }));
+    if (!open) {
+      setAlerta('');
     }
-  }, [opciones, open]);
+  }, [open]);
 
-  // Limpiar estados al cerrar
   useEffect(() => {
-    if (!open) {
-      setAlertaLocal(null);
-      setError(false);
+    if (alerta) {
+      const timer = setTimeout(() => {
+        setAlerta('');
+      }, 3000);
+      
+      return () => clearTimeout(timer);
     }
-  }, [open, setError]);
+  }, [alerta]);
 
-  const handleAgregarProducto = () => {
-    setCuota(prev => ({
+  const agregarProducto = () => {
+    setDatos(prev => ({
       ...prev,
-      productos: [
-        ...prev.productos,
-        { idProducto: '', limite: 0, limiteActual: 0, nombreProducto: '' }
-      ]
+      productos: [...prev.productos, { idProducto: '', nombreProducto: '', limite: 0, limiteActual: 0 }]
     }));
   };
 
-  const handleEliminarProducto = (index) => {
-    setCuota(prev => ({
+  const eliminarProducto = (index) => {
+    setDatos(prev => ({
       ...prev,
       productos: prev.productos.filter((_, i) => i !== index)
     }));
   };
 
-  const handleCambiarProducto = (index, campo, valor) => {
-    setCuota(prev => ({
+  const cambiarProducto = (index, campo, valor) => {
+    setDatos(prev => ({
       ...prev,
       productos: prev.productos.map((producto, i) => {
         if (i === index) {
           const nuevoProducto = { ...producto, [campo]: valor };
           
-          // Si cambia el producto, actualizar el nombre
           if (campo === 'idProducto') {
-            const opcionSeleccionada = opciones?.find(opcion => opcion.id === valor);
+            const opcionSeleccionada = opciones?.find(opcion => opcion.id == valor);
             nuevoProducto.nombreProducto = opcionSeleccionada?.nombreProducto || '';
+            
+            const yaExiste = prev.productos.some((p, idx) => 
+              idx !== index && p.idProducto === valor && valor !== ''
+            );
+            
+            if (yaExiste && valor !== '') {
+              const nombreProducto = opcionSeleccionada?.nombreProducto || 'este producto';
+              setAlerta(`${nombreProducto} ya está asignado a esta cuota`);
+              return producto;
+            }
           }
           
           return nuevoProducto;
@@ -170,93 +112,54 @@ const ModalEditarCuotas = ({
     }));
   };
 
-  const validarFormulario = () => {
-    if (!cuota.nombre.trim()) {
-      setAlertaLocal({
-        tipo: 'error',
-        mensaje: 'El nombre es obligatorio.'
-      });
-      return false;
-    }
+  const guardar = async () => {
+    setAlerta('');
 
-    if (cuota.periodoRenovacion < 1 || cuota.periodoRenovacion > 12) {
-      setAlertaLocal({
-        tipo: 'error',
-        mensaje: 'El período de renovación debe estar entre 1 y 12 meses.'
-      });
-      return false;
-    }
-
-    // Validar productos - solo si hay opciones disponibles
-    if (opciones && opciones.length > 0) {
-      for (let i = 0; i < cuota.productos.length; i++) {
-        const producto = cuota.productos[i];
-        
-        if (!producto.idProducto) {
-          setAlertaLocal({
-            tipo: 'error',
-            mensaje: `Debes seleccionar un producto en la posición ${i + 1}.`
-          });
-          return false;
-        }
-        
-        if (producto.limite < 0) {
-          setAlertaLocal({
-            tipo: 'error',
-            mensaje: `El límite del producto "${producto.nombreProducto}" debe ser mayor o igual a 0.`
-          });
-          return false;
-        }
-        
-        if (producto.limiteActual < 0) {
-          setAlertaLocal({
-            tipo: 'error',
-            mensaje: `El límite actual del producto "${producto.nombreProducto}" debe ser mayor o igual a 0.`
-          });
-          return false;
-        }
-      }
+    if (!datos.nombre.trim()) {
+      setAlerta('El nombre de la cuota es obligatorio');
+      return;
     }
 
-    return true;
-  };
-
-  const handleGuardar = async () => {
-    setAlertaLocal(null);
-    
-    if (!validarFormulario()) {
+    if (datos.periodoRenovacion < 1 || datos.periodoRenovacion > 12) {
+      setAlerta('El período de renovación debe estar entre 1 y 12 meses');
       return;
     }
 
-    const datosActualizacion = {
-      idCuotaSet: cuota.idCuotaSet,
-      cambios: {
-        nombre: cuota.nombre.trim(),
-        descripcion: cuota.descripcion.trim(),
-        periodoRenovacion: cuota.periodoRenovacion,
-        renovacionHabilitada: cuota.renovacionHabilitada,
-        productos: cuota.productos.map(producto => ({
-          idProducto: producto.idProducto || 1, // Fallback si no hay ID
-          limite: producto.limite,
-          limiteActual: producto.limiteActual
-        }))
-      }
-    };
-
-    console.log('📤 Enviando datos de actualización:', datosActualizacion);
+    const productosValidos = datos.productos.filter(p => p.idProducto && p.idProducto !== '');
 
     try {
-      const resultado = await actualizarCuota(datosActualizacion);
-      if (resultado) {
-        onActualizado();
-        onClose();
-      }
+      await actualizarCuota({
+        idCuotaSet: datos.idCuotaSet,
+        cambios: {
+          nombre: datos.nombre.trim(),
+          descripcion: datos.descripcion.trim(),
+          periodoRenovacion: datos.periodoRenovacion,
+          renovacionHabilitada: datos.renovacionHabilitada,
+          productos: productosValidos.map(p => ({
+            idProducto: Number(p.idProducto),
+            limite: Number(p.limite) || 0,
+            limiteActual: Number(p.limiteActual) || 0
+          }))
+        }
+      });
+
+      onActualizado();
+      onClose();
     } catch (err) {
-      console.error('Error al actualizar cuota:', err);
+      let mensajeAmigable = 'Ocurrió un error al actualizar la cuota';
+      
+      if (err.message.includes('Duplicate')) {
+        mensajeAmigable = 'No se puede guardar: hay productos duplicados';
+      } else if (err.message.includes('foreign key')) {
+        mensajeAmigable = 'Error: producto no válido seleccionado';
+      } else if (err.message.includes('Network')) {
+        mensajeAmigable = 'Sin conexión a internet';
+      }
+      
+      setAlerta(mensajeAmigable);
     }
   };
 
-  // Si está cargando los detalles, mostrar loading
   if (cargandoDetalle) {
     return (
       <ModalFlotante
@@ -271,7 +174,6 @@ const ModalEditarCuotas = ({
     );
   }
 
-  // Si hay error al cargar detalles
   if (errorDetalle) {
     return (
       <ModalFlotante
@@ -281,10 +183,7 @@ const ModalEditarCuotas = ({
         cancelLabel="Cerrar"
       >
         <Box sx={{ p: 2 }}>
-          <Alerta 
-            tipo="error" 
-            mensaje={`Error al cargar la información: ${errorDetalle}`} 
-          />
+          <Alert severity="error">Error al cargar la información: {errorDetalle}</Alert>
         </Box>
       </ModalFlotante>
     );
@@ -294,88 +193,56 @@ const ModalEditarCuotas = ({
     <ModalFlotante
       open={open}
       onClose={onClose}
-      onConfirm={handleGuardar}
-      titulo={`Editar: ${cuota.nombre || 'Set de Cuotas'}`}
+      onConfirm={guardar}
+      titulo={` ${datos.nombre || 'Set de Cuotas'}`}
       confirmLabel={cargando ? 'Guardando...' : 'Guardar'}
       cancelLabel="Cancelar"
-      disabledConfirm={cargando || cargandoOpciones}
+      disabledConfirm={cargando}
       customWidth={800}
     >
-      <Box sx={{ maxHeight: '70vh', overflow: 'auto', p: 1 }}>
-        {/* Alertas */}
-        {alertaLocal && (
-          <Alerta 
-            tipo={alertaLocal.tipo} 
-            mensaje={alertaLocal.mensaje} 
-            sx={{ mb: 2 }}
-            onClose={() => setAlertaLocal(null)}
-            cerrable
-          />
+      <Box sx={{ maxHeight: '70vh', overflow: 'auto', p: 2 }}>
+        
+        {alerta && (
+          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setAlerta('')}>
+            {alerta}
+          </Alert>
         )}
         
         {error && (
-          <Alerta 
-            tipo="error" 
-            mensaje={mensaje} 
-            sx={{ mb: 2 }} 
-          />
+          <Alert severity="error" sx={{ mb: 2 }}>
+            Error del sistema: Por favor intenta de nuevo
+          </Alert>
         )}
 
-        {/* 🔍 DEBUG INFO - Botón temporal */}
-        <button 
-          onClick={() => {
-            console.log('🔍 DATOS ACTUALES:', {
-              cuotaOriginal,
-              opciones,
-              cuotaState: cuota,
-              opcionesLength: opciones?.length,
-              productosLength: cuota.productos?.length
-            });
-          }}
-          style={{ margin: '10px', padding: '5px', background: 'orange', color: 'white', border: 'none', borderRadius: '4px' }}
-        >
-          DEBUG: Ver datos en consola
-        </button>
-
-        {/* 🔍 DEBUG INFO - Info visual */}
-        <Box sx={{ mb: 2, p: 1, backgroundColor: '#f0f0f0', fontSize: '12px' }}>
-          <Typography variant="caption">
-            <strong>Debug:</strong> Productos cargados: {cuota.productos.length} | 
-            Opciones disponibles: {opciones?.length || 0} | 
-            Nombre: {cuota.nombre || 'Sin nombre'}
-          </Typography>
-        </Box>
-
-        {/* Información básica */}
-        <Typography variant="h6" sx={{ mb: 2 }}>
-          Información Básica
-        </Typography>
+        <Typography variant="h6" sx={{ mb: 2 }}>Información Básica</Typography>
 
         <CampoTexto
           label="Nombre *"
-          value={cuota.nombre || ''}
-          onChange={(e) => setCuota(prev => ({ ...prev, nombre: e.target.value }))}
+          value={datos.nombre}
+          onChange={(e) => setDatos(prev => ({ ...prev, nombre: e.target.value }))}
           fullWidth
           sx={{ mb: 2 }}
-          error={!cuota.nombre.trim()}
-          helperText={!cuota.nombre.trim() ? 'El nombre es obligatorio' : ''}
+          inputProps={{ maxLength: 50 }}
+          helperText={`${datos.nombre.length}/50`}
         />
 
         <CampoTexto
           label="Descripción"
-          value={cuota.descripcion || ''}
-          onChange={(e) => setCuota(prev => ({ ...prev, descripcion: e.target.value }))}
+          value={datos.descripcion}
+          onChange={(e) => setDatos(prev => ({ ...prev, descripcion: e.target.value }))}
           fullWidth
           multiline
           rows={3}
           sx={{ mb: 2 }}
+          inputProps={{ maxLength: 150 }}
+          helperText={`${datos.descripcion.length}/150`}
         />
 
-        <Box sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center' }}>
           <NumeroInput
             label="Período de Renovación (meses) *"
-            value={cuota.periodoRenovacion || 6}
-            onChange={(e) => setCuota(prev => ({ 
+            value={datos.periodoRenovacion}
+            onChange={(e) => setDatos(prev => ({ 
               ...prev, 
               periodoRenovacion: parseInt(e.target.value) || 6 
             }))}
@@ -384,133 +251,113 @@ const ModalEditarCuotas = ({
             sx={{ flex: 1 }}
           />
 
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Switch
-              label="Renovación Habilitada"
-              checked={cuota.renovacionHabilitada || false}
-              onChange={(e) => setCuota(prev => ({ 
-                ...prev, 
-                renovacionHabilitada: e.target.checked 
-              }))}
-            />
-          </Box>
+          <Switch
+            label="Renovación Habilitada"
+            checked={datos.renovacionHabilitada}
+            onChange={(e) => setDatos(prev => ({ 
+              ...prev, 
+              renovacionHabilitada: e.target.checked 
+            }))}
+          />
         </Box>
 
-        {/* Productos */}
-        <Box sx={{ mt: 3 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-            <Typography variant="h6">
-              Productos Asociados ({cuota.productos.length})
-            </Typography>
-            <IconButton 
-              color="primary" 
-              onClick={handleAgregarProducto}
-              disabled={cargandoOpciones}
-            >
-              <AddIcon />
-            </IconButton>
-          </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6">
+            Productos Asociados ({datos.productos.length})
+          </Typography>
+          <IconButton color="primary" onClick={agregarProducto}>
+            <AddIcon />
+          </IconButton>
+        </Box>
 
-          {cargandoOpciones && (
-            <Typography color="textSecondary" sx={{ textAlign: 'center', py: 2 }}>
-              Cargando opciones de productos...
-            </Typography>
-          )}
+        {!cargandoOpciones && (!opciones || opciones.length === 0) && (
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            No se pudieron cargar las opciones de productos. Verifica la conexión con el servidor.
+          </Alert>
+        )}
 
-          {/* Mensaje si no hay opciones disponibles */}
-          {!cargandoOpciones && (!opciones || opciones.length === 0) && (
-            <Box sx={{ p: 2, backgroundColor: '#fff3cd', borderRadius: 1, mb: 2 }}>
-              <Typography variant="body2" color="warning.main">
-                ⚠️ No se pudieron cargar las opciones de productos. Los productos existentes se mostrarán pero no podrás editarlos completamente hasta que se solucione el problema de conexión con el backend.
-              </Typography>
-            </Box>
-          )}
+        {datos.productos.length === 0 ? (
+          <Typography color="textSecondary" sx={{ textAlign: 'center', py: 2 }}>
+            No hay productos asociados. Haz clic en + para agregar uno.
+          </Typography>
+        ) : (
+          datos.productos.map((producto, index) => (
+            <Box 
+              key={index} 
+              sx={{ 
+                border: '1px solid #e0e0e0', 
+                borderRadius: 1, 
+                p: 2, 
+                mb: 2,
+                backgroundColor: '#fafafa'
+              }}
+            >
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                <Typography variant="subtitle2">
+                  Producto {index + 1} 
+                  {producto.nombreProducto && (
+                    <span style={{ color: '#666', fontWeight: 'normal' }}>
+                      - {producto.nombreProducto}
+                    </span>
+                  )}
+                </Typography>
+                <IconButton color="error" size="small" onClick={() => eliminarProducto(index)}>
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
 
-          {cuota.productos.length === 0 ? (
-            <Typography color="textSecondary" sx={{ textAlign: 'center', py: 2 }}>
-              No hay productos asociados. Haz clic en + para agregar uno.
-            </Typography>
-          ) : (
-            cuota.productos.map((producto, index) => (
-              <Box 
-                key={index} 
-                sx={{ 
-                  border: '1px solid #e0e0e0', 
-                  borderRadius: 1, 
-                  p: 2, 
-                  mb: 2,
-                  backgroundColor: '#fafafa'
-                }}
-              >
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-                  <Typography variant="subtitle2">
-                    Producto {index + 1} {producto.nombreProducto && `(${producto.nombreProducto})`}
-                  </Typography>
-                  <IconButton 
-                    color="error" 
-                    size="small"
-                    onClick={() => handleEliminarProducto(index)}
+              <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+                <FormControl sx={{ minWidth: 250, flex: 1 }}>
+                  <InputLabel>Producto *</InputLabel>
+                  <Select
+                    value={producto.idProducto || ''}
+                    onChange={(e) => cambiarProducto(index, 'idProducto', e.target.value)}
+                    label="Producto *"
+                    disabled={cargandoOpciones}
                   >
-                    <DeleteIcon />
-                  </IconButton>
-                </Box>
-
-                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
-                  {/* Select de Producto - solo si hay opciones */}
-                  {opciones && opciones.length > 0 ? (
-                    <FormControl sx={{ minWidth: 250, flex: 1 }}>
-                      <InputLabel>Producto *</InputLabel>
-                      <Select
-                        value={producto.idProducto || ''}
-                        onChange={(e) => handleCambiarProducto(index, 'idProducto', e.target.value)}
-                        disabled={cargandoOpciones}
-                        label="Producto *"
-                      >
-                        <MenuItem value="">
-                          <em>Seleccione un producto</em>
-                        </MenuItem>
-                        {opciones.map((opcion) => (
+                    <MenuItem value="">Seleccione un producto</MenuItem>
+                    {opciones && opciones.length > 0 ? (
+                      opciones
+                        .filter(opcion => {
+                          const yaSeleccionado = datos.productos.some((p, idx) => 
+                            idx !== index && p.idProducto == opcion.id
+                          );
+                          return !yaSeleccionado;
+                        })
+                        .map((opcion) => (
                           <MenuItem key={opcion.id} value={opcion.id}>
                             {opcion.nombreProducto} ({opcion.tipo})
                           </MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  ) : (
-                    <TextField
-                      label="Nombre del Producto"
-                      value={producto.nombreProducto || ''}
-                      onChange={(e) => handleCambiarProducto(index, 'nombreProducto', e.target.value)}
-                      sx={{ minWidth: 250, flex: 1 }}
-                      disabled
-                      helperText="Opciones no disponibles"
-                    />
-                  )}
-
-                  {/* Campo de Límite */}
-                  <TextField
-                    label="Límite *"
-                    type="number"
-                    value={producto.limite || 0}
-                    onChange={(e) => handleCambiarProducto(index, 'limite', parseInt(e.target.value) || 0)}
-                    inputProps={{ min: 0 }}
-                    sx={{ minWidth: 120 }}
-                  />
-
-                  {/* Campo de Límite Actual */}
-                  <TextField
-                    label="Límite Actual *"
-                    type="number"
-                    value={producto.limiteActual || 0}
-                    onChange={(e) => handleCambiarProducto(index, 'limiteActual', parseInt(e.target.value) || 0)}
-                    inputProps={{ min: 0 }}
-                    sx={{ minWidth: 120 }}
-                  />
-                </Box>
+                        ))
+                    ) : (
+                      <MenuItem disabled>
+                        No hay opciones disponibles
+                      </MenuItem>
+                    )}
+                  </Select>
+                </FormControl>
+
+                <TextField
+                  label="Límite *"
+                  type="number"
+                  value={producto.limite}
+                  onChange={(e) => cambiarProducto(index, 'limite', parseInt(e.target.value) || 0)}
+                  inputProps={{ min: 0 }}
+                  sx={{ minWidth: 120 }}
+                />
+
+                <TextField
+                  label="Límite Actual *"
+                  type="number"
+                  value={producto.limiteActual}
+                  onChange={(e) => cambiarProducto(index, 'limiteActual', parseInt(e.target.value) || 0)}
+                  inputProps={{ min: 0 }}
+                  sx={{ minWidth: 120 }}
+                />
               </Box>
-            ))
-          )}
-        </Box>
+            </Box>
+          ))
+        )}
       </Box>
     </ModalFlotante>
   );
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index f3347100..eeb24dea 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -44,16 +44,6 @@ const ListaCuotas = () => {
     error: errorDetalle,
   } = useCuotaId(modalDetalleAbierto || modalEditarAbierto ? idSetCuotaSeleccionado : null);
 
-  // 🔍 DEBUG - Agregar este console.log
-  useEffect(() => {
-    if (cuota) {
-      console.log('🔍 DATOS DE CUOTA CARGADOS:', {
-        cuota,
-        productos: cuota?.productos,
-        estructura: JSON.stringify(cuota, null, 2)
-      });
-    }
-  }, [cuota]);
 
   useEffect(() => {
     if (!usuario?.clienteSeleccionado) {
@@ -136,7 +126,6 @@ const ListaCuotas = () => {
 
   // 👈 FUNCIONES CORREGIDAS
   const handleAbrirEditar = () => {
-    console.log('🔍 ABRIENDO MODAL EDITAR - Datos de cuota:', cuota);
     setModalDetalleAbierto(false);
     setModalEditarAbierto(true);
   };
diff --git a/src/hooks/Cuotas/useActualizarCuota.js b/src/hooks/Cuotas/useActualizarCuota.js
index 0b71ef6e..c2839b2e 100644
--- a/src/hooks/Cuotas/useActualizarCuota.js
+++ b/src/hooks/Cuotas/useActualizarCuota.js
@@ -1,31 +1,36 @@
+// useActualizarCuota.js - Versión Simple
 import { useState } from 'react';
-import { RepositorioActualizarCuota } from '@Repositorios/Cuotas/repositorioActualizarCuota';
+import axios from 'axios';
+
+const API_KEY = import.meta.env.VITE_API_KEY;
+const BASE_URL = import.meta.env.VITE_API_URL;
 
 export const useActualizarCuota = () => {
   const [cargando, setCargando] = useState(false);
-  const [exito, setExito] = useState(false);
   const [error, setError] = useState(false);
-  const [mensaje, setMensaje] = useState('');
 
-  const actualizarCuota = async (datosActualizacion) => {
+  const actualizarCuota = async (datos) => {
     setCargando(true);
-    setExito(false);
     setError(false);
-    setMensaje('');
 
     try {
-      const resultado = await RepositorioActualizarCuota.actualizarSetCuotas(datosActualizacion);
-      setExito(true);
-      setMensaje(resultado.mensaje);
-      return resultado;
+      const response = await axios.put(
+        `${BASE_URL}/api/cuotas/actualizar-set-cuotas`,
+        datos,
+        {
+          headers: { 'x-api-key': API_KEY },
+          withCredentials: true,
+        }
+      );
+
+      return response.data;
     } catch (err) {
       setError(true);
-      setMensaje(err.message);
-      return false;
+      throw new Error(err.response?.data?.mensaje || 'Error al actualizar');
     } finally {
       setCargando(false);
     }
   };
 
-  return { actualizarCuota, cargando, exito, error, mensaje, setError };
+  return { actualizarCuota, cargando, error };
 };
\ No newline at end of file
diff --git a/src/hooks/Cuotas/useObtenerOpcionesCuotas.js b/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
index a0c898da..aa29a230 100644
--- a/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
+++ b/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
@@ -1,48 +1,40 @@
+// src/Hooks/Cuotas/useObtenerOpcionesCuotas.js
 import { useState, useEffect } from 'react';
 import { useAuth } from '@Hooks/AuthProvider';
-import { RepositorioObtenerOpcionesCuotas } from '@Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas';
+import obtenerProductos from '@Servicios/obtenerProductos';
 
 export const useObtenerOpcionesCuotas = () => {
   const { usuario } = useAuth();
+  const idCliente = usuario?.clienteSeleccionado;
+
   const [opciones, setOpciones] = useState([]);
   const [cargando, setCargando] = useState(false);
   const [error, setError] = useState(null);
 
-  const obtenerOpciones = async () => {
-    if (!usuario?.clienteSeleccionado?.idCliente) {
-      setError('No hay cliente seleccionado');
-      return;
-    }
 
-    setCargando(true);
-    setError(null);
-
-    try {
-      const resultado = await RepositorioObtenerOpcionesCuotas.obtenerOpciones(
-        usuario.clienteSeleccionado.idCliente
-      );
-      
-      console.log('🔍 Opciones obtenidas del backend:', resultado);
-      setOpciones(resultado || []);
-    } catch (err) {
-      console.error('❌ Error al obtener opciones:', err);
-      setError(err.message || 'Error al obtener opciones de productos');
-      setOpciones([]);
-    } finally {
-      setCargando(false);
-    }
-  };
 
   useEffect(() => {
-    if (usuario?.clienteSeleccionado?.idCliente) {
-      obtenerOpciones();
+    if (!idCliente) {
+      return;
     }
-  }, [usuario?.clienteSeleccionado?.idCliente]);
-
-  return {
-    opciones,
-    cargando,
-    error,
-    recargar: obtenerOpciones
-  };
-};
\ No newline at end of file
+
+    const cargarOpciones = async () => {
+      setCargando(true);
+      setError(null);
+
+      try {
+        const productos = await obtenerProductos(idCliente);
+        setOpciones(productos);
+      } catch (err) {
+        setError('No se pudieron cargar las opciones de productos');
+        setOpciones([]);
+      } finally {
+        setCargando(false);
+      }
+    };
+
+    cargarOpciones();
+  }, [idCliente]);
+
+  return { opciones, cargando, error };
+};

From 3d8a059e1a9097d634c69ceaf057fc40e4c614f6 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 16:17:37 -0600
Subject: [PATCH 127/160] Manejo de console logs

---
 .../Organismos/Cuotas/ModalEditarCuotas.jsx   | 141 ++++++++----------
 1 file changed, 64 insertions(+), 77 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
index b81372d0..602da376 100644
--- a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
@@ -1,3 +1,4 @@
+// src/Organismos/ModalEditarCuotas.jsx
 import { useState, useEffect } from 'react';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import CampoTexto from '@Atomos/CampoTexto';
@@ -5,20 +6,30 @@ import { NumeroInput } from '@Atomos/NumeroInput';
 import Switch from '@Atomos/Switch';
 import { useActualizarCuota } from '@Hooks/Cuotas/useActualizarCuota';
 import { useObtenerOpcionesCuotas } from '@Hooks/Cuotas/useObtenerOpcionesCuotas';
-import { Box, Typography, IconButton, Select, MenuItem, FormControl, InputLabel, TextField, Alert} from '@mui/material';
+import {
+  Box,
+  Typography,
+  IconButton,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  TextField,
+  Alert,
+} from '@mui/material';
 import { Delete as DeleteIcon, Add as AddIcon } from '@mui/icons-material';
 
-const ModalEditarCuotas = ({ 
-  open, 
-  cuotaOriginal, 
-  onClose, 
-  onActualizado, 
-  cargandoDetalle, 
-  errorDetalle 
+const ModalEditarCuotas = ({
+  open,
+  cuotaOriginal,
+  onClose,
+  onActualizado,
+  cargandoDetalle,
+  errorDetalle
 }) => {
   const { actualizarCuota, cargando, error } = useActualizarCuota();
   const { opciones, cargando: cargandoOpciones } = useObtenerOpcionesCuotas();
-  
+
   const [datos, setDatos] = useState({
     idCuotaSet: null,
     nombre: '',
@@ -27,10 +38,9 @@ const ModalEditarCuotas = ({
     renovacionHabilitada: false,
     productos: []
   });
-  
+
   const [alerta, setAlerta] = useState('');
 
-  // Cargar datos cuando se abre el modal
   useEffect(() => {
     if (cuotaOriginal && open) {
       const productosFormateados = (cuotaOriginal.productos || []).map(p => ({
@@ -39,7 +49,7 @@ const ModalEditarCuotas = ({
         limite: p.limite || p.cuota_valor || 0,
         limiteActual: p.limiteActual || p.limite_actual || 0
       }));
-      
+
       setDatos({
         idCuotaSet: cuotaOriginal.idCuotaSet || cuotaOriginal.idSetCuota,
         nombre: cuotaOriginal.nombre || '',
@@ -52,7 +62,6 @@ const ModalEditarCuotas = ({
     }
   }, [cuotaOriginal, open]);
 
-  // Limpiar al cerrar
   useEffect(() => {
     if (!open) {
       setAlerta('');
@@ -64,7 +73,6 @@ const ModalEditarCuotas = ({
       const timer = setTimeout(() => {
         setAlerta('');
       }, 3000);
-      
       return () => clearTimeout(timer);
     }
   }, [alerta]);
@@ -89,22 +97,22 @@ const ModalEditarCuotas = ({
       productos: prev.productos.map((producto, i) => {
         if (i === index) {
           const nuevoProducto = { ...producto, [campo]: valor };
-          
+
           if (campo === 'idProducto') {
-            const opcionSeleccionada = opciones?.find(opcion => opcion.id == valor);
+            const opcionSeleccionada = opciones?.find(op => op.id == valor);
             nuevoProducto.nombreProducto = opcionSeleccionada?.nombreProducto || '';
-            
-            const yaExiste = prev.productos.some((p, idx) => 
+
+            const yaExiste = prev.productos.some((p, idx) =>
               idx !== index && p.idProducto === valor && valor !== ''
             );
-            
+
             if (yaExiste && valor !== '') {
               const nombreProducto = opcionSeleccionada?.nombreProducto || 'este producto';
               setAlerta(`${nombreProducto} ya está asignado a esta cuota`);
               return producto;
             }
           }
-          
+
           return nuevoProducto;
         }
         return producto;
@@ -147,7 +155,7 @@ const ModalEditarCuotas = ({
       onClose();
     } catch (err) {
       let mensajeAmigable = 'Ocurrió un error al actualizar la cuota';
-      
+
       if (err.message.includes('Duplicate')) {
         mensajeAmigable = 'No se puede guardar: hay productos duplicados';
       } else if (err.message.includes('foreign key')) {
@@ -155,18 +163,14 @@ const ModalEditarCuotas = ({
       } else if (err.message.includes('Network')) {
         mensajeAmigable = 'Sin conexión a internet';
       }
-      
+
       setAlerta(mensajeAmigable);
     }
   };
 
   if (cargandoDetalle) {
     return (
-      <ModalFlotante
-        open={open}
-        onClose={onClose}
-        titulo="Cargando..."
-      >
+      <ModalFlotante open={open} onClose={onClose} titulo="Cargando...">
         <Box sx={{ p: 3, textAlign: 'center' }}>
           <Typography>Cargando información del set de cuotas...</Typography>
         </Box>
@@ -176,12 +180,7 @@ const ModalEditarCuotas = ({
 
   if (errorDetalle) {
     return (
-      <ModalFlotante
-        open={open}
-        onClose={onClose}
-        titulo="Error"
-        cancelLabel="Cerrar"
-      >
+      <ModalFlotante open={open} onClose={onClose} titulo="Error" cancelLabel="Cerrar">
         <Box sx={{ p: 2 }}>
           <Alert severity="error">Error al cargar la información: {errorDetalle}</Alert>
         </Box>
@@ -200,20 +199,8 @@ const ModalEditarCuotas = ({
       disabledConfirm={cargando}
       customWidth={800}
     >
+      {/* SCROLLABLE CONTENT */}
       <Box sx={{ maxHeight: '70vh', overflow: 'auto', p: 2 }}>
-        
-        {alerta && (
-          <Alert severity="error" sx={{ mb: 2 }} onClose={() => setAlerta('')}>
-            {alerta}
-          </Alert>
-        )}
-        
-        {error && (
-          <Alert severity="error" sx={{ mb: 2 }}>
-            Error del sistema: Por favor intenta de nuevo
-          </Alert>
-        )}
-
         <Typography variant="h6" sx={{ mb: 2 }}>Información Básica</Typography>
 
         <CampoTexto
@@ -242,9 +229,9 @@ const ModalEditarCuotas = ({
           <NumeroInput
             label="Período de Renovación (meses) *"
             value={datos.periodoRenovacion}
-            onChange={(e) => setDatos(prev => ({ 
-              ...prev, 
-              periodoRenovacion: parseInt(e.target.value) || 6 
+            onChange={(e) => setDatos(prev => ({
+              ...prev,
+              periodoRenovacion: parseInt(e.target.value) || 6
             }))}
             min={1}
             max={12}
@@ -254,20 +241,16 @@ const ModalEditarCuotas = ({
           <Switch
             label="Renovación Habilitada"
             checked={datos.renovacionHabilitada}
-            onChange={(e) => setDatos(prev => ({ 
-              ...prev, 
-              renovacionHabilitada: e.target.checked 
+            onChange={(e) => setDatos(prev => ({
+              ...prev,
+              renovacionHabilitada: e.target.checked
             }))}
           />
         </Box>
 
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-          <Typography variant="h6">
-            Productos Asociados ({datos.productos.length})
-          </Typography>
-          <IconButton color="primary" onClick={agregarProducto}>
-            <AddIcon />
-          </IconButton>
+          <Typography variant="h6">Productos Asociados ({datos.productos.length})</Typography>
+          <IconButton color="primary" onClick={agregarProducto}><AddIcon /></IconButton>
         </Box>
 
         {!cargandoOpciones && (!opciones || opciones.length === 0) && (
@@ -282,22 +265,22 @@ const ModalEditarCuotas = ({
           </Typography>
         ) : (
           datos.productos.map((producto, index) => (
-            <Box 
-              key={index} 
-              sx={{ 
-                border: '1px solid #e0e0e0', 
-                borderRadius: 1, 
-                p: 2, 
+            <Box
+              key={index}
+              sx={{
+                border: '1px solid #e0e0e0',
+                borderRadius: 1,
+                p: 2,
                 mb: 2,
                 backgroundColor: '#fafafa'
               }}
             >
               <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                 <Typography variant="subtitle2">
-                  Producto {index + 1} 
+                  Producto {index + 1}
                   {producto.nombreProducto && (
                     <span style={{ color: '#666', fontWeight: 'normal' }}>
-                      - {producto.nombreProducto}
+                      {' '} - {producto.nombreProducto}
                     </span>
                   )}
                 </Typography>
@@ -316,23 +299,18 @@ const ModalEditarCuotas = ({
                     disabled={cargandoOpciones}
                   >
                     <MenuItem value="">Seleccione un producto</MenuItem>
-                    {opciones && opciones.length > 0 ? (
+                    {opciones?.length > 0 ? (
                       opciones
-                        .filter(opcion => {
-                          const yaSeleccionado = datos.productos.some((p, idx) => 
-                            idx !== index && p.idProducto == opcion.id
-                          );
-                          return !yaSeleccionado;
-                        })
+                        .filter(op => !datos.productos.some((p, idx) =>
+                          idx !== index && p.idProducto == op.id
+                        ))
                         .map((opcion) => (
                           <MenuItem key={opcion.id} value={opcion.id}>
                             {opcion.nombreProducto} ({opcion.tipo})
                           </MenuItem>
                         ))
                     ) : (
-                      <MenuItem disabled>
-                        No hay opciones disponibles
-                      </MenuItem>
+                      <MenuItem disabled>No hay opciones disponibles</MenuItem>
                     )}
                   </Select>
                 </FormControl>
@@ -359,8 +337,17 @@ const ModalEditarCuotas = ({
           ))
         )}
       </Box>
+
+      {/* ✅ Alerta abajo del modal, como en ModalCrearRol */}
+      {(alerta || error) && (
+        <Box sx={{ px: 2, pb: 2 }}>
+          <Alert severity="error" onClose={() => setAlerta('')}>
+            {alerta || 'Error del sistema: Por favor intenta de nuevo'}
+          </Alert>
+        </Box>
+      )}
     </ModalFlotante>
   );
 };
 
-export default ModalEditarCuotas;
\ No newline at end of file
+export default ModalEditarCuotas;

From 1ca5265b0631b9de9d2b95cfe199effa9b4f2d5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 16:27:58 -0600
Subject: [PATCH 128/160] fix: Corregir errores de pruebas

---
 .../Moleculas/SetProductosEditable.jsx          | 17 +++++++----------
 .../SetsProductos/ListaSetsProductos.jsx        |  6 +++---
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index 21ae0272..a32a6357 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -323,16 +323,16 @@ const SetProductosEditable = ({
               />
             </Grid>
 
-            <Grid item>
-              <Grid container direction='column' alignItems='center' spacing={1}>
+            <Grid>
+              <Grid container direction='column' sx={{alignItems: 'center'}} spacing={1}>
                 <Button
                   variant='outlined'
                   size='small'
                   onClick={transferirTodos}
                   disabled={productosDisponibles.length === 0}
                   aria-label='Mover todos a seleccionados'
-                  startIcon={<KeyboardDoubleArrowRight />}
-                ></Button>
+                ><KeyboardDoubleArrowRight /></Button>
+
                 <Button
                   variant='outlined'
                   size='small'
@@ -342,8 +342,7 @@ const SetProductosEditable = ({
                       productosDisponibles.some((pd) => pd.id === pro.id)).length === 0
                   }
                   aria-label='Mover seleccionados a seleccionados'
-                  startIcon={<KeyboardArrowRight />}
-                ></Button>
+                ><KeyboardArrowRight /></Button>
                 <Button
                   variant='outlined'
                   size='small'
@@ -353,16 +352,14 @@ const SetProductosEditable = ({
                       productosAsignados.some((pa) => pa.id === pro.id)).length === 0
                   }
                   aria-label='Quitar seleccionados'
-                  startIcon={<KeyboardArrowLeft />}
-                ></Button>
+                ><KeyboardArrowLeft /></Button>
                 <Button
                   variant='outlined'
                   size='small'
                   onClick={quitarTodos}
                   disabled={productosAsignados.length === 0}
                   aria-label='Quitar todos'
-                  startIcon={<KeyboardDoubleArrowLeft />}
-                ></Button>
+                ><KeyboardDoubleArrowLeft /></Button>
               </Grid>
             </Grid>
 
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index c6603891..568a48ab 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -312,20 +312,20 @@ const ListaSetsProductos = () => {
           onClose={() => setAbrirModalEditar(false)}
           titulo='Editar Set de Productos'
           tituloVariant='h4'
-          customWidth={900}
+          customWidth={849}
           botones={[
             {
               label: 'Guardar',
               variant: 'contained',
               color: 'primary',
-              outlineColor: colores.primario[10],
+              backgroundColor: colores.altertex[1],
               onClick: handleGuardar,
             },
             {
               label: 'Cancelar',
               variant: 'outlined',
               color: 'primary',
-              outlineColor: colores.primario[10],
+              outlineColor: colores.altertex[1],
               onClick: () => setAbrirModalEditar(false),
             },
           ]}

From ebfb7606d3fcb1e1ac2d3ca23c336382c0b38035 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 16:47:03 -0600
Subject: [PATCH 129/160] Fix de alertas

---
 .../Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
index 602da376..829ec281 100644
--- a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
@@ -103,8 +103,7 @@ const ModalEditarCuotas = ({
             nuevoProducto.nombreProducto = opcionSeleccionada?.nombreProducto || '';
 
             const yaExiste = prev.productos.some((p, idx) =>
-              idx !== index && p.idProducto === valor && valor !== ''
-            );
+              idx !== index && p.idProducto === valor && valor !== '');
 
             if (yaExiste && valor !== '') {
               const nombreProducto = opcionSeleccionada?.nombreProducto || 'este producto';
@@ -302,8 +301,7 @@ const ModalEditarCuotas = ({
                     {opciones?.length > 0 ? (
                       opciones
                         .filter(op => !datos.productos.some((p, idx) =>
-                          idx !== index && p.idProducto == op.id
-                        ))
+                          idx !== index && p.idProducto == op.id))
                         .map((opcion) => (
                           <MenuItem key={opcion.id} value={opcion.id}>
                             {opcion.nombreProducto} ({opcion.tipo})

From e9f7c19a99fb443ad631662d07a324b943962331 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 16:49:01 -0600
Subject: [PATCH 130/160] idProducto Obligatorio

---
 .../Organismos/ContenedorImportarProductos.jsx   |  3 ++-
 .../Organismos/ModalImportarProductos.jsx        |  8 +++-----
 src/Vistas/Paginas/Productos/ListaProductos.jsx  | 16 ++++++++++------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
index a7cd2435..35cf143f 100644
--- a/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ContenedorImportarProductos.jsx
@@ -8,8 +8,9 @@ const transformarCSVaEstructuraProductos = (filas) => {
   const productosMap = new Map();
 
   for (const fila of filas) {
-    const idProducto = fila.idProducto;
+    const idProducto = fila.idProducto?.trim() || fila.idProducto.test;
 
+    if (!idProducto) continue;
     if (!productosMap.has(idProducto)) {
       const {
         idProveedor,
diff --git a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
index fecfd14d..d2bb98ce 100644
--- a/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalImportarProductos.jsx
@@ -95,7 +95,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
     if (!infoJson.length) {
       setAlerta({
         tipo: 'error',
-        mensaje: 'Agrega un archivo CSV válido.',
+        mensaje: 'Agrega un archivo CSV con idProducto válidos.',
         duracion: 2500,
         cerrable: true,
         centradoInferior: true,
@@ -184,9 +184,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   Cada fila del archivo representa una opción específica de un producto. El sistema necesita saber qué filas pertenecen al mismo producto. Para eso sirve el campo <strong>idProducto</strong>.
                   <br /><br />
                   Dentro de ese producto, se organizan las <strong>variantes</strong> usando el campo <strong>nombreVariante</strong>.
-                  Y dentro de cada variante, se agrupan las <strong>opciones</strong> como "Rojo", "M", "32GB", etc. Consulta el siguente archivo de ejemplo: <a href="/ejemplo_importar_productos.csv" download="ejemplo_importar_productos.csv">
-                  Descargar ejemplo de plantilla CSV.
-                  </a>
+                  Y dentro de cada variante, se agrupan las <strong>opciones</strong> como "Rojo", "M", "32GB", etc. Consulta el archivo de ejemplo.
                   <br /><br />
                   Así se puede importar correctamente todo: producto, variantes y sus opciones.
                   <br /><br />
@@ -194,7 +192,7 @@ const ModalImportarProductos = ({ abierto, onCerrar, onConfirm, cargando, errore
                   <strong>Asegúrate de lo sigiente:</strong>
                   <ul>
                     <li>
-                      El <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto. Por cada campo vacío de idProducto, el sistema podría generar varios productos con el mismo nombre.
+                      El <strong>idProducto</strong> sea único para cada producto dentro del archivo. Puede ser cualquier número, pero debe coincidir en todas las filas relacionadas con ese producto. Por cada campo vacío de idProducto, el sistema ignorará la fila.
                     </li>
                     <li>
                       La primera fila de cada producto no debe tener campos vacíos, ya que el sistema la usa para identificar el producto principal. 
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 49648296..770b14c3 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -24,6 +24,12 @@ import { useLeerProducto } from '@Hooks/Productos/useLeerProducto.js';
 import useExportarProductos from '@Hooks/Productos/useExportarProductos';
 
 const ListaProductos = () => {
+  const { productos, cargando, error, recargar } = useConsultarProductos();
+  const { eliminar } = useEliminarProductos();
+  const theme = useTheme();
+  const colores = tokens(theme.palette.mode);
+  const { usuario } = useAuth();
+
   const [productosSeleccionados, setProductosSeleccionados] = useState([]);
   const [productoDetalleSeleccionado, setProductoDetalleSeleccionado] = useState(null);
   const [mostrarModalProveedor, setMostrarModalProveedor] = useState(false);
@@ -31,15 +37,13 @@ const ListaProductos = () => {
   const [alerta, setAlerta] = useState(null);
   const [openModalEliminar, setAbrirPopUp] = useState(false);
   const [modalImportarAbierto, setModalImportarAbierto] = useState(false);
+  const { importar, errores, exito, cargando: cargandoImportacion } = useImportarProductos();
+ 
+  
   const [abrirModalDetalle, setAbrirModalDetalle] = useState(false);
   const [imagenProducto, setImagenProducto] = useState('')
+
   const [openModalExportar, setAbrirPopUpExportar] = useState(false);
-  const { productos, cargando, error, recargar } = useConsultarProductos();
-  const { eliminar } = useEliminarProductos();
-  const { importar, errores, exito, cargando: cargandoImportacion } = useImportarProductos();
-  const colores = tokens(theme.palette.mode);
-  const theme = useTheme();
-  const { usuario } = useAuth();
   const MENSAJE_POPUP_EXPORTAR = '¿Deseas exportar la lista de productos? El archivo será generado en formato .xlsx';
   const manejarCancelarExportar = () => {
     setAbrirPopUpExportar(false);

From 73bff7646abd69f1e09cc9a280fa0ae29db6056f Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 16:51:41 -0600
Subject: [PATCH 131/160] excluir cambiar usuario a superadmin

---
 .../Organismos/Formularios/FormularioActualizarUsuario.jsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index 92b78866..efd7a018 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -162,7 +162,7 @@ const FormularioActualizarUsuario = ({
           error={!!erroresValidacion.idRol}
           helperText={erroresValidacion.idRol && CAMPO_OBLIGATORIO}
           options={roles
-            .filter((rol) => rol.idRol !== 3)
+            .filter((rol) => rol.idRol !== 1)
             .map((rol) => ({
               value: rol.idRol,
               label: rol.nombre,

From fbaef19a5178a2df5ffe7b8f2a64a898446f7a62 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Fri, 6 Jun 2025 16:58:48 -0600
Subject: [PATCH 132/160] Fix: Correcciones eslint

---
 .../Organismos/ModalEditarPedido.jsx          |  30 ++---
 .../Paginas/Categorias/ListaCategorias.jsx    | 116 ++++++++++--------
 2 files changed, 78 insertions(+), 68 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
index 26aeed81..7d378da1 100644
--- a/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalEditarPedido.jsx
@@ -41,8 +41,8 @@ const ModalEditarPedido = ({
   }, [abierto, datosIniciales]);
 
   const manejarCambio = useCallback(
-    (e) => {
-      const { name, value } = e.target;
+    (evento) => {
+      const { name, value } = evento.target;
       setPedido((prev) => ({ ...prev, [name]: value }));
 
       // Limpiar error específico del campo
@@ -124,54 +124,54 @@ const ModalEditarPedido = ({
   }, [pedido, validarCampos, actualizarPedido, onMostrarAlerta, onActualizar, onCerrar]);
 
   const manejarCambioPrecio = useCallback(
-    (e) => {
-      const value = e.target.value;
+    (evento) => {
+      const value = evento.target.value;
 
       // Permitir campo vacío
       if (value === '') {
-        manejarCambio(e);
+        manejarCambio(evento);
         return;
       }
 
       // Validar formato mientras se escribe
       if (REGEX_PRECIO.test(value)) {
-        manejarCambio(e);
+        manejarCambio(evento);
       }
     },
     [manejarCambio]
   );
 
   const manejarCambioEstatus = useCallback(
-    (e) => {
-      const value = e.target.value;
+    (evento) => {
+      const value = evento.target.value;
 
       // Solo permitir letras, espacios y caracteres especiales del español
       if (REGEX_SOLO_LETRAS.test(value)) {
-        manejarCambio(e);
+        manejarCambio(evento);
       }
     },
     [manejarCambio]
   );
 
   const manejarCambioEstatusPago = useCallback(
-    (e) => {
-      const value = e.target.value;
+    (evento) => {
+      const value = evento.target.value;
 
       // Solo permitir letras, espacios y caracteres especiales del español
       if (REGEX_SOLO_LETRAS.test(value)) {
-        manejarCambio(e);
+        manejarCambio(evento);
       }
     },
     [manejarCambio]
   );
 
   const manejarCambioEstatusEnvio = useCallback(
-    (e) => {
-      const value = e.target.value;
+    (evento) => {
+      const value = evento.target.value;
 
       // Solo permitir letras, espacios y caracteres especiales del español
       if (REGEX_SOLO_LETRAS.test(value)) {
-        manejarCambio(e);
+        manejarCambio(evento);
       }
     },
     [manejarCambio]
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 8c88d74a..0a602c5c 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -31,29 +31,36 @@ const ListaCategorias = () => {
   const [cargandoDetalle, setCargandoDetalle] = useState(false);
   const [modalEditarAbierto, setModalEditarAbierto] = useState(false);
   const [categoriaEditable, setCategoriaEditable] = useState(null);
-  
+
   const actualizar = useActualizarCategoria();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
-  const columns = useMemo(() => [
-    { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
-    { field: 'descripcion', headerName: 'Descripción', flex: 2 },
-    {
-      field: 'cantidadProductos',
-      headerName: 'Número de productos asociados',
-      type: 'number',
-      flex: 1,
-    },
-  ], []);
-
-  const rows = useMemo(() => categorias.map((cat) => ({
-    id: cat.idCategoria,
-    nombreCategoria: cat.nombreCategoria,
-    descripcion: cat.descripcion,
-    cantidadProductos: cat.cantidadProductos,
-    idCliente: cat.idCliente,
-  })), [categorias]);
+  const columns = useMemo(
+    () => [
+      { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
+      { field: 'descripcion', headerName: 'Descripción', flex: 2 },
+      {
+        field: 'cantidadProductos',
+        headerName: 'Número de productos asociados',
+        type: 'number',
+        flex: 1,
+      },
+    ],
+    []
+  );
+
+  const rows = useMemo(
+    () =>
+      categorias.map((cat) => ({
+        id: cat.idCategoria,
+        nombreCategoria: cat.nombreCategoria,
+        descripcion: cat.descripcion,
+        cantidadProductos: cat.cantidadProductos,
+        idCliente: cat.idCliente,
+      })),
+    [categorias]
+  );
 
   useEffect(() => {
     const cargarProductos = async () => {
@@ -75,7 +82,7 @@ const ListaCategorias = () => {
 
   const handleAbrirModalCrear = useCallback(() => setModalCrearAbierto(true), []);
   const handleCerrarModalCrear = useCallback(() => setModalCrearAbierto(false), []);
-  
+
   const handleCategoriaCreadaExitosamente = useCallback(() => {
     handleCerrarModalCrear();
     // Recarga la lista de categorías
@@ -167,7 +174,7 @@ const ListaCategorias = () => {
         setModalEditarAbierto(false);
         setCategoriaEditable(null);
         actualizar.limpiarEstado();
-        setAlerta(null); 
+        setAlerta(null);
         recargar();
       }, 2000);
     } else if (actualizar.error) {
@@ -209,36 +216,39 @@ const ListaCategorias = () => {
     setModalEditarAbierto(true);
   }, [productos, categoriaDetalle]);
 
-  const botones = useMemo(() => [
-    {
-      label: 'Añadir',
-      variant: 'contained',
-      color: 'error',
-      size: 'large',
-      backgroundColor: colores.altertex[1],
-      onClick: handleAbrirModalCrear,
-    },
-    {
-      label: 'Eliminar',
-      onClick: () => {
-        if (seleccionados.size === 0 || seleccionados.ids?.size === 0) {
-          setAlerta({
-            tipo: 'error',
-            mensaje: 'Selecciona al menos una categoría para eliminar.',
-            icono: true,
-            cerrable: true,
-            centradoInferior: true,
-          });
-        } else {
-          setIdsCategoria(Array.from(seleccionados.ids));
-          setOpenModalEliminar(true);
-        }
+  const botones = useMemo(
+    () => [
+      {
+        label: 'Añadir',
+        variant: 'contained',
+        color: 'error',
+        size: 'large',
+        backgroundColor: colores.altertex[1],
+        onClick: handleAbrirModalCrear,
       },
-      color: 'error',
-      size: 'large',
-      backgroundColor: colores.altertex[1],
-    },
-  ], [colores.altertex, handleAbrirModalCrear, seleccionados]);
+      {
+        label: 'Eliminar',
+        onClick: () => {
+          if (seleccionados.size === 0 || seleccionados.ids?.size === 0) {
+            setAlerta({
+              tipo: 'error',
+              mensaje: 'Selecciona al menos una categoría para eliminar.',
+              icono: true,
+              cerrable: true,
+              centradoInferior: true,
+            });
+          } else {
+            setIdsCategoria(Array.from(seleccionados.ids));
+            setOpenModalEliminar(true);
+          }
+        },
+        color: 'error',
+        size: 'large',
+        backgroundColor: colores.altertex[1],
+      },
+    ],
+    [colores.altertex, handleAbrirModalCrear, seleccionados]
+  );
 
   const botonesModalDetalle = useMemo(() => {
     if (errorDetalle) {
@@ -269,7 +279,7 @@ const ListaCategorias = () => {
         onClick: () => setModalDetalleAbierto(false),
       },
     ];
-  }, [errorDetalle, colores.primario, colores.altertex, abrirModalEditar]);
+  }, [errorDetalle, colores.altertex, abrirModalEditar]);
 
   return (
     <>
@@ -308,7 +318,7 @@ const ListaCategorias = () => {
         setAlerta={setAlerta}
         refrescarPagina={recargar}
       />
-      
+
       {modalDetalleAbierto && !cargandoDetalle && (
         <ModalFlotante
           open={modalDetalleAbierto}
@@ -361,4 +371,4 @@ const ListaCategorias = () => {
   );
 }; // <- Esta llave de cierre estaba faltando
 
-export default ListaCategorias;
\ No newline at end of file
+export default ListaCategorias;

From 8034b7aae4d3935514da970c8b3de35b5efc5f32 Mon Sep 17 00:00:00 2001
From: angieriosc <A01705651@tec.mx>
Date: Fri, 6 Jun 2025 16:59:40 -0600
Subject: [PATCH 133/160] Fix: Correciones console.log

---
 src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js b/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
index 6fb55f57..822625d7 100644
--- a/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
+++ b/src/Dominio/Repositorios/Pedidos/repositorioActualizarPedido.js
@@ -12,7 +12,6 @@ export class RepositorioActualizarPedido {
    * @see [RF[62] Actualizar pedido - [https://codeandco-wiki.netlify.app/docs/proyectos/textiles/documentacion/requisitos/RF62)]
    */
   static async actualizarPedido(pedido) {
-    console.log('[DEBUG] RepositorioActualizarPedido - Pedido a actualizar:', pedido);
     try {
       const respuesta = await axios.put(
         `${RUTAS_API.PEDIDOS.ACTUALIZAR_PEDIDO}`,

From 4d12542e2dd0352cc3a448e448bbaece6d36b9b2 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 17:03:44 -0600
Subject: [PATCH 134/160] fix: update role filtering to exclude additional role
 ID

---
 .../Organismos/Formularios/FormularioActualizarUsuario.jsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index efd7a018..deda4657 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -162,7 +162,7 @@ const FormularioActualizarUsuario = ({
           error={!!erroresValidacion.idRol}
           helperText={erroresValidacion.idRol && CAMPO_OBLIGATORIO}
           options={roles
-            .filter((rol) => rol.idRol !== 1)
+            .filter((rol) => rol.idRol !== 1 && rol.idRol !== 3)
             .map((rol) => ({
               value: rol.idRol,
               label: rol.nombre,

From b5700af45a68e9e1dd4012a9a358c42011d96e7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 17:04:23 -0600
Subject: [PATCH 135/160] =?UTF-8?q?style:=20Hacer=20m=C3=A1s=20grande=20el?=
 =?UTF-8?q?=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx | 4 ++--
 src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index a32a6357..f08dae4f 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -261,7 +261,7 @@ const SetProductosEditable = ({
   return (
     <Box sx={{ maxWidth: 1000, mx: 'auto', pro: 2 }}>
       {/* Campos de texto */}
-      <Grid item xs={12}>
+      <Grid item xs={12} mb={2} >
         <FormControlLabel
           control={
             <Switch
@@ -274,7 +274,7 @@ const SetProductosEditable = ({
           sx={{ mb: 2 }}
         />
       </Grid>
-      <Grid container spacing={3}>
+      <Grid container spacing={3} mb={2}>
         <Grid item xs={12} md={6}>
           <Texto variant='h6'>Nombre:</Texto>
           <CampoTexto
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index 568a48ab..e53d1a82 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -312,7 +312,7 @@ const ListaSetsProductos = () => {
           onClose={() => setAbrirModalEditar(false)}
           titulo='Editar Set de Productos'
           tituloVariant='h4'
-          customWidth={849}
+          customWidth={890}
           botones={[
             {
               label: 'Guardar',

From cb4e061ef4fe1930a62c17e231b4979cced642ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 17:13:21 -0600
Subject: [PATCH 136/160] feat: Usar componente de lista transferible

---
 .../Moleculas/SetProductosEditable.jsx        | 250 +++---------------
 1 file changed, 42 insertions(+), 208 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index f08dae4f..152e6c00 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -6,27 +6,13 @@ import CampoTexto from '@Atomos/CampoTexto';
 import Texto from '@Atomos/Texto';
 import obtenerProductos from '@Servicios/obtenerProductos';
 import { useAuth } from '@Hooks/AuthProvider';
+import ListaTransferenciaPersonalizada from '@Organismos/ListaTransferencia';
 import {
   Box,
   Grid,
-  Card,
-  CardHeader,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Checkbox,
-  Divider,
-  Button,
   Switch,
   FormControlLabel,
 } from '@mui/material';
-import {
-  KeyboardArrowRight,
-  KeyboardArrowLeft,
-  KeyboardDoubleArrowRight,
-  KeyboardDoubleArrowLeft,
-} from '@mui/icons-material';
 
 // Constantes
 const LIMITE_NOMBRE = 50;
@@ -49,12 +35,9 @@ const SetProductosEditable = ({
   const [activo, setActivo] = useState(activoInicial);
   const [descripcion, setDescripcion] = useState(descripcionInicial);
   const [todosProductos, setTodosProductos] = useState([]);
-  const [productosSeleccionados, setProductosSeleccionados] = useState([]);
-  //const [productosAsignados, setProductosAsignados] = useState(productosInicial);
   const [productosAsignados, setProductosAsignados] = useState(() => {
     return productosInicial.filter((pro) => pro && pro.id); // Filtra productos válidos
   });
-
   const [loading, setLoading] = useState(true);
   const [errores, setErrores] = useState({
     nombre: false,
@@ -124,144 +107,29 @@ const SetProductosEditable = ({
     }
   }, [nombre, activo, descripcion, productosAsignados, loading, validarCampos, onFormDataChange]);
 
-  // Manejar selección de productos
-  const toggleSeleccionProducto = useCallback((producto) => {
-    setProductosSeleccionados((prev) =>
-      prev.some((pro) => pro.id === producto.id)
-        ? prev.filter((pro) => pro.id !== producto.id)
-        : [...prev, producto]);
+  // Manejar cambios en la lista de transferencia
+  const manejarCambioTransferencia = useCallback(({ disponibles, seleccionados }) => {
+    setProductosAsignados(seleccionados);
   }, []);
 
-  // Transferir productos
-  const transferirSeleccionados = useCallback(() => {
-    const paraTransferir = productosSeleccionados.filter((pro) =>
-      productosDisponibles.some((pd) => pd.id === pro.id));
-
-    setProductosAsignados((prev) =>
-      [...prev, ...paraTransferir].sort((prodA, prodB) =>
-        (prodA.nombreProducto || prodA.nombre).localeCompare(prodB.nombreProducto || prodB.nombre)));
-    setProductosSeleccionados((prev) =>
-      prev.filter((pro) => !paraTransferir.some((pt) => pt.id === pro.id)));
-  }, [productosSeleccionados, productosDisponibles]);
-
-  const quitarSeleccionados = useCallback(() => {
-    const paraQuitar = productosSeleccionados.filter((pro) =>
-      productosAsignados.some((pa) => pa.id === pro.id));
-
-    setProductosAsignados((prev) =>
-      prev.filter((pro) => !paraQuitar.some((pq) => pq.id === pro.id)));
-    setProductosSeleccionados((prev) =>
-      prev.filter((pro) => !paraQuitar.some((pq) => pq.id === pro.id)));
-  }, [productosSeleccionados, productosAsignados]);
-
-  const transferirTodos = useCallback(() => {
-    setProductosAsignados((prev) =>
-      [...prev, ...productosDisponibles].sort((prodA, prodB) =>
-        (prodA.nombreProducto || prodA.nombre).localeCompare(prodB.nombreProducto || prodB.nombre)));
-    setProductosSeleccionados((prev) =>
-      prev.filter((pro) => !productosDisponibles.some((pd) => pd.id === pro.id)));
-  }, [productosDisponibles]);
-
-  const quitarTodos = useCallback(() => {
-    setProductosAsignados([]);
-    setProductosSeleccionados((prev) =>
-      prev.filter((pro) => !productosAsignados.some((pa) => pa.id === pro.id)));
-  }, [productosAsignados]);
-
-  // Seleccionar/deseleccionar todos
-  const toggleSeleccionTodos = useCallback(
-    (productos, esDisponibles) => {
-      const todosSeleccionados = productos.every((pro) =>
-        productosSeleccionados.some((ps) => ps.id === pro.id));
-
-      if (todosSeleccionados) {
-        setProductosSeleccionados((prev) =>
-          prev.filter((pro) => !productos.some((prod) => prod.id === pro.id)));
-      } else {
-        setProductosSeleccionados((prev) => [
-          ...prev,
-          ...productos.filter(
-            (pro) =>
-              !prev.some((ps) => ps.id === pro.id)
-              && (esDisponibles
-                ? !productosAsignados.some((pa) => pa.id === pro.id)
-                : productosAsignados.some((pa) => pa.id === pro.id))
-          ),
-        ]);
-      }
-    },
-    [productosSeleccionados, productosAsignados]
-  );
-
-  // Componente de lista de productos
-  const ListaProductos = useCallback(
-    ({ titulo, productos, esDisponibles }) => {
-      const seleccionadosEnLista = productos.filter((pro) =>
-        productosSeleccionados.some((ps) => ps.id === pro.id)).length;
-
-      const todosSeleccionados = productos.length > 0 && seleccionadosEnLista === productos.length;
-      const algunosSeleccionados
-        = seleccionadosEnLista > 0 && seleccionadosEnLista < productos.length;
-
-      return (
-        <Card>
-          <CardHeader
-            avatar={
-              <Checkbox
-                checked={todosSeleccionados}
-                indeterminate={algunosSeleccionados}
-                onChange={() => toggleSeleccionTodos(productos, esDisponibles)}
-                disabled={productos.length === 0}
-                inputProps={{ 'aria-label': `Seleccionar todos ${titulo}` }}
-              />
-            }
-            title={titulo}
-            subheader={`${seleccionadosEnLista}/${productos.length} seleccionados`}
-            sx={{ px: 2, py: 1 }}
-          />
-          <Divider />
-          <List sx={{ width: 350, height: 300, overflow: 'auto' }}>
-            {productos.map((producto) => {
-              // Asegurarse de que el ID existe y es único
-              const itemKey = producto.id
-                ? `producto-${producto.id}`
-                : `producto-${Math.random().toString(36).substr(2, 9)}`;
+  // Función para obtener la etiqueta del producto
+  const obtenerEtiquetaProducto = useCallback((producto) => {
+    return producto.nombreProducto || producto.nombre || 'Sin nombre';
+  }, []);
 
-              return (
-                <ListItemButton
-                  key={itemKey}
-                  onClick={() => toggleSeleccionProducto(producto)}
-                  dense
-                >
-                  <ListItemIcon>
-                    <Checkbox
-                      checked={productosSeleccionados.some((pro) => pro.id === producto.id)}
-                      tabIndex={-1}
-                      disableRipple
-                    />
-                  </ListItemIcon>
-                  <ListItemText
-                    primary={producto.nombreProducto || producto.nombre || 'Sin nombre'}
-                    secondary={`ID: ${producto.id || 'N/A'}`}
-                  />
-                </ListItemButton>
-              );
-            })}
-          </List>
-        </Card>
-      );
-    },
-    [productosSeleccionados, toggleSeleccionProducto, toggleSeleccionTodos]
-  );
+  // Función para obtener la clave del producto
+  const obtenerClaveProducto = useCallback((producto) => {
+    return producto.id;
+  }, []);
 
   if (loading) {
-    return <Box sx={{ pro: 3, textAlign: 'center' }}>Cargando productos...</Box>;
+    return <Box sx={{ p: 3, textAlign: 'center' }}>Cargando productos...</Box>;
   }
 
   return (
-    <Box sx={{ maxWidth: 1000, mx: 'auto', pro: 2 }}>
-      {/* Campos de texto */}
-      <Grid item xs={12} mb={2} >
+    <Box sx={{ maxWidth: 1000, mx: 'auto', p: 2 }}>
+      {/* Switch de activo/inactivo */}
+      <Grid item xs={12} mb={2}>
         <FormControlLabel
           control={
             <Switch
@@ -274,6 +142,8 @@ const SetProductosEditable = ({
           sx={{ mb: 2 }}
         />
       </Grid>
+
+      {/* Campos de texto */}
       <Grid container spacing={3} mb={2}>
         <Grid item xs={12} md={6}>
           <Texto variant='h6'>Nombre:</Texto>
@@ -311,66 +181,23 @@ const SetProductosEditable = ({
           />
         </Grid>
 
-        {/* Selector de productos */}
+        {/* Lista de transferencia de productos */}
         <Grid item xs={12}>
-          <Texto variant='h6'>Productos:</Texto>
-          <Grid container spacing={2} justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
-            <Grid item>
-              <ListaProductos
-                titulo='Disponibles'
-                productos={productosDisponibles}
-                esDisponibles={true}
-              />
-            </Grid>
-
-            <Grid>
-              <Grid container direction='column' sx={{alignItems: 'center'}} spacing={1}>
-                <Button
-                  variant='outlined'
-                  size='small'
-                  onClick={transferirTodos}
-                  disabled={productosDisponibles.length === 0}
-                  aria-label='Mover todos a seleccionados'
-                ><KeyboardDoubleArrowRight /></Button>
-
-                <Button
-                  variant='outlined'
-                  size='small'
-                  onClick={transferirSeleccionados}
-                  disabled={
-                    productosSeleccionados.filter((pro) =>
-                      productosDisponibles.some((pd) => pd.id === pro.id)).length === 0
-                  }
-                  aria-label='Mover seleccionados a seleccionados'
-                ><KeyboardArrowRight /></Button>
-                <Button
-                  variant='outlined'
-                  size='small'
-                  onClick={quitarSeleccionados}
-                  disabled={
-                    productosSeleccionados.filter((pro) =>
-                      productosAsignados.some((pa) => pa.id === pro.id)).length === 0
-                  }
-                  aria-label='Quitar seleccionados'
-                ><KeyboardArrowLeft /></Button>
-                <Button
-                  variant='outlined'
-                  size='small'
-                  onClick={quitarTodos}
-                  disabled={productosAsignados.length === 0}
-                  aria-label='Quitar todos'
-                ><KeyboardDoubleArrowLeft /></Button>
-              </Grid>
-            </Grid>
-
-            <Grid item sx={{ my: 2 }}>
-              <ListaProductos
-                titulo='Seleccionados'
-                productos={productosAsignados}
-                esDisponibles={false}
-              />
-            </Grid>
-          </Grid>
+          <Texto variant='h6' sx={{ mb: 2 }}>Productos:</Texto>
+          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
+            <ListaTransferenciaPersonalizada
+              elementosDisponibles={productosDisponibles}
+              elementosSeleccionados={productosAsignados}
+              alCambiarSeleccion={manejarCambioTransferencia}
+              tituloIzquierda="Productos Disponibles"
+              tituloDerecha="Productos Seleccionados"
+              obtenerEtiquetaElemento={obtenerEtiquetaProducto}
+              obtenerClaveElemento={obtenerClaveProducto}
+              deshabilitado={false}
+              alturaMaxima={300}
+              ancho={350}
+            />
+          </Box>
         </Grid>
       </Grid>
     </Box>
@@ -380,6 +207,7 @@ const SetProductosEditable = ({
 SetProductosEditable.propTypes = {
   nombre: PropTypes.string,
   descripcion: PropTypes.string,
+  activo: PropTypes.bool,
   productos: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -387,13 +215,19 @@ SetProductosEditable.propTypes = {
       nombreProducto: PropTypes.string,
     })
   ),
+  idsProductos: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ),
   onFormDataChange: PropTypes.func,
 };
 
 SetProductosEditable.defaultProps = {
   nombre: '',
   descripcion: '',
+  activo: true,
   productos: [],
+  idsProductos: [],
+  onFormDataChange: null,
 };
 
-export default SetProductosEditable;
+export default SetProductosEditable;
\ No newline at end of file

From 00890804a032bfe1bf4d7eb92aac01370e9db77d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valeria=20Zu=C3=B1iga=20Mendoza?= <A01705435@tec.mx>
Date: Fri, 6 Jun 2025 17:17:02 -0600
Subject: [PATCH 137/160] fix: Corregir errores de lint

---
 src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
index 152e6c00..6af1d02e 100644
--- a/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
+++ b/src/Vistas/Componentes/Moleculas/SetProductosEditable.jsx
@@ -108,7 +108,7 @@ const SetProductosEditable = ({
   }, [nombre, activo, descripcion, productosAsignados, loading, validarCampos, onFormDataChange]);
 
   // Manejar cambios en la lista de transferencia
-  const manejarCambioTransferencia = useCallback(({ disponibles, seleccionados }) => {
+  const manejarCambioTransferencia = useCallback(({ seleccionados }) => {
     setProductosAsignados(seleccionados);
   }, []);
 
@@ -123,11 +123,11 @@ const SetProductosEditable = ({
   }, []);
 
   if (loading) {
-    return <Box sx={{ p: 3, textAlign: 'center' }}>Cargando productos...</Box>;
+    return <Box sx={{ textAlign: 'center' }}>Cargando productos...</Box>;
   }
 
   return (
-    <Box sx={{ maxWidth: 1000, mx: 'auto', p: 2 }}>
+    <Box sx={{ maxWidth: 1000, mx: 'auto'}}>
       {/* Switch de activo/inactivo */}
       <Grid item xs={12} mb={2}>
         <FormControlLabel

From fa75642c867b3416c13b95bd8cd611aab4ad628f Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 17:30:58 -0600
Subject: [PATCH 138/160] fix: adjust confirmation delay and update success
 alert message in user modal

---
 .../Organismos/ModalActualizarUsuario.jsx     | 21 +++++++++----------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx | 10 ++++++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
index 46a20957..3fbc788e 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -35,7 +35,7 @@ const ModalActualizarUsuario = ({
       setTimeout(() => {
         limpiarFormulario();
         onClose();
-      }, 800);
+      }, 1000);
     }
   };
 
@@ -76,17 +76,16 @@ const ModalActualizarUsuario = ({
             cargando={cargando}
           />
         </Box>
-
-        {alerta && (
-          <Alerta
-            sx={{ marginBottom: 2 }}
-            tipo={alerta.tipo}
-            mensaje={alerta.mensaje}
-            duracion='2000'
-            onClose={() => setAlerta(null)}
-          />
-        )}
       </ModalFlotante>
+      {alerta && (
+        <Alerta
+          sx={{ marginBottom: 2 }}
+          tipo={alerta.tipo}
+          mensaje={alerta.mensaje}
+          duracion='1500'
+          onClose={() => setAlerta(null)}
+        />
+      )}
     </>
   );
 };
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index f82f74de..d9196e2a 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -452,7 +452,15 @@ const ListaUsuarios = () => {
           <ModalActualizarUsuario
             open={modalActualizarAbierto}
             onClose={() => setModalActualizarAbierto(false)}
-            onAccion={recargar}
+            onAccion={(exito) => {
+              recargar();
+              if (exito) {
+                setAlerta({
+                  tipo: 'success',
+                  mensaje: 'Usuario actualizado exitosamente',
+                });
+              }
+            }}
             usuarioEdicion={{
               ...usuario,
               cliente: usuario.clientes ? usuario.clientes.map((c) => c.idCliente) : [],

From 8471589c2ca6f2bee2c1ed62123cb1e63aebcc21 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 17:48:05 -0600
Subject: [PATCH 139/160] fix: enhance user update confirmation with
 customizable alert message and properties

---
 .../Organismos/ModalActualizarUsuario.jsx            | 11 +----------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx        | 12 ++++++++----
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
index 3fbc788e..425b7955 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -31,7 +31,7 @@ const ModalActualizarUsuario = ({
   const manejarConfirmacion = async () => {
     const resultado = await handleGuardar();
     if (resultado?.exito) {
-      if (onAccion) await onAccion();
+      if (onAccion) await onAccion(true, resultado?.mensaje || 'Usuario actualizado exitosamente');
       setTimeout(() => {
         limpiarFormulario();
         onClose();
@@ -77,15 +77,6 @@ const ModalActualizarUsuario = ({
           />
         </Box>
       </ModalFlotante>
-      {alerta && (
-        <Alerta
-          sx={{ marginBottom: 2 }}
-          tipo={alerta.tipo}
-          mensaje={alerta.mensaje}
-          duracion='1500'
-          onClose={() => setAlerta(null)}
-        />
-      )}
     </>
   );
 };
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index d9196e2a..ce08423b 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -320,10 +320,11 @@ const ListaUsuarios = () => {
           <Alerta
             tipo={alerta.tipo}
             mensaje={alerta.mensaje}
-            cerrable
+            icono={alerta.icono}
+            cerrable={alerta.cerrable}
             duracion={3000}
+            centradoInferior={alerta.centradoInferior}
             onClose={() => setAlerta(null)}
-            centradoInferior
           />
         )}
         {modalCrearUsuarioAbierto && (
@@ -452,12 +453,15 @@ const ListaUsuarios = () => {
           <ModalActualizarUsuario
             open={modalActualizarAbierto}
             onClose={() => setModalActualizarAbierto(false)}
-            onAccion={(exito) => {
+            onAccion={(exito, mensaje) => {
               recargar();
               if (exito) {
                 setAlerta({
                   tipo: 'success',
-                  mensaje: 'Usuario actualizado exitosamente',
+                  mensaje: mensaje || 'Usuario actualizado exitosamente',
+                  icono: true,
+                  cerrable: true,
+                  centradoInferior: true,
                 });
               }
             }}

From bf13f34ceeb3081de41698718ef736457df5fde0 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 18:01:34 -0600
Subject: [PATCH 140/160] fix: update password fields labels for clarity in
 user update form

---
 .../Organismos/Formularios/FormularioActualizarUsuario.jsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index deda4657..cedb411c 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -205,7 +205,7 @@ const FormularioActualizarUsuario = ({
       </Grid>
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
-          label='Contraseña'
+          label='Cambiar Contraseña'
           name='contrasenia'
           type='password'
           value={datosUsuario.contrasenia}
@@ -222,7 +222,7 @@ const FormularioActualizarUsuario = ({
       </Grid>
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
-          label='Confirmar contraseña'
+          label='Confirmar cambio de contraseña'
           name='confirmarContrasenia'
           type='password'
           value={datosUsuario.confirmarContrasenia || ''}

From e7b92de069343dbaeb90d8e2cb1fdd9dba2e2f08 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 18:31:49 -0600
Subject: [PATCH 141/160] Fix de caracteres de limite de los productos

---
 .../Organismos/Cuotas/ModalEditarCuotas.jsx    | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
index 829ec281..4e257893 100644
--- a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
@@ -1,4 +1,3 @@
-// src/Organismos/ModalEditarCuotas.jsx
 import { useState, useEffect } from 'react';
 import ModalFlotante from '@Organismos/ModalFlotante';
 import CampoTexto from '@Atomos/CampoTexto';
@@ -198,7 +197,6 @@ const ModalEditarCuotas = ({
       disabledConfirm={cargando}
       customWidth={800}
     >
-      {/* SCROLLABLE CONTENT */}
       <Box sx={{ maxHeight: '70vh', overflow: 'auto', p: 2 }}>
         <Typography variant="h6" sx={{ mb: 2 }}>Información Básica</Typography>
 
@@ -317,7 +315,12 @@ const ModalEditarCuotas = ({
                   label="Límite *"
                   type="number"
                   value={producto.limite}
-                  onChange={(e) => cambiarProducto(index, 'limite', parseInt(e.target.value) || 0)}
+                  onChange={(e) => {
+                    const valor = e.target.value.replace(/\D/g, ''); 
+                    if (valor.length <= 9) {
+                      cambiarProducto(index, 'limite', parseInt(valor || '0', 10));
+                    }
+                  }}
                   inputProps={{ min: 0 }}
                   sx={{ minWidth: 120 }}
                 />
@@ -326,17 +329,22 @@ const ModalEditarCuotas = ({
                   label="Límite Actual *"
                   type="number"
                   value={producto.limiteActual}
-                  onChange={(e) => cambiarProducto(index, 'limiteActual', parseInt(e.target.value) || 0)}
+                  onChange={(e) => {
+                    const valor = e.target.value.replace(/\D/g, '');
+                    if (valor.length <= 9) {
+                      cambiarProducto(index, 'limiteActual', parseInt(valor || '0', 10));
+                    }
+                  }}
                   inputProps={{ min: 0 }}
                   sx={{ minWidth: 120 }}
                 />
+
               </Box>
             </Box>
           ))
         )}
       </Box>
 
-      {/* ✅ Alerta abajo del modal, como en ModalCrearRol */}
       {(alerta || error) && (
         <Box sx={{ px: 2, pb: 2 }}>
           <Alert severity="error" onClose={() => setAlerta('')}>

From 7e049b721c7fd9792a7b0c8f7fd344cdb42ffe55 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 18:34:46 -0600
Subject: [PATCH 142/160] errores de lint

---
 hooks/Productos/ProductoFormProvider.jsx      |  15 +++
 .../FormularioActualizarUsuario.jsx           |   9 ++
 .../Organismos/ModalActualizarUsuario.jsx     |  10 ++
 .../Componentes/Organismos/ModalUsuarios.jsx  |   7 ++
 .../Paginas/Categorias/ListaCategorias.jsx    |   7 ++
 .../Vistas/Paginas/Usuarios/ListaUsuarios.jsx |  34 +++++
 .../Modelos/Usuarios/ActualizarUsuario.js     |   8 +-
 .../FormularioActualizarUsuario.jsx           |   7 +-
 .../Organismos/ModalActualizarUsuario.jsx     |   1 -
 .../Componentes/Organismos/ModalUsuarios.jsx  |   2 -
 .../Paginas/Categorias/ListaCategorias.jsx    | 116 ++++++++++--------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |   4 +-
 src/hooks/Productos/ProductoFormProvider.jsx  |   4 +-
 13 files changed, 155 insertions(+), 69 deletions(-)
 create mode 100644 hooks/Productos/ProductoFormProvider.jsx
 create mode 100644 hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
 create mode 100644 hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
 create mode 100644 hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx
 create mode 100644 hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx
 create mode 100644 hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx

diff --git a/hooks/Productos/ProductoFormProvider.jsx b/hooks/Productos/ProductoFormProvider.jsx
new file mode 100644
index 00000000..6b448851
--- /dev/null
+++ b/hooks/Productos/ProductoFormProvider.jsx
@@ -0,0 +1,15 @@
+import React, { useCallback } from 'react';
+
+const ProductoFormProvider = () => {
+  const callbackFunction = useCallback(() => {
+    alert('Callback executed!');
+  }, []);
+
+  return (
+    <div>
+      <button onClick={callbackFunction}>Run Callback</button>
+    </div>
+  );
+};
+
+export default ProductoFormProvider;
diff --git a/hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
new file mode 100644
index 00000000..5b71ab9d
--- /dev/null
+++ b/hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -0,0 +1,9 @@
+import React, { useEffect } from 'react';
+
+const FormularioActualizarUsuario = () => {
+  useEffect(() => {}, []);
+
+  return <div>{/* Your component JSX here */}</div>;
+};
+
+export default FormularioActualizarUsuario;
diff --git a/hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
new file mode 100644
index 00000000..ecde420c
--- /dev/null
+++ b/hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -0,0 +1,10 @@
+const ModalActualizarUsuario = () => {
+    // Your component logic here
+    return (
+        <div>
+            {/* Your component JSX here */}
+        </div>
+    );
+};
+
+export default ModalActualizarUsuario;
\ No newline at end of file
diff --git a/hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx b/hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx
new file mode 100644
index 00000000..86639a75
--- /dev/null
+++ b/hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ModalUsuarios = () => {
+  return <div>{/* Contenido del modal aquí */}</div>;
+};
+
+export default ModalUsuarios;
diff --git a/hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx b/hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx
new file mode 100644
index 00000000..87847af4
--- /dev/null
+++ b/hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ListaCategorias = () => {
+  return <div>{/* Tu contenido aquí */}</div>;
+};
+
+export default ListaCategorias;
diff --git a/hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
new file mode 100644
index 00000000..e0890b30
--- /dev/null
+++ b/hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+
+const ListaUsuarios = () => {
+  const [usuarios, setUsuarios] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchUsuarios = async () => {
+      setLoading(true);
+      const response = await fetch('/api/usuarios');
+      const data = await response.json();
+      setUsuarios(data);
+      setLoading(false);
+    };
+
+    fetchUsuarios();
+  }, []);
+
+  return (
+    <div>
+      {loading ? (
+        <p>Cargando...</p>
+      ) : (
+        <ul>
+          {usuarios.map((usuario) => (
+            <li key={usuario.id}>{usuario.nombre}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default ListaUsuarios;
diff --git a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
index f63613ed..1c83f13f 100644
--- a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
@@ -24,8 +24,8 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
   } else if (
     usuariosExistentes.some(
       (usuario) =>
-        usuario.correoElectronico === datos.correoElectronico &&
-        usuario.idUsuario !== datos.idUsuario
+        usuario.correoElectronico === datos.correoElectronico
+        && usuario.idUsuario !== datos.idUsuario
     )
   ) {
     errores.correoElectronico = 'Este correo ya está registrado';
@@ -34,8 +34,8 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
   if (datos.contrasenia && datos.contrasenia.length < 8) {
     errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
   } else if (datos.contrasenia && !tieneCaracterEspecial.test(datos.contrasenia)) {
-    errores.contrasenia =
-      'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+    errores.contrasenia
+      = 'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
   } else if (datos.contrasenia && !tieneMayuscula.test(datos.contrasenia)) {
     errores.contrasenia = 'Debe contener al menos una letra mayúscula';
   }
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index cedb411c..d577b6f3 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -12,12 +12,9 @@ const FormularioActualizarUsuario = ({
   erroresValidacion,
   manejarCambio,
   manejarFechaNacimiento,
-  obtenerHelperText,
   roles = [],
   clientes = [],
   cargandoRoles = false,
-  cargando = false,
-  esSuperAdmin = false,
   CAMPO_OBLIGATORIO = 'Este campo es obligatorio',
 }) => {
   const estiloCuadricula = {
@@ -44,7 +41,7 @@ const FormularioActualizarUsuario = ({
       });
     }
     rolAnterior.current = datosUsuario.rol;
-  }, [datosUsuario.rol, clientes]);
+  }, [datosUsuario.rol, clientes, manejarCambio]);
 
   return (
     <Grid container columns={12}>
@@ -205,7 +202,7 @@ const FormularioActualizarUsuario = ({
       </Grid>
       <Grid size={6} sx={estiloCuadricula}>
         <CampoTexto
-          label='Cambiar Contraseña'
+          label='Cambiar contraseña'
           name='contrasenia'
           type='password'
           value={datosUsuario.contrasenia}
diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
index 425b7955..f1992c0f 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -17,7 +17,6 @@ const ModalActualizarUsuario = ({
   const {
     datosUsuario,
     erroresValidacion,
-    alerta,
     setAlerta,
     manejarCambio,
     manejarFechaNacimiento,
diff --git a/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx b/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
index 2892e6fa..ca4debf6 100644
--- a/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalUsuarios.jsx
@@ -10,13 +10,11 @@ const ModalUsuarios = ({ open, onClose, onAccion, usuarioEdicion }) => {
     erroresValidacion,
     alerta,
     setAlerta,
-    cargando,
     esEdicion,
     manejarCambio,
     manejarFechaNacimiento,
     obtenerHelperText,
     handleGuardar,
-    limpiarFormulario,
     CAMPO_OBLIGATORIO,
     roles,
     clientes,
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 8c88d74a..0a602c5c 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -31,29 +31,36 @@ const ListaCategorias = () => {
   const [cargandoDetalle, setCargandoDetalle] = useState(false);
   const [modalEditarAbierto, setModalEditarAbierto] = useState(false);
   const [categoriaEditable, setCategoriaEditable] = useState(null);
-  
+
   const actualizar = useActualizarCategoria();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
 
-  const columns = useMemo(() => [
-    { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
-    { field: 'descripcion', headerName: 'Descripción', flex: 2 },
-    {
-      field: 'cantidadProductos',
-      headerName: 'Número de productos asociados',
-      type: 'number',
-      flex: 1,
-    },
-  ], []);
-
-  const rows = useMemo(() => categorias.map((cat) => ({
-    id: cat.idCategoria,
-    nombreCategoria: cat.nombreCategoria,
-    descripcion: cat.descripcion,
-    cantidadProductos: cat.cantidadProductos,
-    idCliente: cat.idCliente,
-  })), [categorias]);
+  const columns = useMemo(
+    () => [
+      { field: 'nombreCategoria', headerName: 'Nombre', flex: 1 },
+      { field: 'descripcion', headerName: 'Descripción', flex: 2 },
+      {
+        field: 'cantidadProductos',
+        headerName: 'Número de productos asociados',
+        type: 'number',
+        flex: 1,
+      },
+    ],
+    []
+  );
+
+  const rows = useMemo(
+    () =>
+      categorias.map((cat) => ({
+        id: cat.idCategoria,
+        nombreCategoria: cat.nombreCategoria,
+        descripcion: cat.descripcion,
+        cantidadProductos: cat.cantidadProductos,
+        idCliente: cat.idCliente,
+      })),
+    [categorias]
+  );
 
   useEffect(() => {
     const cargarProductos = async () => {
@@ -75,7 +82,7 @@ const ListaCategorias = () => {
 
   const handleAbrirModalCrear = useCallback(() => setModalCrearAbierto(true), []);
   const handleCerrarModalCrear = useCallback(() => setModalCrearAbierto(false), []);
-  
+
   const handleCategoriaCreadaExitosamente = useCallback(() => {
     handleCerrarModalCrear();
     // Recarga la lista de categorías
@@ -167,7 +174,7 @@ const ListaCategorias = () => {
         setModalEditarAbierto(false);
         setCategoriaEditable(null);
         actualizar.limpiarEstado();
-        setAlerta(null); 
+        setAlerta(null);
         recargar();
       }, 2000);
     } else if (actualizar.error) {
@@ -209,36 +216,39 @@ const ListaCategorias = () => {
     setModalEditarAbierto(true);
   }, [productos, categoriaDetalle]);
 
-  const botones = useMemo(() => [
-    {
-      label: 'Añadir',
-      variant: 'contained',
-      color: 'error',
-      size: 'large',
-      backgroundColor: colores.altertex[1],
-      onClick: handleAbrirModalCrear,
-    },
-    {
-      label: 'Eliminar',
-      onClick: () => {
-        if (seleccionados.size === 0 || seleccionados.ids?.size === 0) {
-          setAlerta({
-            tipo: 'error',
-            mensaje: 'Selecciona al menos una categoría para eliminar.',
-            icono: true,
-            cerrable: true,
-            centradoInferior: true,
-          });
-        } else {
-          setIdsCategoria(Array.from(seleccionados.ids));
-          setOpenModalEliminar(true);
-        }
+  const botones = useMemo(
+    () => [
+      {
+        label: 'Añadir',
+        variant: 'contained',
+        color: 'error',
+        size: 'large',
+        backgroundColor: colores.altertex[1],
+        onClick: handleAbrirModalCrear,
       },
-      color: 'error',
-      size: 'large',
-      backgroundColor: colores.altertex[1],
-    },
-  ], [colores.altertex, handleAbrirModalCrear, seleccionados]);
+      {
+        label: 'Eliminar',
+        onClick: () => {
+          if (seleccionados.size === 0 || seleccionados.ids?.size === 0) {
+            setAlerta({
+              tipo: 'error',
+              mensaje: 'Selecciona al menos una categoría para eliminar.',
+              icono: true,
+              cerrable: true,
+              centradoInferior: true,
+            });
+          } else {
+            setIdsCategoria(Array.from(seleccionados.ids));
+            setOpenModalEliminar(true);
+          }
+        },
+        color: 'error',
+        size: 'large',
+        backgroundColor: colores.altertex[1],
+      },
+    ],
+    [colores.altertex, handleAbrirModalCrear, seleccionados]
+  );
 
   const botonesModalDetalle = useMemo(() => {
     if (errorDetalle) {
@@ -269,7 +279,7 @@ const ListaCategorias = () => {
         onClick: () => setModalDetalleAbierto(false),
       },
     ];
-  }, [errorDetalle, colores.primario, colores.altertex, abrirModalEditar]);
+  }, [errorDetalle, colores.altertex, abrirModalEditar]);
 
   return (
     <>
@@ -308,7 +318,7 @@ const ListaCategorias = () => {
         setAlerta={setAlerta}
         refrescarPagina={recargar}
       />
-      
+
       {modalDetalleAbierto && !cargandoDetalle && (
         <ModalFlotante
           open={modalDetalleAbierto}
@@ -361,4 +371,4 @@ const ListaCategorias = () => {
   );
 }; // <- Esta llave de cierre estaba faltando
 
-export default ListaCategorias;
\ No newline at end of file
+export default ListaCategorias;
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index ce08423b..455d77a3 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -47,7 +47,7 @@ const ListaUsuarios = () => {
   const navigate = useNavigate();
   const [alerta, setAlerta] = useState(null);
   const { usuarios, cargando, error, recargar } = useConsultarListaUsuarios();
-  const { clientes, cargando: cargandoClientes } = useConsultarClientes();
+  const { clientes } = useConsultarClientes();
   const { roles } = useConsultarRoles();
   const { usuario: usuarioAutenticado } = useAuth();
   const [modalCrearUsuarioAbierto, setModalCrearUsuarioAbierto] = useState(false);
@@ -467,7 +467,7 @@ const ListaUsuarios = () => {
             }}
             usuarioEdicion={{
               ...usuario,
-              cliente: usuario.clientes ? usuario.clientes.map((c) => c.idCliente) : [],
+              cliente: usuario.clientes ? usuario.clientes.map((cliente) => cliente.idCliente) : [],
             }}
             roles={roles}
             clientes={clientes}
diff --git a/src/hooks/Productos/ProductoFormProvider.jsx b/src/hooks/Productos/ProductoFormProvider.jsx
index 6526b713..6797f8f1 100644
--- a/src/hooks/Productos/ProductoFormProvider.jsx
+++ b/src/hooks/Productos/ProductoFormProvider.jsx
@@ -121,8 +121,8 @@ export const ProductoFormProvider = ({ children, alCerrarFormularioProducto }) =
           [campo]: valor,
         },
       };
-    }, []);
-  });
+    });
+  }, []);
 
   const manejarEliminarVariante = useCallback((idVariante) => {
     setVariantes((prev) => {

From ba94ba17826e7515de2e3ef5ea0bac78cf0c0c63 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 19:21:52 -0600
Subject: [PATCH 143/160] Fix de errores de Lint

---
 .../Organismos/Cuotas/ModalEditarCuotas.jsx   | 80 +++++++++----------
 src/hooks/Cuotas/useActualizarCuota.js        |  1 -
 src/hooks/Cuotas/useObtenerOpcionesCuotas.js  |  3 +-
 3 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
index 4e257893..b90e5630 100644
--- a/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
+++ b/src/Vistas/Componentes/Organismos/Cuotas/ModalEditarCuotas.jsx
@@ -42,12 +42,12 @@ const ModalEditarCuotas = ({
 
   useEffect(() => {
     if (cuotaOriginal && open) {
-      const productosFormateados = (cuotaOriginal.productos || []).map(p => ({
-        idProducto: p.idProducto ? String(p.idProducto) : '',
-        nombreProducto: p.nombreProducto || p.nombreComun || p.nombre || '',
-        limite: p.limite || p.cuota_valor || 0,
-        limiteActual: p.limiteActual || p.limite_actual || 0
-      }));
+      const productosFormateados = (cuotaOriginal.productos || []).map(productoOriginal => ({
+    idProducto: productoOriginal.idProducto ? String(productoOriginal.idProducto) : '',
+    nombreProducto: productoOriginal.nombreProducto || productoOriginal.nombreComun || productoOriginal.nombre || '',
+    limite: productoOriginal.limite || productoOriginal.cuota_valor || 0,
+    limiteActual: productoOriginal.limiteActual || productoOriginal.limite_actual || 0
+  }));
 
       setDatos({
         idCuotaSet: cuotaOriginal.idCuotaSet || cuotaOriginal.idSetCuota,
@@ -86,23 +86,23 @@ const ModalEditarCuotas = ({
   const eliminarProducto = (index) => {
     setDatos(prev => ({
       ...prev,
-      productos: prev.productos.filter((_, i) => i !== index)
+      productos: prev.productos.filter((productoIgnorado, idx) => idx !== index)
     }));
   };
 
   const cambiarProducto = (index, campo, valor) => {
     setDatos(prev => ({
       ...prev,
-      productos: prev.productos.map((producto, i) => {
-        if (i === index) {
+      productos: prev.productos.map((producto, idxProducto) => {
+        if (idxProducto === index) {
           const nuevoProducto = { ...producto, [campo]: valor };
 
           if (campo === 'idProducto') {
             const opcionSeleccionada = opciones?.find(op => op.id == valor);
             nuevoProducto.nombreProducto = opcionSeleccionada?.nombreProducto || '';
 
-            const yaExiste = prev.productos.some((p, idx) =>
-              idx !== index && p.idProducto === valor && valor !== '');
+            const yaExiste = prev.productos.some((otroProducto, idx) =>
+              idx !== index && otroProducto.idProducto === valor && valor !== '');
 
             if (yaExiste && valor !== '') {
               const nombreProducto = opcionSeleccionada?.nombreProducto || 'este producto';
@@ -131,7 +131,7 @@ const ModalEditarCuotas = ({
       return;
     }
 
-    const productosValidos = datos.productos.filter(p => p.idProducto && p.idProducto !== '');
+    const productosValidos = datos.productos.filter(producto => producto.idProducto && producto.idProducto !== '');
 
     try {
       await actualizarCuota({
@@ -141,24 +141,24 @@ const ModalEditarCuotas = ({
           descripcion: datos.descripcion.trim(),
           periodoRenovacion: datos.periodoRenovacion,
           renovacionHabilitada: datos.renovacionHabilitada,
-          productos: productosValidos.map(p => ({
-            idProducto: Number(p.idProducto),
-            limite: Number(p.limite) || 0,
-            limiteActual: Number(p.limiteActual) || 0
+          productos: productosValidos.map(producto => ({
+            idProducto: Number(producto.idProducto),
+            limite: Number(producto.limite) || 0,
+            limiteActual: Number(producto.limiteActual) || 0
           }))
         }
       });
 
       onActualizado();
       onClose();
-    } catch (err) {
+    } catch (error) {
       let mensajeAmigable = 'Ocurrió un error al actualizar la cuota';
 
-      if (err.message.includes('Duplicate')) {
+      if (error.message.includes('Duplicate')) {
         mensajeAmigable = 'No se puede guardar: hay productos duplicados';
-      } else if (err.message.includes('foreign key')) {
+      } else if (error.message.includes('foreign key')) {
         mensajeAmigable = 'Error: producto no válido seleccionado';
-      } else if (err.message.includes('Network')) {
+      } else if (error.message.includes('Network')) {
         mensajeAmigable = 'Sin conexión a internet';
       }
 
@@ -169,7 +169,7 @@ const ModalEditarCuotas = ({
   if (cargandoDetalle) {
     return (
       <ModalFlotante open={open} onClose={onClose} titulo="Cargando...">
-        <Box sx={{ p: 3, textAlign: 'center' }}>
+        <Box sx={{ producto: 3, textAlign: 'center' }}>
           <Typography>Cargando información del set de cuotas...</Typography>
         </Box>
       </ModalFlotante>
@@ -179,7 +179,7 @@ const ModalEditarCuotas = ({
   if (errorDetalle) {
     return (
       <ModalFlotante open={open} onClose={onClose} titulo="Error" cancelLabel="Cerrar">
-        <Box sx={{ p: 2 }}>
+        <Box sx={{ producto: 2 }}>
           <Alert severity="error">Error al cargar la información: {errorDetalle}</Alert>
         </Box>
       </ModalFlotante>
@@ -197,13 +197,13 @@ const ModalEditarCuotas = ({
       disabledConfirm={cargando}
       customWidth={800}
     >
-      <Box sx={{ maxHeight: '70vh', overflow: 'auto', p: 2 }}>
+      <Box sx={{ maxHeight: '70vh', overflow: 'auto', producto: 2 }}>
         <Typography variant="h6" sx={{ mb: 2 }}>Información Básica</Typography>
 
         <CampoTexto
           label="Nombre *"
           value={datos.nombre}
-          onChange={(e) => setDatos(prev => ({ ...prev, nombre: e.target.value }))}
+          onChange={(evento) => setDatos(prev => ({ ...prev, nombre: evento.target.value }))}
           fullWidth
           sx={{ mb: 2 }}
           inputProps={{ maxLength: 50 }}
@@ -213,7 +213,7 @@ const ModalEditarCuotas = ({
         <CampoTexto
           label="Descripción"
           value={datos.descripcion}
-          onChange={(e) => setDatos(prev => ({ ...prev, descripcion: e.target.value }))}
+          onChange={(evento) => setDatos(prev => ({ ...prev, descripcion: evento.target.value }))}
           fullWidth
           multiline
           rows={3}
@@ -226,9 +226,9 @@ const ModalEditarCuotas = ({
           <NumeroInput
             label="Período de Renovación (meses) *"
             value={datos.periodoRenovacion}
-            onChange={(e) => setDatos(prev => ({
+            onChange={(evento) => setDatos(prev => ({
               ...prev,
-              periodoRenovacion: parseInt(e.target.value) || 6
+              periodoRenovacion: parseInt(evento.target.value) || 6
             }))}
             min={1}
             max={12}
@@ -238,9 +238,9 @@ const ModalEditarCuotas = ({
           <Switch
             label="Renovación Habilitada"
             checked={datos.renovacionHabilitada}
-            onChange={(e) => setDatos(prev => ({
+            onChange={(evento) => setDatos(prev => ({
               ...prev,
-              renovacionHabilitada: e.target.checked
+              renovacionHabilitada: evento.target.checked
             }))}
           />
         </Box>
@@ -267,7 +267,7 @@ const ModalEditarCuotas = ({
               sx={{
                 border: '1px solid #e0e0e0',
                 borderRadius: 1,
-                p: 2,
+                producto: 2,
                 mb: 2,
                 backgroundColor: '#fafafa'
               }}
@@ -291,18 +291,18 @@ const ModalEditarCuotas = ({
                   <InputLabel>Producto *</InputLabel>
                   <Select
                     value={producto.idProducto || ''}
-                    onChange={(e) => cambiarProducto(index, 'idProducto', e.target.value)}
+                    onChange={(evento) => cambiarProducto(index, 'idProducto', evento.target.value)}
                     label="Producto *"
                     disabled={cargandoOpciones}
                   >
                     <MenuItem value="">Seleccione un producto</MenuItem>
                     {opciones?.length > 0 ? (
                       opciones
-                        .filter(op => !datos.productos.some((p, idx) =>
-                          idx !== index && p.idProducto == op.id))
-                        .map((opcion) => (
-                          <MenuItem key={opcion.id} value={opcion.id}>
-                            {opcion.nombreProducto} ({opcion.tipo})
+                        .filter(opcion => !datos.productos.some((productoExistente, idx) =>
+                          idx !== index && productoExistente.idProducto == opcion.id))
+                        .map((opcionDisponible) => (
+                          <MenuItem key={opcionDisponible.id} value={opcionDisponible.id}>
+                            {opcionDisponible.nombreProducto} ({opcionDisponible.tipo})
                           </MenuItem>
                         ))
                     ) : (
@@ -315,8 +315,8 @@ const ModalEditarCuotas = ({
                   label="Límite *"
                   type="number"
                   value={producto.limite}
-                  onChange={(e) => {
-                    const valor = e.target.value.replace(/\D/g, ''); 
+                  onChange={(evento) => {
+                    const valor = evento.target.value.replace(/\D/g, ''); 
                     if (valor.length <= 9) {
                       cambiarProducto(index, 'limite', parseInt(valor || '0', 10));
                     }
@@ -329,8 +329,8 @@ const ModalEditarCuotas = ({
                   label="Límite Actual *"
                   type="number"
                   value={producto.limiteActual}
-                  onChange={(e) => {
-                    const valor = e.target.value.replace(/\D/g, '');
+                  onChange={(evento) => {
+                    const valor = evento.target.value.replace(/\D/g, '');
                     if (valor.length <= 9) {
                       cambiarProducto(index, 'limiteActual', parseInt(valor || '0', 10));
                     }
diff --git a/src/hooks/Cuotas/useActualizarCuota.js b/src/hooks/Cuotas/useActualizarCuota.js
index c2839b2e..146602a6 100644
--- a/src/hooks/Cuotas/useActualizarCuota.js
+++ b/src/hooks/Cuotas/useActualizarCuota.js
@@ -1,4 +1,3 @@
-// useActualizarCuota.js - Versión Simple
 import { useState } from 'react';
 import axios from 'axios';
 
diff --git a/src/hooks/Cuotas/useObtenerOpcionesCuotas.js b/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
index aa29a230..862580e8 100644
--- a/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
+++ b/src/hooks/Cuotas/useObtenerOpcionesCuotas.js
@@ -1,4 +1,3 @@
-// src/Hooks/Cuotas/useObtenerOpcionesCuotas.js
 import { useState, useEffect } from 'react';
 import { useAuth } from '@Hooks/AuthProvider';
 import obtenerProductos from '@Servicios/obtenerProductos';
@@ -25,7 +24,7 @@ export const useObtenerOpcionesCuotas = () => {
       try {
         const productos = await obtenerProductos(idCliente);
         setOpciones(productos);
-      } catch (err) {
+      } catch  {
         setError('No se pudieron cargar las opciones de productos');
         setOpciones([]);
       } finally {

From 5f3ff700b37d98dfe2410f45574dc767f777e2d6 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 19:23:14 -0600
Subject: [PATCH 144/160] fix: improve email validation and enhance date of
 birth checks in user update model

---
 .../Modelos/Usuarios/ActualizarUsuario.js     | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
index 1c83f13f..c672338c 100644
--- a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
@@ -24,8 +24,8 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
   } else if (
     usuariosExistentes.some(
       (usuario) =>
-        usuario.correoElectronico === datos.correoElectronico
-        && usuario.idUsuario !== datos.idUsuario
+        usuario.correoElectronico === datos.correoElectronico &&
+        usuario.idUsuario !== datos.idUsuario
     )
   ) {
     errores.correoElectronico = 'Este correo ya está registrado';
@@ -34,8 +34,8 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
   if (datos.contrasenia && datos.contrasenia.length < 8) {
     errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
   } else if (datos.contrasenia && !tieneCaracterEspecial.test(datos.contrasenia)) {
-    errores.contrasenia
-      = 'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
+    errores.contrasenia =
+      'Debe contener al menos uno de estos caracteres: ! @ # $ % ^ & * ( ) , . ? " : { } | < >';
   } else if (datos.contrasenia && !tieneMayuscula.test(datos.contrasenia)) {
     errores.contrasenia = 'Debe contener al menos una letra mayúscula';
   }
@@ -56,13 +56,28 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
     errores.direccion = 'La dirección es obligatoria';
   }
 
-  if (!datos.fechaNacimiento) {
+  /*if (!datos.fechaNacimiento) {
     errores.fechaNacimiento = 'La fecha de nacimiento es obligatoria';
   } else {
     const hoy = new Date();
     const fecha = new Date(datos.fechaNacimiento);
+
+    if (fecha > hoy) {
+      errores.fechaNacimiento = 'La fecha no puede ser futura';
+    }
+  }*/
+
+  if (!datos.fechaNacimiento) {
+    errores.fechaNacimiento = true;
+  } else {
+    const hoy = new Date();
+    const limiteInferiorFecha = new Date('1900-01-01');
+    const fecha = new Date(datos.fechaNacimiento);
+
     if (fecha > hoy) {
       errores.fechaNacimiento = 'La fecha no puede ser futura';
+    } else if (fecha < limiteInferiorFecha) {
+      errores.fechaNacimiento = 'Ingresa una fecha válida';
     }
   }
 

From 6c62a8f14e6bf093bc64ada11732ef46e1921dd9 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 19:28:58 -0600
Subject: [PATCH 145/160] fix: enhance gender handling in user data
 initialization for better inclusivity

---
 src/hooks/Usuarios/useAccionesUsuario.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
index 474b4d43..ccb61581 100644
--- a/src/hooks/Usuarios/useAccionesUsuario.js
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -18,8 +18,10 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
 
       let genero = '';
       if (usuarioInicial.genero) {
-        if (usuarioInicial.genero.toLowerCase() === 'femenino') genero = 'Mujer';
-        else if (usuarioInicial.genero.toLowerCase() === 'masculino') genero = 'Hombre';
+        const generoLower = usuarioInicial.genero.toLowerCase();
+        if (['hombre', 'masculino'].includes(generoLower)) genero = 'Hombre';
+        else if (['mujer', 'femenino'].includes(generoLower)) genero = 'Mujer';
+        else if (['otro', 'no binario', 'nb'].includes(generoLower)) genero = 'Otro';
         else genero = 'Otro';
       }
 

From 2ed3c95c0524affe1648f058a2e4c9e13631ed0d Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 19:39:22 -0600
Subject: [PATCH 146/160] Fix de consol logs

---
 .../Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js b/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
index c11d8138..16fea4ff 100644
--- a/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
+++ b/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
@@ -6,7 +6,6 @@ const API_KEY = import.meta.env.VITE_API_KEY;
 export class RepositorioObtenerOpcionesCuotas {
   static async obtenerOpciones(idCliente) {
     try {
-      console.log('🔍 Solicitando opciones para cliente:', idCliente);
       
       const respuesta = await axios.get(
         `${RUTAS_API.CUOTAS.OBTENER_OPCIONES}?idCliente=${idCliente}`,
@@ -19,7 +18,7 @@ export class RepositorioObtenerOpcionesCuotas {
       console.log('🔍 Respuesta del backend - opciones:', respuesta.data);
       return respuesta.data;
     } catch (error) {
-      console.error('❌ Error en repositorio opciones:', error);
+      console.error('Error en repositorio opciones:', error);
       const mensaje = error.response?.data?.mensaje || 'Error al obtener opciones de productos.';
       throw new Error(mensaje);
     }

From 96d88bac83489af93cdf968e881b2325f99da4f7 Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 19:42:05 -0600
Subject: [PATCH 147/160] Fix de console logs

---
 .../Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js b/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
index 16fea4ff..bd196510 100644
--- a/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
+++ b/src/Dominio/Repositorios/Cuotas/repositorioObtenerOpcionesCuotas.js
@@ -15,7 +15,6 @@ export class RepositorioObtenerOpcionesCuotas {
         }
       );
       
-      console.log('🔍 Respuesta del backend - opciones:', respuesta.data);
       return respuesta.data;
     } catch (error) {
       console.error('Error en repositorio opciones:', error);

From 0a267019a0d9fea0c125cecc18aaa4c347ad1edf Mon Sep 17 00:00:00 2001
From: ArturoSanRod <a01275427@tec.mx>
Date: Fri, 6 Jun 2025 19:44:58 -0600
Subject: [PATCH 148/160] Arreglo de comentarios

---
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index eeb24dea..9707ad73 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -124,7 +124,6 @@ const ListaCuotas = () => {
     }
   };
 
-  // 👈 FUNCIONES CORREGIDAS
   const handleAbrirEditar = () => {
     setModalDetalleAbierto(false);
     setModalEditarAbierto(true);
@@ -132,13 +131,12 @@ const ListaCuotas = () => {
 
   const handleCerrarEditar = () => {
     setModalEditarAbierto(false);
-    // NO limpies el idSetCuotaSeleccionado aquí para mantener los datos
   };
 
   const handleCuotaActualizada = async () => {
     await recargar();
     setModalEditarAbierto(false);
-    setIdSetCuotaSeleccionado(null); // Ahora sí limpia aquí
+    setIdSetCuotaSeleccionado(null); 
     setAlerta({
       tipo: 'success',
       mensaje: 'Set de cuotas actualizado correctamente.',
@@ -268,7 +266,7 @@ const ListaCuotas = () => {
       {/* MODAL DE EDITAR */}
       <ModalEditarCuotas
         open={modalEditarAbierto}
-        cuotaOriginal={cuota} // 👈 Pasa el objeto completo 'cuota'
+        cuotaOriginal={cuota} 
         onClose={handleCerrarEditar}
         onActualizado={handleCuotaActualizada}
         cargandoDetalle={cargandoDetalle}

From c6a6245b86daa8044625cfc53c4278877b39f475 Mon Sep 17 00:00:00 2001
From: max <A01369687@tec.mx>
Date: Fri, 6 Jun 2025 19:49:12 -0600
Subject: [PATCH 149/160] fix: improve validation and sanitization in user
 update form fields

---
 .../Modelos/Usuarios/ActualizarUsuario.js        | 10 ++++++++--
 .../Formularios/FormularioActualizarUsuario.jsx  | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
index c672338c..76975f07 100644
--- a/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
+++ b/src/Dominio/Modelos/Usuarios/ActualizarUsuario.js
@@ -2,7 +2,7 @@
 
 export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) => {
   const errores = {};
-  const emailValido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const emailValido = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   const telefonoValido = /^\d{10}$/;
   const tieneCaracterEspecial = /[!@#$%^&*(),.?":{}|<>]/;
   const tieneMayuscula = /[A-Z]/;
@@ -31,7 +31,9 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
     errores.correoElectronico = 'Este correo ya está registrado';
   }
 
-  if (datos.contrasenia && datos.contrasenia.length < 8) {
+  if (datos.contrasenia && /\s/.test(datos.contrasenia)) {
+    errores.contrasenia = 'La contraseña no debe contener espacios en blanco';
+  } else if (datos.contrasenia && datos.contrasenia.length < 8) {
     errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
   } else if (datos.contrasenia && !tieneCaracterEspecial.test(datos.contrasenia)) {
     errores.contrasenia =
@@ -54,6 +56,10 @@ export const validarDatosActualizarUsuario = (datos, usuariosExistentes = []) =>
 
   if (!datos.direccion || datos.direccion.trim().length === 0) {
     errores.direccion = 'La dirección es obligatoria';
+  } else if (datos.direccion.trim().length < 3) {
+    errores.direccion = 'La dirección debe tener al menos 3 caracteres';
+  } else if (datos.direccion.length > 100) {
+    errores.direccion = 'La dirección no debe exceder 100 caracteres';
   }
 
   /*if (!datos.fechaNacimiento) {
diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index d577b6f3..6148a6db 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -50,7 +50,10 @@ const FormularioActualizarUsuario = ({
           label='Nombre'
           name='nombreCompleto'
           value={datosUsuario.nombreCompleto}
-          onChange={manejarCambio}
+          onChange={(letra) => {
+            const soloLetras = letra.target.value.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑ\s]/g, '');
+            manejarCambio({ target: { name: 'nombreCompleto', value: soloLetras } });
+          }}
           required
           size='medium'
           error={!!erroresValidacion.nombreCompleto}
@@ -119,7 +122,10 @@ const FormularioActualizarUsuario = ({
           label='Número de Teléfono'
           name='numeroTelefono'
           value={datosUsuario.numeroTelefono}
-          onChange={manejarCambio}
+          onChange={(num) => {
+            const soloNumeros = num.target.value.replace(/\D/g, '');
+            manejarCambio({ target: { name: 'numeroTelefono', value: soloNumeros } });
+          }}
           required
           size='medium'
           error={!!erroresValidacion.numeroTelefono}
@@ -142,7 +148,11 @@ const FormularioActualizarUsuario = ({
           required
           size='medium'
           error={!!erroresValidacion.direccion}
-          helperText={erroresValidacion.direccion && CAMPO_OBLIGATORIO}
+          helperText={
+            erroresValidacion.direccion === true
+              ? CAMPO_OBLIGATORIO
+              : erroresValidacion.direccion || ''
+          }
           inputProps={{
             maxLength: 100,
           }}

From 1386d8b0fac2ff8ed590cb9e917116680f41f506 Mon Sep 17 00:00:00 2001
From: Diego Alfaro Pinto <a01709971@tec.mx>
Date: Fri, 6 Jun 2025 20:10:47 -0600
Subject: [PATCH 150/160] fix: arreglar el export para que no exporte 2

---
 src/hooks/Empleados/useExportarEmpleados.js | 22 +--------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/hooks/Empleados/useExportarEmpleados.js b/src/hooks/Empleados/useExportarEmpleados.js
index 76661e2f..ed01a803 100644
--- a/src/hooks/Empleados/useExportarEmpleados.js
+++ b/src/hooks/Empleados/useExportarEmpleados.js
@@ -27,26 +27,6 @@ const useExportarEmpleados = () => {
 
     try {
       const { mensaje, csv } = await repoExportarEmpleados(idsEmpleado);
-
-      const fecha = new Date()
-        .toLocaleDateString('es-CO', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-        })
-        .split('/')
-        .reverse()
-        .join('-');
-
-      const url = window.URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
-
-      const link = document.createElement('a');
-      link.href = url;
-      link.setAttribute('download', `empleados_${fecha}.csv`);
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-
       setMensaje(mensaje);
       setCsv(csv);
     } catch (err) {
@@ -59,4 +39,4 @@ const useExportarEmpleados = () => {
   return { exportar, cargando, error, csv, mensaje };
 };
 
-export default useExportarEmpleados;
+export default useExportarEmpleados;
\ No newline at end of file

From 59344dda5017e1343bd337478475715880776a3d Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 20:32:02 -0600
Subject: [PATCH 151/160] fix: Agregar Validacion de permisos en las
 funcionalidades faltantes

---
 .../Organismos/Clientes/DetalleClienteModal.jsx        |  1 +
 src/Vistas/Paginas/Categorias/ListaCategorias.jsx      | 10 ++++++++--
 src/Vistas/Paginas/Cuotas/ListaCuotas.jsx              |  2 ++
 src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx   |  1 +
 src/Vistas/Paginas/Eventos/ListaEventos.jsx            |  1 +
 src/Vistas/Paginas/Productos/ListaProductos.jsx        |  2 ++
 .../Paginas/SetsProductos/ListaSetsProductos.jsx       |  3 ++-
 7 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx b/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx
index f4e99658..7f97ae2a 100644
--- a/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx
+++ b/src/Vistas/Componentes/Organismos/Clientes/DetalleClienteModal.jsx
@@ -40,6 +40,7 @@ export const DetalleClienteModal = ({
             variant: 'outlined',
             outlineColor: colores.rojo[2],
             onClick: onToggleEliminar,
+            disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_CLIENTE),
           },
           {
             label: modoEdicion ? 'GUARDAR' : 'EDITAR',
diff --git a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
index 0a602c5c..8d4da7b1 100644
--- a/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ b/src/Vistas/Paginas/Categorias/ListaCategorias.jsx
@@ -12,7 +12,8 @@ import { useConsultarCategorias } from '@Hooks/Categorias/useConsultarCategorias
 import { leerCategoria } from '@Hooks/Categorias/useLeerCategoria';
 import useActualizarCategoria from '@Hooks/Categorias/useActualizarCategoria';
 import obtenerProductosCategoria from '@Servicios/obtenerProductosCategoria';
-
+import { PERMISOS } from '@Utilidades/Constantes/permisos';
+import { useAuth } from '@Hooks/AuthProvider';
 import { Box, useTheme } from '@mui/material';
 import { tokens } from '@SRC/theme';
 import ModalCrearCategoria from '@Organismos/ModalCrearCategoria';
@@ -35,6 +36,8 @@ const ListaCategorias = () => {
   const actualizar = useActualizarCategoria();
   const theme = useTheme();
   const colores = tokens(theme.palette.mode);
+  const { usuario } = useAuth();
+  
 
   const columns = useMemo(
     () => [
@@ -225,9 +228,11 @@ const ListaCategorias = () => {
         size: 'large',
         backgroundColor: colores.altertex[1],
         onClick: handleAbrirModalCrear,
+        disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_CATEGORIA_PRODUCTOS),
       },
       {
         label: 'Eliminar',
+        disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_CATEGORIA_PRODUCTOS),
         onClick: () => {
           if (seleccionados.size === 0 || seleccionados.ids?.size === 0) {
             setAlerta({
@@ -246,8 +251,9 @@ const ListaCategorias = () => {
         size: 'large',
         backgroundColor: colores.altertex[1],
       },
+      
     ],
-    [colores.altertex, handleAbrirModalCrear, seleccionados]
+    [colores.altertex, handleAbrirModalCrear, seleccionados, usuario?.permisos]
   );
 
   const botonesModalDetalle = useMemo(() => {
diff --git a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
index 9707ad73..054bd936 100644
--- a/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
+++ b/src/Vistas/Paginas/Cuotas/ListaCuotas.jsx
@@ -154,9 +154,11 @@ const ListaCuotas = () => {
       size: 'large',
       backgroundColor: colores.altertex[1],
       onClick: handleAbrirModalCrear,
+      disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_SET_CUOTAS),
     },
     {
       label: 'Eliminar',
+      disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_SET_CUOTAS),
       onClick: () => {
         if (seleccionados.length === 0) {
           setAlerta({
diff --git a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
index 1a32fc0f..6f4d3abf 100644
--- a/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
+++ b/src/Vistas/Paginas/Empleados/ListaGrupoEmpleados.jsx
@@ -161,6 +161,7 @@ const ListaGrupoEmpleados = () => {
       color: 'error',
       size: 'large',
       backgroundColor: colores.altertex[1],
+      disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_GRUPO_EMPLEADOS),
       // construccion: true,
     },
     {
diff --git a/src/Vistas/Paginas/Eventos/ListaEventos.jsx b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
index b8c5abfd..8429fe11 100644
--- a/src/Vistas/Paginas/Eventos/ListaEventos.jsx
+++ b/src/Vistas/Paginas/Eventos/ListaEventos.jsx
@@ -121,6 +121,7 @@ const ListaEventos = () => {
       size: 'large',
       backgroundColor: colores.altertex[1],
       onClick: manejarAbrirCrear,
+      disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_EVENTO),
     },
     {
       label: 'Eliminar',
diff --git a/src/Vistas/Paginas/Productos/ListaProductos.jsx b/src/Vistas/Paginas/Productos/ListaProductos.jsx
index 770b14c3..dce165ea 100644
--- a/src/Vistas/Paginas/Productos/ListaProductos.jsx
+++ b/src/Vistas/Paginas/Productos/ListaProductos.jsx
@@ -219,6 +219,7 @@ const ListaProductos = () => {
       onClick: mostrarFormularioProducto,
       size: 'large',
       backgroundColor: colores.altertex[1],
+      disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_PRODUCTO),
     },
     {
       variant: 'outlined',
@@ -227,6 +228,7 @@ const ListaProductos = () => {
       color: 'primary',
       size: 'large',
       outlineColor: colores.altertex[1],
+      disabled: !usuario?.permisos?.includes(PERMISOS.IMPORTAR_PRODUCTOS),
 
     },
     {
diff --git a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
index e53d1a82..9c8330c4 100644
--- a/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
+++ b/src/Vistas/Paginas/SetsProductos/ListaSetsProductos.jsx
@@ -186,6 +186,7 @@ const ListaSetsProductos = () => {
       size: 'large',
       backgroundColor: colores.altertex[1],
       onClick: () => setModalCrearAbierto(true),
+      disabled: !usuario?.permisos?.includes(PERMISOS.CREAR_SET_PRODUCTOS),
     },
     {
       label: 'Eliminar',
@@ -202,7 +203,7 @@ const ListaSetsProductos = () => {
           setAbrirPopUpEliminar(true);
         }
       },
-      disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_GRUPO_EMPLEADOS),
+      disabled: !usuario?.permisos?.includes(PERMISOS.ELIMINAR_SET_PRODUCTOS),
       size: 'large',
       color: 'error',
       backgroundColor: colores.altertex[1],

From 00e66f17a336aa4b5c8c8cf76e95d72cb33821dc Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 20:57:24 -0600
Subject: [PATCH 152/160] fix: corregir despliegue de super Admin

---
 .../Organismos/Formularios/FormularioActualizarUsuario.jsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
index 6148a6db..b6a3c5d7 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
@@ -169,7 +169,7 @@ const FormularioActualizarUsuario = ({
           error={!!erroresValidacion.idRol}
           helperText={erroresValidacion.idRol && CAMPO_OBLIGATORIO}
           options={roles
-            .filter((rol) => rol.idRol !== 1 && rol.idRol !== 3)
+            .filter((rol) =>  rol.idRol !== 3)
             .map((rol) => ({
               value: rol.idRol,
               label: rol.nombre,

From a70a7bab1a02ac4815cb5306e9b798396c28ba65 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Fri, 6 Jun 2025 21:52:19 -0600
Subject: [PATCH 153/160] =?UTF-8?q?Quitar=20comentarios=20en=20ingl=C3=A9s?=
 =?UTF-8?q?=20FormaCrearSetsProducto.jsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Organismos/Formularios/FormaCrearSetsProducto.jsx  | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
index d5f4a706..8658f218 100644
--- a/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
+++ b/src/Vistas/Componentes/Organismos/Formularios/FormaCrearSetsProducto.jsx
@@ -48,11 +48,9 @@ const FormaCrearSetsProducto = ({
     if (!yaExiste) {
       setProductos((prev) => [...prev, productoSeleccionado]);
     } else {
-      // Remove product if it already exists (toggle behavior)
       setProductos((prev) => prev.filter((producto) => producto.id !== productoSeleccionado.id));
     }
 
-    // Clear products error when a product is selected
     if (erroresCampos?.productos) {
       setErroresCampos(prev => ({ ...prev, productos: false }));
     }
@@ -61,15 +59,12 @@ const FormaCrearSetsProducto = ({
   const handleFilaSeleccion = (itemSeleccion) => {
     const ids = Array.isArray(itemSeleccion) ? itemSeleccion : Array.from(itemSeleccion?.ids || []);
 
-    // Get all products that correspond to the selected IDs
     const productosSeleccionados = ids
       .map((id) => rows.find((row) => row.id === id))
       .filter((fila) => fila);
 
-    // Update the productos array to match exactly what's selected
     setProductos(productosSeleccionados);
 
-    // Clear products error when products are selected
     if (erroresCampos?.productos && productosSeleccionados.length > 0) {
       setErroresCampos(prev => ({ ...prev, productos: false }));
     }
@@ -83,7 +78,6 @@ const FormaCrearSetsProducto = ({
       setNombreSetsProducto('');
     }
 
-    // Clear error when user starts typing
     if (erroresCampos?.nombre && value.trim()) {
       setErroresCampos(prev => ({ ...prev, nombre: false }));
     }
@@ -97,7 +91,6 @@ const FormaCrearSetsProducto = ({
       setNombreVisible('');
     }
 
-    // Clear error when user starts typing
     if (erroresCampos?.nombreVisible && value.trim()) {
       setErroresCampos(prev => ({ ...prev, nombreVisible: false }));
     }
@@ -111,7 +104,6 @@ const FormaCrearSetsProducto = ({
       setDescripcionSetsProducto('');
     }
 
-    // Clear error when user starts typing
     if (erroresCampos?.descripcion && value.trim()) {
       setErroresCampos(prev => ({ ...prev, descripcion: false }));
     }
@@ -202,4 +194,4 @@ const FormaCrearSetsProducto = ({
   );
 };
 
-export default FormaCrearSetsProducto;
\ No newline at end of file
+export default FormaCrearSetsProducto;

From 8208ccbe5424e32d292ec0d5999176cdb5f7b252 Mon Sep 17 00:00:00 2001
From: Hiram <147564077+Hiram10tec@users.noreply.github.com>
Date: Fri, 6 Jun 2025 22:08:01 -0600
Subject: [PATCH 154/160] Correcciones de comentarios

---
 src/Vistas/Componentes/Organismos/ListaTransferencia.jsx | 2 --
 src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx    | 2 --
 src/Vistas/Paginas/Pedidos/ListaPedidos.jsx              | 4 ++--
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
index e5eeac36..0dcef6ba 100644
--- a/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
+++ b/src/Vistas/Componentes/Organismos/ListaTransferencia.jsx
@@ -45,7 +45,6 @@ const ListaTransferenciaPersonalizada = ({
   const [izquierda, setIzquierda] = useState(elementosDisponibles);
   const [derecha, setDerecha] = useState(elementosSeleccionados);
 
-  // Use ref to track if we're in the middle of updating from props
   const updatingFromPropsRef = useRef(false);
 
   // Actualizar estado interno cuando cambien las props
@@ -61,7 +60,6 @@ const ListaTransferenciaPersonalizada = ({
     updatingFromPropsRef.current = false;
   }, [elementosSeleccionados]);
 
-  // Only notify parent when changes come from user interactions, not from prop updates
   useEffect(() => {
     if (alCambiarSeleccion && !updatingFromPropsRef.current) {
       alCambiarSeleccion({
diff --git a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
index 3cf2379f..4173f8d8 100644
--- a/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalDetalleRol.jsx
@@ -107,9 +107,7 @@ const ModalDetalleRol = ({ abierto, onCerrar, idRol }) => {
 
   const manejarGuardar = async () => {
     const datosParaEnviar = {
-      // Only send the name value if it was actually changed
       nombre: nombreRol !== nombreOriginal ? nombreRol : null,
-      // Only send the description value if it was actually changed
       descripcion: descripcionRol !== descripcionOriginal ? descripcionRol : null,
       permisos: permisosSeleccionados.map(permiso => permiso.id)
     };
diff --git a/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx b/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
index f29654f6..6fcf5d32 100644
--- a/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
+++ b/src/Vistas/Paginas/Pedidos/ListaPedidos.jsx
@@ -27,7 +27,7 @@ const ListaPedidos = () => {
 
   const { usuario } = useAuth();
 
-  // 🆕 Estados para actualizar pedido
+  // Estados para actualizar pedido
   const [modalAbierto, setModalAbierto] = useState(false);
   const [pedidoSeleccionado, setPedidoSeleccionado] = useState(null);
 
@@ -62,7 +62,7 @@ const ListaPedidos = () => {
 
   const [abrirPopUpEliminar, setAbrirPopUpEliminar] = useState(false);
 
-  // 🆕 Funciones para editar pedido
+  // Funciones para editar pedido
   const abrirModalEditar = (pedido) => {
     console.log('Fila seleccionada:', pedido);
     setPedidoSeleccionado(pedido);

From 576fd9e5d61f5906432427b436d6c65fae44262f Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 22:22:56 -0600
Subject: [PATCH 155/160] fix: Despliegue de rol de usuario y eliminacion de
 carpeta

---
 hooks/Productos/ProductoFormProvider.jsx      | 15 --------
 .../FormularioActualizarUsuario.jsx           |  9 -----
 .../Organismos/ModalActualizarUsuario.jsx     | 10 ------
 .../Componentes/Organismos/ModalUsuarios.jsx  |  7 ----
 .../Paginas/Categorias/ListaCategorias.jsx    |  7 ----
 .../Vistas/Paginas/Usuarios/ListaUsuarios.jsx | 34 -------------------
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx |  7 +---
 7 files changed, 1 insertion(+), 88 deletions(-)
 delete mode 100644 hooks/Productos/ProductoFormProvider.jsx
 delete mode 100644 hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
 delete mode 100644 hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
 delete mode 100644 hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx
 delete mode 100644 hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx
 delete mode 100644 hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx

diff --git a/hooks/Productos/ProductoFormProvider.jsx b/hooks/Productos/ProductoFormProvider.jsx
deleted file mode 100644
index 6b448851..00000000
--- a/hooks/Productos/ProductoFormProvider.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { useCallback } from 'react';
-
-const ProductoFormProvider = () => {
-  const callbackFunction = useCallback(() => {
-    alert('Callback executed!');
-  }, []);
-
-  return (
-    <div>
-      <button onClick={callbackFunction}>Run Callback</button>
-    </div>
-  );
-};
-
-export default ProductoFormProvider;
diff --git a/hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx b/hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
deleted file mode 100644
index 5b71ab9d..00000000
--- a/hooks/Vistas/Componentes/Organismos/Formularios/FormularioActualizarUsuario.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { useEffect } from 'react';
-
-const FormularioActualizarUsuario = () => {
-  useEffect(() => {}, []);
-
-  return <div>{/* Your component JSX here */}</div>;
-};
-
-export default FormularioActualizarUsuario;
diff --git a/hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
deleted file mode 100644
index ecde420c..00000000
--- a/hooks/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const ModalActualizarUsuario = () => {
-    // Your component logic here
-    return (
-        <div>
-            {/* Your component JSX here */}
-        </div>
-    );
-};
-
-export default ModalActualizarUsuario;
\ No newline at end of file
diff --git a/hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx b/hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx
deleted file mode 100644
index 86639a75..00000000
--- a/hooks/Vistas/Componentes/Organismos/ModalUsuarios.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const ModalUsuarios = () => {
-  return <div>{/* Contenido del modal aquí */}</div>;
-};
-
-export default ModalUsuarios;
diff --git a/hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx b/hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx
deleted file mode 100644
index 87847af4..00000000
--- a/hooks/Vistas/Paginas/Categorias/ListaCategorias.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const ListaCategorias = () => {
-  return <div>{/* Tu contenido aquí */}</div>;
-};
-
-export default ListaCategorias;
diff --git a/hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
deleted file mode 100644
index e0890b30..00000000
--- a/hooks/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-const ListaUsuarios = () => {
-  const [usuarios, setUsuarios] = useState([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    const fetchUsuarios = async () => {
-      setLoading(true);
-      const response = await fetch('/api/usuarios');
-      const data = await response.json();
-      setUsuarios(data);
-      setLoading(false);
-    };
-
-    fetchUsuarios();
-  }, []);
-
-  return (
-    <div>
-      {loading ? (
-        <p>Cargando...</p>
-      ) : (
-        <ul>
-          {usuarios.map((usuario) => (
-            <li key={usuario.id}>{usuario.nombre}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default ListaUsuarios;
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 455d77a3..0fb25b74 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -77,11 +77,6 @@ const ListaUsuarios = () => {
     label: rol.nombre,
   }));
 
-  const obtenerIdRolPorNombre = (nombreRol) => {
-    const rolEncontrado = roles.find((rol) => rol.nombre === nombreRol);
-    return rolEncontrado ? rolEncontrado.idRol : '';
-  };
-
   const redirigirAInicio = () => {
     navigate(RUTAS.SISTEMA_ADMINISTRATIVO.BASE, { replace: true });
   };
@@ -424,7 +419,7 @@ const ListaUsuarios = () => {
                           .join(', ')
                       : 'Sin cliente asignado'
                   }
-                  rol={obtenerIdRolPorNombre(usuario.rol)}
+                  rol={(usuario.rol)}
                   datosContacto={{
                     email: usuario.correoElectronico,
                     telefono: usuario.numeroTelefono,

From 5e2104d94276de260fbd172386cb67f281af0eb3 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Fri, 6 Jun 2025 23:05:41 -0600
Subject: [PATCH 156/160] fix despliegue de roles

---
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 0fb25b74..e26f6a66 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -62,6 +62,8 @@ const ListaUsuarios = () => {
 
   const [modal2FAAbierto, setModal2FAAbierto] = useState(false);
   const { qrCode, cargando: cargandoQR, error: errorQR, setQrCode } = useActivar2FA();
+  const rolesPorId = Object.fromEntries(roles.map((fila) => [fila.idRol, fila.nombre]));
+
 
   /** const manejarActivar2FA = async () => {
       await activar2FA({
@@ -196,7 +198,7 @@ const ListaUsuarios = () => {
           id,
           idUsuario: id,
           nombre: usuario.nombre,
-          rol: usuario.rol || 'Sin rol',
+          rol: rolesPorId[usuario.rol] || 'Sin rol',
           cliente: usuario.cliente ? [usuario.cliente] : [],
           estatus: usuario.estatus,
           correo: usuario.correo,

From 1ce689530a52efab09c5bd544935ba51e25cb0c4 Mon Sep 17 00:00:00 2001
From: Krlos7121 <a0771689@tec.mx>
Date: Mon, 9 Jun 2025 19:45:19 -0600
Subject: [PATCH 157/160] =?UTF-8?q?fix:=20bloquear=20=C3=B1=20y=20t=C3=ADi?=
 =?UTF-8?q?des=20en=20contrase=C3=B1a=20empleado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/Empleados/useCrearEmpleado.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/hooks/Empleados/useCrearEmpleado.js b/src/hooks/Empleados/useCrearEmpleado.js
index 7e1d21b2..1129347e 100644
--- a/src/hooks/Empleados/useCrearEmpleado.js
+++ b/src/hooks/Empleados/useCrearEmpleado.js
@@ -11,6 +11,7 @@ const validarDatosCrearEmpleado = (datos) => {
   const tieneCaracterEspecial = /[!@#$%^&*(),.?":{}|<>]/;
   const tieneMayuscula = /[A-Z]/;
   const tieneMinuscula = /[a-z]/;
+  const soloIngles = /^[A-Za-z0-9!@#$%^&*(),.?":{}|<> ]*$/;
   const tieneNumero = /\d/;
 
   if (!datos.nombreCompleto || datos.nombreCompleto.trim() === '') {
@@ -49,6 +50,8 @@ const validarDatosCrearEmpleado = (datos) => {
     errores.contrasenia = 'La contraseña debe tener al menos 8 caracteres';
   } else if (!tieneCaracterEspecial.test(datos.contrasenia)) {
     errores.contrasenia = 'Debe contener al menos un carácter especial';
+  } else if (!soloIngles.test(datos.contrasenia)) {
+    errores.contrasenia = 'No se permiten ñ, Ñ ni tildes.';
   } else if (!tieneMayuscula.test(datos.contrasenia)) {
     errores.contrasenia = 'Debe contener al menos una letra mayúscula';
   } else if (!tieneMinuscula.test(datos.contrasenia)) {
@@ -56,8 +59,8 @@ const validarDatosCrearEmpleado = (datos) => {
   } else if (!tieneNumero.test(datos.contrasenia)) {
     errores.contrasenia = 'Debe contener al menos un número';
   } else if (datos.contrasenia.replace(/\s/g, '').length < 2) {
-    errores.contrasenia
-      = 'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
+    errores.contrasenia =
+      'La contraseña no puede estar compuesta solo de espacios y un carácter especial';
   }
 
   if (!datos.confirmarContrasenia || datos.confirmarContrasenia.trim() === '') {
@@ -75,9 +78,9 @@ const validarDatosCrearEmpleado = (datos) => {
     errores.posicion = true;
   }
   if (
-    !datos.cantidadPuntos
-    || isNaN(Number(datos.cantidadPuntos))
-    || Number(datos.cantidadPuntos) < 0
+    !datos.cantidadPuntos ||
+    isNaN(Number(datos.cantidadPuntos)) ||
+    Number(datos.cantidadPuntos) < 0
   ) {
     errores.cantidadPuntos = 'La cantidad de puntos debe ser un número positivo';
   }

From 011ffdc9da4f5890e37bbe4276fbb248d557790d Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 12 Jun 2025 21:56:54 -0600
Subject: [PATCH 158/160] fix: posicion de alerta al eliminar

---
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index e26f6a66..69c04b46 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -313,17 +313,6 @@ const ListaUsuarios = () => {
         }
         informacionBotones={botones}
       >
-        {alerta && (
-          <Alerta
-            tipo={alerta.tipo}
-            mensaje={alerta.mensaje}
-            icono={alerta.icono}
-            cerrable={alerta.cerrable}
-            duracion={3000}
-            centradoInferior={alerta.centradoInferior}
-            onClose={() => setAlerta(null)}
-          />
-        )}
         {modalCrearUsuarioAbierto && (
           <FormularioCrearUsuario
             open={modalCrearUsuarioAbierto}
@@ -479,6 +468,17 @@ const ListaUsuarios = () => {
           </div>
         )}
       </ContenedorLista>
+      {alerta && (
+          <Alerta
+            tipo={alerta.tipo}
+            mensaje={alerta.mensaje}
+            icono={alerta.icono}
+            cerrable={alerta.cerrable}
+            duracion={3000}
+            centradoInferior
+            onClose={() => setAlerta(null)}
+          />
+        )}
     </>
   );
 };

From e5de6c6973e5c55c0e2a1e2f42fbb8626bf0a29b Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 12 Jun 2025 22:47:42 -0600
Subject: [PATCH 159/160] Mensaje de correo duplicado

---
 .../Organismos/ModalActualizarUsuario.jsx            | 12 ++++++++++++
 src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx        | 11 +----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
index f1992c0f..2f0cfd86 100644
--- a/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
+++ b/src/Vistas/Componentes/Organismos/ModalActualizarUsuario.jsx
@@ -18,6 +18,7 @@ const ModalActualizarUsuario = ({
     datosUsuario,
     erroresValidacion,
     setAlerta,
+    alerta,
     manejarCambio,
     manejarFechaNacimiento,
     obtenerHelperText,
@@ -75,7 +76,18 @@ const ModalActualizarUsuario = ({
             cargando={cargando}
           />
         </Box>
+
       </ModalFlotante>
+      {alerta && (
+                <Alerta
+                  sx={{ marginBottom: 2 }}
+                  tipo={alerta.tipo}
+                  mensaje={alerta.mensaje}
+                  duracion='3000'
+                  onClose={() => setAlerta(null)}
+                  centradoInferior
+                />
+              )}
     </>
   );
 };
diff --git a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
index 69c04b46..2b2d4e79 100644
--- a/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
+++ b/src/Vistas/Paginas/Usuarios/ListaUsuarios.jsx
@@ -439,17 +439,8 @@ const ListaUsuarios = () => {
           <ModalActualizarUsuario
             open={modalActualizarAbierto}
             onClose={() => setModalActualizarAbierto(false)}
-            onAccion={(exito, mensaje) => {
+            onAccion={() => {
               recargar();
-              if (exito) {
-                setAlerta({
-                  tipo: 'success',
-                  mensaje: mensaje || 'Usuario actualizado exitosamente',
-                  icono: true,
-                  cerrable: true,
-                  centradoInferior: true,
-                });
-              }
             }}
             usuarioEdicion={{
               ...usuario,

From 31a5afed300430667fea317800c7c82add674271 Mon Sep 17 00:00:00 2001
From: NicoH00d <a01705857@tec.mx>
Date: Thu, 12 Jun 2025 23:06:10 -0600
Subject: [PATCH 160/160] Manejo de la alerta

---
 src/hooks/Usuarios/useAccionesUsuario.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/hooks/Usuarios/useAccionesUsuario.js b/src/hooks/Usuarios/useAccionesUsuario.js
index ccb61581..ed400e03 100644
--- a/src/hooks/Usuarios/useAccionesUsuario.js
+++ b/src/hooks/Usuarios/useAccionesUsuario.js
@@ -111,10 +111,6 @@ export const useAccionesUsuario = (usuarioInicial = null) => {
 
     if (Object.keys(nuevosErrores).length > 0) {
       setErroresValidacion(nuevosErrores);
-      setAlerta({
-        tipo: 'error',
-        mensaje: 'Corrige los errores en el formulario antes de guardar.',
-      });
       return { exito: false };
     }