feat: add next-themes and sonner dependencies; implement Toaster component for notifications

diplomas/package-lock.json

@@ -28,11 +28,13 @@
         "lucide-react": "^0.488.0",
         "mysql2": "^3.14.1",
         "next": "15.3.0",
+        "next-themes": "^0.4.6",
         "papaparse": "^5.5.2",
         "qrcode": "^1.5.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.56.2",
+        "sonner": "^2.0.5",
         "tailwind-merge": "^3.2.0",
         "tw-animate-css": "^1.2.5",
         "xlsx": "^0.18.5",
@@ -6317,6 +6319,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -7399,6 +7410,15 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.5.tgz",
+      "integrity": "sha512-YwbHQO6cSso3HBXlbCkgrgzDNIhws14r4MO87Ofy+cV2X7ES4pOoAK3+veSmVTvqNx1BWUxlhPmZzP00Crk2aQ==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

diplomas/package.json

@@ -29,11 +29,13 @@
     "lucide-react": "^0.488.0",
     "mysql2": "^3.14.1",
     "next": "15.3.0",
+    "next-themes": "^0.4.6",
     "papaparse": "^5.5.2",
     "qrcode": "^1.5.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.2",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.5",
     "xlsx": "^0.18.5",

diplomas/src/components/dialogs/vistaPreviaDiplomaDialog.jsx

@@ -13,6 +13,7 @@ import { useForm } from "react-hook-form";
 import { mensajesSchema } from "@/schemas/mensajesSchema";
 import { Textarea } from "../ui/textarea";
 import QRCode from "qrcode";
+import { toast } from "sonner";
 
 function VistaPreviaDiplomaDialog({
   open,
@@ -105,6 +106,7 @@ function VistaPreviaDiplomaDialog({
     }
 
     setMensaje("Mensajes guardados correctamente.");
+    toast.success("Mensajes guardados correctamente.");
   };
 
   useEffect(() => {
@@ -216,7 +218,7 @@ function VistaPreviaDiplomaDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full h-screen text-black overflow-y-auto">
+      <DialogContent className="h-screen w-full text-black overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Diploma</DialogTitle>
         </DialogHeader>
@@ -331,7 +333,7 @@ function VistaPreviaDiplomaDialog({
         {/* Vista previa PDF */}
         {mostrarVistaPrevia && (
           <div className="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50">
-            <div className="bg-white rounded shadow-lg p-4">
+            <div className="bg-white w-full rounded shadow-lg p-4">
               <div className="w-full h-[90vh] mb-4 border">
                 <PDFViewer width="100%" height="100%">
                   <Diploma

diplomas/src/components/ui/sonner.jsx

@@ -0,0 +1,24 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner";
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    (<Sonner
+      theme={theme}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)"
+        }
+      }
+      {...props} />)
+  );
+}
+
+export { Toaster }

diplomas/src/pages/_app.js

@@ -1,5 +1,11 @@
 import "@/styles/globals.css";
+import { Toaster } from "sonner";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Toaster richColors position="top-right" />
+      <Component {...pageProps} />;
+    </>
+  );
 }

diplomas/src/pages/alumnosVista.jsx

@@ -334,7 +334,7 @@ export default function AlumnosVista() {
                       {alumno.tipo_formacion === "pildora" &&
                         alumno.pildoras?.nombre}
                     </td>
-                    <td className="py-2 px-4 border-b">
+                    <td className="py-2 px-4 border-b flex justify-center">
                       <button
                         onClick={() => iniciarEdicion(alumno)}
                         className="bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded mr-2"

diplomas/src/pages/diplomasVista.jsx

@@ -146,7 +146,7 @@ export default function DiplomasVista() {
       {/* Dialog para crear diploma y vista previa juntos */}
       {mostrarDialog && (
         <div className="fixed inset-0 z-50 flex items-center justify-center w-screen">
-          <div className="flex gap-8 bg-black bg-opacity-30 p-8 rounded">
+          <div className="flex bg-black bg-opacity-30 p-8 rounded">
             <VistaPreviaDiplomaDialog
               open={mostrarDialog}
               onOpenChange={handleCloseDialog}