add category from admin;

app/controllers/CategoryController.js

@@ -7,10 +7,33 @@ const CategoryController = {
    * @param {Response} res
    */
   async index(req, res) {
-    let category = await db.category.findMany({orderBy: {id: "asc"}});
+    let category = await db.category.findMany({ orderBy: { id: "asc" } });
     await db.$disconnect();
     res.json(category);
   },
+  /**
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async create(req, res) {
+    try {
+      const { name } = req.body;
+      let check_cate = await db.category.findFirst({ where: { name } });
+      if (check_cate) throw 202;
+      await db.category.create({ data: { name } });
+      return res.json({ status: 201, message: "create success" });
+    } catch (err) {
+      if (err === 202)
+        return res.json({
+          status: 202,
+          message: "this category has already used",
+        });
+      else {
+        res.json({ status: 200, message: "some error on server" });
+      }
+    }
+  },
 };
 
 export default CategoryController;

app/routes/admin.js

 import express from "express";
 import AdminUserController from "../controllers/AdminUserController";
 import AdminProductController from "../controllers/AdminProductController";
+import CategoryController from "../controllers/CategoryController";
 const adminRouter = express.Router();
 
-
-adminRouter.get('/user', AdminUserController.index)
-adminRouter.post('/product', AdminProductController.create)
+adminRouter.get("/user", AdminUserController.index);
+adminRouter.post("/product", AdminProductController.create);
+adminRouter.post("/category", CategoryController.create);
 
 export default adminRouter;

src/components/AddCategory.js

+import { useState, useEffect, useContext } from "react";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Snackbar,
+} from "@mui/material";
+import axios from "axios";
+import { UserContext } from "@/pages/_app";
+
+export default function AddCategory({ open, handleClose }) {
+  const user = useContext(UserContext);
+  const [message, setMessage] = useState({ message: "", error: false });
+  const [name, setName] = useState("");
+
+  /**
+   *
+   * @param {FormDataEvent} e
+   */
+  async function fetchAddProduct(e) {
+    e.preventDefault();
+    let response = await axios.post(
+      "/api/admin/category",
+      { name },
+      { headers: { token: user.value.token } }
+    );
+    if (response.data.status === 202) {
+      setMessage({ message: "หมวดหมู่นี้ถูกใช้แล้ว", error: true });
+      setTimeout(() => {
+        setMessage({ message: "", error: false });
+      }, 3000);
+    } else if(response.data.status === 201) {
+      setName("")
+      handleClose()
+      setMessage({message: "เพิ่มหมวดหมู่สำเร็จ", error: false})
+      setTimeout(() => {
+        setMessage({ message: "", error: false });
+      }, 3000);
+    }
+  }
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{ horizontal: "center", vertical: "top" }}
+        ContentProps={{
+          className: message.error ? "bg-red-500" : "bg-green-500",
+        }}
+        open={!!message.message.length}
+        message={message.message}
+      />
+      <Dialog open={open} onClose={handleClose}>
+        <form onSubmit={fetchAddProduct}>
+          <DialogTitle>เพิ่มหมวดหมู่</DialogTitle>
+          <DialogContent className="text-center">
+            <TextField
+              className="m-1"
+              label="ชื่อหมวดหมู่"
+              variant="standard"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button color="error" onClick={handleClose}>
+              ยกเลิก
+            </Button>
+            <Button type="submit">เพิ่ม</Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}

src/pages/admin/category.js

+import { Add } from "@mui/icons-material";
+import { Box, Button } from "@mui/material";
+import React, { useState } from "react";
+import AddCategory from "@/components/AddCategory";
+
+export default function AdminCategory() {
+  const [modal, setModal] = useState(false);
+  return (
+    <Box>
+      <Box sx={{ mb: 2, textAlign: "right" }}>
+        <Button onClick={() => setModal(true)}>
+          <Add /> เพิ่มหมวดหมู่
+        </Button>
+      </Box>
+      <AddCategory open={modal} handleClose={() => setModal(false)} />
+    </Box>
+  );
+}