feat: add QR code generation and display in Diploma component; implement AlumnoId page for detailed student information

2025-06-14 20:44:25 -06:00 · 2025-06-14 20:44:25 -06:00 · 9da79ac36c
parent b6e916c679
commit 9da79ac36c
5 changed files with 394 additions and 4 deletions
--- a/diplomas/package-lock.json
+++ b/diplomas/package-lock.json
@ -29,6 +29,7 @@
        "mysql2": "^3.14.1",
        "next": "15.3.0",
        "papaparse": "^5.5.2",
+        "qrcode": "^1.5.4",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-hook-form": "^7.56.2",
@ -3084,11 +3085,18 @@
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/ansi-styles": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
      "dependencies": {
        "color-convert": "^2.0.1"
      },
@ -3509,6 +3517,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001714",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001714.tgz",
@ -3572,6 +3588,16 @@
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
    "node_modules/clone": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@ -3613,7 +3639,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
      "dependencies": {
        "color-name": "~1.1.4"
      },
@ -3802,6 +3827,14 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@ -3893,6 +3926,11 @@
      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q=="
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
    "node_modules/diplomas": {
      "resolved": "",
      "link": true
@ -4883,6 +4921,14 @@
        "is-property": "^1.0.2"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/get-intrinsic": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@ -5372,6 +5418,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-generator-function": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
@ -6494,6 +6548,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/pako": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@ -6533,7 +6595,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -6578,6 +6639,14 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/possible-typed-array-names": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@ -6665,6 +6734,22 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/qs": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@ -6876,6 +6961,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@ -6884,6 +6977,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "node_modules/resolve": {
      "version": "1.22.10",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@ -7108,6 +7206,11 @@
        "node": ">= 18"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@ -7353,6 +7456,24 @@
        "safe-buffer": "~5.2.0"
      }
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
    "node_modules/string.prototype.includes": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@ -7460,6 +7581,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-bom": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@ -8028,6 +8160,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
    "node_modules/which-typed-array": {
      "version": "1.1.19",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
@ -8074,6 +8211,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@ -8119,6 +8269,92 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/diplomas/package.json
+++ b/diplomas/package.json
@ -30,6 +30,7 @@
    "mysql2": "^3.14.1",
    "next": "15.3.0",
    "papaparse": "^5.5.2",
+    "qrcode": "^1.5.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.56.2",
--- a/diplomas/src/components/Diploma.jsx
+++ b/diplomas/src/components/Diploma.jsx
@ -33,9 +33,15 @@ const styles = StyleSheet.create({
    fontSize: 10,
    color: "#888",
  },
+  qr: {
+    marginTop: 30,
+    alignSelf: "center",
+    width: 100,
+    height: 100,
+  },
 });

