sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-20 14:34:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance user experience by optimizing loading times for dashboard components

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-09 15:10:15 +07:00
parent 1c8d68183a
commit 1c46887cef
1 changed files with 136 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
src/app/dashboard/page.tsx
View File

@ -93,13 +93,13 @@ export default function Dashboard() {
const fetchProjects = async () => { const fetchProjects = async () => {
if (userId) { if (userId) {
const { data, error } = await getProjectByUserId(supabase, userId); const { data, error } = await getProjectByUserId(supabase, userId);
// alert(JSON.stringify(data));
if (error) { if (error) {
console.error("Error while fetching projects"); console.error("Error while fetching projects");
} }
if (data) { if (data) {
// set project and current project id
setProjects(data); setProjects(data);
// console.table(data); setCurrentProjectId(data[0].id);
} }
} else { } else {
console.error("Error with UserId while fetching projects"); console.error("Error with UserId while fetching projects");
@ -108,8 +108,6 @@ export default function Dashboard() {
}; };
fetchProjects(); fetchProjects();
}, [supabase, userId]); }, [supabase, userId]);
// console.table(projects);
// console.table(latestInvestment);
return ( return (
<div className="container max-w-screen-xl"> <div className="container max-w-screen-xl">
@ -135,95 +133,95 @@ export default function Dashboard() {
<div className="flex items-center justify-between space-y-2"> <div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Business Dashboard</h2> <h2 className="text-3xl font-bold tracking-tight">Business Dashboard</h2>
</div> </div>
{projects && projects.length > 0 && (
<Tabs className="space-y-4"> <Tabs className="space-y-4" defaultValue={projects[0].project_name}>
<TabsList> <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) => (
<TabsTrigger <TabsContent value={project.project_name} className="space-y-4">
key={project.id} <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
value={project.project_name} <Card>
onClick={() => setCurrentProjectId(project.id)} <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
> <CardTitle className="text-sm font-medium">Total Funds Raised</CardTitle>
{project.project_name} <svg
</TabsTrigger> xmlns="http://www.w3.org/2000/svg"
))} viewBox="0 0 24 24"
</TabsList> fill="none"
{projects.map((project) => ( stroke="currentColor"
<TabsContent value={project.project_name} className="space-y-4"> strokeLinecap="round"
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> strokeLinejoin="round"
<Card> strokeWidth="2"
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> className="h-4 w-4 text-muted-foreground"
<CardTitle className="text-sm font-medium">Total Funds Raised</CardTitle> >
<svg <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
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">${}</div>
strokeLinecap="round" {/* <p className="text-xs text-muted-foreground">
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground"
>
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">${}</div>
{/* <p className="text-xs text-muted-foreground">
+20.1% from last month +20.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">Profile Views</CardTitle> <CardTitle className="text-sm font-medium">Profile Views</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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <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> <circle cx="12" cy="12" r="3"></circle>
</svg> </svg>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">+2350</div> <div className="text-2xl font-bold">+2350</div>
{/* <p className="text-xs text-muted-foreground"> {/* <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">+12,234</div> <div className="text-2xl font-bold">+12,234</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>
{/* <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"> <CardTitle className="text-sm font-medium">
Active Now Active Now
@ -248,59 +246,60 @@ export default function Dashboard() {
</p> </p>
</CardContent> </CardContent>
</Card> */} </Card> */}
</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>
<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}`,
};
})}
/>
</CardContent> </CardContent>
</Tabs> </Card>
</Card> </div>
<Card className="col-span-3"> </TabsContent>
<CardHeader> ))}
<CardTitle>Recent Funds</CardTitle> </Tabs>
</CardHeader> )}
<CardContent>
<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}`,
};
})}
/>
</CardContent>
</Card>
</div>
</TabsContent>
))}
</Tabs>
</div> </div>
</div> </div>
</div> </div>