added new boton to refresh monitor and modified search machine and merge Carlos

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

@@ -193,7 +193,7 @@ export default function UserPage() {
                 </button>
             </div>
 
-            <div style={{ overflow: "auto", maxHeight: "400px" }}>
+            <div style={{ overflow: "auto", maxHeight: "350px" }}>
                 <table>
                     <thead>
                         <tr>

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/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}

proxy.ts

@@ -42,7 +42,7 @@ export async function proxy(request: NextRequest) {
         "/Monitor",
         "/ActivosMantenimiento",
         "/Periodo",
-         "/Usuarios",
+        "/Usuarios",
       ];
 
       if (role === 5 && !onlyImpresiones.includes(pathname)) {
@@ -68,7 +68,7 @@ export const config = {
   matcher: [
     "/",
     "/Reportes",
-     "/Usuarios",
+    "/Usuarios",
     "/Periodo",
     "/Monitor",
     "/QuitarSancion",