stylebitacoramesas

app/(private)/ActivosMantenimiento/page.tsx

@@ -2,6 +2,11 @@ import Areas from "@/app/Components/ActivosMantenimiento/Areas";
 import MesasDisponibles from "@/app/Components/ActivosMantenimiento/MesasDisponibles";
 import TableEquipos from "@/app/Components/Equipos/tableequipos";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "ActivosMantenimiento",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/AgregarTiempo/addTime.css

@@ -63,10 +63,15 @@
   background-repeat: no-repeat;
 }
 
-@media(max-height:550px) {
+@media(max-height:800px) {
   .addTime {
     margin-top: 0.5rem;
     padding: 0.5rem;
+    max-width: 320px;
+  }
+
+  .firstPartInformationTime {
+    max-width: 320px;
   }
 }
 

app/(private)/AgregarTiempo/page.tsx

@@ -8,9 +8,14 @@ import AddTime from "./Addtime";
 import Table from "@/app/Components/Global/table";
 
 import "./addTime.css";
+import { Metadata } from "next";
 
 const headers = ["Inscrito", "Tiempo", "Confirmó"];
 
+export const metadata: Metadata = {
+  title: "AgregarTiempo",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{ numAcount: string }>;
 }) {

app/(private)/Alta/page.tsx

@@ -1,6 +1,11 @@
 import RegisterAlta from "@/app/Components/Alta/registerAlta";
 
 import "./style.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Alta",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

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)/AsignacionEquipo/page.tsx

@@ -10,9 +10,14 @@ import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import PlaticaGate from "./PlaticaGate";
 import "@/app/globals.css";
 import { GetRegisterStudentSancion } from "@/app/lib/GetRegisterStudentSancion";
+import { Metadata } from "next";
 
 const headers = ["Inscrito", "Tiempo", "Confirmó"];
 
