benito
This commit is contained in:
BenitoBB
parent
b658bf9496
commit
4e25a7fd1a
diplomas/src
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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"}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue