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}

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}