feat: add admin page to list businesses

This commit is contained in:
sirin 2024-10-30 01:22:36 +07:00
parent 0bc45f18d0
commit 71d49ffd70
2 changed files with 67 additions and 143 deletions

View File

@ -0,0 +1,59 @@
import Link from "next/link";
import { Table, TableHeader, TableRow, TableCell, TableBody, TableHead } from "@/components/ui/table";
interface Business {
id: any;
location: any;
business_name: any;
business_type: any;
joined_date: any;
user_id: number;
username: string;
full_name: string;
email: string;
}
interface BusinessTableProps {
businesses: Business[] | null;
}
const BusinessTable = ({ businesses }: BusinessTableProps) => {
if (!businesses) return <div>No data available</div>;
return (
<div>
<Table className="min-w-full border-2 border-border">
<TableHeader>
<TableRow>
<TableHead>Business Name</TableHead>
<TableHead>Owner</TableHead>
<TableHead>Business Type</TableHead>
<TableHead>Location</TableHead>
<TableHead>Joined Date</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{businesses.map((business) => (
<TableRow key={business.id}>
<TableCell>
<Link href={`/admin/business/${business.id}/projects`}>
<p className="hover:text-blue-600">{business.business_name}</p>
</Link>
</TableCell>
<TableCell>
<Link href={`/profile/${business.user_id}`}>
<p className="hover:text-blue-600">{business.username}</p>
</Link>
</TableCell>
<TableCell>{business.business_type}</TableCell>
<TableCell>{business.location}</TableCell>
<TableCell>{new Date(business.joined_date).toLocaleDateString()}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
};
export default BusinessTable;

View File

@ -1,156 +1,21 @@
import { getUserRole } from "@/lib/data/userQuery";
import { getAllBusinesses } from "@/lib/data/businessQuery";
import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
import { redirect } from "next/navigation";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
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";
import BusinessTable from "./BusinessTable";
import { Separator } from "@/components/ui/separator";
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>
{application.status === "pending" && <BusinessActionButtons businessApplicationId={application.id} />}
</TableCell>
</TableRow>
));
}
export default async function AdminPage() {
const client = createSupabaseClient();
const { data: userData, error: userDataError } = await client.auth.getUser();
const { data, error } = await getAllBusinesses(client);
if (userDataError) {
redirect("/");
if (error) {
return <div>Error fetching businesses: {error.message}</div>;
}
const uid = userData.user!.id;
const { data: roleData, error: roleDataError } = await getUserRole(client, uid);
if (roleDataError || roleData!.role != "admin") {
redirect("/");
}
const { data: businessApplicationData, error: businessApplicationError } =
await getAllBusinessApplicationQuery(client);
if (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 (
<div className="container max-w-screen-xl my-4">
<div className="font-bold text-2xl">Admin Page</div>
<Separator className="my-4" />
<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>
</TableHeader>
<TableBody>
<ApplicationTable
applications={
status === "pending"
? pendingApplications
: status === "approved"
? approvedApplications
: rejectedApplications
}
/>
</TableBody>
</Table>
</TabsContent>
))}
</Tabs>
<h1 className="text-2xl font-bold">Business List</h1>
<Separator className="my-3" />
<BusinessTable businesses={data} />
</div>
);
}