From b8feae8a21ddf53576cd425da68466c1493005ef Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:16:34 +0530
Subject: [PATCH 01/32] feat: enhance form submission with validation and error
 handling

---
 src/app/actions/submit-form.ts | 43 +++++++++++++++++++++-------------
 src/types/index.ts             |  4 ++--
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/app/actions/submit-form.ts b/src/app/actions/submit-form.ts
index 3d19454..d0634af 100644
--- a/src/app/actions/submit-form.ts
+++ b/src/app/actions/submit-form.ts
@@ -3,26 +3,37 @@
 import { getServerSideSession } from "@/lib/get-server-session";
 import prisma from "@/server/db";
 import { FormDataInterface } from "@/types";
+import { z } from "zod";
+
+const amountSchema = z.number().positive("Amount must be a positive number.");
 
 export async function submitForm(data: FormDataInterface, amount: number) {
   const session = await getServerSideSession();
   if (!session) {
-    return;
+    throw new Error("User is not authenticated");
   }
+  const validatedAmount = amountSchema.parse(amount);
+
+  const totalAmount = Math.round(validatedAmount + validatedAmount * 0.02);
 
-  return await prisma.form.create({
-    data: {
-      name: data.name,
-      usn: data.usn,
-      email: data.email,
-      foodPreference: data.foodPreference,
-      contact: data.phone,
-      designation: data.designation,
-      paidAmount: amount,
-      photo: data.photo,
-      collegeIdCard: data.idCard,
-      createdById: session.user.id,
-      entityName: data.entityName,
-    },
-  });
+  try {
+    return await prisma.form.create({
+      data: {
+        name: data.name,
+        usn: data.usn,
+        email: data.email,
+        foodPreference: data.foodPreference,
+        contact: data.phone,
+        designation: data.designation,
+        paidAmount: totalAmount,
+        photo: data.photo,
+        collegeIdCard: data.idCard,
+        createdById: session.user.id,
+        entityName: data.entityName,
+      },
+    });
+  } catch (error) {
+    console.error("Error creating form:", error);
+    throw new Error("Failed to submit the form. Please try again later.");
+  }
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 5772a6b..6ad1c05 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export type UserRoleType = "ADMIN" | "PARTICIPANT";
+export type UserRoleType = "ADMIN" | "PARTICIPANT" ;
 
 export interface Speaker {
   id: number;
@@ -33,7 +33,7 @@ export interface ResendEmailOptions {
 }
 
 export interface FormDataInterface {
-  designation: "student" | "faculty" | "employee";
+  designation: "student" | "faculty" | "external";
   foodPreference: "veg" | "non-veg";
   name: string;
   email: string;

From bb835da58a6c9fa601d7d41a7bd2a1d0342e6a0e Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:29:10 +0530
Subject: [PATCH 02/32] feat: implement user role management with validation
 and error handling with new role

---
 src/app/actions/change-role.ts | 50 ++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/app/actions/change-role.ts b/src/app/actions/change-role.ts
index b28fea2..b33a0c1 100644
--- a/src/app/actions/change-role.ts
+++ b/src/app/actions/change-role.ts
@@ -1,25 +1,63 @@
 "use server";
 
 import prisma from "@/server/db";
+import { getServerSideSession } from "@/lib/get-server-session";
 import { revalidatePath } from "next/cache";
+import getErrorMessage from "@/utils/getErrorMessage";
 
-async function updateUserRole(id: string, role: string) {
+export enum UserRole {
+  ADMIN = "ADMIN",
+  PARTICIPANT = "PARTICIPANT",
+  COORDINATOR = "COORDINATOR",
+}
+
+const ADMIN_USERS_PATH = "/admin/users";
+
+async function updateUserRole(id: string, role: UserRole) {
+  const VALID_ROLES = Object.values(UserRole);
+  if (!VALID_ROLES.includes(role)) {
+    throw new Error(`Invalid role: ${role}`);
+  }
+  const session = await getServerSideSession();
+  if (!session || session.user.role !== UserRole.ADMIN) {
+    throw new Error("Unauthorized Access...");
+  }
   try {
     const updatedUser = await prisma.user.update({
       where: { id },
       data: { role },
     });
-    revalidatePath("/admin/users");
+    revalidatePath(ADMIN_USERS_PATH);
     return updatedUser;
   } catch (error) {
-    console.error("Error updating user role:", error);
-    return null;
+    console.error("Error updating user role:", getErrorMessage(error));
+    throw new Error("Failed to update user role. Please try again later.");
   }
 }
+
 export const makeAdmin = async (userId: string) => {
-  return await updateUserRole(userId, "ADMIN");
+  try {
+    return await updateUserRole(userId, UserRole.ADMIN);
+  } catch (error) {
+    console.error("Failed to make user admin:", getErrorMessage(error));
+    return null;
+  }
 };
 
 export const makeParticipant = async (userId: string) => {
-  return await updateUserRole(userId, "PARTICIPANT");
+  try {
+    return await updateUserRole(userId, UserRole.PARTICIPANT);
+  } catch (error) {
+    console.error("Failed to make user participant:", getErrorMessage(error));
+    return null;
+  }
+};
+
+export const makeOrganizer = async (userId: string) => {
+  try {
+    return await updateUserRole(userId, UserRole.COORDINATOR);
+  } catch (error) {
+    console.error("Failed to make user coordinator:", getErrorMessage(error));
+    return null;
+  }
 };

From dde1f62cb044cbba6719d83539eeb353457fc3da Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:52:35 +0530
Subject: [PATCH 03/32] feat: add coupon validation and error handling in
 saveCoupon function

---
 src/app/actions/create-coupon-code.ts | 28 +++++++++++++++++----------
 src/utils/zod-schemas.ts              |  7 +++++++
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/app/actions/create-coupon-code.ts b/src/app/actions/create-coupon-code.ts
index b659ffb..f87b7d0 100644
--- a/src/app/actions/create-coupon-code.ts
+++ b/src/app/actions/create-coupon-code.ts
@@ -1,17 +1,25 @@
 "use server";
 import prisma from "@/server/db";
+import { couponSchema } from "@/utils/zod-schemas";
 
 export const saveCoupon = async (
   coupon: string,
-  id: string,
-  discount: string = "20",
+  createdById: string,
+  discount: string = "20"
 ) => {
-  const resp = await prisma.referral.create({
-    data: {
-      code: coupon,
-      isUsed: false,
-      createdById: id,
-      discountPercentage: discount,
-    },
-  });
+  try {
+    const validatCoupon = couponSchema.parse({ coupon, createdById, discount });
+    const resp = await prisma.referral.create({
+      data: {
+        code: validatCoupon.coupon,
+        isUsed: false,
+        createdById: validatCoupon.createdById,
+        discountPercentage: validatCoupon.discount.toString(),
+      },
+    });
+    return resp;
+  } catch (error) {
+    console.error("Error creating coupon:", error);
+    throw new Error("Failed to create coupon. Please try again later.");
+  }
 };
diff --git a/src/utils/zod-schemas.ts b/src/utils/zod-schemas.ts
index 7ea4bbe..daa1339 100644
--- a/src/utils/zod-schemas.ts
+++ b/src/utils/zod-schemas.ts
@@ -50,3 +50,10 @@ export const studentFormSchema = z.object({
     idCard: z.string().min(1, { message: "ID Card is required for students." }),
     photo: z.string().min(1, { message: "Photo is required." }),
 });
+
+
+export const couponSchema = z.object({
+  coupon: z.string().min(1, { message: "Coupon code is required" }),
+  createdById: z.string(), 
+  discount: z.number().min(0).max(100).default(20), 
+});

From 2acc9f0343b60caaf33b6ea8e7c2654ebb7b7380 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 25 Nov 2024 23:24:35 +0530
Subject: [PATCH 04/32] feat: add coupon existence check and update discount
 type in saveCoupon function

---
 src/app/actions/create-coupon-code.ts         | 10 +++++++++-
 src/components/admin/code-generation-card.tsx | 18 ++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app/actions/create-coupon-code.ts b/src/app/actions/create-coupon-code.ts
index f87b7d0..ff43411 100644
--- a/src/app/actions/create-coupon-code.ts
+++ b/src/app/actions/create-coupon-code.ts
@@ -5,10 +5,18 @@ import { couponSchema } from "@/utils/zod-schemas";
 export const saveCoupon = async (
   coupon: string,
   createdById: string,
-  discount: string = "20"
+  discount: number = 20
 ) => {
   try {
     const validatCoupon = couponSchema.parse({ coupon, createdById, discount });
+    const couponExists = await prisma.referral.findFirst({
+      where: {
+        code: validatCoupon.coupon,
+      },
+    });
+    if (couponExists) {
+      throw new Error("Coupon code already exists");
+    }
     const resp = await prisma.referral.create({
       data: {
         code: validatCoupon.coupon,
diff --git a/src/components/admin/code-generation-card.tsx b/src/components/admin/code-generation-card.tsx
index 45c5e6b..9b1f618 100644
--- a/src/components/admin/code-generation-card.tsx
+++ b/src/components/admin/code-generation-card.tsx
@@ -19,6 +19,8 @@ import { type Session as NextAuthSession } from "next-auth";
 import CouponGeneratorDialog from "../payment/coupon-generator-dialog";
 import { Checkbox } from "../ui/checkbox";
 import { useState } from "react";
+// import { toast } from "sonner";
+// import getErrorMessage from "@/utils/getErrorMessage";
 
 export function Coupon({ session }: { session: NextAuthSession }) {
   const [discount, setDiscount] = useState("20");
@@ -29,6 +31,16 @@ export function Coupon({ session }: { session: NextAuthSession }) {
     enabled: false,
   });
 
+  const handleGenerateCoupon = async () => {
+    try {
+      await saveCoupon(data as string, session.user.id, Number(discount));
+      // refetch(); 
+      // toast.success("Coupon code saved successfully");
+    } catch (error) {
+      // toast.error(getErrorMessage(error));
+    }
+  };
+
   return (
     <Tabs defaultValue="account" className="w-[400px]">
       <TabsList className="grid w-full grid-cols-2">
@@ -94,10 +106,8 @@ export function Coupon({ session }: { session: NextAuthSession }) {
           </CardContent>
           <CardFooter>
             <Button
-              disabled={data === undefined ? true : false}
-              onClick={async () => {
-                await saveCoupon(data as string, session.user.id, discount);
-              }}
+              disabled={data === undefined || isPending}
+              onClick={handleGenerateCoupon}
             >
               Save coupon
             </Button>

From 2d93e9d157de09d510db2848f1e874d3b26d15cb Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:36:33 +0530
Subject: [PATCH 05/32] feat: add clipboard copy functionality for coupon code
 and improve coupon generation flow

---
 src/components/admin/code-generation-card.tsx | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/admin/code-generation-card.tsx b/src/components/admin/code-generation-card.tsx
index 9b1f618..dd6369e 100644
--- a/src/components/admin/code-generation-card.tsx
+++ b/src/components/admin/code-generation-card.tsx
@@ -20,24 +20,36 @@ import CouponGeneratorDialog from "../payment/coupon-generator-dialog";
 import { Checkbox } from "../ui/checkbox";
 import { useState } from "react";
 // import { toast } from "sonner";
-// import getErrorMessage from "@/utils/getErrorMessage";
+import getErrorMessage from "@/utils/getErrorMessage";
+import { Copy, Check } from "lucide-react";
 
 export function Coupon({ session }: { session: NextAuthSession }) {
   const [discount, setDiscount] = useState("20");
   const [checked, setChecked] = useState(false);
+  const [disabled, setDisabled] = useState(true);
+  const [copied, setCopied] = useState(false);
   const { data, isPending, isError, error, refetch } = useQuery({
     queryKey: ["coupon"],
     queryFn: createCouponCode,
     enabled: false,
   });
 
+  const handleCopy = () => {
+    if (!data) return;
+    navigator.clipboard.writeText(data).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
+    });
+  };
+
   const handleGenerateCoupon = async () => {
     try {
       await saveCoupon(data as string, session.user.id, Number(discount));
-      // refetch(); 
-      // toast.success("Coupon code saved successfully");
+      // refetch();
+      setDisabled(true);
+      alert("Coupon code saved successfully");
     } catch (error) {
-      // toast.error(getErrorMessage(error));
+      alert(getErrorMessage(error));
     }
   };
 
@@ -70,6 +82,8 @@ export function Coupon({ session }: { session: NextAuthSession }) {
                   setDiscount(e.target.value);
                 }}
               />
+            </div>
+            <div className="flex items-center space-x-2 mt-2">
               <Checkbox
                 id="discount_terms"
                 checked={checked}
@@ -86,7 +100,12 @@ export function Coupon({ session }: { session: NextAuthSession }) {
             </div>
           </CardContent>
           <CardFooter>
-            <CouponGeneratorDialog onGenerateCoupon={refetch} />
+            <CouponGeneratorDialog
+              onGenerateCoupon={() => {
+                refetch();
+                setDisabled(false);
+              }}
+            />
           </CardFooter>
         </Card>
       </TabsContent>
@@ -101,12 +120,25 @@ export function Coupon({ session }: { session: NextAuthSession }) {
           <CardContent className="space-y-2">
             <div className="space-y-1">
               <Label htmlFor="new">Coupon code</Label>
-              <Input id="new" type="text" disabled value={data} />
+              <div className="flex items-center space-x-2">
+                <Input id="new" type="text" disabled value={data} />
+                <button
+                  onClick={handleCopy}
+                  className="p-2 text-gray-700 bg-gray-200 rounded hover:bg-gray-300 focus:outline-none"
+                  title={copied ? "Copied!" : "Copy to clipboard"}
+                >
+                  {copied ? (
+                    <Check size={16} className="text-green-500" />
+                  ) : (
+                    <Copy size={16} />
+                  )}
+                </button>
+              </div>
             </div>
           </CardContent>
           <CardFooter>
             <Button
-              disabled={data === undefined || isPending}
+              disabled={data === undefined || isPending || disabled}
               onClick={handleGenerateCoupon}
             >
               Save coupon

From 1766ff74d2e7069bbd2b86366c3959c5516d3813 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Tue, 26 Nov 2024 19:16:51 +0530
Subject: [PATCH 06/32] feat: enhance user retrieval functions with error
 handling and validation

---
 src/app/actions/get-user-by-id.ts       | 25 ++++++++++++++++---------
 src/app/actions/is-allowed-to-access.ts | 12 +++++++++---
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/app/actions/get-user-by-id.ts b/src/app/actions/get-user-by-id.ts
index 1b3af8d..24c3f91 100644
--- a/src/app/actions/get-user-by-id.ts
+++ b/src/app/actions/get-user-by-id.ts
@@ -1,13 +1,20 @@
 import prisma from "@/server/db"; // Adjust the import based on your structure
 
 export async function getUserById(userId: string) {
-  const user = await prisma.user.findUnique({
-    where: { id: userId },
-    select: {
-      id: true,
-      role: true, // Include any other fields you need
-    },
-  });
-
-  return user;
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: {
+        id: true,
+        role: true, 
+      },
+    });
+    if (!user) {
+      throw new Error(`User with ID ${userId} not found`);
+    }
+    return user;
+  } catch (error) {
+    console.error("Error getting user by id:", error);
+    throw new Error("Failed to get user. Please try again later.");
+  }
 }
diff --git a/src/app/actions/is-allowed-to-access.ts b/src/app/actions/is-allowed-to-access.ts
index a9bd130..4a2cd57 100644
--- a/src/app/actions/is-allowed-to-access.ts
+++ b/src/app/actions/is-allowed-to-access.ts
@@ -3,10 +3,16 @@
 import prisma from "@/server/db";
 
 export const isAllowedToAccess = async (email: string): Promise<boolean> => {
+    if (!email) return false;
+  try {
     const user = await prisma.sjecUser.findFirst({
-        where: {
-            email: email,
-        },
+      where: {
+        email: email,
+      },
     });
     return user !== null;
+  } catch (error) {
+    console.error("Error getting user by email:", error);
+    return false;
+  }
 };

From 10685e8d24bd66710ac0d5c6a281be9c41ec3700 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:47:00 +0530
Subject: [PATCH 07/32] style: update admin navbar colors and layout for
 improved aesthetics

---
 src/components/admin/Navbar/navbar.tsx | 38 ++++++++++++--------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/admin/Navbar/navbar.tsx b/src/components/admin/Navbar/navbar.tsx
index e92a6e2..8f08410 100644
--- a/src/components/admin/Navbar/navbar.tsx
+++ b/src/components/admin/Navbar/navbar.tsx
@@ -4,14 +4,13 @@ import { IconType } from "react-icons";
 import { FiChevronDown, FiChevronsRight, FiUser } from "react-icons/fi";
 import { RiCoupon3Line } from "react-icons/ri";
 import { MdPayment } from "react-icons/md";
-import { SiTicktick } from "react-icons/si";
-import { SiRazorpay } from "react-icons/si";
+import { SiTicktick, SiRazorpay } from "react-icons/si";
 import { motion } from "framer-motion";
 import Link from "next/link";
 
 export const AdminNavbar = () => {
   return (
-    <div className="flex bg-indigo-50 h-screen ">
+    <div className="flex bg-black h-screen text-white">
       <Sidebar />
       <NavbarContent />
     </div>
@@ -25,7 +24,7 @@ const Sidebar = () => {
   return (
     <motion.nav
       layout
-      className=" sticky top-0 h-screen shrink-0 border-r border-slate-300 bg-white p-2"
+      className="sticky top-0 h-screen shrink-0 border-r border-gray-700 bg-gray-900 p-2"
       style={{
         width: open ? "225px" : "fit-content",
       }}
@@ -104,8 +103,8 @@ const Option = ({
         onClick={() => setSelected(title)}
         className={`relative flex h-10 w-full items-center rounded-md transition-colors ${
           selected === title
-            ? "bg-indigo-100 text-indigo-800"
-            : "text-slate-500 hover:bg-slate-100"
+            ? "bg-red-500 text-white"
+            : "text-gray-400 hover:bg-gray-800 hover:text-white"
         }`}
       >
         <motion.div
@@ -120,7 +119,7 @@ const Option = ({
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.125 }}
-            className="text-xs font-medium"
+            className="text-sm font-medium"
           >
             {title}
           </motion.span>
@@ -135,7 +134,7 @@ const Option = ({
             }}
             style={{ y: "-50%" }}
             transition={{ delay: 0.5 }}
-            className="absolute right-2 top-1/2 size-4 rounded bg-indigo-500 text-xs text-white"
+            className="absolute right-2 top-1/2 size-4 rounded bg-red-500 text-xs text-white"
           >
             {notifs}
           </motion.span>
@@ -147,8 +146,8 @@ const Option = ({
 
 const TitleSection = ({ open }: { open: boolean }) => {
   return (
-    <div className="mb-3 border-b border-slate-300 pb-3">
-      <div className="flex cursor-pointer items-center justify-between rounded-md transition-colors hover:bg-slate-100">
+    <div className="mb-3 border-b border-gray-700 pb-3">
+      <div className="flex cursor-pointer items-center justify-between rounded-md transition-colors hover:bg-gray-800">
         <div className="flex items-center gap-2">
           <Logo />
           {open && (
@@ -158,23 +157,22 @@ const TitleSection = ({ open }: { open: boolean }) => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.125 }}
             >
-              <span className="block text-xs font-semibold">Tedxsjec</span>
-              <span className="block text-xs text-slate-500">Admin Page</span>
+              <span className="block text-md font-semibold text-red-500">Tedxsjec</span>
+              <span className="block text-xs text-gray-400">Admin Page</span>
             </motion.div>
           )}
         </div>
-        {open && <FiChevronDown className="mr-2" />}
+        {open && <FiChevronDown className="mr-2 text-gray-400" />}
       </div>
     </div>
   );
 };
 
 const Logo = () => {
-  // Temp logo from https://logoipsum.com/
   return (
     <motion.div
       layout
-      className="grid size-10 shrink-0 place-content-center rounded-md bg-indigo-600"
+      className="grid size-10 shrink-0 place-content-center rounded-md bg-red-600"
     >
       <svg
         width="24"
@@ -182,7 +180,7 @@ const Logo = () => {
         viewBox="0 0 50 39"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        className="fill-slate-50"
+        className="fill-gray-50"
       >
         <path
           d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z"
@@ -208,12 +206,12 @@ const ToggleClose = ({
     <motion.button
       layout
       onClick={() => setOpen((pv) => !pv)}
-      className="absolute bottom-0 left-0 right-0 border-t border-slate-300 transition-colors hover:bg-slate-100"
+      className="absolute bottom-0 left-0 right-0 border-t border-gray-700 transition-colors hover:bg-gray-800"
     >
       <div className="flex items-center p-2">
         <motion.div
           layout
-          className="grid size-10 place-content-center text-lg"
+          className="grid size-10 place-content-center text-lg text-gray-400"
         >
           <FiChevronsRight
             className={`transition-transform ${open && "rotate-180"}`}
@@ -225,7 +223,7 @@ const ToggleClose = ({
             initial={{ opacity: 0, y: 12 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.125 }}
-            className="text-xs font-medium"
+            className="text-xs font-medium text-gray-400"
           >
             Hide
           </motion.span>
@@ -235,4 +233,4 @@ const ToggleClose = ({
   );
 };
 
-const NavbarContent = () => <div className="h-[200vh] w-full"></div>;
+const NavbarContent = () => <div className="h-[200vh] w-full bg-gray-900"></div>;

From ce8857cff1d4f60ea93d4713691cbb3d3a9d0347 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Wed, 27 Nov 2024 14:35:39 +0530
Subject: [PATCH 08/32] style: enhance unauthorized and forbidden page messages
 with improved layout and styling

---
 src/app/admin/layout.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 27062f5..24e3e02 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -20,16 +20,26 @@ export default function RootLayout({
 
   if (!session) {
     return (
-      <div className="w-screen h-screen flex justify-center items-center">
-        Unauthorized
+      <div className="w-screen h-screen flex justify-center items-center bg-black text-gray-200">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold mb-2 text-red-500">Unauthorized</h1>
+          <p className="text-gray-400">
+            You need to log in to access this page.
+          </p>
+        </div>
       </div>
     );
   }
 
   if (session.user.role !== "ADMIN") {
     return (
-      <div className="w-screen h-screen flex justify-center items-center">
-        Forbidden
+      <div className="w-screen h-screen flex justify-center items-center bg-black text-gray-200">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold mb-2 text-red-500">Forbidden</h1>
+          <p className="text-gray-400">
+            You do not have the required permissions to view this page.
+          </p>
+        </div>
       </div>
     );
   }

From 50b569134e55a8b1de1a2620208f6b657412bcfb Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:51:48 +0530
Subject: [PATCH 09/32] feat: add COORDINATOR role and update role management
 functionality

---
 src/app/actions/change-role.ts       |  13 +-
 src/components/admin/change-role.tsx |  89 +++++++---
 src/components/admin/user-list.tsx   | 252 ++++++++++++++-------------
 src/constants/index.ts               |   7 +
 src/types/index.ts                   |   2 +-
 5 files changed, 208 insertions(+), 155 deletions(-)

diff --git a/src/app/actions/change-role.ts b/src/app/actions/change-role.ts
index b33a0c1..c639054 100644
--- a/src/app/actions/change-role.ts
+++ b/src/app/actions/change-role.ts
@@ -4,14 +4,7 @@ import prisma from "@/server/db";
 import { getServerSideSession } from "@/lib/get-server-session";
 import { revalidatePath } from "next/cache";
 import getErrorMessage from "@/utils/getErrorMessage";
-
-export enum UserRole {
-  ADMIN = "ADMIN",
-  PARTICIPANT = "PARTICIPANT",
-  COORDINATOR = "COORDINATOR",
-}
-
-const ADMIN_USERS_PATH = "/admin/users";
+import { UserRole,ADMIN_USERS_PATH } from "@/constants";
 
 async function updateUserRole(id: string, role: UserRole) {
   const VALID_ROLES = Object.values(UserRole);
@@ -20,7 +13,7 @@ async function updateUserRole(id: string, role: UserRole) {
   }
   const session = await getServerSideSession();
   if (!session || session.user.role !== UserRole.ADMIN) {
-    throw new Error("Unauthorized Access...");
+    throw new Error(`Unauthorized Access...`);
   }
   try {
     const updatedUser = await prisma.user.update({
@@ -53,7 +46,7 @@ export const makeParticipant = async (userId: string) => {
   }
 };
 
-export const makeOrganizer = async (userId: string) => {
+export const makeCoordinator = async (userId: string) => {
   try {
     return await updateUserRole(userId, UserRole.COORDINATOR);
   } catch (error) {
diff --git a/src/components/admin/change-role.tsx b/src/components/admin/change-role.tsx
index 28e5fa9..71ee239 100644
--- a/src/components/admin/change-role.tsx
+++ b/src/components/admin/change-role.tsx
@@ -1,6 +1,17 @@
 "use client";
-import { makeAdmin, makeParticipant } from "@/app/actions/change-role";
+import {
+  makeAdmin,
+  makeCoordinator,
+  makeParticipant,
+} from "@/app/actions/change-role";
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@radix-ui/react-popover";
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
 
 export default function ChangeRole({
   userId,
@@ -9,32 +20,62 @@ export default function ChangeRole({
   userId: string;
   userRole: string;
 }) {
-  async function handleMakeAdmin() {
-    await makeAdmin(userId);
-  }
+  const [currentRole, setCurrentRole] = useState(userRole);
 
-  async function handleMakeParticipant() {
-    await makeParticipant(userId);
+  async function handleRoleChange(newRole: string) {
+    switch (newRole) {
+      case "ADMIN":
+        await makeAdmin(userId);
+        break;
+      case "PARTICIPANT":
+        await makeParticipant(userId);
+        break;
+      case "COORDINATOR":
+        await makeCoordinator(userId);
+        break;
+      default:
+        break;
+    }
+    setCurrentRole(newRole);
   }
 
   return (
-    <div className="">
-      <Button
-        className={`bg-foreground hover:bg-muted-foreground font-bold py-2 px-4 rounded dark:bg-black ${
-          userRole === "ADMIN" ? "hidden" : ""
-        }`}
-        onClick={handleMakeAdmin}
-      >
-        Make Admin
-      </Button>
-      <Button
-        className={`bg-foreground hover:bg-muted-foreground font-bold py-2 px-4 rounded dark:bg-black ${
-          userRole === "PARTICIPANT" ? "hidden" : ""
-        }`}
-        onClick={handleMakeParticipant}
-      >
-        Make Participant
-      </Button>
-    </div>
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm">
+          {currentRole}{" "}
+          <ChevronDownIcon className="w-4 h-4 ml-2 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="center">
+        <div className="flex gap-2 bg-white p-2 flex-col">
+          <Button
+            className={`bg-foreground hover:bg-muted-foreground font-bold py-2 px-4 rounded  ${
+              currentRole === "ADMIN" ? "hidden" : ""
+            }`}
+            onClick={() => handleRoleChange("ADMIN")}
+          >
+            Make Admin
+          </Button>
+          <Button
+          type="submit"
+            className={`bg-foreground hover:bg-muted-foreground font-bold py-2 px-4 rounded  ${
+              currentRole === "PARTICIPANT" ? "hidden" : ""
+            }`}
+            onClick={() => handleRoleChange("PARTICIPANT")}
+          >
+            Make Participant
+          </Button>
+          <Button
+            className={`bg-foreground hover:bg-muted-foreground font-bold py-2 px-4 rounded  ${
+              currentRole === "COORDINATOR" ? "hidden" : ""
+            }`}
+            onClick={() => handleRoleChange("COORDINATOR")}
+          >
+            Make Coordinator
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/src/components/admin/user-list.tsx b/src/components/admin/user-list.tsx
index e921fd4..1c8d917 100644
--- a/src/components/admin/user-list.tsx
+++ b/src/components/admin/user-list.tsx
@@ -2,7 +2,13 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import axios from "axios";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { Button } from "../ui/button";
@@ -12,142 +18,148 @@ import debounce from "lodash.debounce";
 import ChangeRole from "./change-role";
 
 export interface User {
-    id: string;
-    name: string | null;
-    email: string | null;
-    role: string;
-    image: string | null;
+  id: string;
+  name: string | null;
+  email: string | null;
+  role: string;
+  image: string | null;
 }
 
 interface UsersListProps {
-    initialUsers: User[];
-    initialPage: number;
+  initialUsers: User[];
+  initialPage: number;
 }
 
 const UsersList: React.FC<UsersListProps> = ({ initialUsers, initialPage }) => {
-    const [userList, setUserList] = useState<User[]>(initialUsers);
-    const [currentPage, setCurrentPage] = useState(initialPage);
-    const [loading, setLoading] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const [searchQuery, setSearchQuery] = useState("");
-    const loader = useRef<HTMLDivElement | null>(null);
+  const [userList, setUserList] = useState<User[]>(initialUsers);
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const loader = useRef<HTMLDivElement | null>(null);
 
-    const fetchUsers = useCallback(async (page: number, query: string, isNewSearch: boolean) => {
-        if (loading) return;
-        setLoading(true);
-        try {
-            const response = await axios.get(`/api/users?page=${page}&search=${encodeURIComponent(query)}`, {
-                headers: { "Cache-Control": "no-cache" },
-            });
-            if (response.data.users.length > 0) {
-                setUserList((prevUsers) =>
-                    isNewSearch ? response.data.users : [...prevUsers, ...response.data.users]
-                );
-                setCurrentPage(page);
-                setHasMore(response.data.users.length === 10); // Assuming 10 is the page size
-            } else {
-                setHasMore(false);
-            }
-        } catch (error) {
-            console.error("Error fetching users:", error);
+  const fetchUsers = useCallback(
+    async (page: number, query: string, isNewSearch: boolean) => {
+      if (loading) return;
+      setLoading(true);
+      try {
+        const response = await axios.get(
+          `/api/users?page=${page}&search=${encodeURIComponent(query)}`,
+          {
+            headers: { "Cache-Control": "no-cache" },
+          }
+        );
+        if (response.data.users.length > 0) {
+          setUserList((prevUsers) =>
+            isNewSearch
+              ? response.data.users
+              : [...prevUsers, ...response.data.users]
+          );
+          setCurrentPage(page);
+          setHasMore(response.data.users.length === 10); // Assuming 10 is the page size
+        } else {
+          setHasMore(false);
         }
-        setLoading(false);
-    }, []);
+      } catch (error) {
+        console.error("Error fetching users:", error);
+      }
+      setLoading(false);
+    },
+    []
+  );
 
-    const loadMoreUsers = useCallback(() => {
-        if (hasMore && !loading) {
-            fetchUsers(currentPage + 1, searchQuery, false);
-        }
-    }, [currentPage, hasMore, searchQuery, fetchUsers, loading]);
+  const loadMoreUsers = useCallback(() => {
+    if (hasMore && !loading) {
+      fetchUsers(currentPage + 1, searchQuery, false);
+    }
+  }, [currentPage, hasMore, searchQuery, fetchUsers, loading]);
 
-    const debouncedSearch = useCallback(
-        debounce((query: string) => {
-            setCurrentPage(1);
-            setHasMore(true);
-            fetchUsers(1, query, true);
-        }, 500),
-        [fetchUsers]
-    );
+  const debouncedSearch = useCallback(
+    debounce((query: string) => {
+      setCurrentPage(1);
+      setHasMore(true);
+      fetchUsers(1, query, true);
+    }, 500),
+    [fetchUsers]
+  );
 
-    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const query = e.target.value;
-        setSearchQuery(query);
-        debouncedSearch(query);
-    };
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(
-            (entries) => {
-                if (entries[0].isIntersecting && hasMore) {
-                    loadMoreUsers();
-                }
-            },
-            { threshold: 1.0 }
-        );
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    debouncedSearch(query);
+  };
 
-        if (loader.current) {
-            observer.observe(loader.current);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          loadMoreUsers();
         }
+      },
+      { threshold: 1.0 }
+    );
+
+    if (loader.current) {
+      observer.observe(loader.current);
+    }
 
-        return () => observer.disconnect();
-    }, [hasMore, loadMoreUsers]);
+    return () => observer.disconnect();
+  }, [hasMore, loadMoreUsers]);
 
-    return (
-        <Card className="w-full">
-            <div className="flex justify-end gap-2 mt-5 p-5">
-                <div className="relative">
-                    <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                    <Input
-                        type="search"
-                        placeholder="Search users..."
-                        className="pl-8 sm:w-[200px] md:w-[300px]"
-                        value={searchQuery}
-                        onChange={handleSearchChange}
-                    />
+  return (
+    <Card className="w-full">
+      <div className="flex justify-end gap-2 mt-5 p-5">
+        <div className="relative">
+          <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search users..."
+            className="pl-8 sm:w-[200px] md:w-[300px]"
+            value={searchQuery}
+            onChange={handleSearchChange}
+          />
+        </div>
+      </div>
+      <CardHeader>
+        <CardTitle>Users {userList.length}</CardTitle>
+        <CardDescription>Manage user roles and permissions.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          {userList.map((user) => (
+            <div
+              key={user.id}
+              className="grid grid-cols-[1fr_auto] items-center gap-4"
+            >
+              <div className="flex items-center gap-4">
+                <Avatar>
+                  <AvatarImage src={user.image || "/placeholder-user.jpg"} />
+                  <AvatarFallback>
+                    {user.name ? user.name[0] : "N/A"}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium">
+                    {user.name || "Unknown"}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    {user.email || "No email"}
+                  </p>
                 </div>
+              </div>
+
+              <ChangeRole userId={user.id} userRole={user.role} />
             </div>
-            <CardHeader>
-                <CardTitle>Users</CardTitle>
-                <CardDescription>Manage user roles and permissions.</CardDescription>
-            </CardHeader>
-            <CardContent>
-                <div className="grid gap-4">
-                    {userList.map((user) => (
-                        <div key={user.id} className="grid grid-cols-[1fr_auto] items-center gap-4">
-                            <div className="flex items-center gap-4">
-                                <Avatar>
-                                    <AvatarImage src={user.image || "/placeholder-user.jpg"} />
-                                    <AvatarFallback>{user.name ? user.name[0] : "N/A"}</AvatarFallback>
-                                </Avatar>
-                                <div>
-                                    <p className="text-sm font-medium">{user.name || "Unknown"}</p>
-                                    <p className="text-sm text-muted-foreground">
-                                        {user.email || "No email"}
-                                    </p>
-                                </div>
-                            </div>
-                            <Popover>
-                                <PopoverTrigger asChild>
-                                    <Button variant="outline" size="sm">
-                                        {user.role}{" "}
-                                        <ChevronDownIcon className="w-4 h-4 ml-2 text-muted-foreground" />
-                                    </Button>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-auto p-0" align="center">
-                                    <ChangeRole userId={user.id} userRole={user.role} />
-                                </PopoverContent>
-                            </Popover>
-                        </div>
-                    ))}
-                </div>
-                {hasMore && (
-                    <div ref={loader} className="text-center mt-4">
-                        {loading ? "Loading..." : "Load more"}
-                    </div>
-                )}
-            </CardContent>
-        </Card>
-    );
+          ))}
+        </div>
+        {hasMore && (
+          <div ref={loader} className="text-center mt-4">
+            {loading ? "Loading..." : "Load more"}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
 };
 
 export default UsersList;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 8eb5c11..55a6ad0 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -5,6 +5,13 @@ export const basePrice = 980.39;
 export const initialdiscount = 0;
 export const sjecStudentPrice = 735.29;
 export const sjecFacultyPrice = 784.31;
+export enum UserRole {
+  ADMIN = "ADMIN",
+  PARTICIPANT = "PARTICIPANT",
+  COORDINATOR = "COORDINATOR",
+}
+
+export const ADMIN_USERS_PATH = "/admin/users";
 export const speakers: Speaker[] = [
   {
     id: 1,
diff --git a/src/types/index.ts b/src/types/index.ts
index 63617de..ecd13bf 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export type UserRoleType = "ADMIN" | "PARTICIPANT" ;
+export type UserRoleType = "ADMIN" | "PARTICIPANT" | "COORDINATOR";
 
 export interface Speaker {
   id: number;

From b106b9e650b1dbb7cfceb73010f281843f586840 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Wed, 27 Nov 2024 22:45:26 +0530
Subject: [PATCH 10/32] style: update admin layout and razorpay page for
 improved aesthetics and functionality

---
 src/app/admin/layout.tsx        |   2 +-
 src/app/admin/page.tsx          |   2 +-
 src/app/admin/razorpay/page.tsx | 108 ++++++++++++++++----------------
 3 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 24e3e02..13c2d8b 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -50,7 +50,7 @@ export default function RootLayout({
         <Providers>
           <div className="flex h-screen overflow-hidden">
             <AdminNavbar />
-            <main className="flex-1 overflow-auto bg-indigo-50">
+            <main className="flex-1 overflow-auto bg-gray-800">
               {children}
             </main>
           </div>
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index ddcca3d..98cb1ce 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -10,7 +10,7 @@ export default function AdminPage() {
 
   return (
     <>
-      <div className="h-screen flex  items-center justify-center">
+      <div className="h-screen flex  items-center justify-center bg-gray-800">
         <Coupon session={session} />
       </div>
     </>
diff --git a/src/app/admin/razorpay/page.tsx b/src/app/admin/razorpay/page.tsx
index afeab50..5afe394 100644
--- a/src/app/admin/razorpay/page.tsx
+++ b/src/app/admin/razorpay/page.tsx
@@ -1,4 +1,6 @@
-"use client";
+"use client"
+
+import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
@@ -7,70 +9,66 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/navigation";
-import React from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/navigation"
+import React from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
 const formSchema = z.object({
   razorpayPaymentId: z.string().nonempty("Payment ID is required"),
-});
+})
 
 const FetchRazorpayPaymentData = () => {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-  });
-  const router = useRouter();
+  })
+  const router = useRouter()
 
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
-    router.push(`/admin/razorpay/${data.razorpayPaymentId}`);
-  };
+    router.push(`/admin/razorpay/${data.razorpayPaymentId}`)
+  }
 
   return (
-    <div className="flex w-screen h-screen justify-center items-center flex-col bg-gray-100 dark:bg-gray-900 p-4">
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-10">
-        Search by Razorpay Payment ID
-      </h2>
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-4 mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md"
-        >
-          <FormField
-            control={form.control}
-            name="razorpayPaymentId"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-gray-700 dark:text-gray-300">
-                  Razorpay Payment ID:
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    placeholder="pay_O69OS3rml4xT8K"
-                    {...field}
-                    className="border-gray-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100"
-                  />
-                </FormControl>
-                <FormDescription className="text-sm text-gray-500 dark:text-gray-400">
-                  Search for a payment by its Razorpay Payment ID
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <button
-            type="submit"
-            className="w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
-          >
-            Submit
-          </button>
-        </form>
-      </Form>
+    <div className="flex lg:w-full min-h-screen justify-center items-center bg-background p-4 pt-0 mt-0">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-lg lg:text-2xl font-semibold text-primary">
+            Search by Razorpay Payment ID
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <FormField
+                control={form.control}
+                name="razorpayPaymentId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Razorpay Payment ID</FormLabel>
+                    <FormControl>
+                      <Input placeholder="pay_O69OS3rml4xT8K" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Search for a payment by its Razorpay Payment ID
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" className="w-full">
+                Submit
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
     </div>
-  );
-};
+  )
+}
+
+export default FetchRazorpayPaymentData
 
-export default FetchRazorpayPaymentData;

From 57f76978d24f6342d447f3a66e68d8f79e8dadb5 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Thu, 28 Nov 2024 09:39:05 +0530
Subject: [PATCH 11/32] style: enhance payment and razorpay pages with improved
 layout and email functionality

---
 src/app/admin/payment/page.tsx                |   3 +-
 src/app/admin/razorpay/[id]/page.tsx          | 127 +++++++++---------
 .../searchable-infinite-scroll-table.tsx      |   3 +
 3 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/src/app/admin/payment/page.tsx b/src/app/admin/payment/page.tsx
index c995e17..37c387e 100644
--- a/src/app/admin/payment/page.tsx
+++ b/src/app/admin/payment/page.tsx
@@ -4,7 +4,8 @@ import React from "react";
 export default async function Payments() {
   return (
     <>
-      <div className="pt-20 flex min-h-screen w-full flex-col bg-background">
+      <div className="p-8 flex min-h-screen w-full flex-col bg-background">
+       
         <SearchableInfiniteScrollTable />
       </div>
     </>
diff --git a/src/app/admin/razorpay/[id]/page.tsx b/src/app/admin/razorpay/[id]/page.tsx
index 2dcd4a0..e3e5ff9 100644
--- a/src/app/admin/razorpay/[id]/page.tsx
+++ b/src/app/admin/razorpay/[id]/page.tsx
@@ -65,6 +65,16 @@ function FetchRazorpayPaymentData({ params }: { params: { id: string } }) {
   const [loading, setLoading] = useState(true);
   const [loadingForButton, setLoadingForButton] = useState(false);
 
+  const handleSendEmail = async () => {
+    if (!paymentData) {
+      return;
+    }
+    setLoadingForButton(true)
+    await sendEmail(paymentData.id)
+    setLoadingForButton(false)
+  }
+
+
   async function sendEmail(paymentId: string) {
     setLoadingForButton(true);
     try {
@@ -127,67 +137,62 @@ function FetchRazorpayPaymentData({ params }: { params: { id: string } }) {
   }
 
   return (
-    <div className="w-screen h-screen flex justify-center items-center bg-gray-100 dark:bg-gray-900 p-4">
-      <Card className="w-full max-w-lg bg-white dark:bg-gray-800 shadow-lg">
-        <CardHeader>
-          <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">
-            Payment Data of {paymentData.notes.customerName || "Unknown"}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            Payment ID
-            <Input value={paymentData.id || ""} disabled className="mt-1" />
-          </Label>
-          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            Amount
-            <Input
-              value={new Intl.NumberFormat("en-IN", {
-                style: "currency",
-                currency: "INR",
-              }).format((paymentData.amount ?? 0) / 100)}
-              disabled
-              className="mt-1"
-            />
-          </Label>
-          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            Email
-            <Input value={paymentData.email || ""} disabled className="mt-1" />
-          </Label>
-          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            Phone
-            <Input
-              value={paymentData.contact || ""}
-              disabled
-              className="mt-1"
-            />
-          </Label>
-          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            Created At
-            <Input
-              value={new Date(paymentData.created_at * 1000).toLocaleString(
-                undefined,
-                {
-                  dateStyle: "full",
-                  timeStyle: "long",
-                },
-              )}
-              disabled
-              className="mt-1"
-            />
-          </Label>
-        </CardContent>
-        <CardFooter className="flex justify-end">
-          <Button
-            disabled={loadingForButton}
-            className="bg-blue-600 text-white hover:bg-blue-700"
-            onClick={async () => await sendEmail(paymentData.id!)}
-          >
-            {loadingForButton ? "Loading..." : "Send Email"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
+    <div className="flex w-full min-h-screen justify-center items-center bg-background p-4">
+    <Card className="w-full max-w-lg">
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">
+          Payment Data of {paymentData.notes.customerName || "Unknown"}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="payment-id">Payment ID</Label>
+          <Input id="payment-id" value={paymentData.id || ""} readOnly />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="amount">Amount</Label>
+          <Input
+            id="amount"
+            value={new Intl.NumberFormat("en-IN", {
+              style: "currency",
+              currency: "INR",
+            }).format((paymentData.amount ?? 0) / 100)}
+            readOnly
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" value={paymentData.email || ""} readOnly />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="phone">Phone</Label>
+          <Input id="phone" value={paymentData.contact || ""} readOnly />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="created-at">Created At</Label>
+          <Input
+            id="created-at"
+            value={new Date(paymentData.created_at * 1000).toLocaleString(
+              undefined,
+              {
+                dateStyle: "full",
+                timeStyle: "long",
+              }
+            )}
+            readOnly
+          />
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-end">
+        <Button
+          disabled={loadingForButton}
+          onClick={handleSendEmail}
+        >
+          {loadingForButton ? "Loading..." : "Send Email"}
+        </Button>
+      </CardFooter>
+    </Card>
+  </div>
   );
 }
 
diff --git a/src/components/common/searchable-infinite-scroll-table.tsx b/src/components/common/searchable-infinite-scroll-table.tsx
index 738d63e..2b67817 100644
--- a/src/components/common/searchable-infinite-scroll-table.tsx
+++ b/src/components/common/searchable-infinite-scroll-table.tsx
@@ -133,6 +133,9 @@ export function SearchableInfiniteScrollTable() {
 
   return (
     <div className="container mx-auto py-10">
+      <h1 className="text-3xl font-bold text-primary py-4">
+        Payments {filteredData.length > 0 ? `(${filteredData.length})` : `(${data.length})`}
+      </h1>
       <div className="mb-4 relative">
         <Input
           type="text"

From f8c8ae244e8ddad3eddd787de422e269fa2d0cc6 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Fri, 29 Nov 2024 20:12:19 +0530
Subject: [PATCH 12/32] style: improved responsiveness for mobile view

---
 src/app/admin/layout.tsx               | 2 +-
 src/app/admin/payment/page.tsx         | 3 +--
 src/components/admin/Navbar/navbar.tsx | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 13c2d8b..fbe04ab 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -50,7 +50,7 @@ export default function RootLayout({
         <Providers>
           <div className="flex h-screen overflow-hidden">
             <AdminNavbar />
-            <main className="flex-1 overflow-auto bg-gray-800">
+            <main className="ml-16 md:ml-0 flex-1 overflow-y-auto bg-gray-800">
               {children}
             </main>
           </div>
diff --git a/src/app/admin/payment/page.tsx b/src/app/admin/payment/page.tsx
index 37c387e..8650e45 100644
--- a/src/app/admin/payment/page.tsx
+++ b/src/app/admin/payment/page.tsx
@@ -4,8 +4,7 @@ import React from "react";
 export default async function Payments() {
   return (
     <>
-      <div className="p-8 flex min-h-screen w-full flex-col bg-background">
-       
+      <div className="p-8 flex min-h-screen w-full flex-col bg-background">       
         <SearchableInfiniteScrollTable />
       </div>
     </>
diff --git a/src/components/admin/Navbar/navbar.tsx b/src/components/admin/Navbar/navbar.tsx
index 8f08410..ce946f0 100644
--- a/src/components/admin/Navbar/navbar.tsx
+++ b/src/components/admin/Navbar/navbar.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 
 export const AdminNavbar = () => {
   return (
-    <div className="flex bg-black h-screen text-white">
+    <div className="flex bg-black h-screen text-white fixed z-[999] sm:static sm:z-auto">
       <Sidebar />
       <NavbarContent />
     </div>

From 75278bf827329be012334c92c7b655b32405aabb Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 08:46:11 +0530
Subject: [PATCH 13/32] feat: Add getPaymentCount function

---
 src/app/actions/get-payment-count.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/app/actions/get-payment-count.ts

diff --git a/src/app/actions/get-payment-count.ts b/src/app/actions/get-payment-count.ts
new file mode 100644
index 0000000..53e98a4
--- /dev/null
+++ b/src/app/actions/get-payment-count.ts
@@ -0,0 +1,15 @@
+"use server";
+
+import { getServerSideSession } from "@/lib/get-server-session";
+import prisma from "@/server/db";
+
+export default async function getPaymentCount() {
+    const session = await getServerSideSession();
+    if (!session) {
+        return null;
+    }
+
+    const paymentCount = await prisma.payment.count();
+
+    return paymentCount;
+}

From 8d064c5d1222348a6ee7019fa7bf6643ecc0d08e Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 08:46:20 +0530
Subject: [PATCH 14/32] feat: Add getUserCount function

---
 src/app/actions/get-user-count.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/app/actions/get-user-count.ts

diff --git a/src/app/actions/get-user-count.ts b/src/app/actions/get-user-count.ts
new file mode 100644
index 0000000..2cfd371
--- /dev/null
+++ b/src/app/actions/get-user-count.ts
@@ -0,0 +1,14 @@
+"use server";
+import prisma from "@/server/db";
+import { getServerSideSession } from "@/lib/get-server-session";
+
+export default async function getUserCount() {
+    const session = await getServerSideSession();
+    if (!session) {
+        return null;
+    }
+
+    const userCount = await prisma.user.count();
+
+    return userCount;
+}
\ No newline at end of file

From 0a0add35be8e5dda94b755e76c643d785c59c44a Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 08:46:51 +0530
Subject: [PATCH 15/32] refactor: Improve error handling in GET payment route

---
 src/app/api/users/payment/route.ts | 126 ++++++++++++++++-------------
 1 file changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/app/api/users/payment/route.ts b/src/app/api/users/payment/route.ts
index 0e3c476..2653a3f 100644
--- a/src/app/api/users/payment/route.ts
+++ b/src/app/api/users/payment/route.ts
@@ -5,63 +5,79 @@ import { NextRequest, NextResponse } from "next/server";
 export const dynamic = "force-dynamic";
 
 export async function GET(request: NextRequest) {
-  const session = await getServerSideSession();
-  if (!session) {
-      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
-  }
+    const session = await getServerSideSession();
+    if (!session) {
+        return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
 
-  if (session.user?.role !== "ADMIN") {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
-  }
-  const { searchParams } = new URL(request.url);
-  try {
-    const page = Math.max(1, parseInt(searchParams.get("page") || "1", 10));
-    const search = searchParams.get("search") || "";
-    const limit = 10;
+    if (session.user?.role !== "ADMIN") {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
+    }
+    const { searchParams } = new URL(request.url);
+    try {
+        const page = Math.max(1, parseInt(searchParams.get("page") || "1", 10));
+        const search = searchParams.get("search") || "";
+        const limit = 10;
 
-    const [users, totalCount] = await Promise.all([
-      prisma.payment.findMany({
-        skip: (page - 1) * limit,
-        take: limit,
-        where: {
-          razorpayPaymentId: {
-            contains: search,
-          },
-        },
-        include: {
-          user: {
-            select: {
-              name: true,
-              email: true,
-            },
-          },
-        },
-      }),
-      prisma.payment.count({
-        where: {
-          razorpayPaymentId: {
-            contains: search,
-          },
-        },
-      }),
-    ]);
+        const [users, totalCount] = await Promise.all([
+            prisma.payment.findMany({
+                skip: (page - 1) * limit,
+                take: limit,
+                where: {
+                    OR: [
+                        // Update to search in multiple fields
+                        {
+                            razorpayPaymentId: {
+                                contains: search,
+                            },
+                        },
+                        {
+                            user: {
+                                name: {
+                                    contains: search,
+                                },
+                            },
+                        },
+                        {
+                            user: {
+                                email: {
+                                    contains: search,
+                                },
+                            },
+                        },
+                    ],
+                },
+                include: {
+                    user: {
+                        select: {
+                            name: true,
+                            email: true,
+                        },
+                    },
+                },
+            }),
+            prisma.payment.count({
+                where: {
+                    razorpayPaymentId: {
+                        contains: search,
+                    },
+                },
+            }),
+        ]);
 
-    const totalPages = Math.ceil(totalCount / limit);
+        const totalPages = Math.ceil(totalCount / limit);
 
-    return NextResponse.json({
-      users,
-      pagination: {
-        currentPage: page,
-        totalCount,
-        totalPages,
-        limit,
-      },
-    });
-  } catch (error) {
-    console.error("Error fetching payment details:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch data" },
-      { status: 500 },
-    );
-  }
+        return NextResponse.json({
+            users,
+            pagination: {
+                currentPage: page,
+                totalCount,
+                totalPages,
+                limit,
+            },
+        });
+    } catch (error) {
+        console.error("Error fetching payment details:", error);
+        return NextResponse.json({ error: "Failed to fetch data" }, { status: 500 });
+    }
 }

From 89d5ca18da4e6ba85d1d7c9e4ec67c1181ed255d Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 08:47:14 +0530
Subject: [PATCH 16/32] add totoal number of user count

---
 src/components/admin/user-list.tsx | 251 ++++++++++++++---------------
 1 file changed, 120 insertions(+), 131 deletions(-)

diff --git a/src/components/admin/user-list.tsx b/src/components/admin/user-list.tsx
index 1c8d917..7cab81e 100644
--- a/src/components/admin/user-list.tsx
+++ b/src/components/admin/user-list.tsx
@@ -2,13 +2,7 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import axios from "axios";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { Button } from "../ui/button";
@@ -16,150 +10,145 @@ import { ChevronDownIcon, SearchIcon } from "lucide-react";
 import { Input } from "../ui/input";
 import debounce from "lodash.debounce";
 import ChangeRole from "./change-role";
+import getUserCount from "@/app/actions/get-user-count";
 
 export interface User {
-  id: string;
-  name: string | null;
-  email: string | null;
-  role: string;
-  image: string | null;
+    id: string;
+    name: string | null;
+    email: string | null;
+    role: string;
+    image: string | null;
 }
 
 interface UsersListProps {
-  initialUsers: User[];
-  initialPage: number;
+    initialUsers: User[];
+    initialPage: number;
 }
 
 const UsersList: React.FC<UsersListProps> = ({ initialUsers, initialPage }) => {
-  const [userList, setUserList] = useState<User[]>(initialUsers);
-  const [currentPage, setCurrentPage] = useState(initialPage);
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [searchQuery, setSearchQuery] = useState("");
-  const loader = useRef<HTMLDivElement | null>(null);
+    const [userList, setUserList] = useState<User[]>(initialUsers);
+    const [currentPage, setCurrentPage] = useState(initialPage);
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [searchQuery, setSearchQuery] = useState("");
+    const loader = useRef<HTMLDivElement | null>(null);
+    const [totalNumberOfUsers, setTotalNumberOfUsers] = useState(0);
 
-  const fetchUsers = useCallback(
-    async (page: number, query: string, isNewSearch: boolean) => {
-      if (loading) return;
-      setLoading(true);
-      try {
-        const response = await axios.get(
-          `/api/users?page=${page}&search=${encodeURIComponent(query)}`,
-          {
-            headers: { "Cache-Control": "no-cache" },
-          }
-        );
-        if (response.data.users.length > 0) {
-          setUserList((prevUsers) =>
-            isNewSearch
-              ? response.data.users
-              : [...prevUsers, ...response.data.users]
-          );
-          setCurrentPage(page);
-          setHasMore(response.data.users.length === 10); // Assuming 10 is the page size
-        } else {
-          setHasMore(false);
+    const fetchUsers = useCallback(async (page: number, query: string, isNewSearch: boolean) => {
+        if (loading) return;
+        setLoading(true);
+        try {
+            const response = await axios.get(`/api/users?page=${page}&search=${encodeURIComponent(query)}`, {
+                headers: { "Cache-Control": "no-cache" },
+            });
+            if (response.data.users.length > 0) {
+                setUserList((prevUsers) =>
+                    isNewSearch ? response.data.users : [...prevUsers, ...response.data.users]
+                );
+                setCurrentPage(page);
+                setHasMore(response.data.users.length === 10); // Assuming 10 is the page size
+            } else {
+                setHasMore(false);
+            }
+        } catch (error) {
+            console.error("Error fetching users:", error);
+        }
+        setLoading(false);
+    }, []);
+
+    const loadMoreUsers = useCallback(() => {
+        if (hasMore && !loading) {
+            fetchUsers(currentPage + 1, searchQuery, false);
         }
-      } catch (error) {
-        console.error("Error fetching users:", error);
-      }
-      setLoading(false);
-    },
-    []
-  );
+    }, [currentPage, hasMore, searchQuery, fetchUsers, loading]);
 
-  const loadMoreUsers = useCallback(() => {
-    if (hasMore && !loading) {
-      fetchUsers(currentPage + 1, searchQuery, false);
-    }
-  }, [currentPage, hasMore, searchQuery, fetchUsers, loading]);
+    const debouncedSearch = useCallback(
+        debounce((query: string) => {
+            setCurrentPage(1);
+            setHasMore(true);
+            fetchUsers(1, query, true);
+        }, 500),
+        [fetchUsers]
+    );
 
-  const debouncedSearch = useCallback(
-    debounce((query: string) => {
-      setCurrentPage(1);
-      setHasMore(true);
-      fetchUsers(1, query, true);
-    }, 500),
-    [fetchUsers]
-  );
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const query = e.target.value;
+        setSearchQuery(query);
+        debouncedSearch(query);
+    };
 
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const query = e.target.value;
-    setSearchQuery(query);
-    debouncedSearch(query);
-  };
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && hasMore) {
+                    loadMoreUsers();
+                }
+            },
+            { threshold: 1.0 }
+        );
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasMore) {
-          loadMoreUsers();
+        if (loader.current) {
+            observer.observe(loader.current);
         }
-      },
-      { threshold: 1.0 }
-    );
 
-    if (loader.current) {
-      observer.observe(loader.current);
-    }
+        return () => observer.disconnect();
+    }, [hasMore, loadMoreUsers]);
 
-    return () => observer.disconnect();
-  }, [hasMore, loadMoreUsers]);
+    useEffect(() => {
+        async function getNumberOfUsers() {
+            const count = await getUserCount();
+            setTotalNumberOfUsers(count ?? 0); // Use 0 if count is null
+        }
+        getNumberOfUsers();
+    }, []);
 
-  return (
-    <Card className="w-full">
-      <div className="flex justify-end gap-2 mt-5 p-5">
-        <div className="relative">
-          <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            type="search"
-            placeholder="Search users..."
-            className="pl-8 sm:w-[200px] md:w-[300px]"
-            value={searchQuery}
-            onChange={handleSearchChange}
-          />
-        </div>
-      </div>
-      <CardHeader>
-        <CardTitle>Users {userList.length}</CardTitle>
-        <CardDescription>Manage user roles and permissions.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-4">
-          {userList.map((user) => (
-            <div
-              key={user.id}
-              className="grid grid-cols-[1fr_auto] items-center gap-4"
-            >
-              <div className="flex items-center gap-4">
-                <Avatar>
-                  <AvatarImage src={user.image || "/placeholder-user.jpg"} />
-                  <AvatarFallback>
-                    {user.name ? user.name[0] : "N/A"}
-                  </AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-sm font-medium">
-                    {user.name || "Unknown"}
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    {user.email || "No email"}
-                  </p>
+    return (
+        <Card className="w-full">
+            <div className="flex justify-end gap-2 mt-5 p-5">
+                <div className="relative">
+                    <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                    <Input
+                        type="search"
+                        placeholder="Search users..."
+                        className="pl-8 sm:w-[200px] md:w-[300px]"
+                        value={searchQuery}
+                        onChange={handleSearchChange}
+                    />
                 </div>
-              </div>
-
-              <ChangeRole userId={user.id} userRole={user.role} />
             </div>
-          ))}
-        </div>
-        {hasMore && (
-          <div ref={loader} className="text-center mt-4">
-            {loading ? "Loading..." : "Load more"}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
+            <CardHeader>
+                <CardTitle>Users {totalNumberOfUsers}</CardTitle>
+                <CardDescription>Manage user roles and permissions.</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div className="grid gap-4">
+                    {userList.map((user) => (
+                        <div key={user.id} className="grid grid-cols-[1fr_auto] items-center gap-4">
+                            <div className="flex items-center gap-4">
+                                <Avatar>
+                                    <AvatarImage src={user.image || "/placeholder-user.jpg"} />
+                                    <AvatarFallback>{user.name ? user.name[0] : "N/A"}</AvatarFallback>
+                                </Avatar>
+                                <div>
+                                    <p className="text-sm font-medium">{user.name || "Unknown"}</p>
+                                    <p className="text-sm text-muted-foreground">
+                                        {user.email || "No email"}
+                                    </p>
+                                </div>
+                            </div>
+
+                            <ChangeRole userId={user.id} userRole={user.role} />
+                        </div>
+                    ))}
+                </div>
+                {hasMore && (
+                    <div ref={loader} className="text-center mt-4">
+                        {loading ? "Loading..." : "Load more"}
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
 };
 
 export default UsersList;

From e11596b99a886c22136df31efde30b4166de9b0a Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 08:47:25 +0530
Subject: [PATCH 17/32] add total number of payment count

---
 .../searchable-infinite-scroll-table.tsx      | 312 +++++++++---------
 1 file changed, 153 insertions(+), 159 deletions(-)

diff --git a/src/components/common/searchable-infinite-scroll-table.tsx b/src/components/common/searchable-infinite-scroll-table.tsx
index 2b67817..cdffdb1 100644
--- a/src/components/common/searchable-infinite-scroll-table.tsx
+++ b/src/components/common/searchable-infinite-scroll-table.tsx
@@ -1,179 +1,173 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Input } from "@/components/ui/input";
 import { Loader2, Search } from "lucide-react";
 import axios from "axios";
 import debounce from "lodash.debounce";
+import getPaymentCount from "@/app/actions/get-payment-count";
 
 interface TableData {
-  user: {
-    name: string;
-    email: string;
-  };
-  usn?: string;
-  razorpayPaymentId: string;
-  contactNumber: string;
-  amount: number;
+    user: {
+        name: string;
+        email: string;
+    };
+    usn?: string;
+    razorpayPaymentId: string;
+    contactNumber: string;
+    amount: number;
 }
 
 export function SearchableInfiniteScrollTable() {
-  const [data, setData] = useState<TableData[]>([]);
-  const [filteredData, setFilteredData] = useState<TableData[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [page, setPage] = useState(1);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [hasMoreData, setHasMoreData] = useState(true);
-  const loaderRef = useRef<HTMLDivElement>(null);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  const getPaymentDetails = async (page: number, query: string) => {
-    if (isLoading || !hasMoreData) return;
-
-    setIsLoading(true);
-    try {
-      const response = await axios.get(
-        `/api/users/payment?page=${page}&search=${encodeURIComponent(query)}`,
-      );
-      const users = response.data.users;
-
-      if (users.length === 0) {
-        setHasMoreData(false); // No more data to load
-      }
-
-      setData((prevData) => {
-        const newData = [...prevData, ...users];
-        // Remove duplicates
-        const uniqueData = Array.from(
-          new Map(
-            newData.map((item) => [item.razorpayPaymentId, item]),
-          ).values(),
-        );
-        return uniqueData;
-      });
-      setPage((prevPage) => prevPage + 1);
-    } catch (error) {
-      console.error("Error fetching payment details:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const loadMoreData = () => {
-    if (searchTerm === "") {
-      getPaymentDetails(page, "");
-    }
-  };
-
-  const fetchSearchResults = useCallback(async (query: string) => {
-    setPage(1); // Reset page number
-    setHasMoreData(true); // Reset hasMoreData
-    try {
-      const response = await axios.get(
-        `/api/users/payment?page=1&search=${encodeURIComponent(query)}`,
-      );
-      const users = response.data.users;
-      setData(users); // Set new data from search
-      setFilteredData(users); // Set filtered data to the same as new data
-    } catch (error) {
-      console.error("Error fetching payment details:", error);
-    }
-  }, []);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedFetch = useCallback(
-    debounce((query: string) => {
-      fetchSearchResults(query);
-    }, 500),
-    [],
-  );
-
-  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    setSearchTerm(value);
-    debouncedFetch(value); // Use debounced fetch function
-  };
-
-  useEffect(() => {
-    loadMoreData(); // Initial load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    const [data, setData] = useState<TableData[]>([]);
+    const [filteredData, setFilteredData] = useState<TableData[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [totalNumberOfPayments, setTotalNumberOfPayments] = useState(0);
+    const [page, setPage] = useState(1);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [hasMoreData, setHasMoreData] = useState(true);
+    const loaderRef = useRef<HTMLDivElement>(null);
+    const observerRef = useRef<IntersectionObserver | null>(null);
+
+    const getPaymentDetails = async (page: number, query: string) => {
+        if (isLoading || !hasMoreData) return;
+
+        setIsLoading(true);
+        try {
+            const response = await axios.get(
+                `/api/users/payment?page=${page}&search=${encodeURIComponent(query)}`
+            );
+            const users = response.data.users;
+
+            if (users.length === 0) {
+                setHasMoreData(false); // No more data to load
+            }
+
+            setData((prevData) => {
+                const newData = [...prevData, ...users];
+                // Remove duplicates
+                const uniqueData = Array.from(
+                    new Map(newData.map((item) => [item.razorpayPaymentId, item])).values()
+                );
+                return uniqueData;
+            });
+            setPage((prevPage) => prevPage + 1);
+        } catch (error) {
+            console.error("Error fetching payment details:", error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && !isLoading) {
-          loadMoreData();
+    const loadMoreData = () => {
+        if (searchTerm === "") {
+            getPaymentDetails(page, "");
         }
-      },
-      { threshold: 1.0 },
+    };
+
+    const fetchSearchResults = useCallback(async (query: string) => {
+        setPage(1); // Reset page number
+        setHasMoreData(true); // Reset hasMoreData
+        try {
+            const response = await axios.get(`/api/users/payment?page=1&search=${encodeURIComponent(query)}`);
+            const users = response.data.users;
+            setData(users); // Set new data from search
+            setFilteredData(users); // Set filtered data to the same as new data
+        } catch (error) {
+            console.error("Error fetching payment details:", error);
+        }
+    }, []);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedFetch = useCallback(
+        debounce((query: string) => {
+            fetchSearchResults(query);
+        }, 500),
+        []
     );
 
-    if (loaderRef.current) {
-      observer.observe(loaderRef.current);
-    }
+    const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        setSearchTerm(value);
+        debouncedFetch(value); // Use debounced fetch function
+    };
 
-    return () => {
-      if (loaderRef.current) {
+    useEffect(() => {
+        loadMoreData(); // Initial load
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        observer.unobserve(loaderRef.current);
-      }
-      observer.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading]);
-
-  return (
-    <div className="container mx-auto py-10">
-      <h1 className="text-3xl font-bold text-primary py-4">
-        Payments {filteredData.length > 0 ? `(${filteredData.length})` : `(${data.length})`}
-      </h1>
-      <div className="mb-4 relative">
-        <Input
-          type="text"
-          placeholder="Search..."
-          value={searchTerm}
-          onChange={handleSearch}
-          className="pl-10"
-        />
-        <Search
-          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-          size={20}
-        />
-      </div>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Payment ID</TableHead>
-            <TableHead>Amount</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {(searchTerm ? filteredData : data).map((item, index) => (
-            <TableRow key={index}>
-              <TableCell>{item.user.name}</TableCell>
-              <TableCell>{item.user.email}</TableCell>
-              <TableCell>{item.razorpayPaymentId}</TableCell>
-              <TableCell>₹{item.amount.toFixed(2)}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      {searchTerm === "" && hasMoreData && (
-        <div ref={loaderRef} className="flex justify-center py-4">
-          {isLoading && <Loader2 className="h-6 w-6 animate-spin" />}
+        async function getNumberOfPayments() {
+            const count = await getPaymentCount();
+            setTotalNumberOfPayments(count ?? 0); // Use 0 if count is null
+        }
+        getNumberOfPayments();
+    }, []);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && !isLoading) {
+                    loadMoreData();
+                }
+            },
+            { threshold: 1.0 }
+        );
+
+        if (loaderRef.current) {
+            observer.observe(loaderRef.current);
+        }
+
+        return () => {
+            if (loaderRef.current) {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                observer.unobserve(loaderRef.current);
+            }
+            observer.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoading]);
+
+    return (
+        <div className="container mx-auto py-10">
+            <h1 className="text-3xl font-bold text-primary py-4">Payments {totalNumberOfPayments}</h1>
+            <div className="mb-4 relative">
+                <Input
+                    type="text"
+                    placeholder="Search..."
+                    value={searchTerm}
+                    onChange={handleSearch}
+                    className="pl-10"
+                />
+                <Search
+                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                    size={20}
+                />
+            </div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Email</TableHead>
+                        <TableHead>Payment ID</TableHead>
+                        <TableHead>Amount</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {(searchTerm ? filteredData : data).map((item, index) => (
+                        <TableRow key={index}>
+                            <TableCell>{item.user.name}</TableCell>
+                            <TableCell>{item.user.email}</TableCell>
+                            <TableCell>{item.razorpayPaymentId}</TableCell>
+                            <TableCell>₹{item.amount.toFixed(2)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            {searchTerm === "" && hasMoreData && (
+                <div ref={loaderRef} className="flex justify-center py-4">
+                    {isLoading && <Loader2 className="h-6 w-6 animate-spin" />}
+                </div>
+            )}
         </div>
-      )}
-    </div>
-  );
+    );
 }

From c3d8b8c4773d7fda6110cd2b2eba2d9d1a6c42c2 Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 16:26:43 +0530
Subject: [PATCH 18/32] refactor: Improve error handling and add multiple
 coupon code creation in saveCoupon function

---
 src/app/actions/create-coupon-code.ts | 63 ++++++++++++++++-----------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/app/actions/create-coupon-code.ts b/src/app/actions/create-coupon-code.ts
index ff43411..7053578 100644
--- a/src/app/actions/create-coupon-code.ts
+++ b/src/app/actions/create-coupon-code.ts
@@ -1,33 +1,46 @@
 "use server";
+import { generateCouponCode } from "@/lib/helper";
 import prisma from "@/server/db";
 import { couponSchema } from "@/utils/zod-schemas";
 
 export const saveCoupon = async (
-  coupon: string,
-  createdById: string,
-  discount: number = 20
+    coupon: string,
+    createdById: string,
+    discount: number = 20,
+    numberOfCoupons: number = 1
 ) => {
-  try {
-    const validatCoupon = couponSchema.parse({ coupon, createdById, discount });
-    const couponExists = await prisma.referral.findFirst({
-      where: {
-        code: validatCoupon.coupon,
-      },
-    });
-    if (couponExists) {
-      throw new Error("Coupon code already exists");
+    try {
+        const validatCoupon = couponSchema.parse({ coupon, createdById, discount });
+
+        // Check if the coupon already exists
+        const couponExists = await prisma.referral.findFirst({
+            where: { code: validatCoupon.coupon },
+        });
+        if (couponExists) {
+            throw new Error("Coupon code already exists");
+        }
+
+        // Create coupons
+        const createCoupon = async (code: string) => {
+            return prisma.referral.create({
+                data: {
+                    code,
+                    isUsed: false,
+                    createdById: validatCoupon.createdById,
+                    discountPercentage: validatCoupon.discount.toString(),
+                },
+            });
+        };
+
+        const couponCodes =
+            numberOfCoupons === 1
+                ? [validatCoupon.coupon]
+                : Array.from({ length: numberOfCoupons }, () => generateCouponCode(10));
+
+        const responses = await Promise.all(couponCodes.map(createCoupon));
+        return responses;
+    } catch (error) {
+        console.error("Error creating coupon:", error);
+        throw new Error("Failed to create coupon. Please try again later.");
     }
-    const resp = await prisma.referral.create({
-      data: {
-        code: validatCoupon.coupon,
-        isUsed: false,
-        createdById: validatCoupon.createdById,
-        discountPercentage: validatCoupon.discount.toString(),
-      },
-    });
-    return resp;
-  } catch (error) {
-    console.error("Error creating coupon:", error);
-    throw new Error("Failed to create coupon. Please try again later.");
-  }
 };

From 6a5f7e4837e36c9433fb3695d89c69b06ea1d9c4 Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 16:26:53 +0530
Subject: [PATCH 19/32] feat: Add Loading component

---
 src/app/admin/loading.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/app/admin/loading.tsx

diff --git a/src/app/admin/loading.tsx b/src/app/admin/loading.tsx
new file mode 100644
index 0000000..effbbb6
--- /dev/null
+++ b/src/app/admin/loading.tsx
@@ -0,0 +1,31 @@
+"use client"
+import React from "react";
+
+const Loading: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <div className="loader"></div>
+            <style jsx>{`
+                .loader {
+                    border: 8px solid #f3f3f3; /* Light grey */
+                    border-top: 8px solid #3498db; /* Blue */
+                    border-radius: 50%;
+                    width: 60px;
+                    height: 60px;
+                    animation: spin 1s linear infinite;
+                }
+
+                @keyframes spin {
+                    0% {
+                        transform: rotate(0deg);
+                    }
+                    100% {
+                        transform: rotate(360deg);
+                    }
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default Loading;

From 1f84930dee4ae43ed8d6f69e73d2f7ef21b62eef Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Sat, 30 Nov 2024 16:27:26 +0530
Subject: [PATCH 20/32] feat : bulk coupon code creation

---
 src/components/admin/code-generation-card.tsx | 217 ++++++++++--------
 1 file changed, 122 insertions(+), 95 deletions(-)

diff --git a/src/components/admin/code-generation-card.tsx b/src/components/admin/code-generation-card.tsx
index dd6369e..f09d288 100644
--- a/src/components/admin/code-generation-card.tsx
+++ b/src/components/admin/code-generation-card.tsx
@@ -22,10 +22,13 @@ import { useState } from "react";
 // import { toast } from "sonner";
 import getErrorMessage from "@/utils/getErrorMessage";
 import { Copy, Check } from "lucide-react";
+import { toast } from "sonner";
 
 export function Coupon({ session }: { session: NextAuthSession }) {
   const [discount, setDiscount] = useState("20");
+  const [numberOfCoupons, setNumberOfCoupons] = useState("1");
   const [checked, setChecked] = useState(false);
+  const [numberOfCouponsChecked, setNumberOfCouponsChecked] = useState(false);
   const [disabled, setDisabled] = useState(true);
   const [copied, setCopied] = useState(false);
   const { data, isPending, isError, error, refetch } = useQuery({
@@ -44,108 +47,132 @@ export function Coupon({ session }: { session: NextAuthSession }) {
 
   const handleGenerateCoupon = async () => {
     try {
-      await saveCoupon(data as string, session.user.id, Number(discount));
+      await saveCoupon(data as string, session.user.id, Number(discount) , Number(numberOfCoupons));
       // refetch();
       setDisabled(true);
-      alert("Coupon code saved successfully");
+     alert("Coupon code saved successfully");
     } catch (error) {
       alert(getErrorMessage(error));
     }
   };
 
   return (
-    <Tabs defaultValue="account" className="w-[400px]">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="account">Create</TabsTrigger>
-        <TabsTrigger value="password">Store</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <Card>
-          <CardHeader>
-            <CardTitle>Coupon code</CardTitle>
-            <CardDescription>
-              Here you can create the coupon code and add it to the database
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="username">Code</Label>
-              <Input id="username" disabled value={isPending ? "" : data} />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="username">Discount(%)</Label>
-              <Input
-                id="discount"
-                value={discount}
-                disabled={!checked}
-                onChange={(e) => {
-                  setDiscount(e.target.value);
-                }}
-              />
-            </div>
-            <div className="flex items-center space-x-2 mt-2">
-              <Checkbox
-                id="discount_terms"
-                checked={checked}
-                onClick={() => {
-                  setChecked(!checked);
-                }}
-              />
-              <label
-                htmlFor="terms"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Edit default discount
-              </label>
-            </div>
-          </CardContent>
-          <CardFooter>
-            <CouponGeneratorDialog
-              onGenerateCoupon={() => {
-                refetch();
-                setDisabled(false);
-              }}
-            />
-          </CardFooter>
-        </Card>
-      </TabsContent>
-      <TabsContent value="password">
-        <Card>
-          <CardHeader>
-            <CardTitle>Coupon code</CardTitle>
-            <CardDescription>
-              You can see the generated coupon code below
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="new">Coupon code</Label>
-              <div className="flex items-center space-x-2">
-                <Input id="new" type="text" disabled value={data} />
-                <button
-                  onClick={handleCopy}
-                  className="p-2 text-gray-700 bg-gray-200 rounded hover:bg-gray-300 focus:outline-none"
-                  title={copied ? "Copied!" : "Copy to clipboard"}
-                >
-                  {copied ? (
-                    <Check size={16} className="text-green-500" />
-                  ) : (
-                    <Copy size={16} />
-                  )}
-                </button>
-              </div>
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button
-              disabled={data === undefined || isPending || disabled}
-              onClick={handleGenerateCoupon}
-            >
-              Save coupon
-            </Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-    </Tabs>
+      <Tabs defaultValue="account" className="w-[400px]">
+          <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="account">Create</TabsTrigger>
+              <TabsTrigger value="password">Store</TabsTrigger>
+          </TabsList>
+          <TabsContent value="account">
+              <Card>
+                  <CardHeader>
+                      <CardTitle>Coupon code</CardTitle>
+                      <CardDescription>
+                          Here you can create the coupon code and add it to the database
+                      </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-2">
+                      <div className="space-y-1">
+                          <Label htmlFor="username">Code</Label>
+                          <Input id="username" disabled value={isPending ? "" : data} />
+                      </div>
+                      <div className="space-y-1">
+                          <Label htmlFor="username">Discount(%)</Label>
+                          <Input
+                              id="discount"
+                              value={discount}
+                              disabled={!checked}
+                              onChange={(e) => {
+                                  setDiscount(e.target.value);
+                              }}
+                          />
+                      </div>
+                      <div className="flex items-center space-x-2 mt-2">
+                          <Checkbox
+                              id="number_of_coupons"
+                              checked={checked}
+                              onClick={() => {
+                                  setChecked(!checked);
+                              }}
+                          />
+                          <label
+                              htmlFor="terms"
+                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                          >
+                              Edit default number of coupons
+                          </label>
+                      </div>
+                      <div className="space-y-1">
+                          <Label htmlFor="username">Number of coupons</Label>
+                          <Input
+                              id="number_of_coupons"
+                              value={numberOfCoupons}
+                              disabled={!numberOfCouponsChecked}
+                              onChange={(e) => {
+                                  setNumberOfCoupons(e.target.value);
+                              }}
+                          />
+                      </div>
+                      <div className="flex items-center space-x-2 mt-2">
+                          <Checkbox
+                              id="discount_terms"
+                              checked={numberOfCouponsChecked}
+                              onClick={() => {
+                                  setNumberOfCouponsChecked(!numberOfCouponsChecked);
+                              }}
+                          />
+                          <label
+                              htmlFor="terms"
+                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                          >
+                              Edit default number of coupons
+                          </label>
+                      </div>
+                  </CardContent>
+                  <CardFooter>
+                      <CouponGeneratorDialog
+                          onGenerateCoupon={() => {
+                              refetch();
+                              setDisabled(false);
+                          }}
+                      />
+                  </CardFooter>
+              </Card>
+          </TabsContent>
+          <TabsContent value="password">
+              <Card>
+                  <CardHeader>
+                      <CardTitle>Coupon code</CardTitle>
+                      <CardDescription>You can see the generated coupon code below</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-2">
+                      <div className="space-y-1">
+                          <Label htmlFor="new">Coupon code</Label>
+                          <div className="flex items-center space-x-2">
+                              <Input id="new" type="text" disabled value={data} />
+                              <button
+                                  onClick={handleCopy}
+                                  className="p-2 text-gray-700 bg-gray-200 rounded hover:bg-gray-300 focus:outline-none"
+                                  title={copied ? "Copied!" : "Copy to clipboard"}
+                              >
+                                  {copied ? (
+                                      <Check size={16} className="text-green-500" />
+                                  ) : (
+                                      <Copy size={16} />
+                                  )}
+                              </button>
+                          </div>
+                      </div>
+                  </CardContent>
+                  <CardFooter>
+                      <Button
+                          disabled={data === undefined || isPending || disabled}
+                          onClick={handleGenerateCoupon}
+                      >
+                          Save coupon
+                      </Button>
+                  </CardFooter>
+              </Card>
+          </TabsContent>
+      </Tabs>
   );
 }

From 9fd0964d8b2956c37c1c0ebf51fcc6dc03e16250 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Sun, 1 Dec 2024 17:23:21 +0530
Subject: [PATCH 21/32] feat: Add loading state and support for COORDINATOR
 role in admin layout and middleware

---
 src/app/admin/layout.tsx | 11 +++++++++--
 src/middleware.ts        | 10 +++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index fbe04ab..a42bc52 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -6,6 +6,7 @@ import "./globals.css";
 import Providers from "@/components/layout/Provider";
 import { AdminNavbar } from "@/components/admin/Navbar/navbar";
 import { useSession } from "next-auth/react";
+import Loading from "./loading";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,10 +15,16 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { data: session } = useSession({
+  const { data: session, status : sessionStatus } = useSession({
     required: true,
   });
 
+  if (sessionStatus === "loading") {
+    return (
+      <Loading />
+    );
+  } 
+
   if (!session) {
     return (
       <div className="w-screen h-screen flex justify-center items-center bg-black text-gray-200">
@@ -31,7 +38,7 @@ export default function RootLayout({
     );
   }
 
-  if (session.user.role !== "ADMIN") {
+  if (session.user.role !== "ADMIN" && session.user.role !== "COORDINATOR") {
     return (
       <div className="w-screen h-screen flex justify-center items-center bg-black text-gray-200">
         <div className="text-center">
diff --git a/src/middleware.ts b/src/middleware.ts
index 4c5cbfc..d4611ae 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -13,11 +13,11 @@ export async function middleware(request: NextRequest) {
       return NextResponse.redirect(new URL("/", request.url));
     }
   }
-  // if (url.pathname.startsWith("/register")) {
-  //   if (token?.role !== "ADMIN") {
-  //     return NextResponse.redirect(new URL("/", request.url));
-  //   }
-  // }
+  if (url.pathname.startsWith("/register")) {
+    if (token?.role !== "ADMIN" && token?.role !== "COORDINATOR") {
+      return NextResponse.redirect(new URL("/", request.url));
+    }
+  }
   
 }
 

From b3ee87059f835761ca48a72a2c390084fa010fbf Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Sun, 1 Dec 2024 23:42:12 +0530
Subject: [PATCH 22/32] feat: rendering nav items based on role and some style
 imporvements

---
 src/app/admin/loading.tsx                     |  2 +-
 src/app/admin/page.tsx                        |  3 +-
 src/components/admin/Navbar/navbar.tsx        | 64 +++++++++++--------
 .../searchable-infinite-scroll-table.tsx      |  2 +-
 4 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/app/admin/loading.tsx b/src/app/admin/loading.tsx
index effbbb6..9410ac2 100644
--- a/src/app/admin/loading.tsx
+++ b/src/app/admin/loading.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 const Loading: React.FC = () => {
     return (
-        <div className="flex items-center justify-center h-screen">
+        <div className="flex items-center justify-center h-screen text-red-500">
             <div className="loader"></div>
             <style jsx>{`
                 .loader {
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 98cb1ce..972f70f 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Coupon } from "@/components/admin/code-generation-card";
+import { Payment } from "@/components/payment/payment";
 import { useSession } from "next-auth/react";
 export default function AdminPage() {
   const { data: session } = useSession();
@@ -11,7 +12,7 @@ export default function AdminPage() {
   return (
     <>
       <div className="h-screen flex  items-center justify-center bg-gray-800">
-        <Coupon session={session} />
+        {session?.user?.role === "ADMIN" ? <Coupon session={session} /> : <Payment />}
       </div>
     </>
   );
diff --git a/src/components/admin/Navbar/navbar.tsx b/src/components/admin/Navbar/navbar.tsx
index ce946f0..d45e332 100644
--- a/src/components/admin/Navbar/navbar.tsx
+++ b/src/components/admin/Navbar/navbar.tsx
@@ -7,6 +7,7 @@ import { MdPayment } from "react-icons/md";
 import { SiTicktick, SiRazorpay } from "react-icons/si";
 import { motion } from "framer-motion";
 import Link from "next/link";
+import { useSession } from "next-auth/react";
 
 export const AdminNavbar = () => {
   return (
@@ -20,6 +21,7 @@ export const AdminNavbar = () => {
 const Sidebar = () => {
   const [open, setOpen] = useState(true);
   const [selected, setSelected] = useState("Dashboard");
+  const { data: session } = useSession();
 
   return (
     <motion.nav
@@ -32,14 +34,16 @@ const Sidebar = () => {
       <TitleSection open={open} />
 
       <div className="space-y-1">
-        <Option
-          Icon={RiCoupon3Line}
-          title="Coupon"
-          selected={selected}
-          setSelected={setSelected}
-          open={open}
-          href="/admin"
-        />
+        {session?.user?.role === "ADMIN" && (
+          <Option
+            Icon={RiCoupon3Line}
+            title="Coupon"
+            selected={selected}
+            setSelected={setSelected}
+            open={open}
+            href="/admin"
+          />
+        )}
         <Option
           Icon={FiUser}
           title="Users"
@@ -56,22 +60,26 @@ const Sidebar = () => {
           open={open}
           href="/admin/payment"
         />
-        <Option
-          Icon={SiTicktick}
-          title="Verify"
-          selected={selected}
-          setSelected={setSelected}
-          open={open}
-          href="/admin/verify"
-        />
-        <Option
-          Icon={SiRazorpay}
-          title="Razorpay"
-          selected={selected}
-          setSelected={setSelected}
-          open={open}
-          href="/admin/razorpay"
-        />
+        {session?.user?.role === "ADMIN" && (
+          <Option
+            Icon={SiTicktick}
+            title="Verify"
+            selected={selected}
+            setSelected={setSelected}
+            open={open}
+            href="/admin/verify"
+          />
+        )}
+        {session?.user?.role === "ADMIN" && (
+          <Option
+            Icon={SiRazorpay}
+            title="Razorpay"
+            selected={selected}
+            setSelected={setSelected}
+            open={open}
+            href="/admin/razorpay"
+          />
+        )}
       </div>
 
       <ToggleClose open={open} setOpen={setOpen} />
@@ -157,7 +165,9 @@ const TitleSection = ({ open }: { open: boolean }) => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.125 }}
             >
-              <span className="block text-md font-semibold text-red-500">Tedxsjec</span>
+              <span className="block text-md font-semibold text-red-500">
+                Tedxsjec
+              </span>
               <span className="block text-xs text-gray-400">Admin Page</span>
             </motion.div>
           )}
@@ -233,4 +243,6 @@ const ToggleClose = ({
   );
 };
 
-const NavbarContent = () => <div className="h-[200vh] w-full bg-gray-900"></div>;
+const NavbarContent = () => (
+  <div className="h-[200vh] w-full bg-gray-900"></div>
+);
diff --git a/src/components/common/searchable-infinite-scroll-table.tsx b/src/components/common/searchable-infinite-scroll-table.tsx
index cdffdb1..a8e4712 100644
--- a/src/components/common/searchable-infinite-scroll-table.tsx
+++ b/src/components/common/searchable-infinite-scroll-table.tsx
@@ -129,7 +129,7 @@ export function SearchableInfiniteScrollTable() {
 
     return (
         <div className="container mx-auto py-10">
-            <h1 className="text-3xl font-bold text-primary py-4">Payments {totalNumberOfPayments}</h1>
+            <h1 className="text-3xl font-bold text-primary py-4">Payments ({totalNumberOfPayments})</h1>
             <div className="mb-4 relative">
                 <Input
                     type="text"

From cd34edc9d0101f9ed7dc57b2810308f3045a130a Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Sun, 1 Dec 2024 23:53:02 +0530
Subject: [PATCH 23/32] feat: enhance admin layout with loading state and
 Google sign-in, update mobile warning message

---
 src/app/admin/layout.tsx      | 37 +++++++++++++++++++++++++++++------
 src/app/admin/verify/page.tsx |  4 ++--
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index a42bc52..00050ab 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -5,8 +5,9 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import Providers from "@/components/layout/Provider";
 import { AdminNavbar } from "@/components/admin/Navbar/navbar";
-import { useSession } from "next-auth/react";
-import Loading from "./loading";
+import { signIn, useSession } from "next-auth/react";
+import { useEffect, useState } from "react";
+import { tailChase } from "ldrs";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -15,15 +16,39 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { data: session, status : sessionStatus } = useSession({
+  const { data: session, status } = useSession({
     required: true,
+    onUnauthenticated: async () => {
+      await signIn("google");
+    },
   });
 
-  if (sessionStatus === "loading") {
+  if (typeof window !== "undefined") {
+    tailChase.register();
+  }
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (status === "loading") {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [status]);
+
+  if (isLoading || status !== "authenticated" || !session) {
+    // Show the loading spinner if session is loading or not authenticated
     return (
-      <Loading />
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <l-tail-chase
+          size={"88"}
+          speed={"1.75"}
+          color={"#FF0000"}
+        ></l-tail-chase>
+      </div>
     );
-  } 
+  }
 
   if (!session) {
     return (
diff --git a/src/app/admin/verify/page.tsx b/src/app/admin/verify/page.tsx
index e0c56e9..516958e 100644
--- a/src/app/admin/verify/page.tsx
+++ b/src/app/admin/verify/page.tsx
@@ -57,8 +57,8 @@ const QRCodeScanner = () => {
             Error
           </h1>
           <p className="text-center text-gray-700">
-            This feature is only available on mobile devices. Please access this
-            page from your smartphone or tablet.
+            This feature is not available on mobile devices. Please access this
+            page from your tablet or laptop.
           </p>
         </div>
       </div>

From 5b92f9cc76fa5b586861d4d95248e060ec09bbcb Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:13:20 +0530
Subject: [PATCH 24/32] refactor: added an error message when camera is not
 allowed

---
 src/app/admin/verify/page.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/verify/page.tsx b/src/app/admin/verify/page.tsx
index 516958e..d119bcb 100644
--- a/src/app/admin/verify/page.tsx
+++ b/src/app/admin/verify/page.tsx
@@ -15,7 +15,7 @@ const QRCodeScanner = () => {
       const userAgent =
         navigator.userAgent || navigator.vendor || (window as any).opera;
       return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
-        userAgent.toLowerCase(),
+        userAgent.toLowerCase()
       );
     };
     setIsMobile(checkMobile());
@@ -30,7 +30,7 @@ const QRCodeScanner = () => {
           const url = new URL(result);
 
           if (!url.href.startsWith("https://tedxsjec")) {
-              throw new Error("Invalid QR code . Please scan a valid QR code");
+            throw new Error("Invalid QR code . Please scan a valid QR code");
           }
           // Redirect to the scanned URL
           router.push(url.toString());
@@ -41,8 +41,14 @@ const QRCodeScanner = () => {
     }
   };
 
+  
+
   const handleError = (error: unknown) => {
-    if (error instanceof Error) {
+    if (error instanceof DOMException && error.name === "NotAllowedError") {
+      setError(
+        "Camera access denied. Please allow camera access to scan QR codes."
+      );
+    } else if (error instanceof Error) {
       setError("Error accessing camera: " + error.message);
     } else {
       setError("An unknown error occurred.");

From 13e1237b764b95f6f7b99cf8e3ba42e1c72e2de1 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:17:24 +0530
Subject: [PATCH 25/32] style: added redirecting animation

---
 src/app/auth/signin/signin-page.tsx | 6 +++++-
 src/app/auth/signout/page.tsx       | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/auth/signin/signin-page.tsx b/src/app/auth/signin/signin-page.tsx
index 0acb1bd..ca78789 100644
--- a/src/app/auth/signin/signin-page.tsx
+++ b/src/app/auth/signin/signin-page.tsx
@@ -53,7 +53,11 @@ export default function SignIn() {
                     <l-tail-chase size={"88"} speed={"1.75"} color={"#FF0000"}></l-tail-chase>
                 </div>
             ) : (
-                <p>Redirecting...</p>
+                <div className="flex flex-col items-center">
+                    <l-tail-chase size={"88"} speed={"1.75"} color={"#FF0000"}></l-tail-chase>
+                    <p className="text-red-500 text-center mt-4">Please wait, redirecting...</p>
+                </div>
+                
             )}
         </div>
     );
diff --git a/src/app/auth/signout/page.tsx b/src/app/auth/signout/page.tsx
index 684e85e..d0dbacc 100644
--- a/src/app/auth/signout/page.tsx
+++ b/src/app/auth/signout/page.tsx
@@ -39,7 +39,10 @@ export default function Signin() {
           ></l-tail-chase>
         </div>
       ) : (
-        <p>Redirecting...</p>
+        <div className="flex flex-col items-center">
+        <l-tail-chase size={"88"} speed={"1.75"} color={"#FF0000"}></l-tail-chase>
+        <p className="text-red-500 text-center mt-4">Please wait, redirecting...</p>
+    </div>
       )}
     </div>
   );

From 760dd83f747a7e1809ac9b095dda501c4dc16ee5 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:31:43 +0530
Subject: [PATCH 26/32] refactor: clean up signout page layout and improve
 middleware role checks

---
 src/app/auth/signout/page.tsx | 12 +++++++++---
 src/middleware.ts             |  6 ------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/auth/signout/page.tsx b/src/app/auth/signout/page.tsx
index d0dbacc..811050e 100644
--- a/src/app/auth/signout/page.tsx
+++ b/src/app/auth/signout/page.tsx
@@ -40,9 +40,15 @@ export default function Signin() {
         </div>
       ) : (
         <div className="flex flex-col items-center">
-        <l-tail-chase size={"88"} speed={"1.75"} color={"#FF0000"}></l-tail-chase>
-        <p className="text-red-500 text-center mt-4">Please wait, redirecting...</p>
-    </div>
+          <l-tail-chase
+            size={"88"}
+            speed={"1.75"}
+            color={"#FF0000"}
+          ></l-tail-chase>
+          <p className="text-red-500 text-center mt-4">
+            Please wait, redirecting...
+          </p>
+        </div>
       )}
     </div>
   );
diff --git a/src/middleware.ts b/src/middleware.ts
index d4611ae..46bffdd 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -9,16 +9,10 @@ export async function middleware(request: NextRequest) {
   const url = request.nextUrl;
 
   if (url.pathname.startsWith("/admin")) {
-    if (token?.role !== "ADMIN") {
-      return NextResponse.redirect(new URL("/", request.url));
-    }
-  }
-  if (url.pathname.startsWith("/register")) {
     if (token?.role !== "ADMIN" && token?.role !== "COORDINATOR") {
       return NextResponse.redirect(new URL("/", request.url));
     }
   }
-  
 }
 
 // See "Matching Paths" below to learn more

From e8a615057ac7012c38b887db1b4153e5d0998a58 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:32:33 +0530
Subject: [PATCH 27/32] style: added a welcome page when coordinator logs in

---
 src/app/admin/page.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 972f70f..fc474c9 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,18 +1,30 @@
 "use client";
 import { Coupon } from "@/components/admin/code-generation-card";
-import { Payment } from "@/components/payment/payment";
 import { useSession } from "next-auth/react";
+import Payments from "./payment/page";
 export default function AdminPage() {
   const { data: session } = useSession();
 
-  if (!session || session.user.role != "ADMIN") {
+  if (
+    !session ||
+    (session.user.role != "ADMIN" && session.user.role != "COORDINATOR")
+  ) {
     return <div>Unauthorized </div>;
   }
 
   return (
     <>
       <div className="h-screen flex  items-center justify-center bg-gray-800">
-        {session?.user?.role === "ADMIN" ? <Coupon session={session} /> : <Payment />}
+        {session.user.role === "ADMIN" ? (
+          <Coupon session={session} />
+        ) : session.user.role === "COORDINATOR" ? (
+          <div className="h-screen w-screen flex flex-col items-center justify-center bg-white text-2xl font-semibold">
+            <h1 className="mb-2 text-red-600">Welcome, Coordinator!</h1>
+            <p className="text-sm text-black">
+              You have successfully logged in with the Coordinator role.
+            </p>
+          </div>
+        ) : null}
       </div>
     </>
   );

From baaed92fb1983961d5d7d2ba5ec2865d981ae7cb Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 2 Dec 2024 00:38:51 +0530
Subject: [PATCH 28/32] refactor:removed users and added verify in admin nav

---
 src/components/admin/Navbar/navbar.tsx | 32 +++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/admin/Navbar/navbar.tsx b/src/components/admin/Navbar/navbar.tsx
index d45e332..310116f 100644
--- a/src/components/admin/Navbar/navbar.tsx
+++ b/src/components/admin/Navbar/navbar.tsx
@@ -44,32 +44,32 @@ const Sidebar = () => {
             href="/admin"
           />
         )}
+        {session?.user?.role === "ADMIN" && (
+          <Option
+            Icon={FiUser}
+            title="Users"
+            selected={selected}
+            setSelected={setSelected}
+            open={open}
+            href="/admin/users"
+          />
+        )}
         <Option
-          Icon={FiUser}
-          title="Users"
+          Icon={MdPayment}
+          title="Payments"
           selected={selected}
           setSelected={setSelected}
           open={open}
-          href="/admin/users"
+          href="/admin/payment"
         />
         <Option
-          Icon={MdPayment}
-          title="Payments"
+          Icon={SiTicktick}
+          title="Verify"
           selected={selected}
           setSelected={setSelected}
           open={open}
-          href="/admin/payment"
+          href="/admin/verify"
         />
-        {session?.user?.role === "ADMIN" && (
-          <Option
-            Icon={SiTicktick}
-            title="Verify"
-            selected={selected}
-            setSelected={setSelected}
-            open={open}
-            href="/admin/verify"
-          />
-        )}
         {session?.user?.role === "ADMIN" && (
           <Option
             Icon={SiRazorpay}

From ac12483a606dc8144b30f2b9161dd7b09f9b7550 Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Mon, 2 Dec 2024 09:12:05 +0530
Subject: [PATCH 29/32] refactor: allow COORDINATOR role access in payment
 routes

---
 src/app/api/users/payment/route.ts | 2 +-
 src/app/api/users/route.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/api/users/payment/route.ts b/src/app/api/users/payment/route.ts
index 2653a3f..21e321e 100644
--- a/src/app/api/users/payment/route.ts
+++ b/src/app/api/users/payment/route.ts
@@ -10,7 +10,7 @@ export async function GET(request: NextRequest) {
         return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
     }
 
-    if (session.user?.role !== "ADMIN") {
+    if (session.user?.role !== "ADMIN" && session.user?.role !== "COORDINATOR") {
         return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
     }
     const { searchParams } = new URL(request.url);
diff --git a/src/app/api/users/route.ts b/src/app/api/users/route.ts
index b0ce895..61e9383 100644
--- a/src/app/api/users/route.ts
+++ b/src/app/api/users/route.ts
@@ -9,7 +9,7 @@ export async function GET(req: Request) {
         return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
     }
 
-    if (session.user?.role !== "ADMIN") {
+    if (session.user?.role !== "ADMIN" && session.user?.role !== "COORDINATOR") {
         return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
     }
 

From 1d7680939684402dbae7903a1b0b5b41392c3d05 Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Mon, 2 Dec 2024 17:32:08 +0530
Subject: [PATCH 30/32] Refactor payment page to use PaymentCards component

---
 src/app/admin/payment/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/admin/payment/page.tsx b/src/app/admin/payment/page.tsx
index 8650e45..39528fe 100644
--- a/src/app/admin/payment/page.tsx
+++ b/src/app/admin/payment/page.tsx
@@ -1,12 +1,12 @@
-import { SearchableInfiniteScrollTable } from "@/components/common/searchable-infinite-scroll-table";
+import { PaymentCards } from "@/components/common/searchable-infinite-scroll-table";
 import React from "react";
 
 export default async function Payments() {
-  return (
-    <>
-      <div className="p-8 flex min-h-screen w-full flex-col bg-background">       
-        <SearchableInfiniteScrollTable />
-      </div>
-    </>
-  );
+    return (
+        <>
+            <div className="p-8 flex min-h-screen w-full flex-col bg-background">
+                <PaymentCards />
+            </div>
+        </>
+    );
 }

From 553b750a6c61d982ae2b75b8ae0ab890c8cf6b08 Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Mon, 2 Dec 2024 17:32:20 +0530
Subject: [PATCH 31/32] Refactor payment route to include user's photo in the
 response

---
 src/app/api/users/payment/route.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/app/api/users/payment/route.ts b/src/app/api/users/payment/route.ts
index 21e321e..7f1c30c 100644
--- a/src/app/api/users/payment/route.ts
+++ b/src/app/api/users/payment/route.ts
@@ -52,6 +52,12 @@ export async function GET(request: NextRequest) {
                         select: {
                             name: true,
                             email: true,
+                            forms: {
+                                select: {
+                                    photo: true,
+                                },
+                                take: 1,
+                            },
                         },
                     },
                 },

From 005838a03d9d97c62509bad81d6e2a67fe77de32 Mon Sep 17 00:00:00 2001
From: vyshnav <vyshnavravi599@gmail.com>
Date: Mon, 2 Dec 2024 17:32:39 +0530
Subject: [PATCH 32/32] Refactor searchable infinite scroll table to use
 payment cards component

---
 .../searchable-infinite-scroll-table.tsx      | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/components/common/searchable-infinite-scroll-table.tsx b/src/components/common/searchable-infinite-scroll-table.tsx
index a8e4712..586a45a 100644
--- a/src/components/common/searchable-infinite-scroll-table.tsx
+++ b/src/components/common/searchable-infinite-scroll-table.tsx
@@ -1,17 +1,20 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Input } from "@/components/ui/input";
 import { Loader2, Search } from "lucide-react";
 import axios from "axios";
 import debounce from "lodash.debounce";
 import getPaymentCount from "@/app/actions/get-payment-count";
 
-interface TableData {
+interface PaymentData {
     user: {
         name: string;
         email: string;
+        image: string;
+        forms: [{ photo: string }];
     };
     usn?: string;
     razorpayPaymentId: string;
@@ -19,9 +22,9 @@ interface TableData {
     amount: number;
 }
 
-export function SearchableInfiniteScrollTable() {
-    const [data, setData] = useState<TableData[]>([]);
-    const [filteredData, setFilteredData] = useState<TableData[]>([]);
+export function PaymentCards() {
+    const [data, setData] = useState<PaymentData[]>([]);
+    const [filteredData, setFilteredData] = useState<PaymentData[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [totalNumberOfPayments, setTotalNumberOfPayments] = useState(0);
     const [page, setPage] = useState(1);
@@ -41,12 +44,11 @@ export function SearchableInfiniteScrollTable() {
             const users = response.data.users;
 
             if (users.length === 0) {
-                setHasMoreData(false); // No more data to load
+                setHasMoreData(false);
             }
 
             setData((prevData) => {
                 const newData = [...prevData, ...users];
-                // Remove duplicates
                 const uniqueData = Array.from(
                     new Map(newData.map((item) => [item.razorpayPaymentId, item])).values()
                 );
@@ -67,19 +69,18 @@ export function SearchableInfiniteScrollTable() {
     };
 
     const fetchSearchResults = useCallback(async (query: string) => {
-        setPage(1); // Reset page number
-        setHasMoreData(true); // Reset hasMoreData
+        setPage(1);
+        setHasMoreData(true);
         try {
             const response = await axios.get(`/api/users/payment?page=1&search=${encodeURIComponent(query)}`);
             const users = response.data.users;
-            setData(users); // Set new data from search
-            setFilteredData(users); // Set filtered data to the same as new data
+            setData(users);
+            setFilteredData(users);
         } catch (error) {
             console.error("Error fetching payment details:", error);
         }
     }, []);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedFetch = useCallback(
         debounce((query: string) => {
             fetchSearchResults(query);
@@ -90,15 +91,14 @@ export function SearchableInfiniteScrollTable() {
     const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
         const value = event.target.value;
         setSearchTerm(value);
-        debouncedFetch(value); // Use debounced fetch function
+        debouncedFetch(value);
     };
 
     useEffect(() => {
-        loadMoreData(); // Initial load
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        loadMoreData();
         async function getNumberOfPayments() {
             const count = await getPaymentCount();
-            setTotalNumberOfPayments(count ?? 0); // Use 0 if count is null
+            setTotalNumberOfPayments(count ?? 0);
         }
         getNumberOfPayments();
     }, []);
@@ -119,12 +119,10 @@ export function SearchableInfiniteScrollTable() {
 
         return () => {
             if (loaderRef.current) {
-                // eslint-disable-next-line react-hooks/exhaustive-deps
                 observer.unobserve(loaderRef.current);
             }
             observer.disconnect();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoading]);
 
     return (
@@ -143,26 +141,30 @@ export function SearchableInfiniteScrollTable() {
                     size={20}
                 />
             </div>
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Email</TableHead>
-                        <TableHead>Payment ID</TableHead>
-                        <TableHead>Amount</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {(searchTerm ? filteredData : data).map((item, index) => (
-                        <TableRow key={index}>
-                            <TableCell>{item.user.name}</TableCell>
-                            <TableCell>{item.user.email}</TableCell>
-                            <TableCell>{item.razorpayPaymentId}</TableCell>
-                            <TableCell>₹{item.amount.toFixed(2)}</TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {(searchTerm ? filteredData : data).map((item, index) => (
+                    <Card key={index} className="overflow-hidden">
+                        <CardHeader className="p-0">
+                            <div className="relative pb-[100%]">
+                                <Avatar className="absolute inset-0 w-full h-full rounded-none">
+                                    <AvatarImage
+                                        src={item.user.forms?.[0]?.photo || ""}
+                                        alt={item.user.name}
+                                        className="object-cover"
+                                    />
+                                    <AvatarFallback>{item.user.name.charAt(0)}</AvatarFallback>
+                                </Avatar>
+                            </div>
+                        </CardHeader>
+                        <CardContent className="p-4">
+                            <CardTitle className="text-xl mb-2">{item.user.name}</CardTitle>
+                            <p className="text-sm text-muted-foreground mb-1">{item.user.email}</p>
+                            <p className="text-sm text-muted-foreground mb-1">ID: {item.razorpayPaymentId}</p>
+                            <p className="text-sm font-semibold">Amount: ₹{item.amount.toFixed(2)}</p>
+                        </CardContent>
+                    </Card>
+                ))}
+            </div>
             {searchTerm === "" && hasMoreData && (
                 <div ref={loaderRef} className="flex justify-center py-4">
                     {isLoading && <Loader2 className="h-6 w-6 animate-spin" />}