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: implement tabbed graph display for investment data on dashboard

Browse Source
This commit is contained in:
Pattadon 2024-11-08 15:47:24 +07:00
parent 804de94cbe
commit 40b0c7dcdc
1 changed files with 51 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,14 +11,10 @@ import { getProjectByUserId } from "@/lib/data/projectQuery";
import { Loader } from "@/components/loading/loader"; import { Loader } from "@/components/loading/loader";
import { getInvestmentByProjectsIds } from "@/lib/data/investmentQuery"; import { getInvestmentByProjectsIds } from "@/lib/data/investmentQuery";
import { useQuery } from "@supabase-cache-helpers/postgrest-react-query"; import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
import { usePathname } from "next/navigation"; import { overAllGraphData, Deal, fourYearGraphData, dayOftheWeekData } from "../portfolio/[uid]/query";
import { overAllGraphData, Deal } from "../portfolio/[uid]/query";
import { getUserProfile } from "@/lib/data/userQuery";
import { Item } from "@radix-ui/react-navigation-menu";
export default function Dashboard() { export default function Dashboard() {
const supabase = createSupabaseClient(); const supabase = createSupabaseClient();
const pathname = usePathname();
const userId = useSession().session?.user.id; const userId = useSession().session?.user.id;
const [projects, setProjects] = useState< const [projects, setProjects] = useState<
{ id: number; project_name: string; business_id: { user_id: number }[]; dataroom_id: number }[] { id: number; project_name: string; business_id: { user_id: number }[]; dataroom_id: number }[]
@ -33,6 +29,8 @@ export default function Dashboard() {
username: string; username: string;
}[] }[]
>([]); >([]);
const tabOptions = ["daily", "monthly", "yearly"];
const [activeTab, setActiveTab] = useState("daily");
const [isSuccess, setIsSuccess] = useState(false); const [isSuccess, setIsSuccess] = useState(false);
const [graphType, setGraphType] = useState("line"); const [graphType, setGraphType] = useState("line");
const [currentProjectId, setCurrentProjectId] = useState<number>(projects[0]?.id); const [currentProjectId, setCurrentProjectId] = useState<number>(projects[0]?.id);
@ -44,6 +42,19 @@ export default function Dashboard() {
}) })
) )
); );
const handleTabChange = (tab: string) => {
setActiveTab(tab);
};
let graphData = [];
const filteredData = (investmentDetail?.data || []).filter((deal) => deal.project_id === currentProjectId);
if (activeTab === "daily") {
graphData = dayOftheWeekData(filteredData);
} else if (activeTab === "yearly") {
graphData = fourYearGraphData(filteredData);
} else {
graphData = overAllGraphData(filteredData);
}
useEffect(() => { useEffect(() => {
const setTopLatestInvestment = () => { const setTopLatestInvestment = () => {
if (investmentDetail?.data) { if (investmentDetail?.data) {
@ -73,7 +84,7 @@ export default function Dashboard() {
username: string; username: string;
}[] }[]
); );
console.table(latestInvestment) console.table(latestInvestment);
} }
}; };
setTopLatestInvestment(); setTopLatestInvestment();
@ -243,53 +254,47 @@ export default function Dashboard() {
<CardHeader> <CardHeader>
<CardTitle>Overview</CardTitle> <CardTitle>Overview</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pl-2"> <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
{/* <Overview <TabsList className="grid w-56 grid-cols-3 ml-5">
graphType={graphType} {tabOptions.map((tab) => (
data={overAllGraphData( <TabsTrigger key={tab} value={tab}>
investmentDetail?.data {tab.charAt(0).toUpperCase() + tab.slice(1)}
?.map((deal) => {
if (deal.project_id === currentProjectId) {
return {
deal_amount: deal.deal_amount,
created_time: deal.created_time,
};
}
return undefined;
})
.filter((deal) => deal !== undefined) as Deal[]
)}
/> */}
{/* tab to switch between line and bar graph */}
<Tabs defaultValue="line" className="space-y-4 ml-[50%] mt-2">
<TabsList>
<TabsTrigger value="line" onClick={() => setGraphType("line")}>
Line
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="bar" onClick={() => setGraphType("bar")}> ))}
Bar </TabsList>
</TabsTrigger> <CardContent className="pl-2 mt-5">
</TabsList> <Overview graphType={graphType} data={graphData} />
</Tabs>
</CardContent> <Tabs defaultValue="line" className="space-y-4 ml-[50%] mt-2">
<TabsList>
<TabsTrigger value="line" onClick={() => setGraphType("line")}>
Line
</TabsTrigger>
<TabsTrigger value="bar" onClick={() => setGraphType("bar")}>
Bar
</TabsTrigger>
</TabsList>
</Tabs>
</CardContent>
</Tabs>
</Card> </Card>
<Card className="col-span-3"> <Card className="col-span-3">
<CardHeader> <CardHeader>
<CardTitle>Recent Funds</CardTitle> <CardTitle>Recent Funds</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<RecentFunds <RecentFunds
data={latestInvestment.map((item) => { data={latestInvestment.map((item) => {
return { return {
name: item.username, name: item.username,
amount: item.dealAmount, amount: item.dealAmount,
avatar: item.avatarUrl, avatar: item.avatarUrl,
date: new Date(item.createdTime), date: new Date(item.createdTime),
status: item.dealStatus, status: item.dealStatus,
profile_url: `/profile/${item.investorId}`, profile_url: `/profile/${item.investorId}`,
}; };
})} })}
/> />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>