update order display;

show recent order in report

src/components/dashboard/Chart.js

@@ -60,7 +60,9 @@ export default function Chart() {
 
   return (
     <React.Fragment>
-      <Title>Today</Title>
+      <Title>
+        on {month}, {year}
+      </Title>
       <ResponsiveContainer>
         <LineChart
           data={data}

src/components/dashboard/Dashboard.js

-import * as React from "react";
-import { styled, createTheme, ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import MuiDrawer from "@mui/material/Drawer";
-import Box from "@mui/material/Box";
-import MuiAppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import List from "@mui/material/List";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import Container from "@mui/material/Container";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import { mainListItems, secondaryListItems } from "./listItems";
-
-const drawerWidth = 240;
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== "open",
-})(({ theme, open }) => ({
-  zIndex: theme.zIndex.drawer + 1,
-  transition: theme.transitions.create(["width", "margin"], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  ...(open && {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  }),
-}));
-
-const Drawer = styled(MuiDrawer, {
-  shouldForwardProp: (prop) => prop !== "open",
-})(({ theme, open }) => ({
-  "& .MuiDrawer-paper": {
-    position: "relative",
-    whiteSpace: "nowrap",
-    width: drawerWidth,
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    boxSizing: "border-box",
-    ...(!open && {
-      overflowX: "hidden",
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      width: theme.spacing(7),
-      [theme.breakpoints.up("sm")]: {
-        width: theme.spacing(9),
-      },
-    }),
-  },
-}));
-
-// TODO remove, this demo shouldn't need to reset the theme.
-const defaultTheme = createTheme();
-
-export default function DashboardLayout(props) {
-  const [open, setOpen] = React.useState(true);
-  const toggleDrawer = () => {
-    setOpen(!open);
-  };
-
-  return (
-    <ThemeProvider theme={defaultTheme}>
-      <Box sx={{ display: "flex" }}>
-        <CssBaseline />
-        <Drawer className="z-0" variant="permanent" open={open}>
-          <Toolbar
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              px: [1],
-            }}
-          >
-            <IconButton onClick={toggleDrawer}>
-              <ChevronLeftIcon />
-            </IconButton>
-          </Toolbar>
-          <Divider />
-          <List component="nav">
-            {mainListItems}
-            <Divider sx={{ my: 1 }} />
-            {secondaryListItems}
-          </List>
-        </Drawer>
-
-        <Box
-          component="main"
-          sx={{
-            backgroundColor: (theme) =>
-              theme.palette.mode === "light"
-                ? theme.palette.grey[100]
-                : theme.palette.grey[900],
-            flexGrow: 1,
-            height: "100vh",
-            maxWidth: "100vw",
-            overflow: "auto",
-          }}
-        >
-          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>{props.children}</Container>
-        </Box>
-      </Box>
-    </ThemeProvider>
-  );
-}

src/components/dashboard/Orders.js

 import * as React from "react";
-import Link from "@mui/material/Link";
+import Link from "next/link";
+import { Box, Button, FormControl, Select, MenuItem } from "@mui/material";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Title from "./Title";
-import { Box } from "@mui/material";
-
-// Generate Order Data
-function createData(id, date, name, shipTo, paymentMethod, amount) {
-  return { id, date, name, shipTo, paymentMethod, amount };
-}
-
-const rows = [
-  createData(
-    0,
-    "16 Mar, 2019",
-    "Elvis Presley",
-    "Tupelo, MS",
-    "VISA ⠀•••• 3719",
-    312.44
-  ),
-  createData(
-    1,
-    "16 Mar, 2019",
-    "Paul McCartney",
-    "London, UK",
-    "VISA ⠀•••• 2574",
-    866.99
-  ),
-  createData(
-    2,
-    "16 Mar, 2019",
-    "Tom Scholz",
-    "Boston, MA",
-    "MC ⠀•••• 1253",
-    100.81
-  ),
-  createData(
-    3,
-    "16 Mar, 2019",
-    "Michael Jackson",
-    "Gary, IN",
-    "AMEX ⠀•••• 2000",
-    654.39
-  ),
-  createData(
-    4,
-    "15 Mar, 2019",
-    "Bruce Springsteen",
-    "Long Branch, NJ",
-    "VISA ⠀•••• 5919",
-    212.79
-  ),
-];
+import { UserContext } from "@/pages/_app";
+import { AdminOrderContext } from "../layout/AdminLayout";
 
 function preventDefault(event) {
   event.preventDefault();
 }
 
 export default function Orders() {
+  const user = React.useContext(UserContext);
+  const adminOrder = React.useContext(AdminOrderContext);
+  const [orderRecent, setOrderRecent] = React.useState([]);
+
+  React.useEffect(() => {
+    let order_r = [];
+    for (let i = 0; i < adminOrder.value.length && order_r.length < 5; i++) {
+      order_r.push(adminOrder.value[i]);
+    }
+    setOrderRecent(order_r);
+  }, [adminOrder]);
+
   return (
     <React.Fragment>
-      <Title>Recent Orders</Title>
-      <div className="overflow-x-scroll" >
+      <Title>ออเดอร์ล่าสุด</Title>
+      <div className="overflow-x-scroll">
         <Table size="small">
           <TableHead>
             <TableRow>
-              <TableCell>Date</TableCell>
-              <TableCell>Name</TableCell>
-              <TableCell>Ship To</TableCell>
-              <TableCell>Payment Method</TableCell>
-              <TableCell align="right">Sale Amount</TableCell>
+              {[
+                "id",
+                "ราคาทั้งหมด",
+                "วันที่",
+                "จำนวนสินค้า",
+                "ค่าส่ง",
+                "ชำระเงิน",
+              ].map((label, idx) => (
+                <TableCell key={idx}>{label}</TableCell>
+              ))}
             </TableRow>
           </TableHead>
           <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>{row.date}</TableCell>
-                <TableCell>{row.name}</TableCell>
-                <TableCell>{row.shipTo}</TableCell>
-                <TableCell>{row.paymentMethod}</TableCell>
-                <TableCell align="right">{`$${row.amount}`}</TableCell>
+            {orderRecent.map(
+              (order, idx) =>
+                order && (
+                  <TableRow key={idx}>
+                    <TableCell>{order.id}</TableCell>
+                    <TableCell>
+                      <Box color="orangered">
+                        ${Number(order.total_price).toLocaleString()}
+                      </Box>
+                    </TableCell>
+                    <TableCell>
+                      <Link href={"/admin/order/" + order.id}>
+                        {new Date(order.date).toLocaleString()}
+                      </Link>
+                    </TableCell>
+                    <TableCell>{order.product_count}</TableCell>
+                    <TableCell>{order.shipping_price}</TableCell>
+                    <TableCell>
+                      <Box color={order.pay_status ? "green" : "red"}>
+                        {order.pay_status ? "ชำระเงินแล้ว" : "ยังไม่ชำระเงิน"}
+                      </Box>
+                    </TableCell>
                   </TableRow>
-            ))}
+                )
+            )}
           </TableBody>
         </Table>
       </div>
