From 0e67e3378fd31501af5ecf116b2c8e3b887de25a Mon Sep 17 00:00:00 2001
From: anishshobithps <anish.shobith19@gmail.com>
Date: Wed, 1 May 2024 06:22:35 +0530
Subject: [PATCH 1/3] rbac and move to db strategy over JWT

---
 package-lock.json                         |  32 +++
 package.json                              |   3 +-
 src/app/(content)/layout.tsx              |  21 ++
 src/app/{ => (content)}/page.tsx          |   4 +-
 src/app/admin/_components/columns.tsx     |  19 ++
 src/app/admin/_components/datatable.tsx   |  80 ++++++
 src/app/admin/layout.tsx                  | 165 ++++++++++++
 src/app/admin/page.tsx                    |  27 ++
 src/app/api/users/route.ts                |  33 +++
 src/app/layout.tsx                        |  27 +-
 src/app/register/_components/Register.tsx | 270 ++++++++++++++++++++
 src/app/register/page.tsx                 | 293 ++--------------------
 src/auth.ts                               |  52 +++-
 src/components/ui/table.tsx               | 120 +++++++++
 14 files changed, 839 insertions(+), 307 deletions(-)
 create mode 100644 src/app/(content)/layout.tsx
 rename src/app/{ => (content)}/page.tsx (93%)
 create mode 100644 src/app/admin/_components/columns.tsx
 create mode 100644 src/app/admin/_components/datatable.tsx
 create mode 100644 src/app/admin/layout.tsx
 create mode 100644 src/app/admin/page.tsx
 create mode 100644 src/app/api/users/route.ts
 create mode 100644 src/app/register/_components/Register.tsx
 create mode 100644 src/components/ui/table.tsx

diff --git a/package-lock.json b/package-lock.json
index e4895e6..6ec351e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@studio-freight/react-lenis": "^0.0.47",
         "@tabler/icons-react": "^3.2.0",
         "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
+        "@tanstack/react-table": "^8.16.0",
         "@vercel/analytics": "^1.2.2",
         "@vercel/speed-insights": "^1.0.10",
         "class-variance-authority": "^0.7.0",
@@ -2917,6 +2918,37 @@
         "node": ">=4"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.16.0.tgz",