-export default function Diploma({ alumno, formacion, fecha }) {
+export default function Diploma({ alumno, formacion, fecha, qr }) {
  // formacion: { tipo, nombre, competencias }
  let tipoTexto = "formación";
  if (formacion?.tipo === "curso") tipoTexto = "curso";
@ -77,6 +83,10 @@ export default function Diploma({ alumno, formacion, fecha }) {
        <Text style={styles.title}>
          Se expide en la ciudad de Xalapa, Ver., {fecha}
        </Text>
+        {qr && <Image src={qr} style={styles.qr} />}
+        <Text style={styles.footer}>
+          Verifica este diploma en: https://localhost:3000/alumno/{alumno?.id}
+        </Text>
      </Page>
    </Document>
  );
--- a/diplomas/src/components/dialogs/vistaPreviaDiplomaDialog.jsx
+++ b/diplomas/src/components/dialogs/vistaPreviaDiplomaDialog.jsx
@ -12,6 +12,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { mensajesSchema } from "@/schemas/mensajesSchema";
 import { Textarea } from "../ui/textarea";
+import QRCode from "qrcode";

 function VistaPreviaDiplomaDialog({
  open,
@ -27,6 +28,7 @@ function VistaPreviaDiplomaDialog({
  const [mensaje, setMensaje] = useState("");
  const [loadingMensajes, setLoadingMensajes] = useState(false);
  const [competencias, setCompetencias] = useState([]);
+  const [qrDataUrl, setQrDataUrl] = useState("");

  const form = useForm({
    resolver: zodResolver(mensajesSchema),
@ -44,6 +46,15 @@ function VistaPreviaDiplomaDialog({
    formState: { errors },
  } = form;

+  useEffect(() => {
+    if (alumno?.id) {
+      const url = `https://localhost:3000/alumno/${alumno.id}`;
+      QRCode.toDataURL(url, { width: 200 }, (err, url) => {
+        if (!err) setQrDataUrl(url);
+      });
+    }
+  }, [alumno]);
+
  // 🔄 Cargar mensajes al abrir el modal
  useEffect(() => {
    if (open) {
@ -269,6 +280,7 @@ function VistaPreviaDiplomaDialog({
                alumno={alumno}
                formacion={datosFormacion}
                fecha={fecha || new Date().toLocaleDateString()}
+                qr={qrDataUrl}
              />
            }
            fileName={`Diploma_${alumno.nombre}.pdf`}
@ -326,6 +338,7 @@ function VistaPreviaDiplomaDialog({
                    alumno={alumno}
                    formacion={datosFormacion}
                    fecha={fecha || new Date().toLocaleDateString()}
+                    qr={qrDataUrl}
                  />
                </PDFViewer>
              </div>
--- a/diplomas/src/pages/alumno/[id].jsx
+++ b/diplomas/src/pages/alumno/[id].jsx
@ -0,0 +1,130 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { supabaseClient } from "@/utils/supabase";
+import { Card } from "@/components/ui/card";
+
+export default function AlumnoId() {
+  const router = useRouter();
+  const { id } = router.query;
+  const [alumno, setAlumno] = useState(null);
+  const [formacionNombre, setFormacionNombre] = useState("");
+  const [competencias, setCompetencias] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    const fetchAlumno = async () => {
+      // Traer datos del alumno y su formación
+      const { data, error } = await supabaseClient
+        .from("alumno")
+        .select(
+          `
+            id, nombre, correo, tipo_formacion, 
+            curso(id, nombre), 
+            inyeccion(id, nombre), 
+            pildoras(id, nombre)
+          `
+        )
+        .eq("id", id)
+        .single();
+
+      if (data) {
+        setAlumno(data);
+        let nombreFormacion = "";
+        if (data.tipo_formacion === "curso")
+          nombreFormacion = data.curso?.nombre || "";
+        if (data.tipo_formacion === "inyeccion")
+          nombreFormacion = data.inyeccion?.nombre || "";
+        if (data.tipo_formacion === "pildora")
+          nombreFormacion = data.pildoras?.nombre || "";
+        setFormacionNombre(nombreFormacion);
+
+        // Traer competencias según tipo
+        if (data.tipo_formacion === "curso" && data.curso?.id) {
+          const { data: comps } = await supabaseClient
+            .from("curso_competencia")
+            .select("competencia(id, descripcion)")
+            .eq("curso_id", data.curso.id);
+          setCompetencias(comps?.map((c) => c.competencia) || []);
+        } else if (data.tipo_formacion === "inyeccion" && data.inyeccion?.id) {
+          const { data: comps } = await supabaseClient
+            .from("inyeccion_competencia_inyeccion")
+            .select("competencia_inyeccion(id, descripcion)")
+            .eq("inyeccion_id", data.inyeccion.id);
+          setCompetencias(comps?.map((c) => c.competencia_inyeccion) || []);
+        } else {
+          setCompetencias([]);
+        }
+      }
+      setLoading(false);
+    };
+    fetchAlumno();
+  }, [id]);
+
+  if (loading) return <div className="text-black p-10">Cargando...</div>;
+  if (!alumno)
+    return <div className="text-black p-10">Alumno no encontrado</div>;
+
+  return (
+    <Card className="max-w-xl mx-auto mt-10 bg-white rounded shadow p-8 text-black">
+      <img
+        src="/encabezado.png"
+        alt="Encabezado"
+        className="w-full h-32 object-cover mb-6"
+      />
+      <h1 className="text-2xl font-bold mb-4">Diploma de {alumno.nombre}</h1>
+      <p>
+        <b>Nombre:</b> {alumno.nombre}
+      </p>
+      <p>
+        <b>Correo:</b> {alumno.correo}
+      </p>
+      <p>
+        <b>Tipo de formación:</b>{" "}
+        {alumno.tipo_formacion === "curso"
+          ? "Curso"
+          : alumno.tipo_formacion === "inyeccion"
+          ? "Inyección"
+          : alumno.tipo_formacion === "pildora"
+          ? "Píldora"
+          : ""}
+      </p>
+      <p>
+        <b>
+          {alumno.tipo_formacion === "curso"
+            ? "Curso"
+            : alumno.tipo_formacion === "inyeccion"
+            ? "Inyección"
+            : alumno.tipo_formacion === "pildora"
+            ? "Píldora"
+            : "Formación"}
+          :
+        </b>{" "}
+        {formacionNombre}
+      </p>
+      {(alumno.tipo_formacion === "curso" ||
+        alumno.tipo_formacion === "inyeccion") && (
+        <div className="mt-4">
+          <b>Competencias:</b>
+          <ul className="list-disc ml-6">
+            {competencias.map((comp) => (
+              <li key={comp.id}>{comp.descripcion}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <div className="mt-8 text-lg font-semibold text-green-700">
+        Felicidades {alumno.nombre} por haber concluido tu{" "}
+        {alumno.tipo_formacion === "curso"
+          ? "curso"
+          : alumno.tipo_formacion === "inyeccion"
+          ? "inyección"
+          : alumno.tipo_formacion === "pildora"
+          ? "píldora"
+          : "formación"}{" "}
+        {formacionNombre}, agradecemos tu participación, te esperamos pronto por
+        aquí para seguir formando tu camino.
+      </div>
+    </Card>
+  );
+}