From 2ff77f0b8d9a98cc2dd2dc7d3d59aa951f7a37bd Mon Sep 17 00:00:00 2001
From: "Adebanjo Abraham.I" <navigatorabraham17@gmail.com>
Date: Fri, 8 May 2026 14:57:29 +0100
Subject: [PATCH 1/3] feat: implement responsive sidebar and mobile drawer for
 DeskLayout

---
 .../components/Desk/DeskLayout.jsx            | 179 +++++++++++-------
 1 file changed, 111 insertions(+), 68 deletions(-)

diff --git a/web3nova-revamp/components/Desk/DeskLayout.jsx b/web3nova-revamp/components/Desk/DeskLayout.jsx
index 2041d89..8efffe4 100644
--- a/web3nova-revamp/components/Desk/DeskLayout.jsx
+++ b/web3nova-revamp/components/Desk/DeskLayout.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-import { Users, UserCheck, Clock, LogOut, Wifi, RefreshCw } from "lucide-react";
+import { Users, UserCheck, Clock, LogOut, Wifi, RefreshCw, Menu, X } from "lucide-react";
 import { getToken, clearToken, deskFetch } from "@/lib/deskApi";
 
 const NAV = [
@@ -10,12 +10,85 @@ const NAV = [
   { href: "/desk/attendance", label: "Attendance", icon: Clock },
 ];
 
+function Sidebar({ router, hub, syncing, syncMsg, syncHubIp, logout, onClose }) {
+  return (
+    <aside className="w-60 bg-zinc-950 flex flex-col h-full">
+      <div className="px-5 py-6 border-b border-zinc-900 flex items-center justify-between">
+        <div>
+          <div className="text-lg font-semibold">Desk</div>
+          <div className="text-xs text-zinc-500">Web3Nova</div>
+        </div>
+        {onClose && (
+          <button onClick={onClose} className="text-zinc-400 hover:text-white md:hidden">
+            <X size={18} />
+          </button>
+        )}
+      </div>
+
+      <nav className="flex-1 py-4">
+        {NAV.map(({ href, label, icon: Icon }) => {
+          const active = router.pathname === href;
+          return (
+            <Link
+              key={href}
+              href={href}
+              onClick={onClose}
+              className={`flex items-center gap-3 px-5 py-2.5 text-sm ${
+                active
+                  ? "bg-zinc-900 text-white border-l-2 border-white"
+                  : "text-zinc-400 hover:text-white hover:bg-zinc-900/50"
+              }`}
+            >
+              <Icon size={16} />
+              {label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="border-t border-zinc-900 px-5 py-4 space-y-2">
+        <div className="flex items-center gap-2 text-xs text-zinc-500">
+          <Wifi size={12} />
+          <span className="font-mono truncate">{hub?.current_ip || "not set"}</span>
+        </div>
+        {hub?.updated_at && (
+          <div className="text-[10px] text-zinc-600">
+            updated {new Date(hub.updated_at).toLocaleString()}
+          </div>
+        )}
+        <button
+          onClick={syncHubIp}
+          disabled={syncing}
+          className="w-full flex items-center justify-center gap-2 text-xs bg-zinc-900 hover:bg-zinc-800 disabled:opacity-50 text-zinc-300 py-2 rounded border border-zinc-800"
+        >
+          <RefreshCw size={12} className={syncing ? "animate-spin" : ""} />
+          {syncing ? "syncing..." : "Sync hub IP"}
+        </button>
+        {syncMsg && (
+          <div className={`text-[10px] ${syncMsg.type === "ok" ? "text-emerald-400" : "text-red-400"}`}>
+            {syncMsg.text}
+          </div>
+        )}
+      </div>
+
+      <button
+        onClick={logout}
+        className="flex items-center gap-3 px-5 py-3 text-sm text-zinc-400 hover:text-red-400 border-t border-zinc-900"
+      >
+        <LogOut size={16} />
+        Sign out
+      </button>
+    </aside>
+  );
+}
+
 export default function DeskLayout({ children, title }) {
   const router = useRouter();
   const [ready, setReady] = useState(false);
   const [hub, setHub] = useState(null);
   const [syncing, setSyncing] = useState(false);
   const [syncMsg, setSyncMsg] = useState(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     if (!getToken()) {
@@ -26,6 +99,9 @@ export default function DeskLayout({ children, title }) {
     }
   }, [router]);
 
+  // Close drawer on route change
+  useEffect(() => { setDrawerOpen(false); }, [router.pathname]);
+
   async function syncHubIp() {
     setSyncing(true);
     setSyncMsg(null);
@@ -47,78 +123,45 @@ export default function DeskLayout({ children, title }) {
 
   if (!ready) return null;
 
+  const sidebarProps = { router, hub, syncing, syncMsg, syncHubIp, logout };
+
   return (
     <div className="min-h-screen bg-black text-white flex">
-      <aside className="w-60 border-r border-zinc-900 bg-zinc-950 flex flex-col">
-        <div className="px-5 py-6 border-b border-zinc-900">
-          <div className="text-lg font-semibold">Desk</div>
-          <div className="text-xs text-zinc-500">Web3Nova</div>
-        </div>
 
-        <nav className="flex-1 py-4">
-          {NAV.map(({ href, label, icon: Icon }) => {
-            const active = router.pathname === href;
-            return (
-              <Link
-                key={href}
-                href={href}
-                className={`flex items-center gap-3 px-5 py-2.5 text-sm ${
-                  active
-                    ? "bg-zinc-900 text-white border-l-2 border-white"
-                    : "text-zinc-400 hover:text-white hover:bg-zinc-900/50"
-                }`}
-              >
-                <Icon size={16} />
-                {label}
-              </Link>
-            );
-          })}
-        </nav>
-
-        <div className="border-t border-zinc-900 px-5 py-4 space-y-2">
-          <div className="flex items-center gap-2 text-xs text-zinc-500">
-            <Wifi size={12} />
-            <span className="font-mono truncate">
-              {hub?.current_ip || "not set"}
-            </span>
-          </div>
-          {hub?.updated_at && (
-            <div className="text-[10px] text-zinc-600">
-              updated {new Date(hub.updated_at).toLocaleString()}
-            </div>
-          )}
-          <button
-            onClick={syncHubIp}
-            disabled={syncing}
-            className="w-full flex items-center justify-center gap-2 text-xs bg-zinc-900 hover:bg-zinc-800 disabled:opacity-50 text-zinc-300 py-2 rounded border border-zinc-800"
-          >
-            <RefreshCw size={12} className={syncing ? "animate-spin" : ""} />
-            {syncing ? "syncing..." : "Sync hub IP"}
-          </button>
-          {syncMsg && (
-            <div
-              className={`text-[10px] ${
-                syncMsg.type === "ok" ? "text-emerald-400" : "text-red-400"
-              }`}
-            >
-              {syncMsg.text}
-            </div>
-          )}
-        </div>
+      {/* Desktop sidebar */}
+      <div className="hidden md:flex w-60 border-r border-zinc-900 flex-col">
+        <Sidebar {...sidebarProps} />
+      </div>
 
-        <button
-          onClick={logout}
-          className="flex items-center gap-3 px-5 py-3 text-sm text-zinc-400 hover:text-red-400 border-t border-zinc-900"
-        >
-          <LogOut size={16} />
-          Sign out
-        </button>
-      </aside>
+      {/* Mobile drawer overlay */}
+      {drawerOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/60 md:hidden"
+          onClick={() => setDrawerOpen(false)}
+        />
+      )}
+
+      {/* Mobile drawer */}
+      <div className={`fixed inset-y-0 left-0 z-50 w-64 border-r border-zinc-900 flex flex-col transform transition-transform duration-200 md:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`}>
+        <Sidebar {...sidebarProps} onClose={() => setDrawerOpen(false)} />
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col min-w-0">
+
+        {/* Mobile top bar */}
+        <header className="md:hidden flex items-center gap-3 px-4 py-3 border-b border-zinc-900 bg-zinc-950">
+          <button onClick={() => setDrawerOpen(true)} className="text-zinc-400 hover:text-white">
+            <Menu size={20} />
+          </button>
+          <span className="text-sm font-semibold">{title || "Desk"}</span>
+        </header>
 
-      <main className="flex-1 p-8 overflow-auto">
-        {title && <h1 className="text-2xl font-semibold mb-6">{title}</h1>}
-        {children}
-      </main>
+        <main className="flex-1 p-4 md:p-8 overflow-auto">
+          {title && <h1 className="hidden md:block text-2xl font-semibold mb-6">{title}</h1>}
+          {children}
+        </main>
+      </div>
     </div>
   );
 }

From d109b26824e3f5dcc996c4c84911f252562e358d Mon Sep 17 00:00:00 2001
From: "Adebanjo Abraham.I" <navigatorabraham17@gmail.com>
Date: Fri, 8 May 2026 15:18:42 +0100
Subject: [PATCH 2/3] feat: update Sidebar component for improved mobile
 navigation accessibility

---
 web3nova-revamp/components/Desk/DeskLayout.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web3nova-revamp/components/Desk/DeskLayout.jsx b/web3nova-revamp/components/Desk/DeskLayout.jsx
index 8efffe4..3542d84 100644
--- a/web3nova-revamp/components/Desk/DeskLayout.jsx
+++ b/web3nova-revamp/components/Desk/DeskLayout.jsx
@@ -12,14 +12,14 @@ const NAV = [
 
 function Sidebar({ router, hub, syncing, syncMsg, syncHubIp, logout, onClose }) {
   return (
-    <aside className="w-60 bg-zinc-950 flex flex-col h-full">
+    <aside className="w-full bg-zinc-950 flex flex-col h-full">
       <div className="px-5 py-6 border-b border-zinc-900 flex items-center justify-between">
         <div>
           <div className="text-lg font-semibold">Desk</div>
           <div className="text-xs text-zinc-500">Web3Nova</div>
         </div>
         {onClose && (
-          <button onClick={onClose} className="text-zinc-400 hover:text-white md:hidden">
+          <button type="button" onClick={onClose} aria-label="Close navigation" className="text-zinc-400 hover:text-white md:hidden">
             <X size={18} />
           </button>
         )}
@@ -142,16 +142,18 @@ export default function DeskLayout({ children, title }) {
       )}
 
       {/* Mobile drawer */}
-      <div className={`fixed inset-y-0 left-0 z-50 w-64 border-r border-zinc-900 flex flex-col transform transition-transform duration-200 md:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`}>
-        <Sidebar {...sidebarProps} onClose={() => setDrawerOpen(false)} />
-      </div>
+      {drawerOpen && (
+        <div className="fixed inset-y-0 left-0 z-50 w-60 border-r border-zinc-900 flex flex-col md:hidden">
+          <Sidebar {...sidebarProps} onClose={() => setDrawerOpen(false)} />
+        </div>
+      )}
 
       {/* Main content */}
       <div className="flex-1 flex flex-col min-w-0">
 
         {/* Mobile top bar */}
         <header className="md:hidden flex items-center gap-3 px-4 py-3 border-b border-zinc-900 bg-zinc-950">
-          <button onClick={() => setDrawerOpen(true)} className="text-zinc-400 hover:text-white">
+          <button type="button" onClick={() => setDrawerOpen(true)} aria-label="Open navigation" className="text-zinc-400 hover:text-white">
             <Menu size={20} />
           </button>
           <span className="text-sm font-semibold">{title || "Desk"}</span>

From 5472439a5c96ce2989688554ce3d8ff834d5472d Mon Sep 17 00:00:00 2001
From: "Adebanjo Abraham.I" <navigatorabraham17@gmail.com>
Date: Tue, 12 May 2026 16:34:16 +0100
Subject: [PATCH 3/3] feat: enhance ApplicantModal and ApplicationForm for
 improved user experience and passkey creation flow

---
 .../components/Desk/ApplicantModal.jsx        | 30 +++----
 .../components/Internship/ApplicationForm.jsx | 83 ++++++++++---------
 2 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/web3nova-revamp/components/Desk/ApplicantModal.jsx b/web3nova-revamp/components/Desk/ApplicantModal.jsx
index 32afc26..4d2f1c4 100644
--- a/web3nova-revamp/components/Desk/ApplicantModal.jsx
+++ b/web3nova-revamp/components/Desk/ApplicantModal.jsx
@@ -44,23 +44,23 @@ export default function ApplicantModal({ matric, onClose }) {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           onClick={onClose}
-          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-3 sm:p-4"
         >
           <motion.div
             initial={{ opacity: 0, y: 12, scale: 0.98 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 12, scale: 0.98 }}
             onClick={(e) => e.stopPropagation()}
-            className="bg-zinc-950 border border-zinc-800 rounded-2xl max-w-2xl w-full max-h-[85vh] overflow-auto"
+            className="bg-zinc-950 border border-zinc-800 rounded-2xl w-full sm:max-w-2xl max-h-[90vh] sm:max-h-[85vh] overflow-auto"
           >
-            <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-900 sticky top-0 bg-zinc-950">
-              <h2 className="font-semibold">Applicant Details</h2>
+            <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-zinc-900 sticky top-0 bg-zinc-950">
+              <h2 className="font-semibold text-sm sm:text-base">Applicant Details</h2>
               <button onClick={onClose} className="text-zinc-400 hover:text-white">
                 <X size={18} />
               </button>
             </div>
 
-            <div className="p-6">
+            <div className="p-4 sm:p-6">
               {error && (
                 <div className="text-sm text-red-400 bg-red-950/30 border border-red-900/50 rounded-lg px-3 py-2">
                   {error}
@@ -75,7 +75,7 @@ export default function ApplicantModal({ matric, onClose }) {
 
               {data && (
                 <div className="space-y-5">
-                  <div className="flex items-center gap-4">
+                  <div className="flex flex-col sm:flex-row sm:items-center gap-4">
                     <div className="w-20 h-20 rounded-full bg-zinc-900 overflow-hidden flex items-center justify-center shrink-0">
                       {data.photo_url ? (
                         <img src={data.photo_url} alt="" className="w-full h-full object-cover" />
@@ -83,9 +83,9 @@ export default function ApplicantModal({ matric, onClose }) {
                         <User size={32} className="text-zinc-600" />
                       )}
                     </div>
-                    <div>
-                      <div className="text-lg font-semibold">{data.full_name}</div>
-                      <div className="text-xs font-mono text-zinc-500">{data.Matriculation_Number}</div>
+                    <div className="flex-1">
+                      <div className="text-base sm:text-lg font-semibold">{data.full_name}</div>
+                      <div className="text-xs font-mono text-zinc-500 truncate">{data.Matriculation_Number}</div>
                       <div className="mt-1">
                         {data.status === "admitted" ? (
                           <span className="text-green-400 text-xs bg-green-950/40 px-2 py-0.5 rounded">admitted</span>
@@ -98,7 +98,7 @@ export default function ApplicantModal({ matric, onClose }) {
                     </div>
                   </div>
 
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 text-xs sm:text-sm">
                     <Field icon={Mail} label="Email" value={data.email} />
                     <Field icon={Phone} label="Phone" value={data.phone_number} />
                     <Field icon={Users} label="Parent contact" value={data.Parent_contact} />
@@ -116,23 +116,23 @@ export default function ApplicantModal({ matric, onClose }) {
                       <Fingerprint size={12} /> Passkey
                     </div>
                     {!confirmReset ? (
-                      <div className="flex items-center justify-between gap-3 bg-zinc-900/50 border border-zinc-900 rounded-lg px-3 py-3">
-                        <p className="text-sm text-zinc-400">
+                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-zinc-900/50 border border-zinc-900 rounded-lg px-3 py-3">
+                        <p className="text-xs sm:text-sm text-zinc-400">
                           Reset this intern's passkey so they can re-register a new device at <span className="font-mono text-zinc-300">/recovery</span>.
                         </p>
                         <button
                           onClick={() => setConfirmReset(true)}
-                          className="shrink-0 inline-flex items-center gap-1 bg-amber-900/40 hover:bg-amber-900/70 border border-amber-900 text-amber-200 px-3 py-1.5 rounded text-xs"
+                          className="w-full sm:w-auto shrink-0 inline-flex items-center justify-center gap-1 bg-amber-900/40 hover:bg-amber-900/70 border border-amber-900 text-amber-200 px-3 py-1.5 rounded text-xs"
                         >
                           <ShieldAlert size={12} /> Reset passkey
                         </button>
                       </div>
                     ) : (
                       <div className="bg-amber-950/30 border border-amber-900/50 rounded-lg p-3">
-                        <p className="text-sm text-amber-200 mb-3">
+                        <p className="text-xs sm:text-sm text-amber-200 mb-3">
                           Clear passkey for <span className="font-medium">{data.full_name}</span>? They'll have to set up a new one via /recovery.
                         </p>
-                        <div className="flex justify-end gap-2">
+                        <div className="flex flex-col-reverse sm:flex-row justify-end gap-2">
                           <button
                             onClick={() => setConfirmReset(false)}
                             disabled={resetting}
diff --git a/web3nova-revamp/components/Internship/ApplicationForm.jsx b/web3nova-revamp/components/Internship/ApplicationForm.jsx
index 94a25cb..d12bed5 100644
--- a/web3nova-revamp/components/Internship/ApplicationForm.jsx
+++ b/web3nova-revamp/components/Internship/ApplicationForm.jsx
@@ -25,7 +25,7 @@ const ApplicationForm = () => {
   const [photo, setPhoto] = useState(null);
   const [loading, setLoading] = useState(false);
   const [status, setStatus] = useState({ type: "", message: "" });
-  const [step, setStep] = useState(1); // 1 = form, 2 = passkey
+  const [step, setStep] = useState(1); // 1 = form, 2 = passkey (enforced)
   const [passkeyLoading, setPasskeyLoading] = useState(false);
   const fileInputRef = useRef(null);
 
@@ -246,46 +246,7 @@ const ApplicationForm = () => {
               )}
             </AnimatePresence>
 
-            {step === 2 ? (
-              <div className="space-y-6">
-                <div className="flex flex-col items-center text-center py-4">
-                  <div className="w-20 h-20 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-6">
-                    <Fingerprint className="w-10 h-10 text-blue-400" />
-                  </div>
-                  <h2 className="text-2xl font-bold mb-3">Application received</h2>
-                  <p className="text-gray-400 max-w-md mb-8">
-                    Now create a passkey on this device. You'll use it (fingerprint,
-                    Face ID, or device unlock) to check in and out at the hub.
-                  </p>
-                </div>
-
-                <div className="rounded-2xl border border-white/10 bg-black/30 p-5 space-y-3 text-sm text-gray-300">
-                  <div className="flex items-start gap-3">
-                    <ShieldCheck className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
-                    <p>Your passkey stays on this device. We never see your fingerprint or face data.</p>
-                  </div>
-                  <div className="flex items-start gap-3">
-                    <ShieldCheck className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
-                    <p>Lost your device later? An admin can reset it and you can register a new one.</p>
-                  </div>
-                </div>
-
-                <motion.button
-                  type="button"
-                  onClick={handleCreatePasskey}
-                  disabled={passkeyLoading}
-                  whileHover={{ scale: passkeyLoading ? 1 : 1.02 }}
-                  whileTap={{ scale: passkeyLoading ? 1 : 0.98 }}
-                  className="w-full px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-2xl font-bold text-lg hover:shadow-[0_0_30px_rgba(37,99,235,0.4)] transition-all flex items-center justify-center gap-2 disabled:opacity-60"
-                >
-                  {passkeyLoading ? (
-                    <><Loader2 className="w-5 h-5 animate-spin" /> Waiting for device...</>
-                  ) : (
-                    <><Fingerprint className="w-5 h-5" /> Create Passkey</>
-                  )}
-                </motion.button>
-              </div>
-            ) : (
+            {step === 1 ? (
             <form onSubmit={handleSubmit} className="space-y-6">
               <div className="grid md:grid-cols-2 gap-6">
                 <div>
@@ -474,6 +435,46 @@ const ApplicationForm = () => {
                 )}
               </motion.button>
             </form>
+            ) : (
+              <div className="space-y-6">
+                <div className="flex flex-col items-center text-center py-4">
+                  <div className="w-20 h-20 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-6">
+                    <Fingerprint className="w-10 h-10 text-blue-400" />
+                  </div>
+                  <h2 className="text-2xl font-bold mb-2">Final Step: Secure Your Access</h2>
+                  <p className="text-amber-400/80 text-sm font-semibold mb-2">⚠️ This is mandatory to complete your registration</p>
+                  <p className="text-gray-400 max-w-md mb-8">
+                    Create a passkey on this device. You'll use it (fingerprint,
+                    Face ID, or device unlock) to check in and out at the hub.
+                  </p>
+                </div>
+
+                <div className="rounded-2xl border border-white/10 bg-black/30 p-5 space-y-3 text-sm text-gray-300">
+                  <div className="flex items-start gap-3">
+                    <ShieldCheck className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
+                    <p>Your passkey stays on this device. We never see your fingerprint or face data.</p>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <ShieldCheck className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
+                    <p>Lost your device later? An admin can reset it and you can register a new one.</p>
+                  </div>
+                </div>
+
+                <motion.button
+                  type="button"
+                  onClick={handleCreatePasskey}
+                  disabled={passkeyLoading}
+                  whileHover={{ scale: passkeyLoading ? 1 : 1.02 }}
+                  whileTap={{ scale: passkeyLoading ? 1 : 0.98 }}
+                  className="w-full px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-2xl font-bold text-lg hover:shadow-[0_0_30px_rgba(37,99,235,0.4)] transition-all flex items-center justify-center gap-2 disabled:opacity-60"
+                >
+                  {passkeyLoading ? (
+                    <><Loader2 className="w-5 h-5 animate-spin" /> Waiting for device...</>
+                  ) : (
+                    <><Fingerprint className="w-5 h-5" /> Create Passkey & Complete Registration</>
+                  )}
+                </motion.button>
+              </div>
             )}
           </div>
         </motion.div>