fixed select in active and the lock now can register ticket 1 month later

app/Components/Equipos/tableequipos.tsx

@@ -8,8 +8,30 @@ import Cookies from "js-cookie";
 
 import "./tableEquipos.css";
 
+type AreaUbicacion = {
+  id_area_ubicacion: number;
+  area: string;
+};
+
+type Equipo = {
+  id_equipo: number;
+  nombre_equipo: string;
+  ubicacion: string;
+  plataforma: {
+    nombre: string
+  };
+  areaUbicacion: {area:string};
+  ocupado: boolean;
+  activo: {
+    data: number[]
+  }
+};
+
 export default function TableEquipos() {
-  const [equipos, setEquipos] = useState<any[]>([]);
+  const [machines, setMachines] = useState<Equipo[]>([]);
+  const [areas, setAreas] = useState<AreaUbicacion[]>([]);
+  const [selectedArea, setSelectedArea] = useState("Todo");
+
   const [loading, setLoading] = useState(true);
 
   const token = Cookies.get("token");
@@ -22,7 +44,7 @@ export default function TableEquipos() {
         const response = await axios.get(`${envConfig.apiUrl}/equipo`,
           { headers },
         );
-        setEquipos(response.data);
+        setMachines(response.data);
       } catch (error: any) {
         console.error("ERROR API:", error.response?.data || error.message);
       } finally {
@@ -31,16 +53,33 @@ export default function TableEquipos() {
     };
 
     fetchEquipos();
+    fetchAreas();
+
   }, []);
 
+  const fetchAreas = async () => {
+    try {
+      const res = await axios.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/area-ubicacion`,
+        { headers },
+
+      );
+
+      setAreas(res.data);
+    } catch (error) {
+      console.error("Error cargando áreas:", error);
+    }
+  };
+
   const toggleEquipo = async (id_equipo: number) => {
     try {
       await axios.patch(
         `${envConfig.apiUrl}/equipo/${id_equipo}/activo`,
+        {},
         { headers },
       );
 
-      setEquipos((prev) =>
+      setMachines((prev) =>
         prev.map((e) =>
           e.id_equipo === id_equipo
             ? {
@@ -64,6 +103,14 @@ export default function TableEquipos() {
     return <p>Cargando equipos...</p>;
   }
 
+  const filteredMachines =
+    selectedArea === "Todo"
+      ? machines
+      : machines.filter(
+        (machine) => machine.areaUbicacion.area === selectedArea,
+      );
+
+
   return (
     <div
       style={{
@@ -81,9 +128,29 @@ export default function TableEquipos() {
             <th>Área</th>
             <th>Activo</th>
           </tr>
+          <tr style={{ position: "relative", zIndex: "0" }}>
+            <th />
+            <th />
+            <th />
+            <th>
+              <select
+                style={{ minWidth: "50px" }}
+                value={selectedArea}
+                onChange={(e) => setSelectedArea(e.target.value)}
+              >
+                <option value="Todo">Todo</option>
+                {areas.map((area) => (
+                  <option key={area.id_area_ubicacion} value={area.area}>
+                    {area.area}
+                  </option>
+                ))}
+              </select>
+            </th>
+            <th />
+          </tr>
         </thead>
         <tbody>
-          {equipos.map((eq) => {
+          {filteredMachines.map((eq) => {
             const isActivo = eq.activo?.data?.[0] === 1;
 
             return (
@@ -93,7 +160,7 @@ export default function TableEquipos() {
                 <td className={eq.plataforma?.nombre}>
                   {eq.plataforma?.nombre}
                 </td>
-                <td>{eq.areaUbicacion?.area || eq.id_area_ubicacion}</td>
+                <td>{eq.areaUbicacion.area}</td>
 
                 <td
                   style={{ display: "flex", alignItems: "center", gap: "5px" }}