-      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
-        See more orders
-      </Link>
+      <Box sx={{ pt: 2 }}>
+        <Link className="text-blue-600" href="/admin/order">ดูออเดอร์ทั้งหมด</Link>
+      </Box>
     </React.Fragment>
   );
 }

src/pages/admin/order.js

@@ -7,7 +7,6 @@ import { UserContext } from "../_app";
 import { AdminOrderContext } from "@/components/layout/AdminLayout";
 import {
   Paper,
-  Button,
   Box,
   Table,
   TableHead,
@@ -23,6 +22,16 @@ export default function Order() {
   const user = useContext(UserContext);
   const adminOrder = useContext(AdminOrderContext);
   const [message, setMessage] = useState({ message: "", error: false });
+  const [userAll, setUserAll] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get("/api/user")
+      .then((res) => {
+        setUserAll(res.data);
+      })
+      .catch((err) => console.log(err));
+  }, []);
 
   const onSendingChange = async (id, sending) => {
     try {
@@ -70,10 +79,11 @@ export default function Order() {
                   {[
                     "id",
                     "ราคาทั้งหมด",
-                    "รายละเอียด",
-                    "จำนวนสินค้า",
+                    "วันที่",
+                    "ผู้ซื้อ",
                     "ค่าส่ง",
                     "ชำระเงิน",
+                    "ที่อยู่",
                     "การจัดส่ง",
                   ].map((label, idx) => (
                     <TableCell key={idx}>{label}</TableCell>
@@ -92,12 +102,19 @@ export default function Order() {
                           </Box>
                         </TableCell>
                         <TableCell>
-                          <Link href={"/admin/order/" + order.id}>
-                            <Button>รายละเอียด</Button>
+                          <Link
+                            title="คลิกเพื่อดูรายละเอียด"
+                            href={"/admin/order/" + order.id}
+                          >
+                            {new Date(order.date).toLocaleString()}
                           </Link>
                         </TableCell>
-                        <TableCell>{order.product_count}</TableCell>
-                        <TableCell>{order.shipping_price}</TableCell>
+                        <TableCell>
+                          {userAll.filter((usr) => usr.id === order.user_id)[0].name}
+                        </TableCell>
+                        <TableCell>
+                          <Box color="black">${order.shipping_price}</Box>
+                        </TableCell>
                         <TableCell>
                           <Box color={order.pay_status ? "green" : "red"}>
                             {order.pay_status
@@ -105,6 +122,7 @@ export default function Order() {
                               : "ยังไม่ชำระเงิน"}
                           </Box>
                         </TableCell>
+                        <TableCell>{order.address}</TableCell>
                         <TableCell>
                           <FormControl variant="standard">
                             <Select

src/pages/admin/report.js

-import DashboardLayout from "@/components/dashboard/Dashboard";
 import React from "react";
 import { Grid, Paper } from "@mui/material";
 import Chart from "@/components/dashboard/Chart";
@@ -12,9 +11,7 @@ export default function Report() {
       <Head>
         <title>รายงาน | admin</title>
       </Head>
-      <DashboardLayout>
-        <Grid container spacing={3}>
-          {/* Chart */}
+      <Grid sx={{maxWidth: 1080, mx: "auto"}} container spacing={3}>
         <Grid item xs={12} md={8} lg={9}>
           <Paper
             sx={{
@@ -47,7 +44,6 @@ export default function Report() {
           </Paper>
         </Grid>
       </Grid>
-      </DashboardLayout>
     </>
   );
 }