just fixed styles

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -1,6 +1,10 @@
 "use client";
 import SearchDate from "../SearchDate/SearchDate";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+import "../../(private)/AsignacionEquipo/asignacion.css"
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
 
 interface equipos {
   hora_entrada: string;
@@ -11,22 +15,75 @@ interface equipos {
 
 function BitacoraEquipo() {
   const [equipo, setEquipo] = useState<equipos[]>([]);
-  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
+  const [open, setOpen] = useState(false);
+  const [loadingEquipos, setLoadingEquipos] = useState(false);
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
+  const [equipos, setEquipos] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoadingEquipos(true);
+      const response = await axios.get(`${envConfig.apiUrl}/equipo`);
+      setEquipos(response.data);
+      setLoadingEquipos(false);
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <>
-      <form className="containerForm">
-        <label className="label">Ubicacion de equipo</label>
+      <label>Seleccione un equipo</label>
 
-        <div className="groupInput">
-          <select
-            value={ubicacion_equipo}
-            onChange={(e) => setUbicacionEquipo(e.target.value)}
+      <div className="groupInput">
+        <div
+          className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
+        >
+          <div
+            className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
+            onClick={() => !loadingEquipos && setOpen(!open)}
           >
-            <option value="">-- Selecciona un equipo --</option>
-            <option value="255">Equipo 255</option>
-          </select>
+            {equipoSeleccionado ? (
+              <span
+              >
+                {equipoSeleccionado.ubicacion}{" "}
+                {equipoSeleccionado.nombre_equipo}
+              </span>
+            ) : (
+              <span className="placeholder">
+                {loadingEquipos
+                  ? "Cargando equipos..."
+                  : "Seleccione un equipo"}
+              </span>
+            )}
+
+            <span className="arrow">{open ? "▲" : "▼"}</span>
+          </div>
+
+          {open && (
+            <div className="options" style={{ bottom: "auto"}}>
+              {equipos.length === 0 && (
+                <div className="option disabled">
+                  No hay equipos disponibles
+                </div>
+              )}
+
+              {equipos.map((eq) => (
+                <div
+                  key={eq.id_equipo}
+                  className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
+                  onClick={() => {
+                    setEquipoSeleccionado(eq);
+                    setOpen(false);
+                  }}
+                >
+                  {eq.ubicacion} {eq.nombre_equipo}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
-      </form>
+      </div>
       <SearchDate />
       <div>
         <table>

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -38,7 +38,7 @@ function QuitarSancion({ id_cuenta }: { id_cuenta: number }) {
 
   return (
     <section className="containerSection">
-      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
+        <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
       {(alumnoSanciones?.length > 0) &&
         <button
           className="button buttonSearch"