From a502c34244201b652e7c259100a098dbc40fe3c0 Mon Sep 17 00:00:00 2001
From: BashMan11 <faruqbashir11@gmail.com>
Date: Thu, 28 May 2026 19:05:56 +0000
Subject: [PATCH] Feat: solution for Issue #267, 268, 269, 270

---
 src/app/(protected)/dashboard/page.tsx    |  7 +-
 src/app/(public)/page.tsx                 |  4 +
 src/components/auth/login-form.tsx        | 70 ++++++++++--------
 src/components/auth/signup-form.tsx       |  3 +-
 src/components/shared/Breadcrumb.tsx      | 38 ++++++++++
 src/components/shared/MobileNavDrawer.tsx | 89 +++++++++++++++++++++++
 src/components/shared/OrganizerNavbar.tsx | 75 +++++++++++++++++++
 src/components/ui/ConfirmationModal.tsx   | 76 +++++++++++++++++++
 src/components/ui/Pagination.tsx          | 40 ++++++++++
 src/components/ui/Skeleton.tsx            | 39 ++++++++++
 src/features/verification/page.tsx        | 12 ++-
 src/hooks/useSession.ts                   | 32 ++++----
 src/lib/animations/motionVariants.ts      | 35 ++++++++-
 src/lib/createEventValidation.ts          | 12 +++
 src/middleware.ts                         | 19 +++--
 tailwind.config.js                        |  1 +
 16 files changed, 495 insertions(+), 57 deletions(-)
 create mode 100644 src/components/shared/Breadcrumb.tsx
 create mode 100644 src/components/shared/MobileNavDrawer.tsx
 create mode 100644 src/components/shared/OrganizerNavbar.tsx
 create mode 100644 src/components/ui/ConfirmationModal.tsx
 create mode 100644 src/components/ui/Pagination.tsx
 create mode 100644 src/components/ui/Skeleton.tsx

diff --git a/src/app/(protected)/dashboard/page.tsx b/src/app/(protected)/dashboard/page.tsx
index 73d3f54..ecf103c 100644
--- a/src/app/(protected)/dashboard/page.tsx
+++ b/src/app/(protected)/dashboard/page.tsx
@@ -12,7 +12,12 @@ import { EventImage } from '@/components/dashboard/EventImage'
 import { RevenueChart } from '@/components/dashboard/charts/RevenueChart'
 import { PerformanceChart } from '@/components/dashboard/charts/PerformanceChart'
 import { EmptyState } from '@/components/EmptyState'
