mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-18 21:44:06 +01:00
feat: implement new filtering options in DataTable component for enhanced user experience
This commit is contained in:
Pattadon
parent
8a09cbae85
commit
b47891ee64
@ -118,209 +118,191 @@ export default function Dashboard() {
|
|||||||
return (
|
return (
|
||||||
<div className="container max-w-screen-xl">
|
<div className="container max-w-screen-xl">
|
||||||
<Loader isSuccess={!isLoadingSession && !isLoadingProjects} />{" "}
|
<Loader isSuccess={!isLoadingSession && !isLoadingProjects} />{" "}
|
||||||
<div className="md:hidden">
|
<div className="flex-1 space-y-4 p-8 pt-6">
|
||||||
<Image
|
<div className="flex items-center justify-between space-y-2">
|
||||||
src="/examples/dashboard-light.png"
|
<h2 className="text-3xl font-bold tracking-tight">Business Dashboard</h2>
|
||||||
width={1280}
|
</div>
|
||||||
height={866}
|
{projects && projects.length > 0 && (
|
||||||
alt="Dashboard"
|
<Tabs className="space-y-4" defaultValue={projects[0].project_name}>
|
||||||
className="block dark:hidden"
|
<TabsList>
|
||||||
/>
|
|
||||||
<Image
|
|
||||||
src="/examples/dashboard-dark.png"
|
|
||||||
width={1280}
|
|
||||||
height={866}
|
|
||||||
alt="Dashboard"
|
|
||||||
className="hidden dark:block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="hidden flex-col md:flex">
|
|
||||||
<div className="flex-1 space-y-4 p-8 pt-6">
|
|
||||||
<div className="flex items-center justify-between space-y-2">
|
|
||||||
<h2 className="text-3xl font-bold tracking-tight">Business Dashboard</h2>
|
|
||||||
</div>
|
|
||||||
{projects && projects.length > 0 && (
|
|
||||||
<Tabs className="space-y-4" defaultValue={projects[0].project_name}>
|
|
||||||
<TabsList>
|
|
||||||
{projects.map((project) => (
|
|
||||||
<TabsTrigger
|
|
||||||
key={project.id}
|
|
||||||
value={project.project_name}
|
|
||||||
onClick={() => setCurrentProjectId(project.id)}
|
|
||||||
>
|
|
||||||
{project.project_name}
|
|
||||||
</TabsTrigger>
|
|
||||||
))}
|
|
||||||
</TabsList>
|
|
||||||
{projects.map((project) => (
|
{projects.map((project) => (
|
||||||
<TabsContent value={project.project_name} className="space-y-4" key={project.id}>
|
<TabsTrigger
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
key={project.id}
|
||||||
<Card>
|
value={project.project_name}
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
onClick={() => setCurrentProjectId(project.id)}
|
||||||
<CardTitle className="text-sm font-medium">Total Funds Raised</CardTitle>
|
>
|
||||||
<svg
|
{project.project_name}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</TabsTrigger>
|
||||||
viewBox="0 0 24 24"
|
))}
|
||||||
fill="none"
|
</TabsList>
|
||||||
stroke="currentColor"
|
{projects.map((project) => (
|
||||||
strokeLinecap="round"
|
<TabsContent value={project.project_name} className="space-y-4" key={project.id}>
|
||||||
strokeLinejoin="round"
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
strokeWidth="2"
|
<Card>
|
||||||
className="h-4 w-4 text-muted-foreground"
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
>
|
<CardTitle className="text-sm font-medium">Total Funds Raised</CardTitle>
|
||||||
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
<svg
|
||||||
</svg>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</CardHeader>
|
viewBox="0 0 24 24"
|
||||||
<CardContent>
|
fill="none"
|
||||||
<div className="text-2xl font-bold">
|
stroke="currentColor"
|
||||||
$
|
strokeLinecap="round"
|
||||||
<CountUp
|
strokeLinejoin="round"
|
||||||
end={filteredProject
|
strokeWidth="2"
|
||||||
.filter((project) => project.deal_status === "Completed")
|
className="h-4 w-4 text-muted-foreground"
|
||||||
.reduce((sum, current) => sum + current.deal_amount, 0)}
|
>
|
||||||
duration={1}
|
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
||||||
/>
|
</svg>
|
||||||
</div>
|
</CardHeader>
|
||||||
</CardContent>
|
<CardContent>
|
||||||
</Card>
|
<div className="text-2xl font-bold">
|
||||||
<Card>
|
$
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
<CountUp
|
||||||
<CardTitle className="text-sm font-medium">Profile Views</CardTitle>
|
end={filteredProject
|
||||||
<svg
|
.filter((project) => project.deal_status === "Completed")
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
.reduce((sum, current) => sum + current.deal_amount, 0)}
|
||||||
viewBox="0 0 24 24"
|
duration={1}
|
||||||
fill="none"
|
/>
|
||||||
stroke="currentColor"
|
</div>
|
||||||
strokeLinecap="round"
|
</CardContent>
|
||||||
strokeLinejoin="round"
|
</Card>
|
||||||
strokeWidth="2"
|
<Card>
|
||||||
className="h-4 w-4 text-muted-foreground"
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
>
|
<CardTitle className="text-sm font-medium">Profile Views</CardTitle>
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
<svg
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</svg>
|
viewBox="0 0 24 24"
|
||||||
</CardHeader>
|
fill="none"
|
||||||
<CardContent>
|
stroke="currentColor"
|
||||||
<div className="text-2xl font-bold">
|
strokeLinecap="round"
|
||||||
+<CountUp end={2350} duration={1} />
|
strokeLinejoin="round"
|
||||||
</div>
|
strokeWidth="2"
|
||||||
{/* <p className="text-xs text-muted-foreground">
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
>
|
||||||
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||||
|
<circle cx="12" cy="12" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">
|
||||||
|
+<CountUp end={2350} duration={1} />
|
||||||
|
</div>
|
||||||
|
{/* <p className="text-xs text-muted-foreground">
|
||||||
+180.1% from last month
|
+180.1% from last month
|
||||||
</p> */}
|
</p> */}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
<CardTitle className="text-sm font-medium">Total Followers</CardTitle>
|
<CardTitle className="text-sm font-medium">Total Followers</CardTitle>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
className="h-4 w-4 text-muted-foreground"
|
className="h-4 w-4 text-muted-foreground"
|
||||||
>
|
>
|
||||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||||
<circle cx="9" cy="7" r="4" />
|
<circle cx="9" cy="7" r="4" />
|
||||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
||||||
</svg>
|
</svg>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="text-2xl font-bold">
|
<div className="text-2xl font-bold">
|
||||||
+<CountUp end={12234} duration={1} />
|
+<CountUp end={12234} duration={1} />
|
||||||
</div>
|
</div>
|
||||||
{/* <p className="text-xs text-muted-foreground">
|
{/* <p className="text-xs text-muted-foreground">
|
||||||
+19% from last month
|
+19% from last month
|
||||||
</p> */}
|
</p> */}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
router.push(`/project/${project.id}/edit`);
|
router.push(`/project/${project.id}/edit`);
|
||||||
}}
|
}}
|
||||||
className="h-full bg-emerald-500 hover:bg-emerald-800 font-bold text-xl"
|
className="h-full bg-emerald-500 hover:bg-emerald-800 font-bold text-xl"
|
||||||
>
|
>
|
||||||
Edit Project
|
Edit Project
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
d="M3 17.25V21h3.75l11.05-11.05-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0L15.13 4.5l3.75 3.75 1.83-1.21z"
|
d="M3 17.25V21h3.75l11.05-11.05-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0L15.13 4.5l3.75 3.75 1.83-1.21z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||||
<Card className="col-span-4">
|
<Card className="col-span-4">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Overview</CardTitle>
|
<CardTitle>Overview</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
|
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
|
||||||
<TabsList className="grid w-56 grid-cols-3 ml-5">
|
<TabsList className="grid w-56 grid-cols-3 ml-5">
|
||||||
{tabOptions.map((tab) => (
|
{tabOptions.map((tab) => (
|
||||||
<TabsTrigger key={tab} value={tab}>
|
<TabsTrigger key={tab} value={tab}>
|
||||||
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
))}
|
))}
|
||||||
</TabsList>
|
</TabsList>
|
||||||
<CardContent className="pl-2 mt-5">
|
<CardContent className="pl-2 mt-5">
|
||||||
<Overview graphType={graphType} data={graphData} />
|
<Overview graphType={graphType} data={graphData} />
|
||||||
|
|
||||||
<Tabs defaultValue="line" className="space-y-4 ml-[50%] mt-2">
|
<Tabs defaultValue="line" className="space-y-4 ml-[50%] mt-2">
|
||||||
<TabsList>
|
<TabsList>
|
||||||
<TabsTrigger value="line" onClick={() => setGraphType("line")}>
|
<TabsTrigger value="line" onClick={() => setGraphType("line")}>
|
||||||
Line
|
Line
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="bar" onClick={() => setGraphType("bar")}>
|
<TabsTrigger value="bar" onClick={() => setGraphType("bar")}>
|
||||||
Bar
|
Bar
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</CardContent>
|
|
||||||
</Tabs>
|
|
||||||
</Card>
|
|
||||||
<Card className="col-span-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Recent Funds</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="grid grid-flow-dense">
|
|
||||||
<RecentFunds
|
|
||||||
data={latestInvestment.map((item) => {
|
|
||||||
return {
|
|
||||||
name: item.username,
|
|
||||||
amount: item.dealAmount,
|
|
||||||
avatar: item.avatarUrl,
|
|
||||||
date: new Date(item.createdTime),
|
|
||||||
status: item.dealStatus,
|
|
||||||
profile_url: `/profile/${item.investorId}`,
|
|
||||||
};
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<div className="flex justify-center mt-5">
|
|
||||||
{filteredProject && filteredProject.length > 1 ? (
|
|
||||||
<Modal
|
|
||||||
data={filteredProject.map((item) => {
|
|
||||||
return {
|
|
||||||
date: item.created_time,
|
|
||||||
name: item.username,
|
|
||||||
amount: item.deal_amount,
|
|
||||||
status: item.deal_status,
|
|
||||||
logoURL: Array.isArray(item.avatar_url) ? item.avatar_url[0] : item.avatar_url,
|
|
||||||
profileURL: `/profile/${item.investor_id}`,
|
|
||||||
};
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
) : undefined}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Tabs>
|
||||||
</div>
|
</Card>
|
||||||
</TabsContent>
|
<Card className="col-span-3 w-full">
|
||||||
))}
|
<CardHeader>
|
||||||
</Tabs>
|
<CardTitle>Recent Funds</CardTitle>
|
||||||
)}
|
</CardHeader>
|
||||||
</div>
|
<CardContent className="grid grid-flow-dense">
|
||||||
|
<RecentFunds
|
||||||
|
data={latestInvestment.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.username,
|
||||||
|
amount: item.dealAmount,
|
||||||
|
avatar: item.avatarUrl,
|
||||||
|
date: new Date(item.createdTime),
|
||||||
|
status: item.dealStatus,
|
||||||
|
profile_url: `/profile/${item.investorId}`,
|
||||||
|
};
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<div className="flex justify-center mt-5">
|
||||||
|
{filteredProject && filteredProject.length > 1 ? (
|
||||||
|
<Modal
|
||||||
|
data={filteredProject.map((item) => {
|
||||||
|
return {
|
||||||
|
date: item.created_time,
|
||||||
|
name: item.username,
|
||||||
|
amount: item.deal_amount,
|
||||||
|
status: item.deal_status,
|
||||||
|
logoURL: Array.isArray(item.avatar_url) ? item.avatar_url[0] : item.avatar_url,
|
||||||
|
profileURL: `/profile/${item.investor_id}`,
|
||||||
|
};
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
) : undefined}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user