stylebitacoramesas

app/(private)/AsignacionEquipo/PlaticaGate.tsx

@@ -27,6 +27,8 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) {
   const [bitacora, setBitacora] = useState<[] | null>([]);
   const [error, setError] = useState<string>("Equipo");
 
+  const [search, setSearch] = useState("");
+
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
 
@@ -148,6 +150,16 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) {
     }
   };
 
+  const equiposFiltrados = equipos.filter((eq) => {
+    const texto = search.toLowerCase();
+
+    return (
+      eq.ubicacion?.toString().toLowerCase().includes(texto) ||
+      eq.plataforma?.nombre?.toLowerCase().includes(texto) ||
+      eq.nombre_equipo?.toLowerCase().includes(texto)
+    );
+  });
+
   if (bitacora) {
     return error === "Mesa"
       ? <p style={{ margin: "1rem", color: "red" }}>Ya cuentas con una mesa asignada</p>
@@ -181,12 +193,20 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) {
         >
           <div
             className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
-            onClick={() => !loadingEquipos && setOpen(!open)}
-          >
-            {equipoSeleccionado ? (
+            onClick={() => !loadingEquipos && setOpen(!open)}          >
+            {open ? (
+              <input
+                autoFocus
+                type="text"
+                placeholder="Buscar equipo..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                className="inputSelect"
+              />
+            ) : equipoSeleccionado ? (
               <span>
-                {equipoSeleccionado.ubicacion}{" "}
-                {equipoSeleccionado.nombre_equipo}
+                {equipoSeleccionado.ubicacion} {equipoSeleccionado.nombre_equipo}
               </span>
             ) : (
               <span className="placeholder">
@@ -201,19 +221,20 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) {
 
           {open && (
             <div className="options">
-              {equipos.length === 0 && (
+              {equiposFiltrados.length === 0 && (
                 <div className="option disabled">
-                  No hay equipos disponibles
+                  No hay resultados
                 </div>
               )}
 
-              {equipos.map((eq) => (
+              {equiposFiltrados.map((eq) => (
                 <div
                   key={eq.id_equipo}
                   className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
                   onClick={() => {
                     setEquipoSeleccionado(eq);
                     setOpen(false);
+                    setSearch("");
                   }}
                 >
                   {eq.ubicacion} {eq.nombre_equipo}

app/(private)/AsignacionEquipo/asignacion.css

@@ -64,7 +64,8 @@
 
 .selectHeader {
   border-radius: 6px;
-  padding: 8px 12px;
+  padding: 0px 6px;
+  height: 35px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -91,4 +92,16 @@
   z-index: 10;
   max-height: 250px;
   overflow-y: auto;
+}
+
+.inputSelect{
+  border: none;
+  padding: 0 5px;
+  margin: 0;
+}
+
+.inputSelect:focus{
+  background-color: #fff;
+  outline: none;
+  box-shadow:none;
 }

app/(private)/AsignacionMesas/TableMesas.tsx

@@ -13,11 +13,13 @@ type Mesa = {
 export default function TableMesas() {
   const [mesas, setMesas] = useState<Mesa[]>([]);
   const [loading, setLoading] = useState(true);
+  const [refresh, setRefresh] = useState<boolean>(false)
 
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
 
   const fetchMesas = async () => {
+    setLoading(true);
     try {
       const res = await axios.get(
         `${process.env.NEXT_PUBLIC_API_URL}/mesa/usoWhitout`,
@@ -34,37 +36,43 @@ export default function TableMesas() {
 
   useEffect(() => {
     fetchMesas();
-  }, []);
+    setRefresh(false)
+  }, [refresh]);
 
   if (loading) {
-    return <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
-        <thead>
-          <tr>
-            <th>Cargando mesas...</th>
-          </tr>
-        </thead>
-      </table>
-    </div>
+    return (
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Cargando mesas...</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    )
   }
 
   return (
-    <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
-        <thead>
-          <tr>
-            <th>ID Mesa</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          {mesas.map((mesa) => (
-            <tr key={mesa.id_mesa} className={!mesa.ocupado ? '' : styles.ocupado}>
-              <td>{mesa.id_mesa}</td>
+    <>
+      <button className="button buttonCancel" onClick={() => { setRefresh(true) }}>Actualizar informacion</button>
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>ID Mesa</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+          </thead>
+
+          <tbody>
+            {mesas.map((mesa) => (
+              <tr key={mesa.id_mesa} className={!mesa.ocupado ? '' : styles.ocupado}>
+                <td>{mesa.id_mesa}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
   );
 }

app/(private)/InformacionEquipo/InformacionEquipo.tsx

@@ -20,7 +20,7 @@ export default function InformacionEquipo({
 
   return (
     <section className="containerSection">
-      <h2 className="title"> INFORMACION DE EQUIPOS </h2>
+      <h2 className="title"> </h2>
 
       <Toggle
         defaultView={defaultKey}

app/(private)/Inscritos/Inscripciones.tsx

@@ -3,8 +3,8 @@ import { envConfig } from "@/app/lib/config";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
+import "./inscripciones.css";
 
-import "./inscripciones.css"
 
 interface Periodo {
   id_periodo: number;
@@ -13,23 +13,26 @@ interface Periodo {
 
 interface ApiResponse {
   carrera: string;
-  genero: string | null;
-  profesor: string;
+  profesor: string;      
+  femenino: string;
+  masculino: string;
   total: string;
 }
 
+
+type TipoConteo = "WINDOWS" | "MACINTOSH" | "LINUX" | "PROFESORES";
+
 interface TablaRow {
   carrera: string;
-  genero: string | null;
   WINDOWS: number;
   MACINTOSH: number;
   LINUX: number;
   PROFESORES: number;
   TOTAL: number;
+  femenino: number;
+  masculino: number;
 }
 
-type TipoConteo = "WINDOWS" | "MACINTOSH" | "LINUX" | "PROFESORES";
-
 export default function Inscripciones() {
   const [periodo, setPeriodo] = useState<Periodo[]>([]);
   const [selectedPeriodo, setSelectedPeriodo] = useState<number | null>(null);
@@ -38,15 +41,16 @@ export default function Inscripciones() {
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
 
+
   useEffect(() => {
     const getPeriodo = async () => {
-      const response = await axios.get(`${envConfig.apiUrl}/periodo`, { headers }
-      );
+      const response = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
       setPeriodo(response.data);
     };
     getPeriodo();
   }, []);
 
+  
   const handleBuscar = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -55,44 +59,44 @@ export default function Inscripciones() {
     const response = await axios.get(
       `${envConfig.apiUrl}/alumno-inscrito/inscritos/${selectedPeriodo}`,
       { headers }
-
     );
 
     const data: ApiResponse[] = response.data;
 
+
     const agrupado: Record<string, TablaRow> = {};
 
     data.forEach((item) => {
-      const generoNormalizado =
-        item.genero === "F" || item.genero === "Femenino"
-          ? "Femenino"
-          : item.genero === "M" || item.genero === "Masculino"
-            ? "Masculino"
-            : "-";
+      const carrera = item.carrera;
 
-      const key = `${item.carrera}_${generoNormalizado}`;
-
-      if (!agrupado[key]) {
-        agrupado[key] = {
-          carrera: item.carrera,
-          genero: generoNormalizado,
+     
+      if (!agrupado[carrera]) {
+        agrupado[carrera] = {
+          carrera: carrera,
           WINDOWS: 0,
           MACINTOSH: 0,
           LINUX: 0,
           PROFESORES: 0,
           TOTAL: 0,
+          femenino: 0,
+          masculino: 0,
         };
       }
 
-      const tipo = item.profesor as TipoConteo;
-      const cantidad = Number(item.total);
+      const fila = agrupado[carrera];
+      const tipoProfesor = item.profesor as TipoConteo; 
+      const totalPlataforma = Number(item.total);
+      const fem = Number(item.femenino);
+      const masc = Number(item.masculino);
 
-      agrupado[key][tipo] += cantidad;
-      agrupado[key].TOTAL += cantidad;
+    
+      fila[tipoProfesor] += totalPlataforma;
+      fila.TOTAL += totalPlataforma;
+      fila.femenino += fem;
+      fila.masculino += masc;
     });
 
     setTablaData(Object.values(agrupado));
-
   };
 
   return (
@@ -109,7 +113,6 @@ export default function Inscripciones() {
             <option value="" disabled>
               Seleccione
             </option>
-
             {periodo.map((p) => (
               <option key={p.id_periodo} value={p.id_periodo}>
                 {p.semestre}
@@ -128,7 +131,8 @@ export default function Inscripciones() {
           <thead>
             <tr>
               <th>Carrera</th>
-              <th>Genero</th>
+              <th>Femenino</th>
+              <th>Masculino</th>
               <th>WINDOWS</th>
               <th>MACINTOSH</th>
               <th>LINUX</th>
@@ -141,7 +145,8 @@ export default function Inscripciones() {
             {tablaData.map((row, index) => (
               <tr key={index}>
                 <td className="textLeft">{row.carrera}</td>
-                <td>{row.genero ?? "-"}</td>
+                <td>{row.femenino}</td>
+                <td>{row.masculino}</td>
                 <td>{row.WINDOWS}</td>
                 <td>{row.MACINTOSH}</td>
                 <td>{row.LINUX}</td>
@@ -154,4 +159,4 @@ export default function Inscripciones() {
       </div>
     </section>
   );
-}
+}

app/(private)/Monitor/RefreshButton.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import styles from "./Page.module.css"
+
+export default function RefreshButton() {
+  const router = useRouter()
+
+  return (
+    <button
+      className={styles.resetButton}
+      onClick={() => router.refresh()}
+    >
+      Actualizar información
+    </button>
+  )
+}

app/(private)/Monitor/page.tsx

@@ -4,6 +4,7 @@ import DSC from "./DSC";
 import ToggleTable from "@/app/Components/Global/Toggle/ToggleTable";
 import TableTable from "./TableTable";
 import { Metadata } from "next";
+import RefreshButton from "./RefreshButton";
 
 export const metadata: Metadata = {
   title: "Monitor",
@@ -21,9 +22,11 @@ export default async function Page(props: {
       <h2 className="title">MONITOR</h2>
 
       <div className={styles.actions}>
-        <button className={styles.resetButton}>Actualizar información</button>
+        <RefreshButton />
       </div>
+
       <ToggleTable
+        key={Date.now()}
         defaultView={key}
         options={[
           {

app/(private)/Periodo-Graficas/page.tsx

@@ -4,7 +4,19 @@ import { useState, useEffect } from "react";
 import { envConfig } from "@/app/lib/config";
 import axios from "axios";
 import Cookies from "js-cookie";
-import { Metadata } from "next";
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
+
+import {
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Line,
+  LineChart,
+} from "recharts";
 
 interface TotalServicioPeriodo {
   nombre_servicio: string;
@@ -27,7 +39,6 @@ export default function ReporteTotalesPage() {
   const [servicios, setServicios] = useState<Servicio[]>([]);
   const [periodos, setPeriodos] = useState<Periodo[]>([]);
   const [cargando, setCargando] = useState(true);
-
   const [periodoInicio, setPeriodoInicio] = useState<string>("");
   const [periodoFin, setPeriodoFin] = useState<string>("");
   const [servicioId, setServicioId] = useState<string>("");
@@ -35,6 +46,77 @@ export default function ReporteTotalesPage() {
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
 
+  // TOOLTIP ORDENADO
+  const CustomTooltip = ({ active, payload, label }: any) => {
+    if (active && payload && payload.length) {
+      const sorted = [...payload]
+        .filter((item) => item.value > 0)
+        .sort((a, b) => b.value - a.value);
+
+      return (
+        <div style={{ background: "white", padding: "10px", border: "1px solid #ccc", borderRadius: "8px" }}>
+          <p style={{ fontWeight: "bold" }}>Periodo: {label}</p>
+          {sorted.map((entry: any, index: number) => (
+            <div key={index} style={{ color: entry.color }}>
+              {entry.name}: ${entry.value.toFixed(2)}
+            </div>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  // EXPORTAR EXCEL PIVOT
+  const exportarExcelPivot = () => {
+    if (!totales.length) return;
+
+    const periodosUnicos = Array.from(new Set(totales.map((t) => t.periodo))).sort();
+    const serviciosUnicos = Array.from(new Set(totales.map((t) => t.nombre_servicio)));
+
+    const dataExcel = serviciosUnicos.map((servicio) => {
+      const fila: any = { Servicio: servicio };
+
+      periodosUnicos.forEach((periodo) => {
+        const item = totales.find(
+          (t) => t.nombre_servicio === servicio && t.periodo === periodo
+        );
+        fila[periodo] = item ? item.monto_total : 0;
+      });
+
+      // total por fila
+      fila["Total"] = periodosUnicos.reduce(
+        (acc, periodo) => acc + (fila[periodo] || 0),
+        0
+      );
+
+      return fila;
+    });
+
+    const worksheet = XLSX.utils.json_to_sheet(dataExcel);
+
+    worksheet["!cols"] = [
+      { wch: 30 },
+      ...periodosUnicos.map(() => ({ wch: 15 })),
+      { wch: 15 },
+    ];
+
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Pivot");
+
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: "xlsx",
+      type: "array",
+    });
+
+    const data = new Blob([excelBuffer], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+
+    saveAs(data, "reporte_pivot.xlsx");
+  };
+
+  // FETCH
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -45,7 +127,7 @@ export default function ReporteTotalesPage() {
         setServicios(serviciosRes.data);
         setPeriodos(periodosRes.data);
       } catch (error) {
-        console.error("Error al cargar servicios o periodos", error);
+        console.error("Error al cargar datos", error);
       }
     };
     fetchData();
@@ -54,7 +136,6 @@ export default function ReporteTotalesPage() {
   const obtenerTotales = async () => {
     setCargando(true);
     try {
-      // Construir query params
       const params = new URLSearchParams();
       if (periodoInicio) params.append("periodoInicio", periodoInicio);
       if (periodoFin) params.append("periodoFin", periodoFin);
@@ -74,16 +155,38 @@ export default function ReporteTotalesPage() {
     obtenerTotales();
   };
 
+  // DATA PARA GRAFICA
+  const transformDataForChart = () => {
+    const periodosUnicos = Array.from(new Set(totales.map((t) => t.periodo))).sort();
+    const serviciosUnicos = Array.from(new Set(totales.map((t) => t.nombre_servicio)));
+
+    const data = periodosUnicos.map((periodo) => {
+      const row: any = { periodo };
+      serviciosUnicos.forEach((servicio) => {
+        const item = totales.find(
+          (t) => t.periodo === periodo && t.nombre_servicio === servicio
+        );
+        row[servicio] = item ? item.monto_total : 0;
+      });
+      return row;
+    });
+
+    return { data, serviciosUnicos };
+  };
+
+  const { data: chartData, serviciosUnicos } = transformDataForChart();
+
+  const colors = ["black", "red", "blue", "orange", "purple", "green"];
+
   return (
     <div>
-      <h1 style={{ color: "rgb(3, 1, 72)" }}>REPORTE DE TOTALES POR SERVICIO Y PERIODO</h1>
+      <h1 style={{ color: "rgb(3, 1, 72)", marginBottom: "20px" }}>
+        REPORTE DE TOTALES POR SERVICIO Y PERIODO
+      </h1>
 
       <div style={{ marginBottom: "20px", display: "flex", gap: "10px", flexWrap: "wrap" }}>
-        <select
-          value={periodoInicio}
-          onChange={(e) => setPeriodoInicio(e.target.value)}
-        >
-          <option value="">Periodo inicio (todos)</option>
+        <select value={periodoInicio} onChange={(e) => setPeriodoInicio(e.target.value)}>
+          <option value="">Periodo inicio</option>
           {periodos.map((p) => (
             <option key={p.id_periodo} value={p.id_periodo}>
               {p.semestre}
@@ -91,11 +194,8 @@ export default function ReporteTotalesPage() {
           ))}
         </select>
 
-        <select
-          value={periodoFin}
-          onChange={(e) => setPeriodoFin(e.target.value)}
-        >
-          <option value="">Periodo fin (todos)</option>
+        <select value={periodoFin} onChange={(e) => setPeriodoFin(e.target.value)}>
+          <option value="">Periodo fin</option>
           {periodos.map((p) => (
             <option key={p.id_periodo} value={p.id_periodo}>
               {p.semestre}
@@ -103,10 +203,7 @@ export default function ReporteTotalesPage() {
           ))}
         </select>
 
-        <select
-          value={servicioId}
-          onChange={(e) => setServicioId(e.target.value)}
-        >
+        <select value={servicioId} onChange={(e) => setServicioId(e.target.value)}>
           <option value="">Todos los servicios</option>
           {servicios.map((s) => (
             <option key={s.id_servicio} value={s.id_servicio}>
@@ -116,30 +213,58 @@ export default function ReporteTotalesPage() {
         </select>
 
         <button onClick={aplicarFiltros}>Filtrar</button>
+        <button onClick={exportarExcelPivot}>Exportar Excel</button>
       </div>
 
       {cargando ? (
         <p>Cargando...</p>
       ) : (
-        <div style={{ overflow: "auto", maxHeight: "500px" }}>
-          <table>
-            <thead>
-              <tr>
-                <th>Servicio</th>
-                <th>Periodo</th>
-                <th>Monto Total</th>
-              </tr>
-            </thead>
-            <tbody>
-              {totales.map((item, index) => (
-                <tr key={index}>
-                  <td>{item.nombre_servicio}</td>
-                  <td>{item.periodo}</td>
-                  <td>${item.monto_total.toFixed(2)}</td>
+        <div style={{ display: "flex", gap: "50px", flexWrap: "wrap" }}>
+          
+          {/* TABLA */}
+          <div style={{ flex: 1, minWidth: "500px", maxHeight: "500px", overflow: "auto" }}>
+            <table style={{ width: "100%" }}>
+              <thead>
+                <tr>
+                  <th>Servicio</th>
+                  <th>Periodo</th>
+                  <th>Monto</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {totales.map((item, i) => (
+                  <tr key={i}>
+                    <td>{item.nombre_servicio}</td>
+                    <td>{item.periodo}</td>
+                    <td>${item.monto_total.toFixed(2)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* GRAFICA */}
+          <div style={{ flex: 1, minWidth: "700px", background: "white" }}>
+            <ResponsiveContainer width="100%" height={400}>
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="periodo" />
+                <YAxis />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend />
+                
+                {serviciosUnicos.map((servicio, i) => (
+                  <Line
+                    key={servicio}
+                    dataKey={servicio}
+                    stroke={colors[i % colors.length]}
+                    type="monotone"
+                  />
+                ))}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+
         </div>
       )}
     </div>

app/(private)/Usuarios/page.tsx

@@ -0,0 +1,234 @@
+"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";
+import "./user.css"
+
+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);
+    };
+
+    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: "10px" }}>
+
+                <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 className="user">
+
+                    Activo
+                    <input
+                        type="checkbox"
+                        checked={activo}
+                        onChange={(e) => setActivo(e.target.checked)}
+                    />
+
+                </label>
+
+                <button className="button buttonSearch" 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 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>
+                </table>
+            </div>
+
+        </div>
+    );
+}

app/(private)/Usuarios/user.css

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

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -21,6 +21,8 @@ export default function BitacoraEquipo({ date }: { date: string | null }) {
   const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
   const [equipos, setEquipos] = useState<any[]>([]);
 
+  const [search, setSearch] = useState("");
+
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
 
@@ -52,6 +54,15 @@ export default function BitacoraEquipo({ date }: { date: string | null }) {
       });
   }, [equipoSeleccionado, date]);
 
+  const equiposFiltrados = equipos.filter((eq) => {
+    const texto = search.toLowerCase();
+
+    return (
+      eq.ubicacion?.toString().toLowerCase().includes(texto) ||
+      eq.plataforma?.nombre?.toLowerCase().includes(texto) ||
+      eq.nombre_equipo?.toLowerCase().includes(texto)
+    );
+  });
 
   return (
     <>
@@ -64,13 +75,20 @@ export default function BitacoraEquipo({ date }: { date: string | null }) {
           >
             <div
               className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
-              onClick={() => !loadingEquipos && setOpen(!open)}
-            >
-              {equipoSeleccionado ? (
-                <span
-                >
-                  {equipoSeleccionado.ubicacion}{" "}
-                  {equipoSeleccionado.nombre_equipo}
+              onClick={() => !loadingEquipos && setOpen(!open)}          >
+              {open ? (
+                <input
+                  autoFocus
+                  type="text"
+                  placeholder="Buscar equipo..."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                  className="inputSelect"
+                />
+              ) : equipoSeleccionado ? (
+                <span>
+                  {equipoSeleccionado.ubicacion} {equipoSeleccionado.nombre_equipo}
                 </span>
               ) : (
                 <span className="placeholder">
@@ -85,19 +103,20 @@ export default function BitacoraEquipo({ date }: { date: string | null }) {
 
             {open && (
               <div className="options" style={{ bottom: "auto" }}>
-                {equipos.length === 0 && (
+                {equiposFiltrados.length === 0 && (
                   <div className="option disabled">
-                    No hay equipos disponibles
+                    No hay resultados
                   </div>
                 )}
 
-                {equipos.map((eq) => (
+                {equiposFiltrados.map((eq) => (
                   <div
                     key={eq.id_equipo}
                     className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
                     onClick={() => {
                       setEquipoSeleccionado(eq);
                       setOpen(false);
+                      setSearch("");
                     }}
                   >
                     {eq.ubicacion} {eq.nombre_equipo}

app/Components/BitacoraSanciones/BitacoraMesas.tsx

@@ -42,8 +42,8 @@ export default function BitacoraMesas() {
     <>
       <SearchDate />
 
-      <div>
-        <table>
+      <div style={{ maxHeight: "400px", overflowY: "auto", border: "1px solid #ccc" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse" }}>
           <thead>
             <tr>
               <th>Mesa</th>
@@ -77,4 +77,3 @@ export default function BitacoraMesas() {
     </>
   );
 }
-//IO

app/Components/BitacoraSanciones/TableSanction.tsx

@@ -10,11 +10,30 @@ export default function TableSanction({ alumnoSanciones, alumno }: Props) {
     const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
         const fecha = new Date(fechaInicio);
         fecha.setDate(fecha.getDate() + duracionSemanas * 7);
-        return fecha.toLocaleDateString();
+
+        return fecha.toLocaleString("es-MX", {
+            timeZone: "America/Mexico_City",
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit"
+        });
     };
 
+    const formatearFechaMexico = (fechaISO: string) => {
+        return new Date(fechaISO).toLocaleString("es-MX", {
+            timeZone: "America/Mexico_City",
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit"
+        });
+    };
     return (
-        <div style={{ margin: "1rem 0", maxWidth:"730px"}}>
+        <div style={{ margin: "1rem 0", maxWidth: "730px" }}>
             <table>
                 <thead>
                     <tr>
@@ -32,8 +51,7 @@ export default function TableSanction({ alumnoSanciones, alumno }: Props) {
                                 <td>{alumno?.id_cuenta}</td>
                                 <td>{item.sancion.sancion}</td>
                                 <td>{item.sancion.duracion}</td>
-                                <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
-                                <td>
+                                <td>{formatearFechaMexico(item.fecha_inicio)}</td>                                <td>
                                     {calcularFechaFin(item.fecha_inicio, item.sancion.duracion)}
                                 </td>
                             </tr>

app/Components/Equipos/equipos.tsx

@@ -84,6 +84,11 @@ export default function Equipos() {
     if (!data) return;
 
     try {
+      console.log({
+  id_equipo: data.id_equipo,
+  id_plataforma: idPlataforma,
+  nombre
+});
       await axios.patch(`${envConfig.apiUrl}/equipo`, {
         id_equipo: data.id_equipo,
         nombre_equipo: nombre,

app/Components/InformacionEquipos/SelectorEquipo.tsx

@@ -35,6 +35,7 @@ export default function SelectorEquipo({ onSearch }: Props) {
   const [loadingEquipos, setLoadingEquipos] = useState(false);
   const [open, setOpen] = useState(false);
 
+  const [search, setSearch] = useState("");
 
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
@@ -61,6 +62,15 @@ export default function SelectorEquipo({ onSearch }: Props) {
     }
   }, [paramEquipo, equipos]);
 
+  const equiposFiltrados = equipos.filter((eq) => {
+    const texto = search.toLowerCase();
+
+    return (
+      eq.ubicacion?.toString().toLowerCase().includes(texto) ||
+      eq.plataforma?.nombre?.toLowerCase().includes(texto) ||
+      eq.nombre_equipo?.toLowerCase().includes(texto)
+    );
+  });
 
   return (
     <form className="form-container">
@@ -71,14 +81,20 @@ export default function SelectorEquipo({ onSearch }: Props) {
       >
         <div
           className={`selectHeader ${selected && selected.plataforma?.nombre?.toUpperCase()}`}
-          onClick={() => !loadingEquipos && setOpen(!open)}
-        >
-          {selected ? (
-            <span
-            >
-              {selected.ubicacion}{" "}
-              {selected.nombre_equipo}{" "}
-              {selected.areaUbicacion.area}
+          onClick={() => !loadingEquipos && setOpen(!open)}          >
+          {open ? (
+            <input
+              autoFocus
+              type="text"
+              placeholder="Buscar equipo..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              className="inputSelect"
+            />
+          ) : selected ? (
+            <span>
+              {selected.ubicacion} {selected.nombre_equipo}
             </span>
           ) : (
             <span className="placeholder">
@@ -93,13 +109,13 @@ export default function SelectorEquipo({ onSearch }: Props) {
 
         {open && (
           <div className="options" style={{ bottom: "auto" }}>
-            {equipos.length === 0 && (
+            {equiposFiltrados.length === 0 && (
               <div className="option disabled">
                 No hay equipos disponibles
               </div>
             )}
 
-            {equipos.map((eq) => (
+            {equiposFiltrados.map((eq) => (
               <div
                 key={eq.id_equipo}
                 className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
@@ -115,6 +131,8 @@ export default function SelectorEquipo({ onSearch }: Props) {
                   }
 
                   router.push(`${pathname}?${params.toString()}`);
+                  setSearch("");
+
                 }}
               >
                 {eq.ubicacion} {eq.nombre_equipo} {eq.areaUbicacion.area}

app/Components/SearchDate/SearchDate.tsx

@@ -46,5 +46,4 @@ export default function SearchDate() {
     </form>
   );
 }
-//IO
-//By Tyrannuss
+

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "date": "^2.0.6",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "jose": "^6.1.3",
@@ -19,8 +20,10 @@
     "react-dom": "19.1.0",
     "react-icons": "^5.5.0",
     "react-toastify": "^11.0.5",
+    "recharts": "^3.8.0",
     "sweetalert2": "^11.26.18",
-    "sweetalert2-react-content": "^5.1.1"
+    "sweetalert2-react-content": "^5.1.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.7",

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