feat: separate business application by status in admin page

src/app/admin/page.tsx

@@ -7,6 +7,78 @@ import Link from "next/link";
 import { FolderOpenDot } from "lucide-react";
 import { getAllBusinessApplicationQuery } from "@/lib/data/applicationQuery";
 import { BusinessActionButtons } from "./BusinessActionButtons";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface ApplicationData {
+  id: any;
+  user_id: any;
+  username: any;
+  business_type_id: any;
+  business_type_value: any;
+  project_application_id: any;
+  business_name: any;
+  created_at: any;
+  is_in_us: any;
+  is_for_sale: any;
+  pitch_deck_url: any;
+  community_size: any;
+  is_generating_revenue: any;
+  money_raised_to_date: any;
+  location: any;
+  status: any;
+}
+
+function ApplicationTable({ applications }: { applications: ApplicationData[] }) {
+  if (!applications || applications.length === 0) {
+    return (
+      <TableRow>
+        <TableCell colSpan={11} className="text-center h-24 text-muted-foreground">
+          No business applications found
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return applications.map((application: ApplicationData) => (
+    <TableRow key={application.id}>
+      <TableCell>{application.business_name}</TableCell>
+      <TableCell>
+        <Link href={`/profile/${application.user_id}`} className="text-blue-500 hover:text-blue-600">
+          {application.username}
+        </Link>
+      </TableCell>
+      <TableCell>
+        {application.pitch_deck_url && (
+          <Link href={application.pitch_deck_url} className="text-blue-500 hover:text-blue-600">
+            {application.pitch_deck_url}
+          </Link>
+        )}
+      </TableCell>
+      <TableCell>
+        <Checkbox checked={application.is_in_us} disabled />
+      </TableCell>
+      <TableCell>
+        <Checkbox checked={application.is_for_sale} disabled />
+      </TableCell>
+      <TableCell>
+        <Checkbox checked={application.is_generating_revenue} disabled />
+      </TableCell>
+      <TableCell>{application.community_size}</TableCell>
+      <TableCell>{application.money_raised_to_date}</TableCell>
+      <TableCell>{application.location}</TableCell>
+      <TableCell>
+        {application.project_application_id && (
+          <Link href={`/admin/project/${application.project_application_id}`}>
+            <FolderOpenDot className="border-[2px] border-black dark:border-white rounded-md hover:bg-gray-400 w-full cursor-pointer" />
+          </Link>
+        )}
+      </TableCell>
+      <TableCell>
+        <BusinessActionButtons businessApplicationId={application.id} />
+      </TableCell>
+    </TableRow>
+  ));
+}
 
 export default async function AdminPage() {
   const client = createSupabaseClient();
@@ -18,11 +90,7 @@ export default async function AdminPage() {
   const uid = userData.user!.id;
   const { data: roleData, error: roleDataError } = await getUserRole(client, uid);
 
-  if (roleDataError) {
-    redirect("/");
-  }
-
-  if (roleData!.role != "admin") {
+  if (roleDataError || roleData!.role != "admin") {
     redirect("/");
   }
 
@@ -33,77 +101,53 @@ export default async function AdminPage() {
     console.log(businessApplicationError);
   }
 
+  const pendingApplications = businessApplicationData?.filter((app) => app.status === "pending") || [];
+  const approvedApplications = businessApplicationData?.filter((app) => app.status === "approve") || [];
+  const rejectedApplications = businessApplicationData?.filter((app) => app.status === "rejecte") || [];
+
   return (
     <div className="container max-w-screen-xl">
-      <div className="flex my-4">
-        <Table className="border-2 border-border rounded-md">
-          <TableCaption>A list of business applications.</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Business Name</TableHead>
-              <TableHead>User Account</TableHead>
-              <TableHead>Pitch Deck URL</TableHead>
-              <TableHead>Is In US?</TableHead>
-              <TableHead>Is For Sale?</TableHead>
-              <TableHead>Generate Revenue</TableHead>
-              <TableHead>Community Size</TableHead>
-              <TableHead>Money raised to date</TableHead>
-              <TableHead>Location</TableHead>
-              <TableHead>Project</TableHead>
-              <TableHead></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {businessApplicationData && businessApplicationData.length > 0 ? (
-              businessApplicationData.map((application) => (
-                <TableRow key={application.id}>
-                  <TableCell>{application.business_name}</TableCell>
-                  <TableCell>
-                    <Link href={`/profile/${application.user_id}`} className="text-blue-500 hover:text-blue-600">
-                      {application.username}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    {application.pitch_deck_url && (
-                      <Link href={application.pitch_deck_url} className="text-blue-500 hover:text-blue-600">
-                        {application.pitch_deck_url}
-                      </Link>
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <Checkbox checked={application.is_in_us} disabled />
-                  </TableCell>
-                  <TableCell>
-                    <Checkbox checked={application.is_for_sale} disabled />
-                  </TableCell>
-                  <TableCell>
-                    <Checkbox checked={application.is_generating_revenue} disabled />
-                  </TableCell>
-                  <TableCell>{application.community_size}</TableCell>
-                  <TableCell>{application.money_raised_to_date}</TableCell>
-                  <TableCell>{application.location}</TableCell>
-                  <TableCell>
-                    {application.project_application_id && (
-                      <Link href={`/admin/project/${application.project_application_id}`}>
-                        <FolderOpenDot className="border-[2px] border-black dark:border-white rounded-md hover:bg-gray-400 w-full cursor-pointer" />
-                      </Link>
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <BusinessActionButtons businessApplicationId={application.id} />
-                  </TableCell>
+      <Tabs defaultValue="pending" className="w-full">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="pending">Pending ({pendingApplications.length})</TabsTrigger>
+          <TabsTrigger value="approved">Approved ({approvedApplications.length})</TabsTrigger>
+          <TabsTrigger value="rejected">Rejected ({rejectedApplications.length})</TabsTrigger>
+        </TabsList>
+
+        {["pending", "approved", "rejected"].map((status) => (
+          <TabsContent key={status} value={status}>
+            <Table className="border-2 border-border rounded-md">
+              <TableCaption>{status.charAt(0).toUpperCase() + status.slice(1)} business applications</TableCaption>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Business Name</TableHead>
+                  <TableHead>User Account</TableHead>
+                  <TableHead>Pitch Deck URL</TableHead>
+                  <TableHead>Is In US?</TableHead>
+                  <TableHead>Is For Sale?</TableHead>
+                  <TableHead>Generate Revenue</TableHead>
+                  <TableHead>Community Size</TableHead>
+                  <TableHead>Money raised to date</TableHead>
+                  <TableHead>Location</TableHead>
+                  <TableHead>Project</TableHead>
+                  <TableHead>Actions</TableHead>
                 </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={11} className="text-center h-24 text-muted-foreground">
-                  No business applications found
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
+              </TableHeader>
+              <TableBody>
+                <ApplicationTable
+                  applications={
+                    status === "pending"
+                      ? pendingApplications
+                      : status === "approved"
+                        ? approvedApplications
+                        : rejectedApplications
+                  }
+                />
+              </TableBody>
+            </Table>
+          </TabsContent>
+        ))}
+      </Tabs>
     </div>
   );
 }

src/lib/data/applicationQuery.ts

@@ -0,0 +1,28 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+export const getAllBusinessApplicationQuery = (client: SupabaseClient) => {
+  return client.from("business_application").select(
+    `
+        id,
+        ...user_id!inner (
+            user_id:id,
+            username
+        ),
+        ...business_type_id!inner (
+            business_type_id:id,
+            business_type_value:value
+        ),
+        project_application_id,
+        business_name,
+        created_at,
+        is_in_us,
+        is_for_sale,
+        pitch_deck_url,
+        community_size,
+        is_generating_revenue,
+        money_raised_to_date,
+        location,
+        status
+        `
+  );
+};