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

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}