feat: add telefono field to AlumnosManual and AlumnosVista, update CursosVista to include competencias in course data

diplomas/src/pages/alumnosManual.jsx

@@ -38,6 +38,7 @@ export default function AlumnosManual() {
     defaultValues: {
       nombre: "",
       correo: "",
+      telefono: "",
       cursoSeleccionado: "",
     },
   });
@@ -64,6 +65,7 @@ export default function AlumnosManual() {
         {
           nombre: data.nombre,
           correo: data.correo,
+          telefono: data.telefono,
           nombreCurso: data.cursoSeleccionado, // Guardar el nombre del curso
         },
       ]);
@@ -114,6 +116,19 @@ export default function AlumnosManual() {
                 </p>
               )}
             </div>
+            <div className="mb-3">
+              <Input
+                type="text"
+                placeholder="Teléfono"
+                {...register("telefono")}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+              {errors.telefono && (
+                <p className="text-red-500 text-sm mt-1">
+                  {errors.telefono.message}
+                </p>
+              )}
+            </div>
             <div className="mb-4">
               <Select
                 onValueChange={(value) => setValue("cursoSeleccionado", value)}

diplomas/src/pages/alumnosVista.jsx

@@ -19,12 +19,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { set } from "react-hook-form";
 
 export default function AlumnosVista() {
   const [alumnos, setAlumnos] = useState([]);
   const [alumnoEditando, setAlumnoEditando] = useState(null);
   const [nuevoNombre, setNuevoNombre] = useState("");
   const [nuevoCorreo, setNuevoCorreo] = useState("");
+  const [nuevoNumero, setNuevoNumero] = useState(""); 
   const [mostrarModal, setMostrarModal] = useState(false);
   const [modalMensaje, setModalMensaje] = useState("");
   const [nuevoCurso, setNuevoCurso] = useState("");
@@ -49,7 +51,10 @@ export default function AlumnosVista() {
   };
 
   const cargarAlumnos = async () => {
-    const { data, error } = await supabaseClient.from("alumno").select("*");
+    const { data, error } = await supabaseClient
+      .from("alumno")
+      .select("id, nombre, correo, telefono, curso_id, curso(nombre)")
+      .order("id", { ascending: true });
     if (error) {
       console.error("Error al cargar alumnos:", error.message);
     } else {
@@ -62,7 +67,8 @@ export default function AlumnosVista() {
     setAlumnoEditando(alumno.id);
     setNuevoNombre(alumno.nombre);
     setNuevoCorreo(alumno.correo);
-    setNuevoCurso(alumno.nombreCurso);
+    setNuevoNumero(alumno.telefono);
+    setNuevoCurso(alumno.curso_id);
   };
 
   // Cancelar edición
@@ -70,6 +76,7 @@ export default function AlumnosVista() {
     setAlumnoEditando(null);
     setNuevoNombre("");
     setNuevoCorreo("");
+    setNuevoNumero("");
     setNuevoCurso("");
   };
 
@@ -80,7 +87,8 @@ export default function AlumnosVista() {
       .update({
         nombre: nuevoNombre,
         correo: nuevoCorreo,
-        nombreCurso: nuevoCurso,
+        telefono: nuevoNumero,
+        curso_id: nuevoCurso,
       })
       .eq("id", id);
 
@@ -127,6 +135,7 @@ export default function AlumnosVista() {
               <th className="py-2 border-b">ID</th>
               <th className="py-2 border-b">Nombre</th>
               <th className="py-2 border-b">Correo</th>
+              <th className="py-2 border-b">Teléfono</th>
               <th className="py-2 border-b">Curso</th>
               <th className="py-2 border-b">Acciones</th>
             </tr>
@@ -152,6 +161,13 @@ export default function AlumnosVista() {
                       onChange={(e) => setNuevoCorreo(e.target.value)}
                     />
                   </td>
+                  <td className="py-2 px-4 border-b">
+                    <Input
+                      type="text"
+                      value={nuevoNumero}
+                      onChange={(e) => setNuevoNumero(e.target.value)}
+                    />
+                  </td>
                   <td className="py-2 px-4 border-b">
                     <Select
                       value={nuevoCurso}
@@ -162,7 +178,7 @@ export default function AlumnosVista() {
                       </SelectTrigger>
                       <SelectContent>
                         {cursos.map((curso) => (
-                          <SelectItem key={curso.id} value={curso.nombre}>
+                          <SelectItem key={curso.id} value={curso.id.toString()}>
                             {curso.nombre}
                           </SelectItem>
                         ))}
@@ -189,7 +205,8 @@ export default function AlumnosVista() {
                   <td className="py-2 px-4 border-b">{alumno.id}</td>
                   <td className="py-2 px-4 border-b">{alumno.nombre}</td>
                   <td className="py-2 px-4 border-b">{alumno.correo}</td>
-                  <td className="py-2 px-4 border-b">{alumno.nombreCurso}</td>
+                  <td className="py-2 px-4 border-b">{alumno.telefono}</td>
+                  <td className="py-2 px-4 border-b">{alumno.curso?.nombre || "Sin curso"}</td>
                   <td className="py-2 px-4 border-b space-x-2">
                     <Button
                       className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"

diplomas/src/pages/cursosVista.jsx

@@ -31,11 +31,30 @@ export default function CursosVista() {
   }, []);
 
   const cargarCursos = async () => {
-    const { data, error } = await supabaseClient.from("curso").select("*");
+    const { data, error } = await supabaseClient
+      .from("curso")
+      .select(`
+        id,
+        nombre,
+        descripcion,
+        horas,
+        curso_competencia (
+          competencia (
+            id,
+            nombre
+          )
+        )
+      `)
+      .order("id", { ascending: true });
     if (error) {
       console.error("Error al cargar cursos:", error.message);
     } else {
-      setCursos(data);
+      // Transformar los datos para que las competencias estén directamente en el objeto curso
+      const cursosConCompetencias = data.map((curso) => ({
+        ...curso,
+        competencias: curso.curso_competencia.map((cc) => cc.competencia),
+      }));
+      setCursos(cursosConCompetencias);
     }
   };
 
@@ -62,7 +81,7 @@ export default function CursosVista() {
         nombre: nuevoNombre,
         descripcion: nuevaDescripcion,
         horas: nuevaHoras,
-        competencias: competenciasGuardadas,
+        //competencias: competenciasGuardadas,
       })
       .eq("id", id);
 
@@ -105,6 +124,7 @@ export default function CursosVista() {
         <table className="min-w-full bg-white border">
           <thead>
             <tr className="bg-gray-100">
+              <th className="py-2 border-b">ID</th>
               <th className="py-2 border-b">Nombre</th>
               <th className="py-2 border-b">Descripción</th>
               <th className="py-2 border-b">Horas</th>
@@ -116,6 +136,7 @@ export default function CursosVista() {
             {cursos.map((curso) =>
               cursoEditando === curso.id ? (
                 <tr key={curso.id}>
+                  <td className="py-2 px-4 border-b text-center">{curso.id}</td>
                   <td className="py-2 px-4 border-b">
                     <Input
                       value={nuevoNombre}
@@ -166,17 +187,19 @@ export default function CursosVista() {
                   <td className="py-2 px-4 border-b">{curso.descripcion}</td>
                   <td className="py-2 px-4 border-b">{curso.horas}</td>
                   <td className="py-2 px-4 border-b">
-                    {curso.competencias.join(", ")}
+                    {Array.isArray(curso.competencias) && curso.competencias.length > 0
+                      ? curso.competencias.map((comp) => comp.nombre).join(", ")
+                      : "Sin competencias"}
                   </td>
-                  <td className="py-2 border-b flex">
+                  <td className="py-2 px-4 border-b space-x-2">
                     <Button
-                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded m-1"
+                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
                       onClick={() => iniciarEdicion(curso)}
                     >
                       Editar
                     </Button>
                     <Button
-                      className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded m-1"
+                      className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
                       onClick={() => confirmarEliminacion(curso.id)}
                     >
                       Eliminar