From d2313208803b10d7887bb4bae368c5b24f9616f9 Mon Sep 17 00:00:00 2001
From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx>
Date: Wed, 8 Oct 2025 11:40:11 -0600
Subject: [PATCH] peticion

---
 app/(private)/InformacionEquipo/page.tsx      |  2 +-
 .../InformacionEquipos/ProgramSelector.tsx    |  6 ++-
 app/Components/SelectAreas.jsx                | 39 +++++++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 app/Components/SelectAreas.jsx

diff --git a/app/(private)/InformacionEquipo/page.tsx b/app/(private)/InformacionEquipo/page.tsx
index e664473..822caa7 100644
--- a/app/(private)/InformacionEquipo/page.tsx
+++ b/app/(private)/InformacionEquipo/page.tsx
@@ -8,7 +8,7 @@ import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
-    key?:string;
+    key?: string;
     machine?: string;
     success?: string;
     error?: string;
diff --git a/app/Components/InformacionEquipos/ProgramSelector.tsx b/app/Components/InformacionEquipos/ProgramSelector.tsx
index fd0cf9d..0459d34 100644
--- a/app/Components/InformacionEquipos/ProgramSelector.tsx
+++ b/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) => (
diff --git a/app/Components/SelectAreas.jsx b/app/Components/SelectAreas.jsx
new file mode 100644
index 0000000..380f1dc
--- /dev/null
+++ b/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>
+  );
+}