PROGRAMS 85%

app/(private)/Programas/page.tsx

@@ -1,41 +1,63 @@
 "use client";
-import { useState } from "react";
+
+import { useState, useEffect } from "react";
 import styleprograms from "./programas.module.css";
+import { Interface } from "readline";
+
+  interface Programa {
+  id_programa: number;
+  programa: string;
+}
 
 export default function Page() {
   const [modo, setModo] = useState("ver");
 
-  const handleNuevo = () => {
-    setModo("nuevo");
-  };
+  const [programaSeleccionado, setProgramaSeleccionado] = useState("");
+  const [programas, setProgramas] = useState<Programa[]>([]);
 
-  const handleEditar = () => {
-    setModo("editar");
-  };
+  useEffect(() => {
+    fetch("http://localhost:5000/programa/")
+      .then((res) => res.json())
+      .then((data) => setProgramas(data))
+      .catch((error) => console.error("Error al cargar programas:", error));
+  }, []);
 
-  const handleCancelar = () => {
-    setModo("ver");
-  };
+  const handleNuevo = () => setModo("nuevo");
+  const handleEditar = () => setModo("editar");
+  const handleCancelar = () => setModo("ver");
 
   return (
     <section className="containerSection">
+
+      {}
       {modo === "ver" && (
         <section className="containersection">
           <h3 className="title">PROGRAMAS</h3>
-          <label className="label">ID:2</label>
+          <label className="label">ID: 2</label>
+
           <h2>Programa</h2>
-          <select>
-            <option value="0"></option>
-            <option value="1">ADOBE CREATIVE SUITE</option>
-            <option value="2">mmmmm</option>
-            <option value="3">mmmmm</option>
-            <option value="4">mmmmm</option>
-            <option value="5">mmmmm</option>
+
+          <select
+            value={programaSeleccionado}
+            onChange={(e) => setProgramaSeleccionado(e.target.value)}
+          >
+            <option value="">Selecciona un programa</option>
+
+            {programas.map((programa) => (
+              <option key={programa.id_programa} value={programa.id_programa}>
+                {programa.programa}
+              </option>
+            ))}
           </select>
+
           <div className="margin">
-            <button className="button buttonSearch" onClick={handleEditar}>
+            <button
+              className="button buttonSearch"
+              onClick={handleEditar}
+            >
               Editar
             </button>
+
             <button
               className={`button buttonSearch ${styleprograms.button}`}
               onClick={handleNuevo}
@@ -46,20 +68,28 @@ export default function Page() {
         </section>
       )}
 
+      {}
       {modo === "editar" && (
         <section className="containersection">
-          <h2 className="title">Editar Programa:</h2>
-          <label className="label">ID:2</label>
-          <select>
-            <option value="0">Elige</option>
-            <option value="1">ADOBE CREATIVE</option>
-            <option value="2">.....</option>
-            <option value="3">.....</option>
-            <option value="4">.....</option>
-            <option value="5">.....</option>
+          <h2 className="title">Editar Programa</h2>
+          <label className="label">ID: {programaSeleccionado}</label>
+
+          <select
+            value={programaSeleccionado}
+            onChange={(e) => setProgramaSeleccionado(e.target.value)}
+          >
+            <option value="">Elige un programa</option>
+
+            {programas.map((programa) => (
+              <option key={programa.id_programa} value={programa.id_programa}>
+                {programa.programa}
+              </option>
+            ))}
           </select>
+
           <div className="margin">
             <button className="button buttonSearch">Guardar</button>
+
             <button
               className={`button buttonCancel ${styleprograms.button}`}
               onClick={handleCancelar}
@@ -70,13 +100,17 @@ export default function Page() {
         </section>
       )}
 
+      {}
       {modo === "nuevo" && (
         <section className="containersection">
           <h2 className="title">Nuevo Programa</h2>
+
           <label className="label">Programa</label>
-          <input type="text" placeholder="Coloca el programa " />
+          <input type="text" placeholder="Coloca el programa" />
+
           <div className="margin">
             <button className="button buttonSearch">Insertar</button>
+
             <button
               className={`button buttonCancel ${styleprograms.button}`}
               onClick={handleCancelar}