feat: separate business application by status in admin page

This commit is contained in:
sirin 2024-10-27 23:07:30 +07:00
parent 40f2557de4
commit a260cdd313
2 changed files with 145 additions and 73 deletions

View File

@ -7,6 +7,78 @@ import Link from "next/link";
import { FolderOpenDot } from "lucide-react"; import { FolderOpenDot } from "lucide-react";
import { getAllBusinessApplicationQuery } from "@/lib/data/applicationQuery"; import { getAllBusinessApplicationQuery } from "@/lib/data/applicationQuery";
import { BusinessActionButtons } from "./BusinessActionButtons"; 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() { export default async function AdminPage() {
const client = createSupabaseClient(); const client = createSupabaseClient();
@ -18,11 +90,7 @@ export default async function AdminPage() {
const uid = userData.user!.id; const uid = userData.user!.id;
const { data: roleData, error: roleDataError } = await getUserRole(client, uid); const { data: roleData, error: roleDataError } = await getUserRole(client, uid);
if (roleDataError) { if (roleDataError || roleData!.role != "admin") {
redirect("/");
}
if (roleData!.role != "admin") {
redirect("/"); redirect("/");
} }
@ -33,77 +101,53 @@ export default async function AdminPage() {
console.log(businessApplicationError); 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 ( return (
<div className="container max-w-screen-xl"> <div className="container max-w-screen-xl">
<div className="flex my-4"> <Tabs defaultValue="pending" className="w-full">
<Table className="border-2 border-border rounded-md"> <TabsList className="grid w-full grid-cols-3">
<TableCaption>A list of business applications.</TableCaption> <TabsTrigger value="pending">Pending ({pendingApplications.length})</TabsTrigger>
<TableHeader> <TabsTrigger value="approved">Approved ({approvedApplications.length})</TabsTrigger>
<TableRow> <TabsTrigger value="rejected">Rejected ({rejectedApplications.length})</TabsTrigger>
<TableHead>Business Name</TableHead> </TabsList>
<TableHead>User Account</TableHead>
<TableHead>Pitch Deck URL</TableHead> {["pending", "approved", "rejected"].map((status) => (
<TableHead>Is In US?</TableHead> <TabsContent key={status} value={status}>
<TableHead>Is For Sale?</TableHead> <Table className="border-2 border-border rounded-md">
<TableHead>Generate Revenue</TableHead> <TableCaption>{status.charAt(0).toUpperCase() + status.slice(1)} business applications</TableCaption>
<TableHead>Community Size</TableHead> <TableHeader>
<TableHead>Money raised to date</TableHead> <TableRow>
<TableHead>Location</TableHead> <TableHead>Business Name</TableHead>
<TableHead>Project</TableHead> <TableHead>User Account</TableHead>
<TableHead></TableHead> <TableHead>Pitch Deck URL</TableHead>
</TableRow> <TableHead>Is In US?</TableHead>
</TableHeader> <TableHead>Is For Sale?</TableHead>
<TableBody> <TableHead>Generate Revenue</TableHead>
{businessApplicationData && businessApplicationData.length > 0 ? ( <TableHead>Community Size</TableHead>
businessApplicationData.map((application) => ( <TableHead>Money raised to date</TableHead>
<TableRow key={application.id}> <TableHead>Location</TableHead>
<TableCell>{application.business_name}</TableCell> <TableHead>Project</TableHead>
<TableCell> <TableHead>Actions</TableHead>
<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> </TableRow>
)) </TableHeader>
) : ( <TableBody>
<TableRow> <ApplicationTable
<TableCell colSpan={11} className="text-center h-24 text-muted-foreground"> applications={
No business applications found status === "pending"
</TableCell> ? pendingApplications
</TableRow> : status === "approved"
)} ? approvedApplications
</TableBody> : rejectedApplications
</Table> }
</div> />
</TableBody>
</Table>
</TabsContent>
))}
</Tabs>
</div> </div>
); );
} }

View File

@ -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
`
);
};