From c0d7a4b886952c3948277c4d0dccf5bc3f58fe79 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Fri, 27 Sep 2024 18:49:00 +0700
Subject: [PATCH] Refactor Invest page UI components, add responsive support
 for graph type selection

---
 src/app/dashboard/page.tsx     | 28 +++++++++---
 src/components/ui/overview.tsx | 83 ++++++++++++++++++++++------------
 2 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 33c7490..f413ec4 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+"use client";
 import Image from "next/image";
 import {
   Card,
@@ -10,13 +10,10 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Overview } from "@/components/ui/overview";
 import { RecentSales } from "@/components/recent-sales";
-
-export const metadata: Metadata = {
-  title: "Dashboard",
-  description: "Example dashboard app built using the components.",
-};
+import { useState } from "react";
 
 export default function Dashboard() {
+  const [graphType, setGraphType] = useState("line");
   return (
     <>
       <div className="md:hidden">
@@ -163,7 +160,24 @@ export default function Dashboard() {
                     <CardTitle>Overview</CardTitle>
                   </CardHeader>
                   <CardContent className="pl-2">
-                    <Overview />
+                    <Overview graphType={graphType} />
+                    {/* tab to switch between line and bar graph */}
+                    <Tabs defaultValue="line" className="space-y-4 ml-[50%]">
+                      <TabsList>
+                        <TabsTrigger
+                          value="line"
+                          onClick={() => setGraphType("line")}
+                        >
+                          Line
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="bar"
+                          onClick={() => setGraphType("bar")}
+                        >
+                          Bar
+                        </TabsTrigger>
+                      </TabsList>
+                    </Tabs>
                   </CardContent>
                 </Card>
                 <Card className="col-span-3">
diff --git a/src/components/ui/overview.tsx b/src/components/ui/overview.tsx
index 5cc8763..dbe45f8 100644
--- a/src/components/ui/overview.tsx
+++ b/src/components/ui/overview.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts";
 
 const data = [
   {
@@ -53,31 +53,58 @@ const data = [
   },
 ];
 
-export function Overview() {
-  return (
-    <ResponsiveContainer width="100%" height={350}>
-      <BarChart data={data}>
-        <XAxis
-          dataKey="name"
-          stroke="#888888"
-          fontSize={12}
-          tickLine={false}
-          axisLine={false}
-        />
-        <YAxis
-          stroke="#888888"
-          fontSize={12}
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value) => `$${value}`}
-        />
-        <Bar
-          dataKey="total"
-          fill="currentColor"
-          radius={[4, 4, 0, 0]}
-          className="fill-primary"
-        />
-      </BarChart>
-    </ResponsiveContainer>
-  );
+interface OverViewProps{
+    graphType:string;
+}
+
+export function Overview(props: OverViewProps) {
+    return (
+        <ResponsiveContainer width="100%" height={350}>
+          {props.graphType === 'line' ? (
+            <LineChart data={data}>
+              <XAxis
+                dataKey="name"
+                stroke="#888888"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                stroke="#888888"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={(value) => `$${value}`}
+              />
+              <Line
+                dataKey="total"
+                fill="currentColor"
+                className="fill-primary"
+              />
+            </LineChart>
+          ) : (
+            <BarChart data={data}>
+              <XAxis
+                dataKey="name"
+                stroke="#888888"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                stroke="#888888"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={(value) => `$${value}`}
+              />
+              <Bar
+                dataKey="total"
+                fill="currentColor"
+                className="fill-primary"
+              />
+            </BarChart>
+          )}
+        </ResponsiveContainer>
+      );
 }