Merge pull request #43 from TKPM-2023/admin/layout

Code UI Sales report
TKPM-2023 · Jun 28, 2023 · 6a230b9 · 6a230b9
2 parents 29c5d97 + dfad92b
commit 6a230b9
Show file tree

Hide file tree

Showing 3 changed files with 478 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.11.1",
     "react-toastify": "^9.1.3",
+    "recharts": "^2.7.2",
     "yup": "^1.1.1"
   },
   "devDependencies": {

diff --git a/src/pages/Admin/components/Dashboard/Dashboard.tsx b/src/pages/Admin/components/Dashboard/Dashboard.tsx
@@ -1,4 +1,72 @@
+import { useEffect } from 'react'
+import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LineChart, Line } from 'recharts'
+
+const data = [
+  {
+    name: 'Jan',
+    uv: 4000,
+    pv: 2400
+  },
+  {
+    name: 'Feb',
+    uv: 3000,
+    pv: 1398
+  },
+  {
+    name: 'Mar',
+    uv: 2000,
+    pv: 9800
+  },
+  {
+    name: 'Apr',
+    uv: 2780,
+    pv: 3908
+  },
+  {
+    name: 'May',
+    uv: 1890,
+    pv: 4800
+  },
+  {
+    name: 'Jun',
+    uv: 2390,
+    pv: 3800
+  },
+  {
+    name: 'Jul',
+    uv: 3490,
+    pv: 4300
+  },
+  {
+    name: 'Aug',
+    uv: 3490,
+    pv: 4300
+  },
+  {
+    name: 'Sep',
+    uv: 3490,
+    pv: 4300
+  },
+  {
+    name: 'Oct',
+    uv: 3490,
+    pv: 4300
+  },
+  {
+    name: 'Nov',
+    uv: 3490,
+    pv: 4300
+  },
+  {
+    name: 'Dec',
+    uv: 3490,
+    pv: 4300
+  }
+]
+
 function Dashboard() {
+  console.log(window)
+
   return (
     <div>
       <div className='px-5'>
@@ -114,6 +182,18 @@ function Dashboard() {
             </div>
           </div>
         </div>
+        <div className='mt-6'>
+          <p className='mb-4 text-xl font-medium'>Sales report</p>
+          <LineChart width={930} height={250} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray='3 3' />
+            <XAxis dataKey='name' />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Line type='monotone' dataKey='pv' stroke='#8884d8' />
+            <Line type='monotone' dataKey='uv' stroke='#82ca9d' />
+          </LineChart>
+        </div>
       </div>
     </div>
   )