feat: add navigation warning dialog to prevent data loss on route change

diplomas/src/pages/alumnosArchivo.jsx

@@ -12,8 +12,9 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { CursosManualForm } from "@/components/cursosManualForm"; // Importa el formulario sin Layout
+import { CursosManualForm } from "@/components/cursosManualForm";
 import { supabaseClient } from "@/utils/supabase";
+import { useRouter } from "next/router";
 
 export default function AlumnosArchivo() {
   const [archivo, setArchivo] = useState(null);
@@ -22,11 +23,32 @@ export default function AlumnosArchivo() {
   const [mensajeDialogo, setMensajeDialogo] = useState("");
   const [mostrarDialogCurso, setMostrarDialogCurso] = useState(false);
   const [cursoFaltante, setCursoFaltante] = useState("");
+  const [dialogoAdvertencia, setDialogoAdvertencia] = useState(false);
+  const [rutaPendiente, setRutaPendiente] = useState(null);
+  const router = useRouter();
 
   useEffect(() => {
     if (archivo) extraerContenido();
+    // eslint-disable-next-line
   }, [archivo]);
 
+  useEffect(() => {
+    const handleRouteChange = (url) => {
+      if (archivo && datos.length > 0) {
+        setDialogoAdvertencia(true);
+        setRutaPendiente(url);
+        // Cancelar navegación
+        throw "Bloqueo de navegación por archivo pendiente";
+      }
+    };
+
+    router.events.on("routeChangeStart", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [archivo, datos, router]);
+
   const registrarAlumnos = async () => {
     if (datos.length === 0) return;
 
@@ -65,7 +87,7 @@ export default function AlumnosArchivo() {
           nombre: alumno.nombre,
           correo: alumno.correo,
           telefono: alumno.telefono,
-          curso_id: cursosEncontrados.id, // Usar el id del curso
+          curso_id: cursosEncontrados.id,
         }),
       });
 
@@ -235,6 +257,38 @@ export default function AlumnosArchivo() {
           </DialogHeader>
         </DialogContent>
       </Dialog>
+
+      {/* Dialog de advertencia de navegación */}
+      <Dialog open={dialogoAdvertencia} onOpenChange={setDialogoAdvertencia}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="text-black">Advertencia</DialogTitle>
+            <DialogDescription>
+              Si cambias de ventana perderás la subida del archivo. ¿Deseas
+              continuar?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              className="bg-red-500 hover:bg-red-700 text-white"
+              onClick={() => {
+                setDialogoAdvertencia(false);
+                setArchivo(null);
+                setDatos([]);
+                if (rutaPendiente) router.push(rutaPendiente);
+              }}
+            >
+              Sí, continuar
+            </Button>
+            <Button
+              className="bg-gray-400 hover:bg-gray-600 text-white"
+              onClick={() => setDialogoAdvertencia(false)}
+            >
+              Cancelar
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Layout>
   );
 }