added equipo by student

app/Components/CheckBoxEquipo.tsx

@@ -5,29 +5,36 @@ import SearchUser from "./Global/SearchUser/searchUser";
 import SearchBoxEquipo from "./SearchEquipo";
 
 export default function CheckBoxEquipo() {
-  const [Checkbox, setChecbox] = useState<string | null>(null);
+  const [modo, setModo] = useState<"Equipo" | "Cuenta" | null>(null);
+
   return (
     <>
-      <div className="checkbox-grid">
-        <label>
+      <div className="radio-grid">
+        <label className="radio-card">
           <input
-            type="checkbox"
-            onChange={() => setChecbox(Checkbox === "Equipo" ? null : "Equipo")}
-            checked={Checkbox === "Mesa"}
-          />{" "}
-          Equipo
+            type="radio"
+            name="modo"
+            checked={modo === "Equipo"}
+            onChange={() => setModo("Equipo")}
+          />
+          <span className="radio-ui"></span>
+          <span className="radio-text">Equipo</span>
         </label>
-        <label>
+
+        <label className="radio-card">
           <input
-            type="checkbox"
-            onChange={() => setChecbox(Checkbox === "Cuenta" ? null : "Cuenta")}
-            checked={Checkbox === "Cuenta"}
-          />{" "}
-          Cuenta
+            type="radio"
+            name="modo"
+            checked={modo === "Cuenta"}
+            onChange={() => setModo("Cuenta")}
+          />
+          <span className="radio-ui"></span>
+          <span className="radio-text">Cuenta</span>
         </label>
       </div>
-      {Checkbox === "Cuenta" ? <SearchUser value={"3"} /> : <></>}
-      {Checkbox === "Equipo" ? <SearchBoxEquipo /> : <></>}
+
+      {modo === "Cuenta" && <SearchUser value={"3"} />}
+      {modo === "Equipo" && <SearchBoxEquipo />}
     </>
   );
 }

app/Components/InformacionEquipos/SelectorEquipo.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+interface Equipos {
+  id_equipo: number;
+  id_plataforma: number;
+  id_area_ubicacion: number;
+  nombre_equipo: string;
+  ubicacion: string;
+  activo: boolean;
+  ip: string;
+  areaUbicacion:{area:string}
+  plataforma:{nombre:string}
+}
+
+
+interface Props {
+  onSearch: (id: number) => void;
+}
+
+export default function SelectorEquipo({ onSearch }: Props) {
+  const [sala, setSala] = useState<Equipos[]>();
+  const [selected, setSelected] = useState<number>();
+
+  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelected(Number(e.target.value));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!selected) return;
+    onSearch(selected);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await axios.get(`${envConfig.apiUrl}/equipo`);
+
+      setSala(response.data);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <form className="form-container" onSubmit={handleSubmit}>
+      <select value={selected} onChange={handleChangeEquipo}>
+        <option value="">-- Selecciona una equipo --</option>
+        {sala &&
+          sala.map((eq) => (
+          <option key={eq.id_equipo} value={eq.id_equipo}>
+            {eq.ubicacion } {eq.nombre_equipo} {eq.plataforma.nombre} {eq.areaUbicacion.area}
+          </option>
+          ))}
+      </select>
+    </form>
+  );
+}

app/Components/InformacionEquipos/SelectorSala.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { envConfig } from "@/app/lib/config";
 import axios from "axios";
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 interface Area {
   id_area_ubicacion: number;