+export const metadata: Metadata = {
+  title: "AsignacionEquipo",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;

app/(private)/AsignacionMesas/TableMesas.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "../Monitor/Page.module.css";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+type Mesa = {
+  id_mesa: number;
+  ocupado: number;
+};
+
+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`,
+        { headers },
+      );
+
+      setMesas(res.data);
+    } catch (error) {
+      console.error("Error cargando mesas:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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 (
+    <>
+      <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>
+          </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)/AsignacionMesas/page.tsx

@@ -4,18 +4,23 @@ import Information from "@/app/Components/Global/Information/information";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import ShowError from "@/app/Components/Global/ShowError";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import TableMesas from "./TableMesas";
 
 import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import { GetRegisterStudentSancion } from "@/app/lib/GetRegisterStudentSancion";
-import TableTable from "../Monitor/TableTable";
+import { Metadata } from "next";
 
 import './asignacion.css'
 
+export const metadata: Metadata = {
+  title: "AsignacionMesas",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
     numAcount?: string;
-    table?: number
+    table?: string
   }>;
 }) {
   const params = await props.searchParams;
@@ -95,7 +100,7 @@ export default async function Page(props: {
           ]}
         />
         <div className="tableTable">
-          <TableTable />
+          <TableMesas key={Date.now()}/>
         </div>
       </div>
     </section>

app/(private)/BitacoraSanciones/page.tsx

@@ -8,6 +8,11 @@ import ShowError from "@/app/Components/Global/ShowError";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "BitacoraSanciones",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/CambiarPass/page.tsx

@@ -1,4 +1,9 @@
 import ChangePassword from "@/app/Components/auth/ChangePassword/changePassword";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "CambiarPass",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/Impresiones/page.tsx

@@ -10,6 +10,11 @@ import { getCost } from "@/app/lib/getCost";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
 
 import "@/app/globals.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Impresiones",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

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)/InformacionEquipo/page.tsx

@@ -1,7 +1,12 @@
+import { Metadata } from "next";
 import InformacionEquipo from "./InformacionEquipo";
 
 import "./informacionequipo.css";
 
+export const metadata: Metadata = {
+  title: "InformacionEquipo",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;

app/(private)/Inscripcion/inscripcion.css

@@ -3,7 +3,7 @@
   top: 0;
   background-color: #ffffff;
   width: 100%;
-  max-width: 700px;
+  max-width: 600px;
   border-radius: 4px;
   padding: 1rem;
   margin-top: 1rem;
@@ -28,8 +28,13 @@
   height: fit-content;
 }
 
-@media(max-height:550px) {
+@media(max-height:800px) {
+  .firstPartInformation {
+    max-width: 320px;
+  }
+
   .inscripcion {
+    max-width: 400px;
     padding: 0.5rem;
     margin-top: 0.5rem;
   }

app/(private)/Inscripcion/page.tsx

@@ -9,9 +9,14 @@ import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
 
 import "./inscripcion.css";
+import { Metadata } from "next";
 
 const headers = ["Inscrito", "Tiempo", "Confirmó"];
 
+export const metadata: Metadata = {
+  title: "Inscripcion",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;

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)/Inscritos/page.tsx

@@ -1,5 +1,10 @@
+import { Metadata } from "next";
 import Inscripciones from "./Inscripciones";
 
+export const metadata: Metadata = {
+  title: "Inscritos",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     period: string;

app/(private)/Mensajes/page.tsx

@@ -1,6 +1,11 @@
 import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
 import EnviarMensajeSala from "@/app/Components/EviarMensaje/EnviarMensajeSala";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Mensajes",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

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

@@ -1,10 +1,14 @@
-import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import MachineTable from "./MachineTable";
 import styles from "./Page.module.css";
 import MachineTableActive from "./MachineTableActive";
 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",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{ numAcount: string; key: string }>;
@@ -18,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

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
+import Cookies from "js-cookie";
+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;
+  periodo: string;
+  monto_total: number;
+}
+
+interface Servicio {
+  id_servicio: number;
+  servicio: string;
+}
+
+interface Periodo {
+  id_periodo: number;
+  semestre: string;
+}
+
+export default function ReporteTotalesPage() {
+  const [totales, setTotales] = useState<TotalServicioPeriodo[]>([]);
+  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>("");
+
+  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 {
+        const [serviciosRes, periodosRes] = await Promise.all([
+          axios.get(`${envConfig.apiUrl}/servicio`, { headers }),
+          axios.get(`${envConfig.apiUrl}/periodo`, { headers }),
+        ]);
+        setServicios(serviciosRes.data);
+        setPeriodos(periodosRes.data);
+      } catch (error) {
+        console.error("Error al cargar datos", error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const obtenerTotales = async () => {
+    setCargando(true);
+    try {
+      const params = new URLSearchParams();
+      if (periodoInicio) params.append("periodoInicio", periodoInicio);
+      if (periodoFin) params.append("periodoFin", periodoFin);
+      if (servicioId) params.append("servicioId", servicioId);
+
+      const url = `${envConfig.apiUrl}/detalle-servicio/totales-por-periodo?${params.toString()}`;
+      const res = await axios.get(url, { headers });
+      setTotales(res.data);
+    } catch (error) {
+      console.error("Error al obtener totales", error);
+    } finally {
+      setCargando(false);
+    }
+  };
+
+  const aplicarFiltros = () => {
+    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)", 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</option>
+          {periodos.map((p) => (
+            <option key={p.id_periodo} value={p.id_periodo}>
+              {p.semestre}
+            </option>
+          ))}
+        </select>
+
+        <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}
+            </option>
+          ))}
+        </select>
+
+        <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}>
+              {s.servicio}
+            </option>
+          ))}
+        </select>
+
+        <button onClick={aplicarFiltros}>Filtrar</button>
+        <button onClick={exportarExcelPivot}>Exportar Excel</button>
+      </div>
+
+      {cargando ? (
+        <p>Cargando...</p>
+      ) : (
+        <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>
+              </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)/Periodo/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { envConfig } from "@/app/lib/config";
 import axios from "axios";
 import Cookies from "js-cookie";
+import { Metadata } from "next";
 
 interface Periodo {
   id_periodo: number;
@@ -15,6 +16,7 @@ interface Periodo {
     data: number[];
   };
 }
+
 export default function PeriodoPage() {
 
   const [periodos, setPeriodos] = useState<Periodo[]>([]);
@@ -208,4 +210,5 @@ export default function PeriodoPage() {
       </div>
     </div>
   );
-}
+}
+//IO

app/(private)/Programas/page.tsx

@@ -6,6 +6,7 @@ import styleprograms from "./programas.module.css";
 import axios from "axios";
 import Swal from "sweetalert2";
 import Cookies from "js-cookie";
+import { Metadata } from "next";
 
 interface Programa {
   id_programa: number;

app/(private)/QuitarSancion/page.tsx

@@ -1,5 +1,10 @@
 import ShowError from "@/app/Components/Global/ShowError";
 import { GetSancionByStudent } from "@/app/lib/getSancionByStudent";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "QuitarSancion",
+};
 
 export default async function Page(props: {
   searchParams?: Promise<{

app/(private)/Reportes/page.tsx

@@ -1,5 +1,10 @@
+import { Metadata } from 'next';
 import ReportesClient from './ReportesClient';
 
+export const metadata: Metadata = {
+  title: "Reportes",
+};
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key: string;

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/AsignacionMesas.tsx

@@ -4,10 +4,11 @@ import { useEffect, useState } from "react";
 import { envConfig } from "@/app/lib/config";
 import { getEquipoByCount } from "../lib/getEquipoByCount";
 import { getMesaByCount } from "../lib/getMesaByCount";
+import { useRouter } from "next/navigation";
+
 import Swal from "sweetalert2";
 import axios from "axios";
 import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
 
 type Props = {
   inscripcion: any[];
@@ -130,6 +131,7 @@ export default function AsignacionMesas({ idCuenta, inscripcion }: Props) {
 
       setBitacora([]);
       router.refresh();
+      setError("Mesa")
       Swal.fire({
         title: "Mesa asignada correctamente!",
         icon: "success",

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/CheckBoxEquipo.tsx

@@ -37,7 +37,7 @@ interface Props {
 }
 
 export default function CheckBoxEquipo({ numAcount, machine }: Props) {
-  const [modo, setModo] = useState<"Equipo" | "Cuenta">("Cuenta");
+  const [modo, setModo] = useState<"Equipo" | "Cuenta">("Equipo");
 
   const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
   const [bitacoraEquipo, setBitacoraEquipo] = useState<any>(null);

app/Components/CheckBoxMesa.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { getTableByCount } from "../lib/getTableByCount";
 import { envConfig } from "../lib/config";
 import { getMesaByCount } from "../lib/getMesaByCount";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import SearchUser from "./Global/SearchUser/searchUser";
 import Information from "./Global/Information/information";
@@ -15,11 +15,11 @@ import Cookies from "js-cookie";
 
 interface props {
   numAcount: string | null;
-  table: number | null;
+  table: string | null;
 }
 
 export default function CheckBoxMesa({ numAcount, table }: props) {
-  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Cuenta");
+  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Mesa");
   const [bitacoraMesa, setBitacoraMesa] = useState<any>(null);
   const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
   const [tiempoRestante, setTiempoRestante] = useState<string>("");
@@ -31,6 +31,9 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
   const bitacora = modo === "Cuenta" ? bitacoraCuenta : bitacoraMesa;
 
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString());
 
   const fetchByCuenta = async (idCuenta: number) => {
     const result = await getMesaByCount(idCuenta);
@@ -62,13 +65,15 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
     if (isNaN(idCuenta)) return;
 
     fetchByCuenta(idCuenta);
-  }, [numAcount]);
+  }, [numAcount, modo]);
 
   useEffect(() => {
+    setBitacoraMesa(null);
+    params.delete("numAcount");
+    router.push(`${pathname}?${params.toString()}`);
     if (modo !== "Mesa" || !table) return;
-    const idEquipo = table;
+    const idEquipo = parseInt(table);
     if (isNaN(idEquipo)) return;
-
     fetchByMesa(idEquipo);
   }, [table]);
 
@@ -132,15 +137,22 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
 
       if (modo === "Cuenta" && numAcount) {
         fetchByCuenta(parseInt(numAcount));
+        params.delete("numAcount");
+        router.push(`${pathname}?${params.toString()}`);
       }
 
       if (modo === "Mesa" && table) {
-        fetchByMesa(table);
+        fetchByMesa(parseInt(table));
+        params.delete("table");
+        router.push(`${pathname}?${params.toString()}`);
       }
 
       router.refresh();
+
       setBitacoraMesa(null);
       setBitacoraCuenta(null);
+      setErrorMesa('Alumno sin mesa');
+
     } catch (error) {
       Swal.fire({
         title: "Error al cancelar tiempo",
@@ -202,9 +214,10 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
           )}
         </>
       }
+
       {modo === "Mesa" &&
         <>
-          <SearchMesa />
+          <SearchMesa value={table ?? null} />
           <h2 style={{ marginTop: "10px" }}>{errorMesa}</h2>
 
           {bitacoraMesa && tiempoRestante !== "agotado" && (

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/Global/Information/information.tsx

@@ -15,7 +15,7 @@ export default function Information(props: InformationProps) {
         {entries.map(([key, value]) => (
           <li key={key} className="informationItem">
             <span className="informationKey">{key}</span>
-            <span className="informationValue">{value}</span>
+            <span className={`informationValue ${key}`}>{value}</span>
           </li>
         ))}
       </ul>

app/Components/Global/table.module.css

@@ -44,9 +44,11 @@
   margin-right: 6px;
   vertical-align: middle;
 }
-@media(max-height:550px) {
+
+@media(max-height:800px) {
   .tableContainer {
     margin-top: 1.5rem;
+    max-width: 320px;
   }
 }
 

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
+

app/Components/SearchMesa.tsx

@@ -1,15 +1,28 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
+interface urlProp {
+  value: string | null;
+}
 
-export default function SearchMesa() {
+export default function SearchMesa(props: urlProp) {
   const [inputValue, setInputValue] = useState("");
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+    useEffect(() => {
+      if (props.value) {
+        setInputValue(props.value);
+      }
+  
+      if(props.value===null){
+        setInputValue("")
+      }
+    }, [props.value]);
+
   const buscar = (e: React.FormEvent) => {
     e.preventDefault();
     const params = new URLSearchParams(searchParams.toString());

app/Components/auth/Login/Login.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { useState } from "react";
 import { loginUser } from "@/app/lib/login";
 import { useRouter } from "next/navigation";
@@ -47,12 +48,9 @@ export default function Login() {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
       const usuario = payload.usuario;
-      const role = payload.role;
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       document.cookie = `user=${usuario}; path=/; SameSite=Strict`;
-      document.cookie = `role=${role}; path=/; SameSite=Strict`;
-
 
       Swal.fire({
         title: "Inicio de sesión exitoso!",

app/Components/auth/Logout/Logout.css

@@ -24,6 +24,7 @@
   border-radius: 6px;
   padding: 6px 12px;
   z-index: 1;
+  outline: 1px solid #cfcfcf;
 }
 
 @media(max-height: 800px) {

app/Components/layout/BarNavigation/BarNavigation.css

@@ -172,6 +172,7 @@ tbody {
     position: absolute;
     top: 76px;
     left: 0;
+    top: 100%;
     width: 100%;
     background-color: #fff;
     flex-direction: column;

app/globals.css

@@ -362,8 +362,13 @@ a {
 }
 
 .informationValue {
-  color: #555;
-  font-size: 1.25rem;
+  color: #000000;
+  font-size: 1.5rem;
+}
+
+.Credito {
+  font-weight: bold;
+  font-size: 2rem;
 }
 
 .title {
@@ -399,7 +404,7 @@ form {
 .toggleSection {
   width: 100%;
   max-width: fit-content;
-  min-width: 750px;
+  min-width: 600px;
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -496,7 +501,7 @@ thead tr {
   background-color: #2563eb;
   position: relative;
   z-index: 1;
-}  
+}
 
 tbody tr {
   transition: transform 0.3s ease, opacity 0.3s ease;
@@ -677,7 +682,7 @@ table td:last-child {
   }
 
   .informationValue {
-    font-size: 1rem;
+    font-size: 1.01rem;
   }
 
   .informationItem {
@@ -687,7 +692,6 @@ table td:last-child {
   input,
   select {
     padding: 0.5rem;
-    font-size: 1.3rem;
     height: 3rem;
   }
 
@@ -727,6 +731,27 @@ table td:last-child {
     height: 30px;
   }
 
+  .information {
+    max-width: 320px;
+
+  }
+
+  .containerForm {
+    max-width: 320px;
+  }
+
+  .Credito {
+    font-size: 1.5rem;
+  }
+
+  table th,
+  table td {
+    padding: 0.65rem 1rem;
+  }
+
+  .toggleSection {
+    min-width: 570px;
+  }
 }
 
 @media (max-height: 960px) {

app/layout.tsx

@@ -9,11 +9,14 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"], weight: ["400", "700"] });
 
 export const metadata: Metadata = {
-  title: "Servicio AT",
+  title: {
+    default: "Servicio AT",
+    template: "Servicio AT | %s",
+  },
   description: "Servicio de administracion de la FES Acatlan",
   authors: [{ name: "FES Acatlán" }],
   creator: "Lino,Carlos,Axel",
-    icons: {
+  icons: {
     icon: "/icon.svg",
   },
 };
@@ -26,9 +29,9 @@ export default function RootLayout({
   return (
     <html lang="es">
       <body className={inter.className} suppressHydrationWarning>
-          <Header />
-          <main>{children}</main>
-          <Footer />
+        <Header />
+        <main>{children}</main>
+        <Footer />
       </body>
     </html>
   );

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