feat: refactor diploma dialogs to improve structure and user experience, including enhanced layout and state management

diplomas/src/components/dialogs/crearDiplomaDialog.jsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
@@ -15,7 +16,7 @@ const DISEÑOS = [
   { id: 2, nombre: "Diseño Moderno" },
 ];
 
-function CrearDiplomaDialog({
+export default function CrearDiplomaDialog({
   open,
   onOpenChange,
   alumno,
@@ -26,13 +27,13 @@ function CrearDiplomaDialog({
   fecha,
   setFecha,
 }) {
-  const [diseñoSeleccionado, setDiseñoSeleccionado] = useState(
-    DISEÑOS[0]?.id || null
-  );
+  const [diseñoSeleccionado, setDiseñoSeleccionado] = useState(DISEÑOS[0]?.id || null);
 
   const toggleCompetencia = (id) => {
     setCompetenciasAcreditadas((prev) =>
-      prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
+      prev.includes(id)
+        ? prev.filter((cid) => cid !== id)
+        : [...prev, id]
     );
   };
 
@@ -43,64 +44,61 @@ function CrearDiplomaDialog({
         .select("competencia(id, descripcion)")
         .eq("curso_id", alumno.curso.id)
         .then(({ data }) => {
-          const comps = data?.map((c) => c.competencia) || [];
+          const comps = data?.map((c) => c.competencia).filter(Boolean) || [];
           setCompetencias(comps);
           setCompetenciasAcreditadas(comps.map((c) => c.id)); // todas seleccionadas por default
         });
     }
-  }, [alumno]);
+  }, [alumno, setCompetencias, setCompetenciasAcreditadas]);
 
   const handleCrearDiploma = async () => {
     // Aquí va la lógica para crear el diploma en la base de datos
-    // 1. Insertar en Diploma
-    // 2. Insertar en Diploma_Competencia
-    // 3. (Opcional) Generar PDF y enviar
-
-    // Ejemplo de inserción (ajusta según tu lógica real)
-    // await supabaseClient.from("Diploma").insert({...});
-    // await supabaseClient.from("Diploma_Competencia").insert([...]);
-
     onOpenChange(false);
-    // Aquí puedes mostrar un mensaje de éxito o iniciar la generación del PDF
   };
 
-  if (!alumno) return null;
+  if (!open || !alumno) return null;
 
   return (
-    <div className="text-black p-4">
-      <h2 className="text-xl font-bold mb-4">Crear Diploma</h2>
-      <div className="mb-2">
-        <label className="block text-sm font-semibold mb-1">
-          Competencias:
-        </label>
-        {competencias.map((comp) => (
-          <div key={comp.id} className="flex items-center mb-1">
-            <input
-              type="checkbox"
-              checked={competenciasAcreditadas.includes(comp.id)}
-              onChange={() => toggleCompetencia(comp.id)}
-              className="mr-2"
-            />
-            <span>{comp.descripcion}</span>
-          </div>
-        ))}
-      </div>
-      <div className="w-full flex justify-around">
-        <Button
-          onClick={handleCrearDiploma}
-          className="bg-green-500 hover:bg-green-700 text-white"
-        >
-          Crear Diploma
-        </Button>
-        <Button
-          onClick={() => onOpenChange(false)}
-          className="bg-gray-400 hover:bg-gray-600 text-white"
-        >
-          Cancelar
-        </Button>
-      </div>
-    </div>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[400px]">
+        <DialogHeader>
+          <DialogTitle>Crear Diploma</DialogTitle>
+          <DialogDescription>
+            Selecciona las competencias acreditadas para el diploma.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mb-2">
+          <label className="block text-sm font-semibold mb-1">Competencias:</label>
+          {competencias.map((comp) => (
+            <div key={comp.id} className="flex items-center mb-1">
+              <input
+                type="checkbox"
+                checked={competenciasAcreditadas.includes(comp.id)}
+                onChange={() => toggleCompetencia(comp.id)}
+                className="mr-2"
+              />
+              <span>{comp.descripcion}</span>
+            </div>
+          ))}
+        </div>
+        <div className="mb-2">
+          <label className="block text-sm font-semibold mb-1">Fecha:</label>
+          <input
+            type="date"
+            className="border p-1 w-full"
+            value={fecha}
+            onChange={e => setFecha(e.target.value)}
+          />
+        </div>
+        <DialogFooter>
+          <Button onClick={handleCrearDiploma} className="bg-green-500 hover:bg-green-700 text-white">
+            Crear Diploma
+          </Button>
+          <Button onClick={() => onOpenChange(false)} className="bg-gray-400 hover:bg-gray-600 text-white">
+            Cancelar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
-
-export default CrearDiplomaDialog;

diplomas/src/components/dialogs/vistaPreviaDiplomaDialog.jsx

@@ -19,12 +19,14 @@ function VistaPreviaDiplomaDialog({
 }) {
   const [mostrarVistaPrevia, setMostrarVistaPrevia] = useState(false);
 
-  if (!alumno) return null;
+  if (!open || !alumno) return null;
 
-  const competenciasMostradas =
-    Array.isArray(competenciasAcreditadas) && competenciasAcreditadas.length > 0
-      ? competencias.filter((comp) => competenciasAcreditadas.includes(comp.id))
-      : [];
+  // Filtra solo las competencias seleccionadas si se pasa el array de acreditadas
+  const competenciasMostradas = Array.isArray(competenciasAcreditadas)
+    ? (Array.isArray(competencias) ? competencias : []).filter((comp) =>
+        competenciasAcreditadas.includes(comp.id)
+      )
+    : (Array.isArray(competencias) ? competencias : []);
 
   const competenciasParaPDF =
     Array.isArray(competenciasMostradas) && competenciasMostradas.length > 0
@@ -32,8 +34,8 @@ function VistaPreviaDiplomaDialog({
       : [];
 
   return (
-    <div className="text-black p-4">
-      <h2 className="text-xl font-bold mb-4">Diploma</h2>
+    <div className="bg-white border shadow-lg rounded p-8 w-[500px] h-[350px] mx-4 flex flex-col text-black">
+      <h2 className="text-2xl font-bold text-center mb-6">Diploma</h2>
       <div className="text-lg mb-2">
         <b>Alumno:</b> {alumno.nombre}
       </div>
@@ -51,61 +53,9 @@ function VistaPreviaDiplomaDialog({
       <div className="text-lg mb-2">
         <b>Fecha:</b> {fecha || new Date().toLocaleDateString()}
       </div>
-      <div className="mt-4 flex justify-around">
-        <PDFDownloadLink
-          document={
-            <Diploma
-              alumno={alumno}
-              curso={alumno.curso}
-              competencias={competenciasParaPDF}
-              fecha={fecha || new Date().toLocaleDateString()}
-            />
-          }
-          fileName={`Diploma_${alumno.nombre}.pdf`}
-        >
-          {({ loading }) =>
-            loading ? (
-              <Button className="bg-gray-300 px-4 py-2 rounded" disabled>
-                Generando PDF...
-              </Button>
-            ) : (
-              <Button className="bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded">
-                Descargar PDF
-              </Button>
-            )
-          }
-        </PDFDownloadLink>
-        <Button
-          className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded"
-          onClick={() => setMostrarVistaPrevia(true)}
-        >
-          Vista previa
-        </Button>
+      <div className="mt-auto text-gray-400 text-xs text-right">
+        Vista previa
       </div>
-
-      {/* Vista previa del PDF */}
-      {mostrarVistaPrevia && (
-        <div className="fixed inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center z-50">
-          <div className="bg-white rounded shadow-lg p-4 flex flex-col items-center">
-            <div className="w-[80vw] h-[80vh] mb-4 border">
-              <PDFViewer width="100%" height="100%">
-                <Diploma
-                  alumno={alumno}
-                  curso={alumno.curso}
-                  competencias={competenciasParaPDF}
-                  fecha={fecha || new Date().toLocaleDateString()}
-                />
-              </PDFViewer>
-            </div>
-            <Button
-              className="bg-red-500 hover:bg-red-700 text-white px-4 py-2 rounded"
-              onClick={() => setMostrarVistaPrevia(false)}
-            >
-              Cerrar vista previa
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

diplomas/src/pages/diplomasVista.jsx

@@ -4,7 +4,6 @@ import { supabaseClient } from "@/utils/supabase";
 import { Button } from "@/components/ui/button";
 import CrearDiplomaDialog from "@/components/dialogs/crearDiplomaDialog";
 import VistaPreviaDiplomaDialog from "@/components/dialogs/vistaPreviaDiplomaDialog";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 export default function DiplomasVista() {
   const [alumnos, setAlumnos] = useState([]);
@@ -80,33 +79,30 @@ export default function DiplomasVista() {
         </table>
       </div>
       {/* Dialog para crear diploma y vista previa juntos */}
-      <Dialog open={mostrarDialog} onOpenChange={handleCloseDialog}>
-        <DialogContent className="min-w-4xl">
-          <div className="flex flex-row gap-8">
-            <div className="w-[350px]">
-              <CrearDiplomaDialog
-                onOpenChange={handleCloseDialog}
-                alumno={alumnoSeleccionado}
-                competencias={competencias}
-                setCompetencias={setCompetencias}
-                competenciasAcreditadas={competenciasAcreditadas}
-                setCompetenciasAcreditadas={setCompetenciasAcreditadas}
-                fecha={fecha}
-                setFecha={setFecha}
-              />
-            </div>
-            <div className="w-[400px]">
-              <VistaPreviaDiplomaDialog
-                onOpenChange={handleCloseDialog}
-                alumno={alumnoSeleccionado}
-                competencias={competencias}
-                fecha={fecha}
-                competenciasAcreditadas={competenciasAcreditadas}
-              />
-            </div>
+      {mostrarDialog && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <div className="flex gap-8 bg-black bg-opacity-30 p-8 rounded">
+            <CrearDiplomaDialog
+              open={mostrarDialog}
+              onOpenChange={handleCloseDialog}
+              alumno={alumnoSeleccionado}
+              competencias={competencias}
+              setCompetencias={setCompetencias}
+              competenciasAcreditadas={competenciasAcreditadas}
+              setCompetenciasAcreditadas={setCompetenciasAcreditadas}
+              fecha={fecha}
+              setFecha={setFecha}
+            />
+            <VistaPreviaDiplomaDialog
+              open={mostrarDialog}
+              alumno={alumnoSeleccionado}
+              competencias={competencias}
+              fecha={fecha}
+              competenciasAcreditadas={competenciasAcreditadas}
+            />
           </div>
-        </DialogContent>
-      </Dialog>
+        </div>
+      )}
     </Layout>
   );
 }