-import { TicketTypeChart } from '@/components/dashboard/charts/TicketTypeChart'
+import dynamic from 'next/dynamic'
+// Code-split Recharts-based chart away from the initial dashboard bundle
+const TicketTypeChart = dynamic(
+  () => import('@/components/dashboard/charts/TicketTypeChart').then((m) => m.TicketTypeChart),
+  { ssr: false, loading: () => <div className="h-[220px] animate-pulse rounded-xl bg-white/5" /> }
+)
 import { DemographicsSection } from '@/components/dashboard/DemographicsSection'
 import { eventImages } from '@/components/dashboard/constants'
 import {
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index 3ca644c..93979d1 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import dynamic from "next/dynamic";
 import {
   Calendar,
   Clock,
@@ -16,6 +17,9 @@ import { FaDiscord, FaFacebookF, FaXTwitter } from "react-icons/fa6";
 import { howItWorksSteps, trendingEvents } from "@/mocks/landing";
 import NewsletterForm from "@/components/NewsletterForm";
 
+// Lazy-load below-the-fold newsletter form to reduce initial bundle
+const LazyNewsletterForm = dynamic(() => import("@/components/NewsletterForm"), { ssr: false });
+
 const MotionLink = motion(Link);
 
 const fadeUp = {
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index ec1abea..289cf74 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -11,12 +11,14 @@ import { toast } from "react-toastify";
 import { motion } from "framer-motion";
 import { loginUser } from "@/lib/auth";
 import { useRouter, useSearchParams } from "next/navigation";
+import { FcGoogle } from "react-icons/fc";
 
 const loginSchema = z.object({
   email: z.email("Please enter a valid email address"),
   password: z
     .string("Please enter your password")
     .min(6, "Password must be at least 6 characters"),
+  rememberMe: z.boolean().optional(),
 });
 
 type FormValues = z.infer<typeof loginSchema>;
@@ -28,14 +30,16 @@ export default function LoginForm() {
     handleSubmit,
     formState: { isSubmitting, errors },
     control,
+    register,
     setError,
-  } = useForm({
+  } = useForm<FormValues>({
     resolver: zodResolver(loginSchema),
+    defaultValues: { rememberMe: false },
   });
 
   const onSubmit = async (data: FormValues) => {
     try {
-      await loginUser({ email: data.email, password: data.password });
+      await loginUser({ email: data.email, password: data.password, rememberMe: data.rememberMe });
       toast.success("Login successful!");
       const next = searchParams.get("next");
       router.push(next && next.startsWith("/") ? next : "/dashboard");
@@ -47,31 +51,12 @@ export default function LoginForm() {
 
   const containerVariants = {
     hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        duration: 0.5,
-        staggerChildren: 0.12,
-      },
-    },
+    visible: { opacity: 1, transition: { duration: 0.5, staggerChildren: 0.12 } },
   };
 
   const itemVariants = {
     hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.4 },
-    },
-  };
-
-  const headerVariants = {
-    hidden: { opacity: 0, scale: 0.95 },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      transition: { duration: 0.5 },
-    },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
   };
 
   return (
@@ -83,7 +68,7 @@ export default function LoginForm() {
     >
       <motion.h2
         className="text-3xl md:text-4xl text-center font-bold text-gray-900 mb-8"
-        variants={headerVariants}
+        variants={itemVariants}
       >
         Welcome Back
       </motion.h2>
@@ -116,12 +101,20 @@ export default function LoginForm() {
             />
           </motion.div>
 
+          <motion.div variants={itemVariants} className="flex items-center gap-2">
+            <input
+              id="rememberMe"
+              type="checkbox"
+              {...register("rememberMe")}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <label htmlFor="rememberMe" className="text-sm text-gray-700 select-none cursor-pointer">
+              Remember me
+            </label>
+          </motion.div>
+
           <motion.div variants={itemVariants}>
-            <motion.div
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              transition={{ duration: 0.2 }}
-            >
+            <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} transition={{ duration: 0.2 }}>
               {errors.root && (
                 <p role="alert" className="mb-3 rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">
                   {errors.root.message}
@@ -141,6 +134,25 @@ export default function LoginForm() {
           Sign Up
         </Link>
       </motion.p>
+
+      {process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === "true" && (
+        <motion.div variants={itemVariants} className="mt-4">
+          <div className="flex items-center gap-4 my-4">
+            <div className="flex-1 h-px bg-gray-300" />
+            <span className="text-sm text-gray-500">or</span>
+            <div className="flex-1 h-px bg-gray-300" />
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full py-3 flex items-center justify-center gap-2"
+            onClick={() => { window.location.href = "/api/auth/google"; }}
+          >
+            <FcGoogle size={20} />
+            <span className="text-sm font-medium">Continue with Google</span>
+          </Button>
+        </motion.div>
+      )}
     </motion.div>
   );
 }
diff --git a/src/components/auth/signup-form.tsx b/src/components/auth/signup-form.tsx
index 8fe3672..0ad21bc 100644
--- a/src/components/auth/signup-form.tsx
+++ b/src/components/auth/signup-form.tsx
@@ -68,7 +68,8 @@ export default function SignUpForm() {
     }
 
     toast.success("Account created successfully");
-
+    // Show email verification prompt
+    toast.info("Please check your email to verify your account before signing in.", { autoClose: 8000 });
     // router.push("/login");
 
   } catch (error: any) {
diff --git a/src/components/shared/Breadcrumb.tsx b/src/components/shared/Breadcrumb.tsx
new file mode 100644
index 0000000..1140ad6
--- /dev/null
+++ b/src/components/shared/Breadcrumb.tsx
@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex flex-wrap items-center gap-1 text-sm text-white/60">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li key={index} className="flex items-center gap-1">
+              {index > 0 && <ChevronRight size={14} aria-hidden="true" className="text-white/30" />}
+              {isLast || !item.href ? (
+                <span aria-current={isLast ? "page" : undefined} className={isLast ? "text-white font-medium" : ""}>
+                  {item.label}
+                </span>
+              ) : (
+                <Link href={item.href} className="hover:text-white transition-colors">
+                  {item.label}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
diff --git a/src/components/shared/MobileNavDrawer.tsx b/src/components/shared/MobileNavDrawer.tsx
new file mode 100644
index 0000000..e1a3dfa
--- /dev/null
+++ b/src/components/shared/MobileNavDrawer.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Link from "next/link";
+import { X } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+interface MobileNavDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const navLinks = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/events/manage", label: "My Events" },
+  { href: "/events/create", label: "Create Event" },
+  { href: "/verify", label: "Verify Tickets" },
+  { href: "/tickets", label: "My Tickets" },
+];
+
+export function MobileNavDrawer({ isOpen, onClose }: MobileNavDrawerProps) {
+  const pathname = usePathname();
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (isOpen) closeRef.current?.focus();
+  }, [isOpen]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    if (isOpen) document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isOpen, onClose]);
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => { document.body.style.overflow = ""; };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-black/60 lg:hidden"
+        aria-hidden="true"
+        onClick={onClose}
+      />
+      <nav
+        role="dialog"
+        aria-modal="true"
+        aria-label="Mobile navigation"
+        className="fixed inset-y-0 left-0 z-50 w-72 bg-[#0a0f24] border-r border-white/10 flex flex-col p-6 lg:hidden"
+      >
+        <div className="flex items-center justify-between mb-8">
+          <span className="text-xl font-semibold text-white">VeriTix</span>
+          <button
+            ref={closeRef}
+            type="button"
+            onClick={onClose}
+            aria-label="Close navigation"
+            className="rounded-lg p-2 text-white/60 hover:text-white hover:bg-white/10 transition"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <ul className="space-y-1 flex-1">
+          {navLinks.map(({ href, label }) => (
+            <li key={href}>
+              <Link
+                href={href}
+                onClick={onClose}
+                className={`flex items-center rounded-lg px-4 py-3 text-sm font-medium transition-colors ${
+                  pathname === href
+                    ? "bg-[#4d21ff]/20 text-white"
+                    : "text-white/70 hover:bg-white/5 hover:text-white"
+                }`}
+              >
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  );
+}
diff --git a/src/components/shared/OrganizerNavbar.tsx b/src/components/shared/OrganizerNavbar.tsx
new file mode 100644
index 0000000..b036ddc
--- /dev/null
+++ b/src/components/shared/OrganizerNavbar.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Search } from "lucide-react";
+
+export function OrganizerNavbar() {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    const q = query.trim();
+    if (!q) return;
+    router.push(`/events?search=${encodeURIComponent(q)}`);
+    setQuery("");
+    setOpen(false);
+  };
+
+  // Close on Escape
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <header className="sticky top-0 z-30 flex items-center justify-between border-b border-white/10 bg-[#0a0f24]/95 px-6 py-4 backdrop-blur">
+      <Link href="/dashboard" className="text-xl font-semibold text-white">
+        VeriTix
+      </Link>
+
+      <form onSubmit={handleSearch} role="search" className="relative w-full max-w-sm mx-6">
+        <label htmlFor="organizer-search" className="sr-only">Search events</label>
+        <Search
+          size={16}
+          aria-hidden="true"
+          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-white/40"
+        />
+        <input
+          ref={inputRef}
+          id="organizer-search"
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onFocus={() => setOpen(true)}
+          onBlur={() => setTimeout(() => setOpen(false), 150)}
+          placeholder="Search events…"
+          className="w-full rounded-full border border-white/10 bg-white/5 py-2 pl-9 pr-4 text-sm text-white placeholder:text-white/40 focus:border-[#4d21ff] focus:outline-none"
+        />
+        {open && query.trim() && (
+          <div className="absolute top-full mt-1 w-full rounded-xl border border-white/10 bg-[#0b1025] py-2 shadow-xl">
+            <button
+              type="submit"
+              className="w-full px-4 py-2 text-left text-sm text-white/80 hover:bg-white/5"
+            >
+              Search for &ldquo;{query}&rdquo;
+            </button>
+          </div>
+        )}
+      </form>
+
+      <nav aria-label="Organizer navigation" className="hidden items-center gap-6 text-sm text-white/70 lg:flex">
+        <Link href="/dashboard" className="hover:text-white transition">Dashboard</Link>
+        <Link href="/events/manage" className="hover:text-white transition">Events</Link>
+        <Link href="/events/create" className="rounded-full bg-gradient-to-r from-[#4d21ff] to-[#21d4ff] px-4 py-1.5 text-sm font-semibold text-white">
+          + Create
+        </Link>
+      </nav>
+    </header>
+  );
+}
diff --git a/src/components/ui/ConfirmationModal.tsx b/src/components/ui/ConfirmationModal.tsx
new file mode 100644
index 0000000..6d2df2f
--- /dev/null
+++ b/src/components/ui/ConfirmationModal.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  variant?: "danger" | "default";
+}
+
+export function ConfirmationModal({
+  isOpen,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+}: ConfirmationModalProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (isOpen) cancelRef.current?.focus();
+  }, [isOpen]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    if (isOpen) document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="confirm-title"
+      aria-describedby="confirm-message"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+    >
+      <div className="absolute inset-0 bg-black/60" onClick={onCancel} aria-hidden="true" />
+      <div className="relative w-full max-w-md rounded-2xl bg-[#0b1025] border border-white/10 p-6 shadow-xl space-y-4">
+        <h2 id="confirm-title" className="text-lg font-semibold text-white">{title}</h2>
+        <p id="confirm-message" className="text-sm text-white/70">{message}</p>
+        <div className="flex justify-end gap-3 pt-2">
+          <button
+            ref={cancelRef}
+            type="button"
+            onClick={onCancel}
+            className="rounded-lg border border-white/20 px-4 py-2 text-sm text-white hover:bg-white/10 transition"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className={`rounded-lg px-4 py-2 text-sm font-semibold text-white transition ${
+              variant === "danger"
+                ? "bg-red-600 hover:bg-red-700"
+                : "bg-[#4d21ff] hover:bg-[#3d11ef]"
+            }`}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Pagination.tsx b/src/components/ui/Pagination.tsx
new file mode 100644
index 0000000..13c50e8
--- /dev/null
+++ b/src/components/ui/Pagination.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({ page, totalPages, onPageChange, className = "" }: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  return (
+    <nav aria-label="Pagination" className={`flex items-center justify-center gap-2 ${className}`}>
+      <button
+        type="button"
+        onClick={() => onPageChange(page - 1)}
+        disabled={page <= 1}
+        aria-label="Previous page"
+        className="rounded-md border border-white/15 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Previous
+      </button>
+
+      <span className="text-sm text-white/70" aria-current="page">
+        Page {page} of {totalPages}
+      </span>
+
+      <button
+        type="button"
+        onClick={() => onPageChange(page + 1)}
+        disabled={page >= totalPages}
+        aria-label="Next page"
+        className="rounded-md border border-white/15 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Next
+      </button>
+    </nav>
+  );
+}
diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..b17fd68
--- /dev/null
+++ b/src/components/ui/Skeleton.tsx
@@ -0,0 +1,39 @@
+import { cn } from "@/lib/cn";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return <div className={cn("animate-pulse rounded bg-white/10", className)} />;
+}
+
+export function SkeletonCard({ className }: SkeletonProps) {
+  return (
+    <div className={cn("rounded-xl border border-white/10 bg-white/5 p-6 space-y-3 animate-pulse", className)}>
+      <Skeleton className="h-5 w-2/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-4/5" />
+      <div className="flex gap-3 pt-2">
+        <Skeleton className="h-4 w-1/4" />
+        <Skeleton className="h-4 w-1/4" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonList({ count = 3, className }: SkeletonProps & { count?: number }) {
+  return (
+    <div className={cn("space-y-4", className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 rounded-lg border border-white/10 bg-white/5 p-4 animate-pulse">
+          <Skeleton className="h-12 w-12 rounded-lg shrink-0" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-1/3" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/features/verification/page.tsx b/src/features/verification/page.tsx
index b1c0ab1..d67a99b 100644
--- a/src/features/verification/page.tsx
+++ b/src/features/verification/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { classifyVerificationError } from '@/lib/verificationErrors';
 
 type ScanResult = { status: 'valid' | 'invalid' | 'used'; message: string } | null;
 
@@ -20,9 +21,16 @@ export default function VerificationPage() {
     try {
       const res = await fetch(`/api/verify/${encodeURIComponent(ticketId.trim())}`, { method: 'POST' });
       const data = await res.json().catch(() => ({}));
-      setResult({ status: data.status ?? (res.ok ? 'valid' : 'invalid'), message: data.message ?? (res.ok ? 'Ticket is valid.' : 'Invalid ticket.') });
+      if (res.ok) {
+        setResult({ status: data.status ?? 'valid', message: data.message ?? 'Ticket is valid.' });
+      } else {
+        const err = classifyVerificationError(res.status, data.code);
+        const status = err.type === 'already-used' ? 'used' : 'invalid';
+        setResult({ status, message: err.message });
+      }
     } catch {
-      setResult({ status: 'invalid', message: 'Network error. Please try again.' });
+      const err = classifyVerificationError(null);
+      setResult({ status: 'invalid', message: err.message });
     } finally {
       setLoading(false);
     }
diff --git a/src/hooks/useSession.ts b/src/hooks/useSession.ts
index e227bc3..c0f3341 100644
--- a/src/hooks/useSession.ts
+++ b/src/hooks/useSession.ts
@@ -2,12 +2,9 @@
 
 import { useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
+import { toast } from "react-toastify";
 import { getToken, logout } from "@/lib/auth";
 
-/**
- * Checks whether the stored JWT is expired.
- * Returns true if the token is missing or its `exp` claim is in the past.
- */
 function isTokenExpired(token: string): boolean {
   try {
     const payload = JSON.parse(atob(token.split(".")[1]));
@@ -17,25 +14,24 @@ function isTokenExpired(token: string): boolean {
   }
 }
 
-/**
- * useSession – guards authenticated surfaces.
- *
- * - Redirects to /login immediately if no token is present.
- * - Redirects to /login (with ?expired=1) when the token has expired.
- * - Polls every 60 s so long-lived pages catch expiry without a page reload.
- */
 export function useSession() {
   const router = useRouter();
 
   const checkSession = useCallback(() => {
-    const token = getToken();
-    if (!token) {
+    try {
+      const token = getToken();
+      if (!token) {
+        router.replace("/login");
+        return;
+      }
+      if (isTokenExpired(token)) {
+        logout();
+        toast.warn("Your session has expired. Please sign in again.");
+        router.replace("/login?expired=1");
+      }
+    } catch {
+      // Never crash — silently redirect to login
       router.replace("/login");
-      return;
-    }
-    if (isTokenExpired(token)) {
-      logout();
-      router.replace("/login?expired=1");
     }
   }, [router]);
 
diff --git a/src/lib/animations/motionVariants.ts b/src/lib/animations/motionVariants.ts
index 4a4791f..b2cbe33 100644
--- a/src/lib/animations/motionVariants.ts
+++ b/src/lib/animations/motionVariants.ts
@@ -8,4 +8,37 @@ export const fadeInUp: Variants = {
 export const fadeIn: Variants = {
   hidden: { opacity: 0 },
   visible: { opacity: 1 },
-};
\ No newline at end of file
+};
+
+export const fadeInDown: Variants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export const scaleIn: Variants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: { opacity: 1, scale: 1 },
+};
+
+export const slideInLeft: Variants = {
+  hidden: { opacity: 0, x: -40 },
+  visible: { opacity: 1, x: 0 },
+};
+
+export const slideInRight: Variants = {
+  hidden: { opacity: 0, x: 40 },
+  visible: { opacity: 1, x: 0 },
+};
+
+export const staggerContainer: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 },
+  },
+};
+
+export const staggerItem: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
diff --git a/src/lib/createEventValidation.ts b/src/lib/createEventValidation.ts
index 6da0a06..9e8445e 100644
--- a/src/lib/createEventValidation.ts
+++ b/src/lib/createEventValidation.ts
@@ -107,6 +107,18 @@ export const createEventSchema = z
       }
     }
 
+    // Duplicate ticket type names (case-insensitive)
+    const ticketNames = data.tickets.map((t) => t.name.trim().toLowerCase());
+    ticketNames.forEach((name, idx) => {
+      if (name && ticketNames.indexOf(name) !== idx) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Ticket type names must be unique (case-insensitive).",
+          path: [`tickets.${idx}.name`],
+        });
+      }
+    });
+
     // Streaming URL is required for online/hybrid events and must be a valid URL.
     if (data.eventType === "online" || data.eventType === "hybrid") {
       const url = data.streamingUrl?.trim() ?? "";
diff --git a/src/middleware.ts b/src/middleware.ts
index a042445..70e2186 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,17 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
+import { canAccessVerificationTools } from "@/lib/verificationAccess";
 
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
-  // Only guard routes under the (protected) route group.
-  // Next.js strips the group segment from the URL, so we match the actual
-  // path segments that live inside (protected): /dashboard, /events/*, /tickets, /verify
   const isProtected =
     pathname.startsWith("/dashboard") ||
     pathname.startsWith("/tickets") ||
     pathname.startsWith("/verify") ||
-    // /events under protected — distinguish from public /events by checking
-    // whether the request is for the organiser sub-paths
     pathname.startsWith("/events/create") ||
     pathname.startsWith("/events/manage");
 
@@ -25,6 +21,19 @@ export function middleware(request: NextRequest) {
     return NextResponse.redirect(loginUrl);
   }
 
+  // Role-based guard for /verify — only staff, organizer, or admin may access
+  if (pathname.startsWith("/verify")) {
+    const roleCookie = request.cookies.get("user_role")?.value as
+      | "attendee"
+      | "organizer"
+      | "staff"
+      | "admin"
+      | null;
+    if (!canAccessVerificationTools(roleCookie ?? null)) {
+      return NextResponse.redirect(new URL("/dashboard", request.url));
+    }
+  }
+
   return NextResponse.next();
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index d5ff351..1f42d79 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: [
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",