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

53
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,24 +254,17 @@ 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) => { </TabsTrigger>
if (deal.project_id === currentProjectId) { ))}
return { </TabsList>
deal_amount: deal.deal_amount, <CardContent className="pl-2 mt-5">
created_time: deal.created_time, <Overview graphType={graphType} data={graphData} />
};
}
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"> <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")}>
@ -272,6 +276,7 @@ export default function Dashboard() {
</TabsList> </TabsList>
</Tabs> </Tabs>
</CardContent> </CardContent>
</Tabs>
</Card> </Card>
<Card className="col-span-3"> <Card className="col-span-3">
<CardHeader> <CardHeader>