Add transaction section to admin dashboard

frontend/src/pages/CategoryDashboard.jsx

@@ -36,7 +36,7 @@ export default function CategoryDashboard() {
 
   const handleRemove = (id) => {
     removeCategory(id)
-      .then((res) => {
+      .then(() => {
         fetchCategory(currentPage);
       })
       .catch((err) => {
@@ -48,7 +48,7 @@ export default function CategoryDashboard() {
   useEffect(fetchCategory, []);
 
   return (
-    <div className="pt-10 p-20">
+    <div className="pt-10 p-20 w-full">
       <h1 className="text-4xl pb-3 font-bold text-green-800 underline">
         CATEGORIES
       </h1>
@@ -60,35 +60,46 @@ export default function CategoryDashboard() {
         <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}
-      />
+      {categories.length > 0 ? (
+        <>
+          <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}
+          />
+        </>
+      ) : (
+        <p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1 w-fit">
+          No category exists!
+        </p>
+      )}
     </div>
   );
 }

frontend/src/pages/ProductDashboard.jsx

@@ -40,44 +40,52 @@ export default function ProductDashboard() {
       <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)}
-      />
+      {products.length > 0 ? (
+        <>
+          <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)}
+          />
+        </>
+      ) : (
+        <p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1 w-fit">
+          No product exists!
+        </p>
+      )}
     </div>
   );
 }

frontend/src/pages/TransactionDashboard.jsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import { getTransactions, removeTransaction } from "../api/admin";
+import { MdDelete } from "react-icons/md";
+import Pagination from "../components/Pagination";
+
+export default function TransactionDashboard() {
+  const [transactions, setTransactions] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  let pageLimit = 10;
+
+  const onChangePage = (page, limit = 10) => {
+    setCurrentPage(page);
+    fetchTransactions(page, limit);
+  };
+
+  const fetchTransactions = (page = 1, limit = 10) => {
+    getTransactions(page, limit).then(({ transactions, total }) => {
+      setTotal(total);
+      setTransactions(transactions);
+    });
+  };
+
+  const handleRemoveTransaction = (id) => {
+    removeTransaction(id)
+      .then(() => {
+        fetchTransactions(currentPage);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  //Get user when initialize the component
+  useEffect(fetchTransactions, []);
+
+  return (
+    <div className="pt-10 p-20">
+      <h1 className="text-4xl pb-3 font-bold text-green-800 underline">
+        TRANSACTIONS
+      </h1>
+      {transactions.length > 0 ? (
+        <>
+          <table className="table-fixed w-full text-center border border-green-600">
+            <thead className="bg-green-600 h-10">
+              <tr>
+                <th>TransactionID</th>
+                <th>User</th>
+                <th>Product</th>
+                <th>Date</th>
+                <th>Status</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((t) => (
+                <tr
+                  key={t.TransactionID}
+                  className="border border-green-600 h-10"
+                >
+                  <td>{t.TransactionID}</td>
+                  <td>{t.UserName ? t.UserName : "N/A"}</td>
+                  <td>{t.ProductName ? t.ProductName : "N/A"}</td>
+                  <td>{t.Date}</td>
+                  <td>{t.PaymentStatus}</td>
+                  <td className="flex justify-center pt-2">
+                    <MdDelete
+                      onClick={() => {
+                        handleRemoveTransaction(t.TransactionID);
+                      }}
+                      className="hover:text-red-600 cursor-pointer transition-all text-xl"
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <Pagination
+            onChange={onChangePage}
+            pageNum={Math.ceil(total / pageLimit)}
+          />
+        </>
+      ) : (
+        <p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1 w-fit">
+          No transaction exists!
+        </p>
+      )}
+    </div>
+  );
+}