benito

diplomas/src/components/app-sidebar.jsx

@@ -21,6 +21,10 @@ const data = {
     {
       title: "Alumnos",
       items: [
+        {
+          title: "Vista de alumnos",
+          url: "/alumnosVista",
+        },
         {
           title: "Agregar manualmente",
           url: "/alumnosManual",
@@ -34,6 +38,14 @@ const data = {
     {
       title: "Cursos",
       items: [
+        {
+          title: "Vista de cursos",
+          url: "/cursosVista",
+        },
+        {
+          title: "Agregar curso",
+          url: "/cursosManual",
+        },
         {
           title: "Agregar curso manualmente",
           url: "/cursosManual",

diplomas/src/pages/alumnos.js

@@ -1,69 +0,0 @@
-export default function Alumnos() {
-  return (
-    <div className="p-6 max-w-xl mx-auto space-y-6">
-      <h1 className="text-2xl font-bold">Alta de Alumnos</h1>
-
-      <form className="space-y-4">
-        {/* Nombre */}
-        <div>
-          <label className="block font-medium">Nombre del alumno</label>
-          <input
-            type="text"
-            placeholder="Juan Pérez"
-            className="w-full px-4 py-2 border rounded-md shadow-sm"
-          />
-        </div>
-
-        {/* Correo */}
-        <div>
-          <label className="block font-medium">Correo electrónico</label>
-          <input
-            type="email"
-            placeholder="correo@ejemplo.com"
-            className="w-full px-4 py-2 border rounded-md shadow-sm"
-          />
-        </div>
-
-        {/* Curso */}
-        <div>
-          <label className="block font-medium">Curso</label>
-          <select className="w-full px-4 py-2 border rounded-md shadow-sm">
-            <option>Selecciona un curso</option>
-            <option>Curso 1</option>
-            <option>Curso 2</option>
-          </select>
-        </div>
-
-        {/* Tipo de diploma */}
-        <div>
-          <label className="block font-medium">Tipo de Diploma</label>
-          <select className="w-full px-4 py-2 border rounded-md shadow-sm">
-            <option>Píldora</option>
-            <option>Inyección</option>
-            <option>Micro grado</option>
-          </select>
-        </div>
-      
-
-        {/* Términos y condiciones */}
-        <div className="flex items-center space-x-2">
-          <input type="checkbox" id="terminos" className="w-4 h-4" />
-          <label htmlFor="terminos">
-            Acepto los{" "}
-            <a href="/terminos" target="_blank" className="underline text-blue-600">
-              términos y condiciones
-            </a>
-          </label>
-        </div>
-
-        {/* Botón de enviar */}
-        <button
-          type="submit"
-          className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
-        >
-          Registrar alumno
-        </button>
-      </form>
-    </div>
-  );
-}

diplomas/src/pages/alumnosManual.jsx

@@ -57,7 +57,7 @@ export default function AlumnosManual() {
 
   return (
     <Layout>
-      <div className="w-[60vw] pt-10 flex flex-col items-end justify-center">
+      <div className="w-[60vw] pt-10 flex flex-col items-end justify-center text-black">
         <div className="bg-white p-8 font-sans text-center w-[70%]">
           <h1 className="text-xl font-semibold mb-4 text-black">Nuevo alumno</h1>
           <Input
@@ -92,7 +92,7 @@ export default function AlumnosManual() {
 
           <Button
             onClick={manejarGuardar}
-            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
+            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md text-black"
           >
             Guardar
           </Button>

diplomas/src/pages/alumnosVista.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import Layout from "@/components/layout/Layout";
+import { supabase } from "@/lib/supabaseClient";
+
+export default function AlumnosVista() {
+  const [alumnos, setAlumnos] = useState([]);
+
+  useEffect(() => {
+    const cargarAlumnos = async () => {
+      const { data, error } = await supabase.from("alumno").select("*");
+      if (error) {
+        console.error("Error al cargar alumnos:", error.message);
+      } else {
+        setAlumnos(data);
+      }
+    };
+    cargarAlumnos();
+  }, []);
+
+  return (
+    <Layout>
+      <div className="w-[80vw] pt-10 flex flex-col items-center text-black">
+        <h1 className="text-2xl font-semibold mb-6 text-black">Lista de Alumnos</h1>
+        <table className="min-w-full bg-white border">
+          <thead>
+            <tr>
+              <th className="py-2 px-4 border-b">ID</th>
+              <th className="py-2 px-4 border-b">Nombre</th>
+              <th className="py-2 px-4 border-b">Correo</th>
+            </tr>
+          </thead>
+          <tbody>
+            {alumnos.map((alumno) => (
+              <tr key={alumno.id}>
+                <td className="py-2 px-4 border-b text-center">{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>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+}

diplomas/src/pages/cursosManual.jsx

@@ -14,7 +14,8 @@ import { supabase } from "@/lib/supabaseClient";
 
 const CursosManual = () => {
   const [nombre, setNombre] = useState("");
-  const [descripcion, setDescripcion] = useState(""); 
+  const [descripcion, setDescripcion] = useState("");
+  const [horas, setHoras] = useState(""); 
   const [competencia, setCompetencia] = useState("");
   const [loading, setLoading] = useState(false); 
 
@@ -24,7 +25,7 @@ const CursosManual = () => {
       {
         nombre,
         descripcion,
-        horas: 10, // o usa otro input para personalizar
+        horas, 
         competencias: [competencia], // si es una sola, usa string. Si son varias, un array.
       },
     ]);
@@ -36,6 +37,7 @@ const CursosManual = () => {
       alert("Curso guardado correctamente");
       setNombre("");
       setDescripcion("");
+      setHoras("");
       setCompetencia("");
     }
   };
@@ -50,16 +52,23 @@ const CursosManual = () => {
             placeholder="Nombre del curso"
             value={nombre}
             onChange={(e) => setNombre(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
           />
           <Textarea
             placeholder="Descripción"
             value={descripcion}
             onChange={(e) => setDescripcion(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black" 
+          />
+          <Input
+            type="number"
+            placeholder="Horas del curso"
+            value={horas}
+            onChange={(e) => setHoras(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
           />
           <Select onValueChange={(value) => setCompetencia(value)}>
-            <SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4">
+            <SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4 text-black">
               <SelectValue placeholder="Competencia" />
             </SelectTrigger>
             <SelectContent>
@@ -69,7 +78,7 @@ const CursosManual = () => {
           </Select>
           <Button
             onClick={manejarGuardar}
-            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
+            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md text-black"
             disabled={loading}
           >
             {loading ? "Guardando..." : "Guardar"}

diplomas/src/pages/cursosVista.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import Layout from "@/components/layout/Layout";
+import { supabase } from "@/lib/supabaseClient";
+
+export default function CursosVista() {
+  const [cursos, setCursos] = useState([]);
+
+  useEffect(() => {
+    const cargarCursos = async () => {
+      const { data, error } = await supabase.from("curso").select("*");
+      if (error) {
+        console.error("Error al cargar cursos:", error.message);
+      } else {
+        setCursos(data);
+      }
+    };
+    cargarCursos();
+  }, []);
+
+  return (
+    <Layout>
+      <div className="w-[80vw] pt-10 flex flex-col items-center text-black">
+        <h1 className="text-2xl font-semibold mb-6 text-black">Lista de Cursos</h1>
+        <table className="min-w-full bg-white border">
+          <thead>
+            <tr>
+              <th className="py-2 px-4 border-b">ID</th>
+              <th className="py-2 px-4 border-b">Nombre</th>
+              <th className="py-2 px-4 border-b">Descripción</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cursos.map((curso) => (
+              <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">{curso.nombre}</td>
+                <td className="py-2 px-4 border-b">{curso.descripcion}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Layout>
+  );
+}