From 25e2852cc5c5fc26ca46bdd8633ae1d3c526d6b5 Mon Sep 17 00:00:00 2001
From: anthony <sliu6523@gmail.com>
Date: Mon, 8 Jan 2024 20:18:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=94=B6=E5=85=A5?=
 =?UTF-8?q?=E5=A0=B1=E8=A1=A8=E5=8A=9F=E8=83=BD=E3=80=81=E6=94=B6=E5=85=A5?=
 =?UTF-8?q?=E7=B5=B1=E8=A8=88=E5=8A=9F=E8=83=BD=E3=80=81=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E8=A8=82=E5=96=AE=E9=A1=AF=E7=A4=BA=E5=83=B9=E6=A0=BC=E9=8C=AF?=
 =?UTF-8?q?=E8=AA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx         |   2 +-
 src/app/my-order/page.js   |  10 +-
 src/app/order/page.js      |  10 +-
 src/components/Chart.js    | 293 +++++++------------------------------
 src/components/Deposits.js |  62 ++++++--
 5 files changed, 107 insertions(+), 270 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d22cc7a..d186b56 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -110,7 +110,7 @@ export default function RootLayout({
   ];
 
   const SELLER_CENTER_LINKS = [
-    //{ text: "賣家中心", href: user ? "/dashbord" : "/sign-in", icon: StorefrontIcon },
+    { text: "賣家中心", href: user ? "/dashbord" : "/sign-in", icon: StorefrontIcon },
     { text: "商品管理", href: user ? "/seller-product" : "/sign-in", icon: SellIcon },
     { text: "訂單管理", href: user ? "/order" : "/sign-in", icon: ContentPasteIcon },
     { text: "上架商品", href: user ? "/add-product" : "/sign-in", icon: AddIcon },
diff --git a/src/app/my-order/page.js b/src/app/my-order/page.js
index 75a35dd..be8fb88 100644
--- a/src/app/my-order/page.js
+++ b/src/app/my-order/page.js
@@ -282,7 +282,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -351,7 +351,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -396,7 +396,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -442,7 +442,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -490,7 +490,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
diff --git a/src/app/order/page.js b/src/app/order/page.js
index 16e5b2f..7a4581b 100644
--- a/src/app/order/page.js
+++ b/src/app/order/page.js
@@ -314,7 +314,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -381,7 +381,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -424,7 +424,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -468,7 +468,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
@@ -520,7 +520,7 @@ export default function Orders() {
                   </TableCell>
                   <TableCell>
                     {order.productAddAmountList.map((productItem, index) => (
-                      <div key={index}>{productItem.product.currentPrice}</div>
+                      <div key={index}>{productItem.product.currentPrice * productItem.amount}</div>
                     ))}
                   </TableCell>
                   <TableCell>
diff --git a/src/components/Chart.js b/src/components/Chart.js
index cc10ad3..b92a414 100644
--- a/src/components/Chart.js
+++ b/src/components/Chart.js
@@ -1,190 +1,9 @@
 "use client";
-// import * as React from "react";
-// import { useTheme } from "@mui/material/styles";
+import React, { useState, useEffect } from "react";
 import Paper from "@mui/material/Paper";
-// import {
-//   LineChart,
-//   Line,
-//   XAxis,
-//   YAxis,
-//   Label,
-//   ResponsiveContainer,
-// } from "recharts";
 import Title from "./Title";
-
-// // Generate Sales Data
-// function createData(time, amount) {
-//   return { time, amount };
-// }
-
-// const data = [
-//   createData("12/04", 1000),
-//   createData("12/05", 300),
-//   createData("12/06", 2600),
-//   createData("12/07", 800),
-//   createData("12/08", 1500),
-//   createData("12/09", 200),
-// ];
-
-// export default function Chart() {
-//   const theme = useTheme();
-
-//   return (
-// <Paper
-//   sx={{
-//     p: 2,
-//     display: "flex",
-//     flexDirection: "column",
-//     height: 240,
-//   }}
-// >
-//       <React.Fragment>
-//         <Title>本週收入</Title>
-//         <ResponsiveContainer>
-//           <LineChart
-//             data={data}
-//             margin={{
-//               top: 16,
-//               right: 16,
-//               bottom: 0,
-//               left: 24,
-//             }}
-//           >
-//             <XAxis
-//               dataKey="time"
-//               stroke={theme.palette.text.secondary}
-//               style={theme.typography.body2}
-//             />
-//             <YAxis
-//               stroke={theme.palette.text.secondary}
-//               style={theme.typography.body2}
-//             >
-//               <Label
-//                 angle={270}
-//                 position="left"
-//                 style={{
-//                   textAnchor: "middle",
-//                   fill: theme.palette.text.primary,
-//                   ...theme.typography.body1,
-//                 }}
-//               >
-//                 收入($)
-//               </Label>
-//             </YAxis>
-//             <Line
-//               isAnimationActive={false}
-//               type="monotone"
-//               dataKey="amount"
-//               stroke={theme.palette.primary.main}
-//               dot={false}
-//             />
-//           </LineChart>
-//         </ResponsiveContainer>
-//       </React.Fragment>
-//     </Paper>
-//   );
-// }
-
-// import React, { PureComponent } from "react";
-// import {
-//   LineChart,
-//   Line,
-//   XAxis,
-//   YAxis,
-//   CartesianGrid,
-//   Tooltip,
-//   Legend,
-//   ResponsiveContainer,
-// } from "recharts";
-
-// const data = [
-//   {
-//     name: "Page A",
-//     uv: 4000,
-//     pv: 2400,
-//     amt: 2400,
-//   },
-//   {
-//     name: "Page B",
-//     uv: 3000,
-//     pv: 1398,
-//     amt: 2210,
-//   },
-//   {
-//     name: "Page C",
-//     uv: 2000,
-//     pv: 9800,
-//     amt: 2290,
-//   },
-//   {
-//     name: "Page D",
-//     uv: 2780,
-//     pv: 3908,
-//     amt: 2000,
-//   },
-//   {
-//     name: "Page E",
-//     uv: 1890,
-//     pv: 4800,
-//     amt: 2181,
-//   },
-//   {
-//     name: "Page F",
-//     uv: 2390,
-//     pv: 3800,
-//     amt: 2500,
-//   },
-//   {
-//     name: "Page G",
-//     uv: 3490,
-//     pv: 4300,
-//     amt: 2100,
-//   },
-// ];
-
-// export default function Example() {
-//   return (
-// <Paper
-//   sx={{
-//     p: 2,
-//     display: "flex",
-//     flexDirection: "column",
-//     height: 240,
-//   }}
-// >
-//   <React.Fragment>
-//         <ResponsiveContainer width="100%" height="100%">
-//           <LineChart
-//             width={500}
-//             height={300}
-//             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"
-//                 activeDot={{ r: 8 }}
-//               /> */}
-//             <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
-//           </LineChart>
-//         </ResponsiveContainer>
-//       </React.Fragment>
-//     </Paper>
-//   );
-// }
-
-import React from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
 import {
   BarChart,
   Bar,
@@ -197,68 +16,60 @@ import {
   ResponsiveContainer,
 } from "recharts";
 
-const data = [
-  {
-    name: "12/04",
-    uv: 4000,
-    收入: 240,
-    amt: 2400,
-  },
-  {
-    name: "12/05",
-    uv: 3000,
-    收入: 139,
-    amt: 2210,
-  },
-  {
-    name: "12/06",
-    uv: 2000,
-    收入: 980,
-    amt: 2290,
-  },
-  {
-    name: "12/07",
-    uv: 2780,
-    收入: 398,
-    amt: 2000,
-  },
-  {
-    name: "12/08",
-    uv: 1890,
-    收入: 480,
-    amt: 2181,
-  },
-  {
-    name: "12/09",
-    uv: 2390,
-    收入: 380,
-    amt: 2500,
-  },
-  {
-    name: "12/10",
-    uv: 3490,
-    收入: 430,
-    amt: 2100,
-  },
-];
+const INCOMEAPI = "api/v1/order/check/income"
+const token = Cookies.get("token");
+
+async function fetchIncome() {
+  const response = await axios.get(INCOMEAPI, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return response.data;
+}
+
 
 export default function Chart() {
+  const [incomesData, setIncomesData] = useState([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const incomeData = await fetchIncome();
+        setIncomesData(incomeData);
+        // console.log(incomeData)
+      } catch (error) {
+        console.error("獲取收入資料錯誤:", error);
+      }
+    }
+    fetchData();
+  }, []);
+
+  const convertedData = [];
+  // useEffect(() => {
+    const today = new Date();
+    for (let i = 7; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(date.getDate() - i);
+      const addZero = (num) => (num < 10 ? `0${num}` : num);
+      const formattedDate = `${addZero(date.getMonth() + 1)}/${addZero(date.getDate())}`;
+      const income = incomesData[i];
+      convertedData.push({
+        date: formattedDate,
+        收入: income
+      });
+    }
+    // console.log(convertedData);
+  // }, [incomesData]);
+
   return (
-    // <Paper
-    //   sx={{
-    //     p: 2,
-    //     display: "flex",
-    //     flexDirection: "column",
-    //     height: 350,
-    //   }}
-    // >
     <React.Fragment>
         <Title><strong>本週收入</strong></Title>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             width={500}
             height={300}
-            data={data}
+            data={convertedData}
             margin={{
               top: 5,
               right: 30,
@@ -267,7 +78,7 @@ export default function Chart() {
             }}
           >
             <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="name" />
+            <XAxis dataKey="date" />
             <YAxis />
             <Tooltip />
             <Legend />
@@ -276,14 +87,8 @@ export default function Chart() {
               fill="#8884d8"
               activeBar={<Rectangle fill="pink" stroke="blue" />}
             />
-            {/* <Bar
-              dataKey="uv"
-              fill="#82ca9d"
-              activeBar={<Rectangle fill="gold" stroke="purple" />}
-            /> */}
           </BarChart>
         </ResponsiveContainer>
       </React.Fragment>
-    /* </Paper> */ 
   );
 }
\ No newline at end of file
diff --git a/src/components/Deposits.js b/src/components/Deposits.js
index 34b8301..b7302ad 100644
--- a/src/components/Deposits.js
+++ b/src/components/Deposits.js
@@ -1,28 +1,60 @@
-"use client"
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import Title from './Title';
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import Title from "./Title";
+import axios from "axios";
+import Cookies from "js-cookie";
 
-function preventDefault(event) {
-  event.preventDefault();
+const INCOMEAPI = "api/v1/order/check/income";
+const token = Cookies.get("token");
+
+async function fetchIncome() {
+  const response = await axios.get(INCOMEAPI, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return response.data;
 }
 
 export default function Deposits() {
+  const [incomesData, setIncomesData] = useState([]);
+  const total = incomesData.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+  const formattedTotal = "NT$" + total.toLocaleString("zh-TW");
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const incomeData = await fetchIncome();
+        setIncomesData(incomeData);
+        console.log(incomeData)
+      } catch (error) {
+        console.error("獲取收入資料錯誤:", error);
+      }
+    }
+    fetchData();
+  }, []);
+
+  const today = new Date(); // 獲取當前日期
+  const oneWeekAgo = new Date(today);
+  oneWeekAgo.setDate(oneWeekAgo.getDate() - 8);
+  const year = oneWeekAgo.getFullYear(); // 取得年份
+  const month = oneWeekAgo.getMonth() + 1; // 取得月份
+  const day = oneWeekAgo.getDate(); // 取得日期
+  const addZero = (num) => (num < 10 ? `0${num}` : num);
+  const formattedDate = `${year}-${addZero(month)}-${addZero(day)}`;
+  
   return (
     <React.Fragment>
-      <Title><strong>最近的總收入</strong></Title>
+      <Title>
+        <strong>最近的總收入</strong>
+      </Title>
       <Typography component="p" variant="h4">
-        $3,024.00
+        {formattedTotal}
       </Typography>
       <Typography color="text.secondary" sx={{ flex: 1 }}>
-        截止日期 2023/11/28
+        截止日期 {formattedDate}
       </Typography>
-      <div>
-        <Link color="primary" href="#" onClick={preventDefault}>
-          查看平均收入
-        </Link>
-      </div>
     </React.Fragment>
   );
 }
\ No newline at end of file