From 4f2ef1dd6e60fd336272b45dedd7ee594982ba12 Mon Sep 17 00:00:00 2001 From: frcarlos <307100636@pcpuma.acatlan.unam.mx> Date: Wed, 4 Mar 2026 13:55:55 -0500 Subject: [PATCH 1/3] function UserPage --- app/(private)/Usuarios/page.tsx | 174 ++++++++++++++++++++++++++++++++ package-lock.json | 18 ++++ proxy.ts | 2 + 3 files changed, 194 insertions(+) create mode 100644 app/(private)/Usuarios/page.tsx diff --git a/app/(private)/Usuarios/page.tsx b/app/(private)/Usuarios/page.tsx new file mode 100644 index 0000000..fe0d524 --- /dev/null +++ b/app/(private)/Usuarios/page.tsx @@ -0,0 +1,174 @@ +"use client"; + +import { useState, useEffect } from "react"; +import axios from "axios"; +import Cookies from "js-cookie"; +import { envConfig } from "@/app/lib/config"; + +interface Perfil { + id_perfil: number; + perfil: string; +} + +interface Usuario { + id_usuario: number; + nombre: string; + apellido_paterno: string; + apellido_materno: string; + usuario: string; + activo: number; + descripcion: string; + perfil: Perfil; +} + +export default function UserPage() { + + const [usuarios, setUsuarios] = useState([]); + const [perfiles, setPerfiles] = useState([]); + + const [nombre, setNombre] = useState(""); + const [apellidoPaterno, setApellidoPaterno] = useState(""); + const [apellidoMaterno, setApellidoMaterno] = useState(""); + const [usuario, setUsuario] = useState(""); + const [password, setPassword] = useState(""); + const [descripcion, setDescripcion] = useState(""); + const [idPerfil, setIdPerfil] = useState(""); + const [activo, setActivo] = useState(true); + + const API = `${envConfig.apiUrl}/user`; + const token = Cookies.get("token"); + const headers = { Authorization: `Bearer ${token}` }; + + const obtenerUsuarios = async () => { + try { + const res = await axios.get(API, { headers }); + setUsuarios(res.data); + } catch (error) { + console.error("Error al obtener usuarios", error); + } + }; + + const obtenerPerfiles = async () => { + try { + const res = await axios.get(`${API}/perfil`, { headers }); + setPerfiles(res.data); + } catch (error) { + console.error("Error al obtener perfiles", error); + } + }; + + useEffect(() => { + obtenerUsuarios(); + obtenerPerfiles(); + }, []); + + const crearUsuario = async () => { + + if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) { + alert("Todos los campos obligatorios deben llenarse."); + return; + } + + try { + await axios.post( + `${API}/create`, + { + nombre, + apellido_paterno: apellidoPaterno, + apellido_materno: apellidoMaterno, + usuario, + password, + descripcion, + activo: activo ? 1 : 0, + id_perfil: idPerfil, + }, + { headers } + ); + + limpiarFormulario(); + obtenerUsuarios(); + } catch (error) { + console.error("Error al crear usuario", error); + } + }; + + const limpiarFormulario = () => { + setNombre(""); + setApellidoPaterno(""); + setApellidoMaterno(""); + setUsuario(""); + setPassword(""); + setDescripcion(""); + setIdPerfil(""); + setActivo(true); + }; + + return ( +
+

CREAR USUARIO

+ +
+ + setNombre(e.target.value)} /> + + setApellidoPaterno(e.target.value)} /> + + setApellidoMaterno(e.target.value)} /> + + setUsuario(e.target.value)} /> + + setPassword(e.target.value)} /> + + setDescripcion(e.target.value)} /> + + + + + + +
+ +
+ + + + + + + + + + + + {usuarios.map((u) => ( + + + + + + + + ))} + +
IDNombreUsuarioPerfilActivo
{u.id_usuario}{u.nombre} {u.apellido_paterno}{u.usuario}{u.perfil?.perfil}{u.activo === 1 ? "Sí" : "No"}
+
+ +
+ ); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 64912ad..6372d86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -693,6 +693,7 @@ "version": "2.5.6", "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -732,6 +733,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -752,6 +754,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -772,6 +775,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -792,6 +796,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -812,6 +817,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -832,6 +838,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -852,6 +859,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -872,6 +880,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -892,6 +901,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -912,6 +922,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -932,6 +943,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -952,6 +964,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -972,6 +985,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1841,6 +1855,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, "license": "MIT", "optional": true, "engines": { @@ -1851,6 +1866,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -2200,6 +2216,7 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, "license": "MIT", "optional": true }, @@ -2246,6 +2263,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, "license": "MIT", "optional": true, "engines": { diff --git a/proxy.ts b/proxy.ts index 66a5657..a2be7ff 100644 --- a/proxy.ts +++ b/proxy.ts @@ -42,6 +42,7 @@ export async function proxy(request: NextRequest) { "/Monitor", "/ActivosMantenimiento", "/Periodo", + "/Usuarios", ]; if (role === 5 && !onlyImpresiones.includes(pathname)) { @@ -67,6 +68,7 @@ export const config = { matcher: [ "/", "/Reportes", + "/Usuarios", "/Periodo", "/Monitor", "/QuitarSancion", From 52423dbac24f6b94562d00a40e0fcb29407f67f3 Mon Sep 17 00:00:00 2001 From: frcarlos <307100636@pcpuma.acatlan.unam.mx> Date: Wed, 4 Mar 2026 15:53:33 -0500 Subject: [PATCH 2/3] swetalert usuarios --- app/(private)/Usuarios/page.tsx | 276 ++++++++++++++++---------------- 1 file changed, 141 insertions(+), 135 deletions(-) diff --git a/app/(private)/Usuarios/page.tsx b/app/(private)/Usuarios/page.tsx index fe0d524..29c8e54 100644 --- a/app/(private)/Usuarios/page.tsx +++ b/app/(private)/Usuarios/page.tsx @@ -4,171 +4,177 @@ import { useState, useEffect } from "react"; import axios from "axios"; import Cookies from "js-cookie"; import { envConfig } from "@/app/lib/config"; +import Swal from "sweetalert2"; interface Perfil { - id_perfil: number; - perfil: string; + id_perfil: number; + perfil: string; } interface Usuario { - id_usuario: number; - nombre: string; - apellido_paterno: string; - apellido_materno: string; - usuario: string; - activo: number; - descripcion: string; - perfil: Perfil; + id_usuario: number; + nombre: string; + apellido_paterno: string; + apellido_materno: string; + usuario: string; + activo: number; + descripcion: string; + perfil: Perfil; } export default function UserPage() { - const [usuarios, setUsuarios] = useState([]); - const [perfiles, setPerfiles] = useState([]); + const [usuarios, setUsuarios] = useState([]); + const [perfiles, setPerfiles] = useState([]); - const [nombre, setNombre] = useState(""); - const [apellidoPaterno, setApellidoPaterno] = useState(""); - const [apellidoMaterno, setApellidoMaterno] = useState(""); - const [usuario, setUsuario] = useState(""); - const [password, setPassword] = useState(""); - const [descripcion, setDescripcion] = useState(""); - const [idPerfil, setIdPerfil] = useState(""); - const [activo, setActivo] = useState(true); + const [nombre, setNombre] = useState(""); + const [apellidoPaterno, setApellidoPaterno] = useState(""); + const [apellidoMaterno, setApellidoMaterno] = useState(""); + const [usuario, setUsuario] = useState(""); + const [password, setPassword] = useState(""); + const [descripcion, setDescripcion] = useState(""); + const [idPerfil, setIdPerfil] = useState(""); + const [activo, setActivo] = useState(true); - const API = `${envConfig.apiUrl}/user`; - const token = Cookies.get("token"); - const headers = { Authorization: `Bearer ${token}` }; + const API = `${envConfig.apiUrl}/user`; + const token = Cookies.get("token"); + const headers = { Authorization: `Bearer ${token}` }; - const obtenerUsuarios = async () => { - try { - const res = await axios.get(API, { headers }); - setUsuarios(res.data); - } catch (error) { - console.error("Error al obtener usuarios", error); - } - }; + const obtenerUsuarios = async () => { + try { + const res = await axios.get(API, { headers }); + setUsuarios(res.data); + } catch (error) { + console.error("Error al obtener usuarios", error); + } + }; - const obtenerPerfiles = async () => { - try { - const res = await axios.get(`${API}/perfil`, { headers }); - setPerfiles(res.data); - } catch (error) { - console.error("Error al obtener perfiles", error); - } - }; + const obtenerPerfiles = async () => { + try { + const res = await axios.get(`${API}/perfil`, { headers }); + setPerfiles(res.data); + } catch (error) { + console.error("Error al obtener perfiles", error); + } + }; - useEffect(() => { - obtenerUsuarios(); - obtenerPerfiles(); - }, []); + useEffect(() => { + obtenerUsuarios(); + obtenerPerfiles(); + }, []); - const crearUsuario = async () => { + const crearUsuario = async () => { - if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) { - alert("Todos los campos obligatorios deben llenarse."); - return; - } + if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) { + + Swal.fire({ + title: "Todos los campos obligatorios deben llenarse.!", + icon: "error", + draggable: true + }); + return; + } - try { - await axios.post( - `${API}/create`, - { - nombre, - apellido_paterno: apellidoPaterno, - apellido_materno: apellidoMaterno, - usuario, - password, - descripcion, - activo: activo ? 1 : 0, - id_perfil: idPerfil, - }, - { headers } - ); + try { + await axios.post( + `${API}/create`, + { + nombre, + apellido_paterno: apellidoPaterno, + apellido_materno: apellidoMaterno, + usuario, + password, + descripcion, + activo: activo ? 1 : 0, + id_perfil: idPerfil, + }, + { headers } + ); - limpiarFormulario(); - obtenerUsuarios(); - } catch (error) { - console.error("Error al crear usuario", error); - } - }; + limpiarFormulario(); + obtenerUsuarios(); + } catch (error) { + console.error("Error al crear usuario", error); + } + }; - const limpiarFormulario = () => { - setNombre(""); - setApellidoPaterno(""); - setApellidoMaterno(""); - setUsuario(""); - setPassword(""); - setDescripcion(""); - setIdPerfil(""); - setActivo(true); - }; + const limpiarFormulario = () => { + setNombre(""); + setApellidoPaterno(""); + setApellidoMaterno(""); + setUsuario(""); + setPassword(""); + setDescripcion(""); + setIdPerfil(""); + setActivo(true); + }; - return ( -
-

CREAR USUARIO

+ return ( +
+

CREAR USUARIO

-
+
- setNombre(e.target.value)} /> + setNombre(e.target.value)} /> - setApellidoPaterno(e.target.value)} /> + setApellidoPaterno(e.target.value)} /> - setApellidoMaterno(e.target.value)} /> + setApellidoMaterno(e.target.value)} /> - setUsuario(e.target.value)} /> + setUsuario(e.target.value)} /> - setPassword(e.target.value)} /> + setPassword(e.target.value)} /> - setDescripcion(e.target.value)} /> + setDescripcion(e.target.value)} /> - + - + - -
+ +
-
- - - - - - - - - - - - {usuarios.map((u) => ( - - - - - - - - ))} - -
IDNombreUsuarioPerfilActivo
{u.id_usuario}{u.nombre} {u.apellido_paterno}{u.usuario}{u.perfil?.perfil}{u.activo === 1 ? "Sí" : "No"}
-
+
+ + + + + + + + + + + + {usuarios.map((u) => ( + + + + + + + + ))} + +
IDNombreUsuarioPerfilActivo
{u.id_usuario}{u.nombre} {u.apellido_paterno}{u.usuario}{u.perfil?.perfil}{u.activo === 1 ? "Sí" : "No"}
+
-
- ); +
+ ); } \ No newline at end of file From f9aae13241cd85d5e21c28133a10db682e45cf9a Mon Sep 17 00:00:00 2001 From: frcarlos <307100636@pcpuma.acatlan.unam.mx> Date: Wed, 4 Mar 2026 17:07:44 -0500 Subject: [PATCH 3/3] go sweet alert --- app/(private)/Usuarios/page.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/(private)/Usuarios/page.tsx b/app/(private)/Usuarios/page.tsx index 29c8e54..270e558 100644 --- a/app/(private)/Usuarios/page.tsx +++ b/app/(private)/Usuarios/page.tsx @@ -55,6 +55,11 @@ export default function UserPage() { setPerfiles(res.data); } catch (error) { console.error("Error al obtener perfiles", error); + Swal.fire({ + title: "Error al obtener perfiles!", + icon: "error", + draggable: true + }); } }; @@ -95,6 +100,12 @@ export default function UserPage() { obtenerUsuarios(); } catch (error) { console.error("Error al crear usuario", error); + Swal.fire({ + title: "ERror al crear usuario.!", + icon: "error", + draggable: true + }); + } };