From f61ef39cd1a7b1e477f2848197f02bd638c115c2 Mon Sep 17 00:00:00 2001
From: mayankyadav19 <hatmario06@gmail.com>
Date: Sat, 6 Jun 2026 11:04:56 +0530
Subject: [PATCH] feat: implement-qr-generation-for-class-invite-link

---
 package-lock.json           |  17 ++++++
 package.json                |   2 +
 src/app/rooms/[id]/page.tsx | 117 +++++++++++++++++++++++++++++++++---
 3 files changed, 129 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d06de1a8..dffa931e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "framer-motion": "^12.40.0",
         "google-tts-api": "^0.0.6",
         "groq-sdk": "1.1.1",
+        "html-to-image": "^1.11.13",
         "inngest": "^4.4.0",
         "input-otp": "1.4.2",
         "jspdf": "^4.2.1",
@@ -67,6 +68,7 @@
         "next-themes": "0.4.6",
         "pdf-parse": "2.4.5",
         "pdf-parse-fork": "1.2.0",
+        "qrcode.react": "^4.2.0",
         "react": "18.3.1",
         "react-day-picker": "9.4.1",
         "react-dom": "18.3.1",
@@ -15622,6 +15624,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -20928,6 +20936,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
diff --git a/package.json b/package.json
index 3f9881b0..381381c3 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "framer-motion": "^12.40.0",
     "google-tts-api": "^0.0.6",
     "groq-sdk": "1.1.1",
+    "html-to-image": "^1.11.13",
     "inngest": "^4.4.0",
     "input-otp": "1.4.2",
     "jspdf": "^4.2.1",
@@ -70,6 +71,7 @@
     "next-themes": "0.4.6",
     "pdf-parse": "2.4.5",
     "pdf-parse-fork": "1.2.0",
+    "qrcode.react": "^4.2.0",
     "react": "18.3.1",
     "react-day-picker": "9.4.1",
     "react-dom": "18.3.1",
diff --git a/src/app/rooms/[id]/page.tsx b/src/app/rooms/[id]/page.tsx
index dc9ea460..d1028e41 100644
--- a/src/app/rooms/[id]/page.tsx
+++ b/src/app/rooms/[id]/page.tsx
@@ -9,6 +9,7 @@ import {
 import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useAppUser } from "../../provider";
+import { QRCodeCanvas } from "qrcode.react";
 import {
   Brain,
   MessageSquare,
@@ -324,6 +325,21 @@ export default function ClassroomPage() {
     }
   };
 
+  const downloadQr = () => {
+    const canvas = document.getElementById(
+      "invite-qr"
+    ) as HTMLCanvasElement;
+
+    if (!canvas) return;
+
+    const url = canvas.toDataURL("image/png");
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "classroom-invite-qr.png";
+    link.click();
+  };
+
   const copyInviteLink = async () => {
     if (!inviteUrl) return;
 
@@ -1019,13 +1035,100 @@ export default function ClassroomPage() {
               </button>
             </div>
 
-            <div className="space-y-5">
-              {/* Current Invite Code */}
-              <div className="rounded-xl border border-slate-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-900 p-4">
-                <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
-                  Current Invite Code
-                </p>
-                <code className="text-2xl font-black text-blue-600 dark:text-blue-400 tracking-wider">
+            <div className="space-y-4">
+              <div className="rounded-xl border border-blue-200 dark:border-blue-900/60 bg-blue-50 dark:bg-blue-950/20 p-4">
+                <div className="flex items-start gap-3">
+                  <Sparkles className="mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0" />
+                  <div className="space-y-1">
+                    <h3 className="text-sm font-bold text-slate-900 dark:text-white">
+                      Secure Invite Link
+                    </h3>
+                    <p className="text-xs font-medium leading-relaxed text-slate-600 dark:text-zinc-400">
+                      This creates a non-guessable invite link that expires in 7
+                      days. Students can use it to join this classroom directly.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <button
+                onClick={generateInviteLink}
+                disabled={isGeneratingInvite}
+                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-xl font-bold uppercase tracking-wider text-[11px] transition-all duration-300 shadow-md shadow-blue-600/10 active:scale-[0.98]"
+                aria-label="Generate secure invite link"
+              >
+                {isGeneratingInvite ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" /> Generating...
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="w-4 h-4" /> Generate Secure Invite Link
+                  </>
+                )}
+              </button>
+
+              {inviteUrl && (
+                <div className="flex flex-col lg:flex-row gap-6 items-start">
+                  {/* Left side */}
+                  <div className="flex-1">
+                    <div className="rounded-xl border border-slate-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-900 p-4">
+                      <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
+                        Invite link
+                      </p>
+
+                      <div className="flex gap-2">
+                        <input
+                          value={inviteUrl}
+                          readOnly
+                          className="min-w-0 flex-1 rounded-lg border border-slate-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-xs"
+                        />
+
+                        <button
+                          onClick={copyInviteLink}
+                          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg"
+                        >
+                          <Copy className="w-3.5 h-3.5" />
+                          Copy
+                        </button>
+                      </div>
+                    </div>
+
+                    {inviteExpiresAt && (
+                      <p className="mt-3 text-center text-[11px] font-semibold text-slate-500">
+                        Expires on {new Date(inviteExpiresAt).toLocaleString()}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Right side */}
+                  <div className="flex flex-col items-center gap-3 shrink-0">
+                    <div className="bg-white p-3 rounded-xl">
+                      <QRCodeCanvas
+                        id="invite-qr"
+                        value={inviteUrl}
+                        size={180}
+                      />
+                    </div>
+
+                    <button
+                      onClick={downloadQr}
+                      className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg"
+                    >
+                      Download QR
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="border-t border-slate-200 dark:border-zinc-900 pt-5 space-y-3">
+              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
+                Existing class code fallback
+              </p>
+
+              <div className="bg-slate-50 dark:bg-zinc-900 border border-slate-200 dark:border-zinc-800 rounded-xl p-4 flex items-center justify-between gap-4 relative group overflow-hidden shadow-inner">
+                <code className="text-3xl font-black text-blue-600 dark:text-blue-400 tracking-wider relative z-10">
                   {classroom?.inviteCode}
                 </code>
               </div>