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] 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<Usuario[]>([]);
-  const [perfiles, setPerfiles] = useState<Perfil[]>([]);
+    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 [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 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 (
-    <div>
-      <h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
+    return (
+        <div>
+            <h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
 
-      <div style={{ marginBottom: "15px" }}>
+            <div style={{ marginBottom: "15px" }}>
 
-        <input placeholder="Nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />
+                <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 Paterno" value={apellidoPaterno} onChange={(e) => setApellidoPaterno(e.target.value)} />
 
-        <input placeholder="Apellido Materno" value={apellidoMaterno} onChange={(e) => setApellidoMaterno(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 placeholder="Usuario" value={usuario} onChange={(e) => setUsuario(e.target.value)} />
 
-        <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(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)} />
+                <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>
+                <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>
+                <label>
+                    Activo
+                    <input
+                        type="checkbox"
+                        checked={activo}
+                        onChange={(e) => setActivo(e.target.checked)}
+                    />
+                </label>
 
-        <button onClick={crearUsuario}>
-          Crear Usuario
-        </button>
-      </div>
+                <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 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>
-  );
+        </div>
+    );
 }
\ No newline at end of file