show order on admin side;

show order count on admin navbar;

app/controllers/AdminOrderController.js

+import { Request, Response } from "express";
+import db from "../models/prismaClient";
+
+const AdminOrderController = {
+  /**
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async index(req, res) {
+    try {
+      let order = await db.order.findMany({ orderBy: { id: "desc" } });
+      res.json(order);
+    } catch (err) {
+      res.status(403).json({ status: 403, message: "error something" });
+    }
+  },
+};
+
+export default AdminOrderController;

app/routes/admin.js

@@ -2,6 +2,7 @@ import express from "express";
 import AdminUserController from "../controllers/AdminUserController";
 import AdminProductController from "../controllers/AdminProductController";
 import CategoryController from "../controllers/CategoryController";
+import AdminOrderController from "../controllers/AdminOrderController";
 const adminRouter = express.Router();
 
 adminRouter.get("/user", AdminUserController.index);
@@ -16,4 +17,6 @@ adminRouter.post("/category", CategoryController.create);
 adminRouter.put("/category", CategoryController.update);
 adminRouter.delete("/category", CategoryController.delete);
 
+adminRouter.get("/order", AdminOrderController.index);
+
 export default adminRouter;

src/components/AdminNavbar.js

@@ -21,6 +21,7 @@ import { Category } from "@mui/icons-material";
 import { PeopleAlt } from "@mui/icons-material";
 import { MeetingRoom } from "@mui/icons-material";
 import { useRouter } from "next/router";
+import { AdminOrderContext } from "./layout/AdminLayout";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -64,6 +65,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 
 function AdminNavbar(props) {
   const user = useContext(UserContext);
+  const adminOrder = useContext(AdminOrderContext)
 
   const router = useRouter();
   const [search, setSearch] = React.useState(router.query?.q ?? "");
@@ -144,7 +146,7 @@ function AdminNavbar(props) {
       link: "/admin/order",
       element: (
         <IconButton size="large" aria-label="show 4 new mails" color="inherit">
-          <Badge badgeContent={10} color="error">
+          <Badge badgeContent={[...adminOrder.value?.filter((order) => order.send_status === 0)].length} color="error">
             <ProductionQuantityLimits />
           </Badge>
         </IconButton>

src/components/layout/AdminLayout.js

-import React from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import AdminNavbar from "../AdminNavbar";
 import { Box } from "@mui/material";
 import { Toolbar } from "@mui/material";
+import axios from "axios";
+import { UserContext } from "@/pages/_app";
+
+export const AdminOrderContext = createContext(null);
 
 export default function AdminLayout({ children }) {
+  const user = useContext(UserContext);
+  const [adminOrder, setAdminOrder] = useState([]);
+
+  const fetchAdminOrder = async () => {
+    try {
+      if (!user.value?.token) return;
+      let response = await axios.get("/api/admin/order", {
+        headers: { token: user.value.token },
+      });
+      setAdminOrder(response.data);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchAdminOrder();
+  }, [user]);
   return (
     <>
-      <Box sx={{ display: "flex" }}>
-        <AdminNavbar />
-        {/* <Sidebar /> */}
-        <Box
-          component="main"
-          sx={{
-            flexGrow: 1,
-            p: 3,
-          }}
-        >
-          <Toolbar />
-          {children}
+      <AdminOrderContext.Provider
+        value={{
+          value: adminOrder,
+          set: setAdminOrder,
+          fetch: fetchAdminOrder,
+        }}
+      >
+        <Box sx={{ display: "flex" }}>
+          <AdminNavbar />
+          {/* <Sidebar /> */}
+          <Box
+            component="main"
+            sx={{
+              flexGrow: 1,
+              p: 3,
+            }}
+          >
+            <Toolbar />
+            {children}
+          </Box>
         </Box>
-      </Box>
+      </AdminOrderContext.Provider>
     </>
   );
 }

src/pages/admin/order.js

+import React, { useContext, useEffect, useState } from "react";
+import Head from "next/head";
+import PopupAlert from "@/components/PopupAlert";
+import Link from "next/link";
+import axios from "axios";
+import { UserContext } from "../_app";
+import { AdminOrderContext } from "@/components/layout/AdminLayout";
+import {
+  Paper,
+  Button,
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from "@mui/material";
+
+export default function Order() {
+  const user = useContext(UserContext);
+  const adminOrder = useContext(AdminOrderContext);
+
+  const [message, setMessage] = useState({ message: "", error: false });
+
+  useEffect(() => {
+    console.log(adminOrder.value);
+  }, [user]);
+
+  return (
+    <>
+      <Head>
+        <title>จัดการออเดอร์ | admin</title>
+      </Head>
+
+      <PopupAlert
+        open={!!message.message.length}
+        isError={message.error}
+        message={message.message}
+      />
+      <Paper sx={{ p: 1, overflowX: "scroll" }}>
+        {adminOrder.value?.length > 0 ? (
+          <Box>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  {[
+                    "id",
+                    "ราคาทั้งหมด",
+                    "รายละเอียด",
+                    "จำนวนสินค้า",
+                    "ค่าส่ง",
+                    "ชำระเงิน",
+                    "การจัดส่ง",
+                  ].map((label, idx) => (
+                    <TableCell key={idx}>{label}</TableCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {adminOrder.value.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={"/order/" + order.id}>
+                            <Button>รายละเอียด</Button>
+                          </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>
+                        <TableCell>
+                          <Box color={order.send_status ? "green" : "red"}>
+                            {order.send_status ? "ส่งแล้ว" : "ยังไม่จัดส่ง"}
+                          </Box>
+                        </TableCell>
+                      </TableRow>
+                    )
+                )}
+              </TableBody>
+            </Table>
+          </Box>
+        ) : (
+          <div className="text-center">
+            {user.value?.token ? "รายการว่างเปล่า" : "คุณยังไม่ได้เข้าสู่ระบบ"}
+          </div>
+        )}
+      </Paper>
+    </>
+  );
+}