+      "integrity": "sha512-rKRjnt8ostqN2fercRVOIH/dq7MAmOENCMvVlKx6P9Iokhh6woBGnIZEkqsY/vEJf1jN3TqLOb34xQGLVRuhAg==",
+      "dependencies": {
+        "@tanstack/table-core": "8.16.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.16.0.tgz",
+      "integrity": "sha512-dCG8vQGk4js5v88/k83tTedWOwjGnIyONrKpHpfmSJB8jwFHl8GSu1sBBxbtACVAPtAQgwNxl0rw1d3RqRM1Tg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@ts-morph/common": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.19.0.tgz",
diff --git a/package.json b/package.json
index 297becd..ff4fe86 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "postinstall": "prisma generate && prisma migrate deploy"
+    "postinstall": "prisma generate"
   },
   "prisma": {},
   "dependencies": {
@@ -38,6 +38,7 @@
     "@studio-freight/react-lenis": "^0.0.47",
     "@tabler/icons-react": "^3.2.0",
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
+    "@tanstack/react-table": "^8.16.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "class-variance-authority": "^0.7.0",
diff --git a/src/app/(content)/layout.tsx b/src/app/(content)/layout.tsx
new file mode 100644
index 0000000..8de6bc4
--- /dev/null
+++ b/src/app/(content)/layout.tsx
@@ -0,0 +1,21 @@
+import Glow from "@/components/shared/glow";
+import { StarsCanvas } from "@/components/ui/Stars";
+import Footer from "@/components/widgets/Footer";
+import { Header } from "@/components/widgets/Header";
+import React from "react";
+
+function ContentLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <StarsCanvas />
+      <Glow />
+      <div className="flex min-h-screen w-full flex-col">
+        <Header />
+        {children}
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default ContentLayout;
diff --git a/src/app/page.tsx b/src/app/(content)/page.tsx
similarity index 93%
rename from src/app/page.tsx
rename to src/app/(content)/page.tsx
index 87a6620..09eaf3f 100644
--- a/src/app/page.tsx
+++ b/src/app/(content)/page.tsx
@@ -3,8 +3,8 @@ import Lenis from "@/components/shared/lenis";
 import { LabIntro } from "@/components/story/intro";
 import { HeroParallax } from "@/components/widgets/Hero";
 import { tiaraAssetsPrefix } from "@/lib/utils";
-import RegisterNow from "../components/ui/registernow";
-import EventsPage from "./(content)/events/page";
+import RegisterNow from "../../components/ui/registernow";
+import EventsPage from "./events/page";
 
 const images = [
   { alt: "Image 0", src: `${tiaraAssetsPrefix}/hero/3(1).avif` },
diff --git a/src/app/admin/_components/columns.tsx b/src/app/admin/_components/columns.tsx
new file mode 100644
index 0000000..0f89f65
--- /dev/null
+++ b/src/app/admin/_components/columns.tsx
@@ -0,0 +1,19 @@
+"use client";
+import { ColumnDef } from "@tanstack/react-table";
+import { User, Payment } from "@prisma/client";
+
+// We concat the User and Payment types to create a new type, as the same will be returned by the API, fetched from the database.
+export const columns: ColumnDef<User & { payment: Payment }>[] = [
+  {
+    header: "Name",
+    accessorKey: "name",
+  },
+  {
+    header: "Email",
+    accessorKey: "email",
+  },
+  {
+    header: "Contact",
+    accessorKey: "contact",
+  },
+];
diff --git a/src/app/admin/_components/datatable.tsx b/src/app/admin/_components/datatable.tsx
new file mode 100644
index 0000000..ba814ac
--- /dev/null
+++ b/src/app/admin/_components/datatable.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
new file mode 100644
index 0000000..1349b92
--- /dev/null
+++ b/src/app/admin/layout.tsx
@@ -0,0 +1,165 @@
+import Link from "next/link";
+import {
+  Bell,
+  CircleUser,
+  Home,
+  LineChart,
+  Menu,
+  Package,
+  Package2,
+  ShoppingCart,
+  Users,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+
+export default function AdminDashboard({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+      <div className="hidden border-r bg-muted/40 md:block">
+        <div className="flex h-full max-h-screen flex-col gap-2">
+          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+            <Link href="/" className="flex items-center gap-2 font-semibold">
+              <Package2 className="h-6 w-6" />
+              <span className="">Acme Inc</span>
+            </Link>
+            <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
+              <Bell className="h-4 w-4" />
+              <span className="sr-only">Toggle notifications</span>
+            </Button>
+          </div>
+          <div className="flex-1">
+            <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+              <Link
+                href="#"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+              >
+                <Home className="h-4 w-4" />
+                Dashboard
+              </Link>
+              <Link
+                href="#"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+              >
+                <ShoppingCart className="h-4 w-4" />
+                Orders
+              </Link>
+              <Link
+                href="#"
+                className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
+              >
+                <Package className="h-4 w-4" />
+                Products{" "}
+              </Link>
+              <Link
+                href="#"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+              >
+                <Users className="h-4 w-4" />
+                Customers
+              </Link>
+              <Link
+                href="#"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+              >
+                <LineChart className="h-4 w-4" />
+                Analytics
+              </Link>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col">
+        <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="shrink-0 md:hidden"
+              >
+                <Menu className="h-5 w-5" />
+                <span className="sr-only">Toggle navigation menu</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="flex flex-col">
+              <nav className="grid gap-2 text-lg font-medium">
+                <Link
+                  href="#"
+                  className="flex items-center gap-2 text-lg font-semibold"
+                >
+                  <Package2 className="h-6 w-6" />
+                  <span className="sr-only">Acme Inc</span>
+                </Link>
+                <Link
+                  href="#"
+                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                >
+                  <Home className="h-5 w-5" />
+                  Dashboard
+                </Link>
+                <Link
+                  href="#"
+                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
+                >
+                  <ShoppingCart className="h-5 w-5" />
+                  Orders
+                </Link>
+                <Link
+                  href="#"
+                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                >
+                  <Package className="h-5 w-5" />
+                  Products
+                </Link>
+                <Link
+                  href="#"
+                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                >
+                  <Users className="h-5 w-5" />
+                  Customers
+                </Link>
+                <Link
+                  href="#"
+                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                >
+                  <LineChart className="h-5 w-5" />
+                  Analytics
+                </Link>
+              </nav>
+            </SheetContent>
+          </Sheet>
+          <div className="w-full flex-1" />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary" size="icon" className="rounded-full">
+                <CircleUser className="h-5 w-5" />
+                <span className="sr-only">Toggle user menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Settings</DropdownMenuItem>
+              <DropdownMenuItem>Support</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Logout</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </header>
+        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+            {children}
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..89ffbbd
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { auth } from "@/auth";
+import { Payment, User, UserRole } from "@prisma/client";
+import { DataTable } from "./_components/datatable";
+import { columns } from "./_components/columns";
+
+async function getData() {
+  const response = await fetch("http://localhost:3000/api/users");
+  return response.json();
+}
+
+async function AdminPage() {
+  const session = await auth();
+  if (!session) {
+    return <div>Not Authenticated</div>;
+  }
+
+  if (session.user.role !== UserRole.ADMIN) {
+    return <div>Not Authorized</div>;
+  }
+
+  const data = await getData();
+
+  return <DataTable columns={columns} data={data} />;
+}
+
+export default AdminPage;
diff --git a/src/app/api/users/route.ts b/src/app/api/users/route.ts
new file mode 100644
index 0000000..c53ff4b
--- /dev/null
+++ b/src/app/api/users/route.ts
@@ -0,0 +1,33 @@
+import { auth } from "@/auth";
+import { NextResponse } from "next/server";
+import { UserRole } from "@prisma/client";
+import { prisma } from "@/lib/prisma";
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export async function GET() {
+  try {
+    // Session returns Null, even if the user is authenticated.
+    await delay(4000);
+    const session = await auth();
+    console.log(session);
+    if (!session) {
+      return NextResponse.json("Not Authenticated", { status: 401 });
+    }
+
+    // If the user is not an Admin, return Not Authorized.
+    if (session.user.role !== UserRole.ADMIN) {
+      return NextResponse.json("Not Authorized", { status: 403 });
+    }
+
+    // Fetch all users from the database.
+    const users = await prisma.user.findMany();
+
+    // Return the fetched users.
+    return NextResponse.json(users);
+  } catch (error) {
+    console.error("Error in GET /api/users", error);
+    return NextResponse.json("Internal Server Error", { status: 500 });
+  }
+}
+ 
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2aa67d1..f0ae40a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,19 +1,14 @@
 import "@/app/globals.css";
-import { Header } from "@/components/widgets/Header";
-import Footer from "@components/widgets/Footer";
-import { cn } from "@/lib/utils";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { SessionProvider } from "next-auth/react";
 import PrelineScript from "@/components/shared/preline";
-import { Toaster } from "@/components/ui/toaster";
-import Script from "next/script";
 import { TailwindIndicator } from "@/components/shared/tailwind";
-import { StarsCanvas } from "@/components/ui/Stars";
+import { Toaster } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import Glow from "@/components/shared/glow";
-
+import type { Metadata } from "next";
+import { SessionProvider } from "next-auth/react";
+import { Inter } from "next/font/google";
+import Script from "next/script";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 export const metadata: Metadata = {
@@ -39,20 +34,12 @@ export default function RootLayout({
         <body
           className={cn("bg-background font-sans antialiased", inter.variable)}
         >
-          <SessionProvider>
-              <StarsCanvas />
-              <Glow />
-              <div className="flex min-h-screen w-full flex-col">
-                <Header />
-                {children}
-              </div>
-          </SessionProvider>
+          <SessionProvider>{children}</SessionProvider>
           <PrelineScript />
           <Toaster />
           <TailwindIndicator />
           <Analytics />
           <SpeedInsights />
-          <Footer />
         </body>
       </html>
       <Script src="https://checkout.razorpay.com/v2/checkout.js" />
diff --git a/src/app/register/_components/Register.tsx b/src/app/register/_components/Register.tsx
new file mode 100644
index 0000000..cf32c3b
--- /dev/null
+++ b/src/app/register/_components/Register.tsx
@@ -0,0 +1,270 @@
+"use client";
+import { EventTabs } from "@/components/razorpay/perCategory";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Checkout from "@/components/ui/checkout";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { categoriesList } from "@/data/categoryList";
+import { tiaraFont } from "@/lib/fonts";
+import { CheckedItem, Event, Events } from "@/lib/interfaces";
+import { cn } from "@/lib/utils";
+import React, { useEffect, useState } from "react";
+
+function processEvents(
+  category: string,
+  categoriesList: any,
+  setEvents: React.Dispatch<React.SetStateAction<Event[]>>
+) {
+  const eventsData: Event[] = [];
+  const categoryEvents: Events = categoriesList[category].events[0]; // Assuming you only want the first array of events
+
+  Object.keys(categoryEvents).forEach((key) => {
+    const event = categoryEvents[key];
+    eventsData.push({
+      name: event.name,
+      key: key,
+      amount: event.costs,
+      team: event.team,
+    });
+  });
+
+  setEvents(eventsData);
+}
+
+export const Register = ({ name, email }: { name: string; email: string }) => {
+  const [technicalCheckedItems, setTechnicalCheckedItems] = useState<
+    CheckedItem[]
+  >([]);
+  const [nontechnicalCheckedItems, setNontechnicalCheckedItems] = useState<
+    CheckedItem[]
+  >([]);
+  const [culturalCheckedItems, setCulturalCheckedItems] = useState<
+    CheckedItem[]
+  >([]);
+  const [megaCheckedItems, setMegaCheckedItems] = useState<CheckedItem[]>([]);
+
+  const [teamName, setTeamName] = React.useState("");
+  const [technical, setTechnical] = React.useState<Event[]>([]);
+  const [nontechnical, setNonTechnical] = React.useState<Event[]>([]);
+  const [cultural, setCultural] = React.useState<Event[]>([]);
+  const [mega, setMega] = React.useState<Event[]>([]);
+  const [hasTeams, setHasTeams] = React.useState<boolean>(false);
+  const [teamCount, setTeamCount] = React.useState<number>(0);
+  const [selectedEventNames, setSelectedEventNames] = React.useState<string[]>(
+    []
+  );
+
+  useEffect(() => {
+    processEvents("technical", categoriesList, setTechnical);
+    processEvents("non_technical", categoriesList, setNonTechnical);
+    processEvents("cultural", categoriesList, setCultural);
+    processEvents("mega", categoriesList, setMega);
+  }, []);
+
+  const handleCheckboxChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    category: string
+  ) => {
+    const key = event.target.value;
+    const isChecked = event.target.checked;
+    if (isChecked) {
+      if (category === "technical") {
+        const selectedEvent = technical.find((event) => event.key === key);
+        if (selectedEvent) {
+          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
+          setTechnicalCheckedItems([
+            ...technicalCheckedItems,
+            { ...selectedEvent, checked: true },
+          ]);
+        }
+      } else if (category === "nontechnical") {
+        const selectedEvent = nontechnical.find((event) => event.key === key);
+        if (selectedEvent) {
+          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
+          setNontechnicalCheckedItems([
+            ...nontechnicalCheckedItems,
+            { ...selectedEvent, checked: true },
+          ]);
+          if (selectedEvent.team) {
+            setHasTeams(true);
+          }
+        }
+      } else if (category === "cultural") {
+        const selectedEvent = cultural.find((event) => event.key === key);
+        if (selectedEvent) {
+          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
+          setCulturalCheckedItems([
+            ...culturalCheckedItems,
+            { ...selectedEvent, checked: true },
+          ]);
+        }
+      } else if (category === "mega") {
+        const selectedEvent = mega.find((event) => event.key === key);
+        if (selectedEvent) {
+          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
+          setMegaCheckedItems([
+            ...megaCheckedItems,
+            { ...selectedEvent, checked: true },
+          ]);
+        }
+      }
+    } else {
+      if (category === "technical") {
+        const event = technical.find((item) => item.key === key);
+        if (event) {
+          setSelectedEventNames(
+            selectedEventNames.filter((name) => name !== event.name)
+          );
+        }
+        setTechnicalCheckedItems(
+          technicalCheckedItems.filter((item) => item.key !== key)
+        );
+      } else if (category === "nontechnical") {
+        const event = nontechnical.find((item) => item.key === key);
+        if (event) {
+          setSelectedEventNames(
+            selectedEventNames.filter((name) => name !== event.name)
+          );
+        }
+        const newCheckedItems = nontechnicalCheckedItems.filter(
+          (item) => item.key !== key
+        );
+        newCheckedItems.find((item) => item.team)
+          ? setHasTeams(true)
+          : setHasTeams(false);
+        setNontechnicalCheckedItems(newCheckedItems);
+      } else if (category === "cultural") {
+        const event = cultural.find((item) => item.key === key);
+        if (event) {
+          setSelectedEventNames(
+            selectedEventNames.filter((name) => name !== event.name)
+          );
+        }
+        setCulturalCheckedItems(
+          culturalCheckedItems.filter((item) => item.key !== key)
+        );
+      } else if (category === "mega") {
+        const event = mega.find((item) => item.key === key);
+        if (event) {
+          setSelectedEventNames(
+            selectedEventNames.filter((name) => name !== event.name)
+          );
+        }
+        setMegaCheckedItems(
+          megaCheckedItems.filter((item) => item.key !== key)
+        );
+      }
+    }
+  };
+
+  const [itemswith250, setItemswith250] = React.useState<CheckedItem[]>([]);
+
+  useEffect(() => {
+    const allItems: CheckedItem[] = [
+      ...technicalCheckedItems,
+      ...nontechnicalCheckedItems,
+      ...culturalCheckedItems,
+      ...megaCheckedItems,
+    ];
+
+    const itemsWithAmount250 = allItems.filter((item) => item.amount === 250);
+    setItemswith250(itemsWithAmount250);
+  }, [
+    technicalCheckedItems,
+    nontechnicalCheckedItems,
+    culturalCheckedItems,
+    megaCheckedItems,
+  ]);
+
+  const getSumofCheckedItems = () => {
+    const categories = [
+      technicalCheckedItems,
+      nontechnicalCheckedItems,
+      culturalCheckedItems,
+      megaCheckedItems,
+    ];
+    let totalSum = 0;
+    for (const category of categories) {
+      totalSum += category.reduce((acc, item) => {
+        if (item.checked && item.amount !== 250) {
+          return acc + item.amount;
+        }
+        return acc;
+      }, 0);
+    }
+    if (itemswith250.length > 0) {
+      totalSum += Math.ceil(itemswith250.length / 4) * 250;
+    }
+    return totalSum;
+  };
+
+  return (
+    <div className="w-full gap-4 p-2 pt-36 md:px-20 lg:px-28 xl:px-40 mx-auto duration-500">
+      <Card className="w-full">
+        <CardHeader className="flex flex-row items-start bg-muted/50">
+          <div className="grid gap-0.5">
+            <CardTitle className="group flex items-center gap-2 text-lg">
+              <span className={cn("tracking-widest", tiaraFont.className)}>
+                Ti<span className="text-red-500">ar</span>a {"'"}24
+              </span>{" "}
+              Event Registration
+            </CardTitle>
+            <CardDescription>
+              Your name and email are pre-filled from your Google account.
+              <br /> Select the events you want to participate in and complete
+              the payment.
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <div className="md:flex md:items-center p-4 gap-4">
+          <Label htmlFor="name">Name</Label>
+          <Input
+            type="text"
+            id="name"
+            aria-label="Name"
+            placeholder="Name"
+            value={name}
+            disabled
+          />
+          <br />
+          <Label htmlFor="email">Email</Label>
+          <Input
+            type="email"
+            id="email"
+            aria-label="Email"
+            placeholder="Email"
+            value={email}
+            disabled
+          />
+          <br />
+        </div>
+        <Separator className="my-2" />
+        <div className="flex justify-between flex-col lg:flex-row">
+          <EventTabs
+            {...{ technical, nontechnical, cultural, mega }}
+            technicalCheckedItems={technicalCheckedItems}
+            nontechnicalCheckedItems={nontechnicalCheckedItems}
+            culturalCheckedItems={culturalCheckedItems}
+            megaCheckedItems={megaCheckedItems}
+            handleCheckboxChange={handleCheckboxChange}
+          />
+          <Checkout
+            technicalCheckedItems={technicalCheckedItems}
+            nontechnicalCheckedItems={nontechnicalCheckedItems}
+            culturalCheckedItems={culturalCheckedItems}
+            megaCheckedItems={megaCheckedItems}
+            itemsWith250={itemswith250}
+            sumOfCheckedItemsAmount={getSumofCheckedItems}
+            selectedEvents={selectedEventNames}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 14bdb97..b74e098 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -1,279 +1,18 @@
-"use client";
-import { EventTabs } from "@/components/razorpay/perCategory";
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import Checkout from "@/components/ui/checkout";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { categoriesList } from "@/data/categoryList";
-import { tiaraFont } from "@/lib/fonts";
-import { CheckedItem, Event, Events } from "@/lib/interfaces";
-import { cn } from "@/lib/utils";
-import { signIn, useSession } from "next-auth/react";
-import React, { useEffect, useState } from "react";
-
-function processEvents(
-  category: string,
-  categoriesList: any,
-  setEvents: React.Dispatch<React.SetStateAction<Event[]>>
-) {
-  const eventsData: Event[] = [];
-  const categoryEvents: Events = categoriesList[category].events[0]; // Assuming you only want the first array of events
-
-  Object.keys(categoryEvents).forEach((key) => {
-    const event = categoryEvents[key];
-    eventsData.push({
-      name: event.name,
-      key: key,
-      amount: event.costs,
-      team: event.team,
-    });
-  });
-
-  setEvents(eventsData);
+import React from "react";
+import { auth, signIn } from "@/auth";
+import { Register } from "./_components/Register";
+
+async function RegisterPage() {
+  const session = await auth();
+  if (!session) {
+    <form
+      action={async () => {
+        "use server";
+        await signIn("google");
+      }}
+    />;
+  }
+  return <Register name={session?.user.name!} email={session?.user.email!} />;
 }
 
-const Register: React.FC = () => {
-  const session = useSession({
-    required: true,
-    onUnauthenticated: async () => {
-      await signIn("google");
-    },
-  });
-
-  const [technicalCheckedItems, setTechnicalCheckedItems] = useState<
-    CheckedItem[]
-  >([]);
-  const [nontechnicalCheckedItems, setNontechnicalCheckedItems] = useState<
-    CheckedItem[]
-  >([]);
-  const [culturalCheckedItems, setCulturalCheckedItems] = useState<
-    CheckedItem[]
-  >([]);
-  const [megaCheckedItems, setMegaCheckedItems] = useState<CheckedItem[]>([]);
-
-  const [teamName, setTeamName] = React.useState("");
-  const [technical, setTechnical] = React.useState<Event[]>([]);
-  const [nontechnical, setNonTechnical] = React.useState<Event[]>([]);
-  const [cultural, setCultural] = React.useState<Event[]>([]);
-  const [mega, setMega] = React.useState<Event[]>([]);
-  const [hasTeams, setHasTeams] = React.useState<boolean>(false);
-  const [teamCount, setTeamCount] = React.useState<number>(0);
-  const [selectedEventNames, setSelectedEventNames] = React.useState<string[]>(
-    []
-  );
-
-  useEffect(() => {
-    processEvents("technical", categoriesList, setTechnical);
-    processEvents("non_technical", categoriesList, setNonTechnical);
-    processEvents("cultural", categoriesList, setCultural);
-    processEvents("mega", categoriesList, setMega);
-  }, []);
-  const handleCheckboxChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    category: string
-  ) => {
-    const key = event.target.value;
-    const isChecked = event.target.checked;
-    if (isChecked) {
-      if (category === "technical") {
-        const selectedEvent = technical.find((event) => event.key === key);
-        if (selectedEvent) {
-          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
-          setTechnicalCheckedItems([
-            ...technicalCheckedItems,
-            { ...selectedEvent, checked: true },
-          ]);
-        }
-      } else if (category === "nontechnical") {
-        const selectedEvent = nontechnical.find((event) => event.key === key);
-        if (selectedEvent) {
-          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
-          setNontechnicalCheckedItems([
-            ...nontechnicalCheckedItems,
-            { ...selectedEvent, checked: true },
-          ]);
-          if (selectedEvent.team) {
-            setHasTeams(true);
-          }
-        }
-      } else if (category === "cultural") {
-        const selectedEvent = cultural.find((event) => event.key === key);
-        if (selectedEvent) {
-          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
-          setCulturalCheckedItems([
-            ...culturalCheckedItems,
-            { ...selectedEvent, checked: true },
-          ]);
-        }
-      } else if (category === "mega") {
-        const selectedEvent = mega.find((event) => event.key === key);
-        if (selectedEvent) {
-          setSelectedEventNames([...selectedEventNames, selectedEvent.name]);
-          setMegaCheckedItems([
-            ...megaCheckedItems,
-            { ...selectedEvent, checked: true },
-          ]);
-        }
-      }
-    } else {
-      if (category === "technical") {
-        const event = technical.find((item) => item.key === key);
-        if (event) {
-          setSelectedEventNames(
-            selectedEventNames.filter((name) => name !== event.name)
-          );
-        }
-        setTechnicalCheckedItems(
-          technicalCheckedItems.filter((item) => item.key !== key)
-        );
-      } else if (category === "nontechnical") {
-        const event = nontechnical.find((item) => item.key === key);
-        if (event) {
-          setSelectedEventNames(
-            selectedEventNames.filter((name) => name !== event.name)
-          );
-        }
-        const newCheckedItems = nontechnicalCheckedItems.filter(
-          (item) => item.key !== key
-        );
-        newCheckedItems.find((item) => item.team)
-          ? setHasTeams(true)
-          : setHasTeams(false);
-        setNontechnicalCheckedItems(newCheckedItems);
-      } else if (category === "cultural") {
-        const event = cultural.find((item) => item.key === key);
-        if (event) {
-          setSelectedEventNames(
-            selectedEventNames.filter((name) => name !== event.name)
-          );
-        }
-        setCulturalCheckedItems(
-          culturalCheckedItems.filter((item) => item.key !== key)
-        );
-      } else if (category === "mega") {
-        const event = mega.find((item) => item.key === key);
-        if (event) {
-          setSelectedEventNames(
-            selectedEventNames.filter((name) => name !== event.name)
-          );
-        }
-        setMegaCheckedItems(
-          megaCheckedItems.filter((item) => item.key !== key)
-        );
-      }
-    }
-  };
-
-  const [itemswith250, setItemswith250] = React.useState<CheckedItem[]>([]);
-
-  useEffect(() => {
-    const allItems: CheckedItem[] = [
-      ...technicalCheckedItems,
-      ...nontechnicalCheckedItems,
-      ...culturalCheckedItems,
-      ...megaCheckedItems,
-    ];
-
-    const itemsWithAmount250 = allItems.filter((item) => item.amount === 250);
-    setItemswith250(itemsWithAmount250);
-  }, [
-    technicalCheckedItems,
-    nontechnicalCheckedItems,
-    culturalCheckedItems,
-    megaCheckedItems,
-  ]);
-
-  const getSumofCheckedItems = () => {
-    const categories = [
-      technicalCheckedItems,
-      nontechnicalCheckedItems,
-      culturalCheckedItems,
-      megaCheckedItems,
-    ];
-    let totalSum = 0;
-    for (const category of categories) {
-      totalSum += category.reduce((acc, item) => {
-        if (item.checked && item.amount !== 250) {
-          return acc + item.amount;
-        }
-        return acc;
-      }, 0);
-    }
-    if (itemswith250.length > 0) {
-      totalSum += Math.ceil(itemswith250.length / 4) * 250;
-    }
-    return totalSum;
-  };
-
-  return (
-    <div className="w-full gap-4 p-2 pt-36 md:px-20 lg:px-28 xl:px-40 mx-auto duration-500">
-      <Card className="w-full">
-        <CardHeader className="flex flex-row items-start bg-muted/50">
-          <div className="grid gap-0.5">
-            <CardTitle className="group flex items-center gap-2 text-lg">
-              <span className={cn("tracking-widest", tiaraFont.className)}>
-                Ti<span className="text-red-500">ar</span>a {"'"}24
-              </span>{" "}
-              Event Registration
-            </CardTitle>
-            <CardDescription>
-              Your name and email are pre-filled from your Google account.
-              <br /> Select the events you want to participate in and complete
-              the payment.
-            </CardDescription>
-          </div>
-        </CardHeader>
-        <div className="md:flex md:items-center p-4 gap-4">
-          <Label htmlFor="name">Name</Label>
-          <Input
-            type="text"
-            id="name"
-            aria-label="Name"
-            placeholder="Name"
-            value={session.data?.user?.name!}
-            disabled
-          />
-          <br />
-          <Label htmlFor="email">Email</Label>
-          <Input
-            type="email"
-            id="email"
-            aria-label="Email"
-            placeholder="Email"
-            value={session.data?.user?.email!}
-            disabled
-          />
-          <br />
-        </div>
-        <Separator className="my-2" />
-        <div className="flex justify-between flex-col lg:flex-row">
-          <EventTabs
-            {...{ technical, nontechnical, cultural, mega }}
-            technicalCheckedItems={technicalCheckedItems}
-            nontechnicalCheckedItems={nontechnicalCheckedItems}
-            culturalCheckedItems={culturalCheckedItems}
-            megaCheckedItems={megaCheckedItems}
-            handleCheckboxChange={handleCheckboxChange}
-          />
-          <Checkout
-            technicalCheckedItems={technicalCheckedItems}
-            nontechnicalCheckedItems={nontechnicalCheckedItems}
-            culturalCheckedItems={culturalCheckedItems}
-            megaCheckedItems={megaCheckedItems}
-            itemsWith250={itemswith250}
-            sumOfCheckedItemsAmount={getSumofCheckedItems}
-            selectedEvents={selectedEventNames}
-          />
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default Register;
+export default RegisterPage;
diff --git a/src/auth.ts b/src/auth.ts
index 6f293ce..cf3bfe3 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -1,16 +1,36 @@
-import NextAuth from "next-auth";
-import { PrismaAdapter } from "@auth/prisma-adapter";
-import Google from "next-auth/providers/google";
 import { prisma } from "@/lib/prisma";
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import { UserRole } from "@prisma/client";
+import NextAuth, { type DefaultSession } from "next-auth";
+import Google, { GoogleProfile } from "next-auth/providers/google";
+import type { Adapter } from 'next-auth/adapters';
+
+declare module "next-auth" {
+  interface Session {
+    user: {
+      role: UserRole;
+    } & DefaultSession["user"];
+  }
+
+  interface User {
+    role: UserRole;
+  }
+}
 
 export const { handlers, auth, signIn, signOut } = NextAuth({
-  adapter: PrismaAdapter(prisma),
-  session: {
-    strategy: "jwt",
-  },
+  adapter: PrismaAdapter(prisma) as Adapter,
   secret: process.env.AUTH_SECRET,
   providers: [
     Google({
+      profile(profile: GoogleProfile) {
+        return {
+          id: profile.sub,
+          name: profile.name,
+          email: profile.email,
+          image: profile.picture,
+          role: profile.role as UserRole ?? UserRole.PARTICIPANT,
+        };
+      },
       authorization: {
         params: {
           prompt: "consent",
@@ -20,4 +40,22 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
       },
     }),
   ],
+  callbacks: {
+    session({ session, user }) {
+      if (user.id && session.user) {
+        session.user.id = user.id;
+      }
+
+      if (user.role && session.user) {
+        session.user.role = user.role as UserRole;
+      }
+
+      if (session.user) {
+        session.user.name = user.name;
+        session.user.email = user.email as string;
+      }
+
+      return session;
+    },
+  },
 });
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..c0df655
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

From 73ca97dc744460017f308ef976e91b5f90f709f4 Mon Sep 17 00:00:00 2001
From: anishshobithps <anish.shobith19@gmail.com>
Date: Thu, 2 May 2024 07:37:52 +0530
Subject: [PATCH 2/3] dashboard

---
 package-lock.json                             |  16 ++
 package.json                                  |   2 +
 .../register/_components/Register.tsx         |   0
 src/app/{ => (content)}/register/page.tsx     |   0
 src/app/admin/_components/columns.tsx         |  55 +++++-
 src/app/admin/_components/datatable.tsx       | 184 ++++++++++++++----
 src/app/admin/layout.tsx                      | 112 ++++-------
 src/app/admin/page.tsx                        |  26 +--
 src/app/admin/users/page.tsx                  |  30 +++
 src/app/api/admin/route.ts                    |  18 ++
 src/app/api/users/route.ts                    |  41 ++--
 src/auth.ts                                   |  45 +++--
 12 files changed, 350 insertions(+), 179 deletions(-)
 rename src/app/{ => (content)}/register/_components/Register.tsx (100%)
 rename src/app/{ => (content)}/register/page.tsx (100%)
 create mode 100644 src/app/admin/users/page.tsx
 create mode 100644 src/app/api/admin/route.ts

diff --git a/package-lock.json b/package-lock.json
index 6ec351e..5909f97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
         "preline": "^2.1.0",
         "razorpay": "^2.9.3",
         "react": "^18",
+        "react-csv": "^2.2.2",
         "react-dom": "^18",
         "react-hook-form": "^7.51.3",
         "react-icons": "^5.1.0",
@@ -71,6 +72,7 @@
         "@types/node": "^20",
         "@types/nodemailer": "^6.4.14",
         "@types/react": "^18.3.1",
+        "@types/react-csv": "^1.1.10",
         "@types/react-dom": "^18",
         "@types/shortid": "^0.0.32",
         "autoprefixer": "^10.4.19",
@@ -3073,6 +3075,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-csv": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@types/react-csv/-/react-csv-1.1.10.tgz",
+      "integrity": "sha512-PESAyASL7Nfi/IyBR3ufd8qZkyoS+7jOylKmJxRZUZLFASLo4NZaRsJ8rNP8pCcbIziADyWBbLPD1nPddhsL4g==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.22",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
@@ -8193,6 +8204,11 @@
         "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-csv": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
+      "integrity": "sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw=="
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index ff4fe86..649ee15 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "preline": "^2.1.0",
     "razorpay": "^2.9.3",
     "react": "^18",
+    "react-csv": "^2.2.2",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.1.0",
@@ -73,6 +74,7 @@
     "@types/node": "^20",
     "@types/nodemailer": "^6.4.14",
     "@types/react": "^18.3.1",
+    "@types/react-csv": "^1.1.10",
     "@types/react-dom": "^18",
     "@types/shortid": "^0.0.32",
     "autoprefixer": "^10.4.19",
diff --git a/src/app/register/_components/Register.tsx b/src/app/(content)/register/_components/Register.tsx
similarity index 100%
rename from src/app/register/_components/Register.tsx
rename to src/app/(content)/register/_components/Register.tsx
diff --git a/src/app/register/page.tsx b/src/app/(content)/register/page.tsx
similarity index 100%
rename from src/app/register/page.tsx
rename to src/app/(content)/register/page.tsx
diff --git a/src/app/admin/_components/columns.tsx b/src/app/admin/_components/columns.tsx
index 0f89f65..cb367f8 100644
--- a/src/app/admin/_components/columns.tsx
+++ b/src/app/admin/_components/columns.tsx
@@ -1,19 +1,68 @@
 "use client";
 import { ColumnDef } from "@tanstack/react-table";
 import { User, Payment } from "@prisma/client";
+import { ArrowUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 // We concat the User and Payment types to create a new type, as the same will be returned by the API, fetched from the database.
 export const columns: ColumnDef<User & { payment: Payment }>[] = [
   {
-    header: "Name",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Name
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
     accessorKey: "name",
   },
   {
-    header: "Email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
     accessorKey: "email",
   },
   {
-    header: "Contact",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Events
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "events",
+    cell: ({ row }) => {
+      return row.original.events.map((event, i) => <div key={i}>{event}</div>);
+    },
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Contact
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
     accessorKey: "contact",
   },
 ];
diff --git a/src/app/admin/_components/datatable.tsx b/src/app/admin/_components/datatable.tsx
index ba814ac..35cdd47 100644
--- a/src/app/admin/_components/datatable.tsx
+++ b/src/app/admin/_components/datatable.tsx
@@ -1,9 +1,16 @@
 "use client";
 
+import * as React from "react";
 import {
   ColumnDef,
+  ColumnFiltersState,
+  SortingState,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  VisibilityState,
+  getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
 
@@ -15,7 +22,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
@@ -25,56 +39,144 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
   });
 
   return (
-    <div className="rounded-md border">
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
+    <>
+      <div className="flex items-center gap-2">
+        <Input
+          placeholder="Filter names..."
+          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("name")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
                 return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </TableHead>
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
                 );
               })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
               </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-    </div>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </>
   );
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 1349b92..e80218f 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,13 +1,10 @@
+"use client";
+
 import Link from "next/link";
 import {
-  Bell,
   CircleUser,
   Home,
-  LineChart,
   Menu,
-  Package,
-  Package2,
-  ShoppingCart,
   Users,
 } from "lucide-react";
 
@@ -16,63 +13,44 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import Image from "next/image";
+import { useSession } from "next-auth/react";
+import { signOut } from "next-auth/react";
 
-export default function AdminDashboard({ children }: { children: React.ReactNode }) {
+export default function AdminDashboard({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { data: session } = useSession();
   return (
     <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
       <div className="hidden border-r bg-muted/40 md:block">
         <div className="flex h-full max-h-screen flex-col gap-2">
           <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
             <Link href="/" className="flex items-center gap-2 font-semibold">
-              <Package2 className="h-6 w-6" />
-              <span className="">Acme Inc</span>
+              <span className="">Tiara 2024</span>
             </Link>
-            <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-              <Bell className="h-4 w-4" />
-              <span className="sr-only">Toggle notifications</span>
-            </Button>
           </div>
           <div className="flex-1">
             <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
               <Link
-                href="#"
+                href="/admin"
                 className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
               >
                 <Home className="h-4 w-4" />
                 Dashboard
               </Link>
               <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <ShoppingCart className="h-4 w-4" />
-                Orders
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
-              >
-                <Package className="h-4 w-4" />
-                Products{" "}
-              </Link>
-              <Link
-                href="#"
+                href="/admin/users"
                 className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
               >
                 <Users className="h-4 w-4" />
-                Customers
-              </Link>
-              <Link
-                href="#"
-                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
-              >
-                <LineChart className="h-4 w-4" />
-                Analytics
+                Users
               </Link>
             </nav>
           </div>
@@ -97,43 +75,21 @@ export default function AdminDashboard({ children }: { children: React.ReactNode
                   href="#"
                   className="flex items-center gap-2 text-lg font-semibold"
                 >
-                  <Package2 className="h-6 w-6" />
-                  <span className="sr-only">Acme Inc</span>
+                  <span className="sr-only">Tiara 2024</span>
                 </Link>
                 <Link
-                  href="#"
+                  href="/"
                   className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
                 >
                   <Home className="h-5 w-5" />
                   Dashboard
                 </Link>
                 <Link
-                  href="#"
+                  href="/admin/users"
                   className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
-                >
-                  <ShoppingCart className="h-5 w-5" />
-                  Orders
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <Package className="h-5 w-5" />
-                  Products
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
                 >
                   <Users className="h-5 w-5" />
-                  Customers
-                </Link>
-                <Link
-                  href="#"
-                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
-                >
-                  <LineChart className="h-5 w-5" />
-                  Analytics
+                  Users
                 </Link>
               </nav>
             </SheetContent>
@@ -142,22 +98,40 @@ export default function AdminDashboard({ children }: { children: React.ReactNode
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="secondary" size="icon" className="rounded-full">
+                {session && session.user ? (
+                  <Image
+                    src={session.user.image!}
+                    alt={session.user.name!}
+                    width={32}
+                    height={32}
+                    className="rounded-full"
+                  />
+                ) : (
+                  <CircleUser className="h-5 w-5" />
+                )}
                 <CircleUser className="h-5 w-5" />
                 <span className="sr-only">Toggle user menu</span>
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/">Homepage</Link>
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={async () =>
+                  await signOut({
+                    callbackUrl: "/",
+                  })
+                }
+              >
+                Logout
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </header>
         <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-            {children}
+          {children}
         </main>
       </div>
     </div>
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 89ffbbd..5cbaf7f 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,27 +1,7 @@
 import React from "react";
-import { auth } from "@/auth";
-import { Payment, User, UserRole } from "@prisma/client";
-import { DataTable } from "./_components/datatable";
-import { columns } from "./_components/columns";
 
-async function getData() {
-  const response = await fetch("http://localhost:3000/api/users");
-  return response.json();
+function DashboardPage() {
+  return <div>DashboardPage</div>;
 }
 
-async function AdminPage() {
-  const session = await auth();
-  if (!session) {
-    return <div>Not Authenticated</div>;
-  }
-
-  if (session.user.role !== UserRole.ADMIN) {
-    return <div>Not Authorized</div>;
-  }
-
-  const data = await getData();
-
-  return <DataTable columns={columns} data={data} />;
-}
-
-export default AdminPage;
+export default DashboardPage;
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
new file mode 100644
index 0000000..3c03f4b
--- /dev/null
+++ b/src/app/admin/users/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { Payment, User, UserRole } from "@prisma/client";
+import { DataTable } from "../_components/datatable";
+import { columns } from "../_components/columns";
+import { useSession } from "next-auth/react";
+
+async function getData() {
+  const response = await fetch("/api/users");
+  return response.json();
+}
+
+export default function AdminPage() {
+  const { data: session } = useSession();
+  const [data, setData] = React.useState<(User & { payment: Payment })[]>([]);
+
+  React.useEffect(() => {
+    getData().then(setData);
+  }, []);
+
+  if (!session) {
+    return <div>Unauthorized</div>;
+  }
+
+  if (session.user.role !== UserRole.ADMIN) {
+    return <div>Forbidden</div>;
+  }
+  return <DataTable columns={columns} data={data} />;
+}
diff --git a/src/app/api/admin/route.ts b/src/app/api/admin/route.ts
new file mode 100644
index 0000000..2cb17a5
--- /dev/null
+++ b/src/app/api/admin/route.ts
@@ -0,0 +1,18 @@
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { UserRole } from "@prisma/client";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  if (session.user.role !== UserRole.ADMIN) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
+  }
+  const users = await prisma.user.count();
+  const payments = await prisma.payment.count();
+  return NextResponse.json({ users, payments });
+}
diff --git a/src/app/api/users/route.ts b/src/app/api/users/route.ts
index c53ff4b..f32a994 100644
--- a/src/app/api/users/route.ts
+++ b/src/app/api/users/route.ts
@@ -1,33 +1,26 @@
 import { auth } from "@/auth";
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { UserRole } from "@prisma/client";
 import { prisma } from "@/lib/prisma";
 
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
 export async function GET() {
-  try {
-    // Session returns Null, even if the user is authenticated.
-    await delay(4000);
-    const session = await auth();
-    console.log(session);
-    if (!session) {
-      return NextResponse.json("Not Authenticated", { status: 401 });
-    }
-
-    // If the user is not an Admin, return Not Authorized.
-    if (session.user.role !== UserRole.ADMIN) {
-      return NextResponse.json("Not Authorized", { status: 403 });
-    }
+  const session = await auth();
 
-    // Fetch all users from the database.
-    const users = await prisma.user.findMany();
+  if (!session) {
+    return NextResponse.json(
+      { message: "Unauthorized", isOk: false },
+      { status: 401 }
+    );
+  }
 
-    // Return the fetched users.
-    return NextResponse.json(users);
-  } catch (error) {
-    console.error("Error in GET /api/users", error);
-    return NextResponse.json("Internal Server Error", { status: 500 });
+  if (session.user.role !== UserRole.ADMIN) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
   }
+
+  const users = await prisma.user.findMany({
+    include: {
+      payment: true,
+    },
+  });
+  return NextResponse.json(users);
 }
- 
\ No newline at end of file
diff --git a/src/auth.ts b/src/auth.ts
index cf3bfe3..48633b2 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -3,7 +3,7 @@ import { PrismaAdapter } from "@auth/prisma-adapter";
 import { UserRole } from "@prisma/client";
 import NextAuth, { type DefaultSession } from "next-auth";
 import Google, { GoogleProfile } from "next-auth/providers/google";
-import type { Adapter } from 'next-auth/adapters';
+import { JWT } from "next-auth/jwt";
 
 declare module "next-auth" {
   interface Session {
@@ -11,15 +11,20 @@ declare module "next-auth" {
       role: UserRole;
     } & DefaultSession["user"];
   }
+}
 
-  interface User {
+declare module "next-auth/jwt" {
+  interface JWT {
     role: UserRole;
   }
 }
 
 export const { handlers, auth, signIn, signOut } = NextAuth({
-  adapter: PrismaAdapter(prisma) as Adapter,
+  adapter: PrismaAdapter(prisma),
   secret: process.env.AUTH_SECRET,
+  session: {
+    strategy: "jwt",
+  },
   providers: [
     Google({
       profile(profile: GoogleProfile) {
@@ -28,7 +33,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
           name: profile.name,
           email: profile.email,
           image: profile.picture,
-          role: profile.role as UserRole ?? UserRole.PARTICIPANT,
+          role: (profile.role as UserRole) ?? UserRole.PARTICIPANT,
         };
       },
       authorization: {
@@ -41,21 +46,23 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
     }),
   ],
   callbacks: {
-    session({ session, user }) {
-      if (user.id && session.user) {
-        session.user.id = user.id;
-      }
-
-      if (user.role && session.user) {
-        session.user.role = user.role as UserRole;
-      }
-
-      if (session.user) {
-        session.user.name = user.name;
-        session.user.email = user.email as string;
-      }
-
-      return session;
+    async jwt({ token }) {
+      if (!token.sub) return token;
+      const user = await prisma.user.findUnique({
+        where: { id: token.sub },
+      });
+      if (!user) return token;
+      token.role = user.role;
+      return token;
+    },
+    session({ session, token }) {
+      return {
+        ...session,
+        user: {
+          ...session.user,
+          role: token.role,
+        },
+      };
     },
   },
 });

From 04b7b713955b2724cd95ed913936a1dd5ee1ed4a Mon Sep 17 00:00:00 2001
From: anishshobithps <anish.shobith19@gmail.com>
Date: Thu, 2 May 2024 23:57:40 +0530
Subject: [PATCH 3/3] feat: payments route

---
 src/app/(content)/terms/page.tsx              |  31 +--
 src/app/admin/_components/columnsPayments.tsx |  96 +++++++++
 .../{columns.tsx => columnsUsers.tsx}         |   3 +-
 .../admin/_components/datatablepayments.tsx   | 186 ++++++++++++++++++
 src/app/admin/layout.tsx                      |  17 +-
 src/app/admin/page.tsx                        |  29 ++-
 src/app/admin/payments/page.tsx               |  36 ++++
 src/app/admin/users/page.tsx                  |  30 ---
 .../api/{users => admin/payments}/route.ts    |   8 +-
 src/app/api/admin/route.ts                    |  20 +-
 10 files changed, 386 insertions(+), 70 deletions(-)
 create mode 100644 src/app/admin/_components/columnsPayments.tsx
 rename src/app/admin/_components/{columns.tsx => columnsUsers.tsx} (88%)
 create mode 100644 src/app/admin/_components/datatablepayments.tsx
 create mode 100644 src/app/admin/payments/page.tsx
 delete mode 100644 src/app/admin/users/page.tsx
 rename src/app/api/{users => admin/payments}/route.ts (81%)

diff --git a/src/app/(content)/terms/page.tsx b/src/app/(content)/terms/page.tsx
index 3699924..709bbe9 100644
--- a/src/app/(content)/terms/page.tsx
+++ b/src/app/(content)/terms/page.tsx
@@ -6,18 +6,21 @@ import { cn } from "@/lib/utils";
 import { legalInfo } from "../../../data/legal_Info";
 import { Text } from "@/components/shared/text";
 export default function Terms() {
-   
-    return (
-        <Container className="mx-auto">
-            <div className="py-4 mx-6  sm:mx-12 space-y-4 pt-32 text-white">
-            <Text variant="h1" className={cn("text-5xl", tiaraFont)}>Terms & Conditions</Text>
-                {legalInfo.terms.map((terms, index) => (
-                    <div key={index}>
-                        <Text variant="h2" className={cn("text-2xl", tiaraFont)}>{terms.title}</Text>
-                        <p dangerouslySetInnerHTML={{ __html: terms.description }}></p>
-                    </div>
-               ))}
-            </div>
-        </Container>
-    );
+  return (
+    <Container className="mx-auto">
+      <div className="py-4 mx-6  sm:mx-12 space-y-4 pt-32 text-white">
+        <Text variant="h1" className={cn("text-5xl", tiaraFont)}>
+          Terms & Conditions
+        </Text>
+        {legalInfo.terms.map((terms, index) => (
+          <div key={index}>
+            <Text variant="h2" className={cn("text-2xl", tiaraFont)}>
+              {terms.title}
+            </Text>
+            <p dangerouslySetInnerHTML={{ __html: terms.description }}></p>
+          </div>
+        ))}
+      </div>
+    </Container>
+  );
 }
diff --git a/src/app/admin/_components/columnsPayments.tsx b/src/app/admin/_components/columnsPayments.tsx
new file mode 100644
index 0000000..88e37da
--- /dev/null
+++ b/src/app/admin/_components/columnsPayments.tsx
@@ -0,0 +1,96 @@
+"use client";
+import { ColumnDef } from "@tanstack/react-table";
+import { Payment } from "@prisma/client";
+import { ArrowUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Name
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "user.name",
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "user.email",
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Events
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "user.events",
+    cell: ({ row }) => {
+     // @ts-ignore
+      return row.original.user.events.map((event, i) => <div key={i}>{event}</div>);
+    },
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          College
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "user.college",
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Status
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "status",
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Order ID
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "orderCreationId",
+  },
+];
diff --git a/src/app/admin/_components/columns.tsx b/src/app/admin/_components/columnsUsers.tsx
similarity index 88%
rename from src/app/admin/_components/columns.tsx
rename to src/app/admin/_components/columnsUsers.tsx
index cb367f8..731f044 100644
--- a/src/app/admin/_components/columns.tsx
+++ b/src/app/admin/_components/columnsUsers.tsx
@@ -4,8 +4,7 @@ import { User, Payment } from "@prisma/client";
 import { ArrowUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
-// We concat the User and Payment types to create a new type, as the same will be returned by the API, fetched from the database.
-export const columns: ColumnDef<User & { payment: Payment }>[] = [
+export const columns: ColumnDef<User>[] = [
   {
     header: ({ column }) => {
       return (
diff --git a/src/app/admin/_components/datatablepayments.tsx b/src/app/admin/_components/datatablepayments.tsx
new file mode 100644
index 0000000..0082a6f
--- /dev/null
+++ b/src/app/admin/_components/datatablepayments.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  VisibilityState,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Input
+          placeholder="Filter names..."
+          value={
+            (table.getColumn("user_name")?.getFilterValue() as string) ?? ""
+          }
+          onChange={(event) =>
+            table.getColumn("user_name")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <Input
+          placeholder="Filter emails..."
+          value={
+            (table.getColumn("user_email")?.getFilterValue() as string) ?? ""
+          }
+          onChange={(event) =>
+            table.getColumn("user_email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index e80218f..16f22b6 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,12 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import {
-  CircleUser,
-  Home,
-  Menu,
-  Users,
-} from "lucide-react";
+import { CircleUser, Home, Menu, Users, CreditCard } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -42,15 +37,15 @@ export default function AdminDashboard({
                 href="/admin"
                 className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
               >
-                <Home className="h-4 w-4" />
-                Dashboard
+                <Users className="h-4 w-4" />
+                Users
               </Link>
               <Link
-                href="/admin/users"
+                href="/admin/payments"
                 className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
               >
-                <Users className="h-4 w-4" />
-                Users
+                <CreditCard className="h-4 w-4" />
+                Payments
               </Link>
             </nav>
           </div>
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 5cbaf7f..6fecb64 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,7 +1,30 @@
+"use client";
+
 import React from "react";
+import { Payment, User, UserRole } from "@prisma/client";
+import { DataTable } from "./_components/datatable";
+import { columns } from "./_components/columnsUsers";
+import { useSession } from "next-auth/react";
 
-function DashboardPage() {
-  return <div>DashboardPage</div>;
+async function getData() {
+  const response = await fetch("/api/admin");
+  return response.json();
 }
 
-export default DashboardPage;
+export default function AdminPage() {
+  const { data: session } = useSession();
+  const [data, setData] = React.useState<(User & { payment: Payment })[]>([]);
+
+  React.useEffect(() => {
+    getData().then(setData);
+  }, []);
+
+  if (!session) {
+    return <div>Unauthorized</div>;
+  }
+
+  if (session.user.role !== UserRole.ADMIN) {
+    return <div>Forbidden</div>;
+  }
+  return <DataTable columns={columns} data={data} />;
+}
diff --git a/src/app/admin/payments/page.tsx b/src/app/admin/payments/page.tsx
new file mode 100644
index 0000000..84bbca3
--- /dev/null
+++ b/src/app/admin/payments/page.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+import { Payment, UserRole } from "@prisma/client";
+import { DataTable } from "../_components/datatablepayments";
+import { columns } from "../_components/columnsPayments";
+import { useSession } from "next-auth/react";
+
+async function getData() {
+  const response = await fetch("/api/admin/payments");
+  return response.json();
+}
+
+export default function AdminPage() {
+  const { data: session } = useSession();
+  const [data, setData] = React.useState<Payment[]>([]);
+
+  React.useEffect(() => {
+    getData().then(setData);
+  }, []);
+
+  if (!session) {
+    return <div>Unauthorized</div>;
+  }
+
+  if (session.user.role !== UserRole.ADMIN) {
+    return <div>Forbidden</div>;
+  }
+
+  return (
+    <>
+      <h1>Please note few inital payments, do not exists due to some issue with the database write.</h1>
+      <DataTable columns={columns} data={data} />
+    </>
+  );
+}
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
deleted file mode 100644
index 3c03f4b..0000000
--- a/src/app/admin/users/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import React from "react";
-import { Payment, User, UserRole } from "@prisma/client";
-import { DataTable } from "../_components/datatable";
-import { columns } from "../_components/columns";
-import { useSession } from "next-auth/react";
-
-async function getData() {
-  const response = await fetch("/api/users");
-  return response.json();
-}
-
-export default function AdminPage() {
-  const { data: session } = useSession();
-  const [data, setData] = React.useState<(User & { payment: Payment })[]>([]);
-
-  React.useEffect(() => {
-    getData().then(setData);
-  }, []);
-
-  if (!session) {
-    return <div>Unauthorized</div>;
-  }
-
-  if (session.user.role !== UserRole.ADMIN) {
-    return <div>Forbidden</div>;
-  }
-  return <DataTable columns={columns} data={data} />;
-}
diff --git a/src/app/api/users/route.ts b/src/app/api/admin/payments/route.ts
similarity index 81%
rename from src/app/api/users/route.ts
rename to src/app/api/admin/payments/route.ts
index f32a994..2bf4aab 100644
--- a/src/app/api/users/route.ts
+++ b/src/app/api/admin/payments/route.ts
@@ -17,10 +17,10 @@ export async function GET() {
     return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
   }
 
-  const users = await prisma.user.findMany({
+  const payments = await prisma.payment.findMany({
     include: {
-      payment: true,
-    },
+        user: true,
+    }
   });
-  return NextResponse.json(users);
+  return NextResponse.json(payments);
 }
diff --git a/src/app/api/admin/route.ts b/src/app/api/admin/route.ts
index 2cb17a5..f32a994 100644
--- a/src/app/api/admin/route.ts
+++ b/src/app/api/admin/route.ts
@@ -1,18 +1,26 @@
 import { auth } from "@/auth";
-import { prisma } from "@/lib/prisma";
+import { NextRequest, NextResponse } from "next/server";
 import { UserRole } from "@prisma/client";
-import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
 
 export async function GET() {
   const session = await auth();
+
   if (!session) {
-    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    return NextResponse.json(
+      { message: "Unauthorized", isOk: false },
+      { status: 401 }
+    );
   }
 
   if (session.user.role !== UserRole.ADMIN) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
   }
-  const users = await prisma.user.count();
-  const payments = await prisma.payment.count();
-  return NextResponse.json({ users, payments });
+
+  const users = await prisma.user.findMany({
+    include: {
+      payment: true,
+    },
+  });
+  return NextResponse.json(users);
 }