userCount

app/admin/page.tsx

@@ -7,7 +7,7 @@ import { redirect } from "next/navigation";
 import { Responses, columns } from "./columns";
 import { DataTable } from "./data-table";
 
-import bg from "../assets/bg.jpg";
+import { Card, CardContent } from "@/components/ui/card";
 
 const Admin = () => {
   const { data: session } = useSession({
@@ -22,6 +22,17 @@ const Admin = () => {
   }
 
   const [data, setData] = useState<Responses[]>([]);
+  const [count, setCount] = useState([0, 0, 0, 0]);
+
+  useEffect(() => {
+    fetch("/api/admin/count", {
+      method: "POST",
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        setCount(data.users);
+      });
+  }, []);
 
   useEffect(() => {
     fetch("/api/admin/responses", {
@@ -43,6 +54,16 @@ const Admin = () => {
           Welcome, {session?.user?.name}!
         </h1>
 
+        <Card className="w-[80%] md:w-[50%] lg:w-[40%] xl:w-[20%] mt-6">
+          <CardContent>
+            <p className="text-lg pt-6 pb-2 font-semibold">Users</p>
+            <p className="text-sm pt-1">Total - {count[0]}</p>
+            <p className="text-sm pt-1">Applied - {count[1]}</p>
+            <p className="text-sm pt-1">Shortlisted - {count[2]}</p>
+            <p className="text-sm pt-1">Selected - {count[3]}</p>
+          </CardContent>
+        </Card>
+
         <div className="flex flex-col space-y-8 mt-6">
           <DataTable columns={columns} data={data} />
         </div>

app/api/admin/count/route.ts

@@ -0,0 +1,56 @@
+import prisma from "@/app/lib/db";
+import { getServerSession } from "next-auth";
+import { NextResponse, NextRequest } from "next/server";
+import { options } from "@/app/api/auth/[...nextauth]/options";
+
+export const POST = async (request: NextRequest) => {
+  const session = await getServerSession(options);
+
+  if (!session) {
+    return NextResponse.redirect("/");
+  }
+
+  const { user } = session;
+
+  if (user.role !== "admin") {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const totalCount = await prisma.user.count({
+      where: {
+        role: "user",
+      },
+    });
+
+    const appliedCount = await prisma.user.count({
+      where: {
+        isFormSubmitted: true,
+        role: "user",
+      },
+    });
+
+    const shortlistedCount = await prisma.user.count({
+      where: {
+        isShortlisted: true,
+        role: "user",
+      },
+    });
+
+    const selectedCount = await prisma.user.count({
+      where: {
+        isSelected: true,
+        role: "user",
+      },
+    });
+
+    return NextResponse.json({
+      users: [totalCount, appliedCount, shortlistedCount, selectedCount],
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 }
+    );
+  }
+};

components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }