CREAR USUARIO

app/(private)/Usuarios/page.tsx

@@ -5,6 +5,7 @@ import axios from "axios";
 import Cookies from "js-cookie";
 import { envConfig } from "@/app/lib/config";
 import Swal from "sweetalert2";
+import "./user.css"
 
 interface Perfil {
     id_perfil: number;
@@ -71,7 +72,7 @@ export default function UserPage() {
     const crearUsuario = async () => {
 
         if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {
-          
+
             Swal.fire({
                 title: "Todos los campos obligatorios deben llenarse.!",
                 icon: "error",
@@ -100,12 +101,12 @@ export default function UserPage() {
             obtenerUsuarios();
         } catch (error) {
             console.error("Error al crear usuario", error);
-              Swal.fire({
-                title: "ERror al crear usuario.!",
+            Swal.fire({
+                title: "Error al crear usuario.!",
                 icon: "error",
                 draggable: true
             });
-            
+
         }
     };
 
@@ -120,11 +121,39 @@ export default function UserPage() {
         setActivo(true);
     };
 
+    const active = async (id_usuario: number) => {
+        try {
+
+            await axios.patch(
+                `${API}/${id_usuario}/activo`,
+                {},
+                { headers }
+            );
+
+            setUsuarios((prev) =>
+                prev.map((u) =>
+                    u.id_usuario === id_usuario
+                        ? { ...u, activo: u.activo === 1 ? 0 : 1 }
+                        : u
+                )
+            );
+
+        } catch (error) {
+            console.error("Error al cambiar estado del usuario", error);
+
+            Swal.fire({
+                title: "Error al cambiar estado del usuario",
+                icon: "error",
+                draggable: true
+            });
+        }
+    };
+
     return (
         <div>
             <h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
 
-            <div style={{ marginBottom: "15px" }}>
+            <div style={{ marginBottom: "10px" }}>
 
                 <input placeholder="Nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />
 
@@ -145,23 +174,26 @@ export default function UserPage() {
                             {p.perfil}
                         </option>
                     ))}
+
                 </select>
 
-                <label>
+                <label className="user">
+
                     Activo
                     <input
                         type="checkbox"
                         checked={activo}
                         onChange={(e) => setActivo(e.target.checked)}
                     />
+
                 </label>
 
-                <button onClick={crearUsuario}>
+                <button className="button buttonSearch" onClick={crearUsuario}>
                     Crear Usuario
                 </button>
             </div>
 
-            <div style={{ overflow: "auto", maxHeight: "350px" }}>
+            <div style={{ overflow: "auto", maxHeight: "400px" }}>
                 <table>
                     <thead>
                         <tr>
@@ -170,16 +202,27 @@ export default function UserPage() {
                             <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.nombre} {u.apellido_paterno} </td>
                                 <td>{u.usuario}</td>
                                 <td>{u.perfil?.perfil}</td>
-                                <td>{u.activo === 1 ? "Sí" : "No"}</td>
+                                <td style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+                                    <span>{u.activo === 1 ? "Sí" : "No"}</span>
+
+                                    <input
+                                        type="checkbox"
+                                        checked={u.activo === 1}
+                                        style={{ height: "2rem" }}
+                                        onChange={() => active(u.id_usuario)}
+                                    />
+                                </td>
+
                             </tr>
                         ))}
                     </tbody>

app/(private)/Usuarios/user.css

@@ -0,0 +1,5 @@
+.user{
+    padding-left: 20px;
+       margin-left: 180px;
+    font-size:  25px;;
+}