update show order in report

src/components/dashboard/Orders.js

@@ -9,15 +9,12 @@ import TableRow from "@mui/material/TableRow";
 import Title from "./Title";
 import { UserContext } from "@/pages/_app";
 import { AdminOrderContext } from "../layout/AdminLayout";
-
-function preventDefault(event) {
-  event.preventDefault();
-}
+import axios from "axios";
 
 export default function Orders() {
-  const user = React.useContext(UserContext);
   const adminOrder = React.useContext(AdminOrderContext);
   const [orderRecent, setOrderRecent] = React.useState([]);
+  const [userAll, setUserAll] = React.useState([]);
 
   React.useEffect(() => {
     let order_r = [];
@@ -27,6 +24,15 @@ export default function Orders() {
     setOrderRecent(order_r);
   }, [adminOrder]);
 
+  React.useEffect(() => {
+    axios
+      .get("/api/user")
+      .then((res) => {
+        setUserAll(res.data);
+      })
+      .catch((err) => console.log(err));
+  }, []);
+
   return (
     <React.Fragment>
       <Title>ออเดอร์ล่าสุด</Title>
@@ -38,7 +44,7 @@ export default function Orders() {
                 "id",
                 "ราคาทั้งหมด",
                 "วันที่",
-                "จำนวนสินค้า",
+                "ผู้ซื้อ",
                 "ค่าส่ง",
                 "ชำระเงิน",
               ].map((label, idx) => (
@@ -62,8 +68,13 @@ export default function Orders() {
                         {new Date(order.date).toLocaleString()}
                       </Link>
                     </TableCell>
-                    <TableCell>{order.product_count}</TableCell>
-                    <TableCell>{order.shipping_price}</TableCell>
+                    <TableCell>
+                      {userAll.length
+                        ? userAll?.filter((usr) => usr.id === order.user_id)[0]
+                            .name ?? "undifined"
+                        : "undifined"}
+                    </TableCell>
+                    <TableCell>${order.shipping_price}</TableCell>
                     <TableCell>
                       <Box color={order.pay_status ? "green" : "red"}>
                         {order.pay_status ? "ชำระเงินแล้ว" : "ยังไม่ชำระเงิน"}
@@ -76,7 +87,9 @@ export default function Orders() {
         </Table>
       </div>
       <Box sx={{ pt: 2 }}>
-        <Link className="text-blue-600" href="/admin/order">ดูออเดอร์ทั้งหมด</Link>
+        <Link className="text-blue-600" href="/admin/order">
+          ดูออเดอร์ทั้งหมด
+        </Link>
       </Box>
     </React.Fragment>
   );

src/pages/admin/order.js

@@ -110,7 +110,11 @@ export default function Order() {
                           </Link>
                         </TableCell>
                         <TableCell>
-                          {userAll.filter((usr) => usr.id === order.user_id)[0].name}
+                          {userAll.length
+                            ? userAll?.filter(
+                                (usr) => usr.id === order.user_id
+                              )[0].name ?? "undifined"
+                            : "undifined"}
                         </TableCell>
                         <TableCell>
                           <Box color="black">${order.shipping_price}</Box>