Finish admin dashboard and update sql code

2025-04-20 07:50:57 -06:00
parent 7a2250369e
commit 26cd50ab6f
16 changed files with 766 additions and 57 deletions
--- a/frontend/src/pages/CategoryDashboard.jsx
+++ b/frontend/src/pages/CategoryDashboard.jsx
@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import { getCategories, removeCategory } from "../api/admin";
+import { MdDelete } from "react-icons/md";
+import Pagination from "../components/Pagination";
+import { IoAddCircleSharp } from "react-icons/io5";
+import CategoryForm from "../components/CategoryForm";
+
+export default function CategoryDashboard() {
+  const [categories, setCategories] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  let pageLimit = 10;
+
+  const [visible, setVisible] = useState(false);
+
+  const onChangePage = (page, limit = 10) => {
+    setCurrentPage(page);
+    fetchCategory(page, limit);
+  };
+
+  const fetchCategory = (page = 1, limit = 10) => {
+    getCategories(page, limit).then(({ data, total }) => {
+      setCategories(data);
+      setTotal(total);
+    });
+  };
+
+  const notiChange = () => {
+    fetchCategory(currentPage);
+  };
+
+  const handleToggleForm = () => {
+    setVisible((curr) => !curr);
+  };
+
+  const handleRemove = (id) => {
+    removeCategory(id)
+      .then((res) => {
+        fetchCategory(currentPage);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  //Get user when initialize the component
+  useEffect(fetchCategory, []);
+
+  return (
+    <div className="pt-10 p-20">
+      <h1 className="text-4xl pb-3 font-bold text-green-800 underline">
+        CATEGORIES
+      </h1>
+      <button
+        onClick={handleToggleForm}
+        className="flex justify-end items-center bg-blue-500 rounded-md px-2 text-white text-sm p-1 mb-1 ml-auto hover:cursor-pointer hover:bg-blue-600 transtion"
+      >
+        <span className="pr-1 text-xs">Add</span>
+        <IoAddCircleSharp />
+      </button>
+      <CategoryForm onAddCategory={notiChange} visible={visible} />
+      <table className="table-fixed w-full text-center border border-green-600">
+        <thead className="bg-green-600 h-10">
+          <tr>
+            <th>CategoryID</th>
+            <th>Name</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((category) => (
+            <tr key={category.UserID} className="border border-green-600 h-10">
+              <td>{category.CategoryID}</td>
+              <td>{category.Name}</td>
+              <td className="flex justify-center pt-2">
+                <MdDelete
+                  onClick={() => {
+                    handleRemove(category.CategoryID);
+                  }}
+                  className="hover:text-red-600 cursor-pointer transition-all text-xl"
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <Pagination
+        pageNum={Math.ceil(total / pageLimit)}
+        onChange={onChangePage}
+      />
+    </div>
+  );
+}