Merge branch 'Carlos' of https://github.com/IO420/Nexus into Lino

app/(private)/InformacionEquipo/page.tsx

@@ -6,7 +6,7 @@ import "./informacionequipo.css";
 
 export default async function Page(props: {
   searchParams?: Promise<{
-    key?:string;
+    key?: string;
     machine?: string;
   }>;
 }) {

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -51,7 +51,6 @@ function ProgramSelector({ titulo, opcion }: DatosEquipo) {
     programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
   );
 
-  // Función al cambiar el select
   const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const equipo = e.target.value;
     setEquipoSeleccionado(equipo);
@@ -74,10 +73,13 @@ function ProgramSelector({ titulo, opcion }: DatosEquipo) {
       Object.keys(checkboxes).filter((p) => checkboxes[p])
     );
   };
-  //hola madefoker
+
   return (
     <form className="form-container" onSubmit={handleSubmit}>
       <label>{titulo}</label>
+
+      <SelectAreas />
+
       <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
         <option value="">-- Selecciona un equipo --</option>
         {opcion.map((eq, i) => (

app/Components/SelectAreas.jsx

@@ -0,0 +1,39 @@
+"use clien";
+import React, { useEffect, useState } from "react";
+
+export default function SelectAreas() {
+  const [areas, setAreas] = useState([]); // aquí guardaremos los datos del servidor
+  const [selectedArea, setSelectedArea] = useState("");
+
+  // useEffect se ejecuta una vez al montar el componente
+  useEffect(() => {
+    fetch("https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion")
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Áreas obtenidas:", data);
+        setAreas(data);
+      })
+      .catch((error) => {
+        console.error("Error al traer las áreas:", error);
+      });
+  }, []);
+
+  const handleChange = (e) => {
+    setSelectedArea(e.target.value);
+    console.log("Área seleccionada:", e.target.value);
+  };
+
+  return (
+    <div>
+      <label htmlFor="areaSelect">Selecciona un área:</label>
+      <select id="areaSelect" value={selectedArea} onChange={handleChange}>
+        <option value="">-- Selecciona una opción --</option>
+        {areas.map((area) => (
+          <option key={area.id_area} value={area.id_area}>
+            {area.nombre_area}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}