feat: coordinators, and bunch other stuff

prisma/migrations/20240503202424_add_amount_to_the_database/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "payments" ADD COLUMN     "amount" DOUBLE PRECISION NOT NULL DEFAULT 0;

prisma/migrations/20240504063133_add_coordinator_role/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "UserRole" ADD VALUE 'COORDINATOR';

prisma/migrations/20240504153943_remove_amount/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `amount` on the `payments` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "payments" DROP COLUMN "amount";

prisma/migrations/20240504154822_add_back_amount/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "payments" ADD COLUMN     "amount" DOUBLE PRECISION NOT NULL DEFAULT 0;

prisma/schema.prisma

@@ -1,5 +1,5 @@
 generator client {
-  provider = "prisma-client-js"
+  provider        = "prisma-client-js"
   previewFeatures = ["driverAdapters"]
 }
 
@@ -10,11 +10,13 @@ datasource db {
 
 enum UserRole {
   PARTICIPANT
+  COORDINATOR
   ADMIN
 }
 
 model Payment {
   signature         String?
+  amount            Float         @default(0)
   status            PaymentStatus @default(PENDING)
   created_at        DateTime      @default(now())
   updated_at        DateTime      @updatedAt

src/app/admin/_components/columnsPayments.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { ColumnDef } from "@tanstack/react-table";
-import { Payment } from "@prisma/client";
 import { ArrowUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Payment } from "@prisma/client";
 
 export const columns: ColumnDef<Payment>[] = [
   {
@@ -72,25 +72,17 @@ export const columns: ColumnDef<Payment>[] = [
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Status
+          Amount
           <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: "amount",
+    cell: ({ row }) => {
+      return new Intl.NumberFormat("en-IN", {
+        style: "currency",
+        currency: "INR",
+      }).format(row.original.amount / 100);
     },
-    accessorKey: "orderCreationId",
   },
 ];

src/app/admin/_components/columnsUsers.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { ColumnDef } from "@tanstack/react-table";
-import { User, Payment } from "@prisma/client";
+import { Payment, User } from "@prisma/client";
 import { ArrowUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
-export const columns: ColumnDef<User>[] = [
+export const columns: ColumnDef<User & { payment: Payment[] }>[] = [
   {
     header: ({ column }) => {
       return (
@@ -50,6 +50,44 @@ export const columns: ColumnDef<User>[] = [
       return row.original.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: "college",
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Amount
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "payment_amount",
+    cell: ({ row }) => {
+      return row.original.payment.map((payment, i) => (
+        <div key={i}>
+          {new Intl.NumberFormat("en-IN", {
+            style: "currency",
+            currency: "INR",
+          }).format(payment.amount / 100)}
+        </div>
+      ));
+    },
+  },
   {
     header: ({ column }) => {
       return (

src/app/admin/events/[event]/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import { DataTable } from "../../../coordinators/_components/datatable";
+import { columns } from "../../../coordinators/_components/columns";
+
+async function getData(event: string) {
+  const response = await fetch(`/api/coordinators/${event}`);
+  return response.json();
+}
+
+function PerEventPage({ params }: { params: { event: string } }) {
+  const [data, setData] = React.useState([]);
+  React.useEffect(() => {
+    getData(params.event).then(setData);
+  }, [params.event]);
+  return (
+    <>
+      <h1>{decodeURIComponent(params.event)} Participants</h1>
+      <DataTable columns={columns} data={data} />
+    </>
+  );
+}
+
+export default PerEventPage;

src/app/admin/events/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+async function getData() {
+  const response = await fetch("/api/coordinators");
+  return response.json();
+}
+
+export default function AdminPage() {
+  const [data, setData] = React.useState<
+    { name: string; registrations: string }[]
+  >([]);
+  React.useEffect(() => {
+    getData().then(setData);
+  }, []);
+  return (
+    <>
+      <Table>
+        <TableCaption>List of Events</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Event Name</TableHead>
+            <TableHead>Registrations</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((event, i) => (
+            <Link
+              key={i}
+              href={`/admin/events/${event.name}`}
+              legacyBehavior
+            >
+              <TableRow>
+                <div style={{ display: "contents" }}>
+                  <TableCell>{event.name}</TableCell>
+                  <TableCell>{event.registrations}</TableCell>
+                </div>
+              </TableRow>
+            </Link>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+}

src/app/admin/layout.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import Link from "next/link";
-import { CircleUser, Home, Menu, Users, CreditCard } from "lucide-react";
+import {
+  CircleUser,
+  Menu,
+  Users,
+  CreditCard,
+  Coins,
+  Calendar,
+} from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -15,13 +22,23 @@ 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";
+import { UserRole } from "@prisma/client";
 
 export default function AdminDashboard({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const { data: session } = useSession();
+  const { data: session } = useSession({
+    required: true,
+  });
+  if (!session) {
+    return <div>Unauthorized</div>;
+  }
+
+  if (session.user.role !== UserRole.ADMIN) {
+    return <div>Forbidden</div>;
+  }
   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">
@@ -47,6 +64,20 @@ export default function AdminDashboard({
                 <CreditCard className="h-4 w-4" />
                 Payments
               </Link>
+              <Link
+                href="/admin/razorpay"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+              >
+                <Coins className="h-4 w-4" />
+                Razorpay
+              </Link>
+              <Link
+                href="/admin/events"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+              >
+                <Calendar className="h-4 w-4" />
+                Events
+              </Link>
             </nav>
           </div>
         </div>
@@ -73,18 +104,32 @@ export default function AdminDashboard({
                   <span className="sr-only">Tiara 2024</span>
                 </Link>
                 <Link
-                  href="/"
+                  href="/admin"
+                  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" />
+                  Users
+                </Link>
+                <Link
+                  href="/admin/payments"
+                  className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-foreground hover:text-foreground"
+                >
+                  <CreditCard className="h-5 w-5" />
+                  Payments
+                </Link>
+                <Link
+                  href="/admin/razorpay"
                   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
+                  <Coins className="h-4 w-4" />
+                  Razorpay
                 </Link>
                 <Link
-                  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"
+                  href="/admin/events"
+                  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" />
-                  Users
+                  <Calendar className="h-4 w-4" />
+                  Events
                 </Link>
               </nav>
             </SheetContent>
@@ -104,7 +149,6 @@ export default function AdminDashboard({
                 ) : (
                   <CircleUser className="h-5 w-5" />
                 )}
-                <CircleUser className="h-5 w-5" />
                 <span className="sr-only">Toggle user menu</span>
               </Button>
             </DropdownMenuTrigger>

src/app/admin/page.tsx

@@ -1,30 +1,20 @@
 "use client";
 
 import React from "react";
-import { Payment, User, UserRole } from "@prisma/client";
+import { Payment, User } from "@prisma/client";
 import { DataTable } from "./_components/datatable";
 import { columns } from "./_components/columnsUsers";
-import { useSession } from "next-auth/react";
 
 async function getData() {
   const response = await fetch("/api/admin");
   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} />;
 }