From bc3c406fd0c7539b1b4efa3bc4fd911f0376dcc5 Mon Sep 17 00:00:00 2001
From: SirRobert-1 <rviverosgonzalez@gmail.com>
Date: Mon, 26 May 2025 08:53:51 -0600
Subject: [PATCH] fix: update import path for CursosManualForm component

---
 diplomas/src/components/cursosManualForm.jsx | 290 +++++++++++++++++++
 diplomas/src/pages/alumnosArchivo.jsx        |   2 +-
 2 files changed, 291 insertions(+), 1 deletion(-)
 create mode 100644 diplomas/src/components/cursosManualForm.jsx

diff --git a/diplomas/src/components/cursosManualForm.jsx b/diplomas/src/components/cursosManualForm.jsx
new file mode 100644
index 0000000..14719c1
--- /dev/null
+++ b/diplomas/src/components/cursosManualForm.jsx
@@ -0,0 +1,290 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cursosSchema } from "@/schemas/CursosSchema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { supabaseClient } from "@/utils/supabase";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+export function CursosManualForm({ nombreSugerido = "" }) {
+  const [addCompetencia, setAddCompetencia] = useState(false);
+  const [competenciasGuardadas, setCompetenciasGuardadas] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [mostrarDialog, setMostrarDialog] = useState(false);
+  const [mensajeDialog, setMensajeDialog] = useState("");
+  const [mostrarDialogCompetencia, setMostrarDialogCompetencia] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(cursosSchema),
+    defaultValues: {
+      nombre: nombreSugerido,
+      descripcion: "",
+      horas: 0,
+      nuevaCompetencia: "",
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = form;
+
+  const handleSaveCompetencia = async (e) => {
+    e.preventDefault();
+    const nuevaCompetencia = getValues("nuevaCompetencia").trim();
+    if (!nuevaCompetencia) return;
+
+    if (competenciasGuardadas.some((c) => c.descripcion === nuevaCompetencia)) {
+      alert("La competencia ya fue agregada.");
+      return;
+    }
+
+    let competenciaId = null;
+    try {
+      const { data: existente } = await supabaseClient
+        .from("competencia")
+        .select("id")
+        .eq("descripcion", nuevaCompetencia)
+        .maybeSingle();
+
+      if (existente && existente.id) {
+        competenciaId = existente.id;
+      } else {
+        const { data: insertada, error } = await supabaseClient
+          .from("competencia")
+          .insert([{ descripcion: nuevaCompetencia }])
+          .select("id")
+          .single();
+        if (error) throw error;
+        competenciaId = insertada.id;
+      }
+
+      setCompetenciasGuardadas([
+        ...competenciasGuardadas,
+        { id: competenciaId, descripcion: nuevaCompetencia },
+      ]);
+      setAddCompetencia(false);
+      setValue("nuevaCompetencia", "");
+      setMostrarDialogCompetencia(true);
+    } catch (err) {
+      alert("Error al guardar la competencia: " + (err.message || err));
+    }
+  };
+
+  const handleDeleteCompetencia = (index) => {
+    setCompetenciasGuardadas(
+      competenciasGuardadas.filter((_, i) => i !== index)
+    );
+  };
+
+  const onSubmit = async (data) => {
+    const { nombre, descripcion } = data;
+    const horas = parseInt(data.horas, 10);
+
+    setLoading(true);
+
+    try {
+      const { data: cursoInsertado, error: errorCurso } = await supabaseClient
+        .from("curso")
+        .insert([{ nombre, descripcion, horas }])
+        .select("id")
+        .single();
+
+      if (errorCurso) {
+        setMensajeDialog("Error al guardar el curso: " + errorCurso.message);
+        setMostrarDialog(true);
+        setLoading(false);
+        return;
+      }
+
+      const cursoId = cursoInsertado.id;
+      const relaciones = competenciasGuardadas.map((c) => ({
+        curso_id: cursoId,
+        competencia_id: c.id,
+      }));
+
+      if (relaciones.length > 0) {
+        const { error: errorPivote } = await supabaseClient
+          .from("curso_competencia")
+          .insert(relaciones);
+        if (errorPivote) {
+          setMensajeDialog(
+            "Error al asociar competencias: " + errorPivote.message
+          );
+          setMostrarDialog(true);
+          setLoading(false);
+          return;
+        }
+      }
+
+      setMensajeDialog("Curso guardado exitosamente");
+      setMostrarDialog(true);
+      form.reset();
+      setCompetenciasGuardadas([]);
+    } catch (err) {
+      alert("Ocurrió un error inesperado");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+      <Input
+        type="text"
+        placeholder="Nombre del curso"
+        {...register("nombre")}
+        className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
+      />
+      {errors.nombre && (
+        <p className="text-red-500 text-sm">{errors.nombre.message}</p>
+      )}
+
+      <Textarea
+        placeholder="Descripción"
+        {...register("descripcion")}
+        className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
+      />
+      {errors.descripcion && (
+        <p className="text-red-500 text-sm">{errors.descripcion.message}</p>
+      )}
+
+      <Input
+        type="number"
+        placeholder="Horas del curso"
+        {...register("horas", { valueAsNumber: true })}
+        className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
+      />
+      {errors.horas && (
+        <p className="text-red-500 text-sm">{errors.horas.message}</p>
+      )}
+
+      <h2 className="text-lg font-semibold mb-3 text-black">Competencias</h2>
+      <p className="text-xs text-gray-500 mb-2">
+        Puedes agregar competencias nuevas sin necesidad de crear un nuevo
+        curso. Las competencias se guardarán y podrás asociarlas a otros cursos
+        después.
+      </p>
+
+      {competenciasGuardadas.length > 0 && (
+        <div className="mt-5 w-full flex-wrap">
+          {competenciasGuardadas.map((competencia, index) => (
+            <div
+              key={index}
+              className="w-full flex justify-between items-center px-2 mb-2"
+            >
+              <span className="text-black">{competencia.descripcion}</span>
+              <Button
+                type="button"
+                onClick={() => handleDeleteCompetencia(index)}
+                className="bg-red-400 hover:bg-red-500 text-white font-bold py-1 px-3 rounded-md"
+              >
+                X
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {addCompetencia && (
+        <div className="w-full flex flex-col md:flex-row mt-5">
+          <div className="flex flex-col">
+            <Input
+              type="text"
+              placeholder="Nueva competencia"
+              {...register("nuevaCompetencia")}
+              className="w-80 px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
+            />
+            {errors.nuevaCompetencia && (
+              <p className="text-red-500 text-sm">
+                {errors.nuevaCompetencia.message}
+              </p>
+            )}
+          </div>
+          <div className="flex flex-row">
+            <Button
+              type="button"
+              onClick={handleSaveCompetencia}
+              className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md mr-2"
+            >
+              Guardar
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                setAddCompetencia(false);
+                setValue("nuevaCompetencia", "");
+              }}
+              className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
+            >
+              Cancelar
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <Button
+        type="button"
+        onClick={() => setAddCompetencia(true)}
+        className="w-full bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-md mt-5"
+      >
+        Agregar competencia
+      </Button>
+
+      <div className="flex justify-center w-full mt-5">
+        <Button
+          type="submit"
+          className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
+          disabled={loading}
+        >
+          {loading ? "Guardando..." : "Guardar curso"}
+        </Button>
+      </div>
+
+      <Dialog open={mostrarDialog} onOpenChange={setMostrarDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="text-black">Resultado</DialogTitle>
+            <DialogDescription>{mensajeDialog}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setMostrarDialog(false)}>Cerrar</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={mostrarDialogCompetencia}
+        onOpenChange={setMostrarDialogCompetencia}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="text-black">
+              Competencia agregada
+            </DialogTitle>
+            <DialogDescription>
+              ¡La competencia fue agregada exitosamente!
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button onClick={() => setMostrarDialogCompetencia(false)}>
+              Cerrar
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </form>
+  );
+}
diff --git a/diplomas/src/pages/alumnosArchivo.jsx b/diplomas/src/pages/alumnosArchivo.jsx
index 874f063..e6dfa24 100644
--- a/diplomas/src/pages/alumnosArchivo.jsx
+++ b/diplomas/src/pages/alumnosArchivo.jsx
@@ -12,7 +12,7 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { CursosManualForm } from "./cursosManual"; // Importa el formulario sin Layout
+import { CursosManualForm } from "@/components/cursosManualForm"; // Importa el formulario sin Layout
 import { supabaseClient } from "@/utils/supabase";
 
 export default function AlumnosArchivo() {