Merge branch 'Carlos' of https://repositorio.acatlan.unam.mx/IO/front-AT into Carlos

app/(private)/Usuarios/page.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+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;
+}
+
+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<Usuario[]>([]);
+    const [perfiles, setPerfiles] = useState<Perfil[]>([]);
+
+    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<number | "">("");
+    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);
+            Swal.fire({
+                title: "Error al obtener perfiles!",
+                icon: "error",
+                draggable: true
+            });
+        }
+    };
+
+    useEffect(() => {
+        obtenerUsuarios();
+        obtenerPerfiles();
+    }, []);
+
+    const crearUsuario = async () => {
+
+        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 }
+            );
+
+            limpiarFormulario();
+            obtenerUsuarios();
+        } catch (error) {
+            console.error("Error al crear usuario", error);
+              Swal.fire({
+                title: "ERror al crear usuario.!",
+                icon: "error",
+                draggable: true
+            });
+            
+        }
+    };
+
+    const limpiarFormulario = () => {
+        setNombre("");
+        setApellidoPaterno("");
+        setApellidoMaterno("");
+        setUsuario("");
+        setPassword("");
+        setDescripcion("");
+        setIdPerfil("");
+        setActivo(true);
+    };
+
+    return (
+        <div>
+            <h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
+
+            <div style={{ marginBottom: "15px" }}>
+
+                <input placeholder="Nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />
+
+                <input placeholder="Apellido Paterno" value={apellidoPaterno} onChange={(e) => setApellidoPaterno(e.target.value)} />
+
+                <input placeholder="Apellido Materno" value={apellidoMaterno} onChange={(e) => setApellidoMaterno(e.target.value)} />
+
+                <input placeholder="Usuario" value={usuario} onChange={(e) => setUsuario(e.target.value)} />
+
+                <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+
+                <input placeholder="Descripción" value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
+
+                <select value={idPerfil} onChange={(e) => setIdPerfil(Number(e.target.value))}>
+                    <option value="">Seleccione Perfil</option>
+                    {perfiles.map((p) => (
+                        <option key={p.id_perfil} value={p.id_perfil}>
+                            {p.perfil}
+                        </option>
+                    ))}
+                </select>
+
+                <label>
+                    Activo
+                    <input
+                        type="checkbox"
+                        checked={activo}
+                        onChange={(e) => setActivo(e.target.checked)}
+                    />
+                </label>
+
+                <button onClick={crearUsuario}>
+                    Crear Usuario
+                </button>
+            </div>
+
+            <div style={{ overflow: "auto", maxHeight: "350px" }}>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Nombre</th>
+                            <th>Usuario</th>
+                            <th>Perfil</th>
+                            <th>Activo</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {usuarios.map((u) => (
+                            <tr key={u.id_usuario}>
+                                <td>{u.id_usuario}</td>
+                                <td>{u.nombre} {u.apellido_paterno}</td>
+                                <td>{u.usuario}</td>
+                                <td>{u.perfil?.perfil}</td>
+                                <td>{u.activo === 1 ? "Sí" : "No"}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+    );
+}

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": {

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",