Finish admin dashboard and update sql code

frontend/src/pages/ProductDashboard.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { getProducts, removeProduct } from "../api/admin";
+import { MdDelete } from "react-icons/md";
+import Pagination from "../components/Pagination";
+
+export default function ProductDashboard() {
+  const [products, setProducts] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  let pageLimit = 10;
+
+  const onChangePage = (page, limit = 10) => {
+    setCurrentPage(page);
+    fetchProducts(page, limit);
+  };
+
+  const fetchProducts = (page = 1, limit = 10) => {
+    getProducts(page, limit).then(({ products, total }) => {
+      setTotal(total);
+      setProducts(products);
+    });
+  };
+
+  const handleRemoveProduct = (id) => {
+    removeProduct(id)
+      .then((res) => {
+        fetchProducts(currentPage);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  //Get user when initialize the component
+  useEffect(fetchProducts, []);
+
+  return (
+    <div className="pt-10 p-20">
+      <h1 className="text-4xl pb-3 font-bold text-green-800 underline">
+        PRODUCTS
+      </h1>
+      <table className="table-fixed w-full text-center border border-green-600">
+        <thead className="bg-green-600 h-10">
+          <tr>
+            <th>ProductID</th>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Category</th>
+            <th>Seller</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((product) => (
+            <tr
+              key={product.ProductID}
+              className="border border-green-600 h-10"
+            >
+              <td>{product.ProductID}</td>
+              <td>{product.ProductName}</td>
+              <td>{product.Price}</td>
+              <td>{product.Category ? product.Category : "N/A"}</td>
+              <td>{product.SellerName ? product.SellerName : "N/A"}</td>
+              <td className="flex justify-center pt-2">
+                <MdDelete
+                  onClick={() => {
+                    handleRemoveProduct(product.ProductID);
+                  }}
+                  className="hover:text-red-600 cursor-pointer transition-all text-xl"
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <Pagination
+        onChange={onChangePage}
+        pageNum={Math.ceil(total / pageLimit)}
+      />
+    </div>
+  );
+}