Finish admin dashboard and update sql code

frontend/src/components/CategoryForm.jsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { MdAddBox } from "react-icons/md";
+import { addCategory } from "../api/admin";
+
+export default function CategoryForm({ visible, onAddCategory }) {
+  const [category, setCategory] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!category.trim()) {
+      document.getElementById("noti").innerHTML = "Category name is missing!";
+      document
+        .getElementById("noti")
+        .classList.add("bg-red-200", "text-red-500");
+      document.getElementById("noti").classList.remove("opacity-0");
+      return;
+    }
+    addCategory(category)
+      .then((message) => {
+        document
+          .getElementById("noti")
+          .classList.remove("opacity-0", "bg-red-200", "text-red-500");
+        document
+          .getElementById("noti")
+          .classList.add("bg-green-200", "text-green-800");
+        document.getElementById("noti").innerHTML = `${message.message}`;
+        setCategory("");
+        onAddCategory();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleChange = ({ target }) => {
+    setCategory(target.value);
+    if (target.value.trim())
+      document.getElementById("noti").classList.add("opacity-0");
+  };
+
+  if (!visible) return;
+
+  return (
+    <form onSubmit={handleSubmit} action="" className="flex p-2 items-center">
+      <label htmlFor="category" className="text-green-700">
+        Category:
+      </label>
+      <input
+        type="text"
+        className="border border-green-700 ml-2 rounded-sm focus:bg-green-100 text-green-900"
+        name="category"
+        id="category"
+        onChange={handleChange}
+        value={category}
+      />
+      <button type="submit" className="text-2xl pl-1 text-green-700">
+        <MdAddBox className="text-3xl" />
+      </button>
+      <p
+        id="noti"
+        className="text-red-500 bg-red-200 px-2 rounded-sm opacity-0 mx-2"
+      ></p>
+    </form>
+  );
+}

frontend/src/components/DashboardNav.jsx

@@ -0,0 +1,83 @@
+import { Link, NavLink } from "react-router-dom";
+import { FaUserTag } from "react-icons/fa";
+import { FaBoxArchive } from "react-icons/fa6";
+import { MdOutlineCategory } from "react-icons/md";
+import { FaArrowLeft } from "react-icons/fa";
+
+export default function DashboardNav({ handleCloseAdminDashboard }) {
+  const handleClick = () => {
+    handleCloseAdminDashboard();
+  };
+
+  return (
+    <div>
+      <div className="w-3xs h-screen bg-green-700 border border-green-700">
+        <ul>
+          <li>
+            <div className="flex-shrink-0 p-6 bg-green-200">
+              <Link to="/admin" className="flex items-center">
+                <img
+                  src="/icon/icon-512.png"
+                  alt="Campus Plug"
+                  className="h-8 px-2 "
+                />
+                <span className="hidden md:block text-green-700 font-bold text-2xl">
+                  Campus Plug
+                </span>
+              </Link>
+            </div>
+          </li>
+          <li className="w-fit pl-10">
+            <NavLink
+              to="/admin/user"
+              className={({ isActive }) =>
+                (isActive
+                  ? " text-green-400"
+                  : "text-white transition-all hover:text-green-200") +
+                " flex items-center px-5 text-lg pt-5 "
+              }
+            >
+              <FaUserTag />
+              <span className="pl-3">Users</span>
+            </NavLink>
+          </li>
+          <li className="w-fit pl-10">
+            <NavLink
+              to="/admin/product"
+              className={({ isActive }) =>
+                (isActive
+                  ? "text-green-400"
+                  : "text-white transition-all hover:text-green-200") +
+                " flex items-center px-5 text-lg pt-5"
+              }
+            >
+              <FaBoxArchive />
+              <span className="pl-3">Products</span>
+            </NavLink>
+          </li>
+          <li className="w-fit pl-10">
+            <NavLink
+              to="/admin/category"
+              className={({ isActive }) =>
+                (isActive
+                  ? "text-green-400"
+                  : "text-white transition-all hover:text-green-200") +
+                " flex items-center px-5 text-lg pt-5"
+              }
+            >
+              <MdOutlineCategory />
+              <span className="pl-3">Categories</span>
+            </NavLink>
+          </li>
+        </ul>
+        <div
+          onClick={handleClick}
+          className=" text-center my-8 underline text-white underline-offset-4 flex justify-center items-center hover:cursor-pointer h-fit w-fit mx-auto hover:text-green-200 transition"
+        >
+          <FaArrowLeft className="text-sm mx-2 mt-1" />
+          <span>Go back to user page</span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Navbar.jsx

@@ -3,7 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
 import UserDropdown from "./UserDropdown";
 import { Search, Heart } from "lucide-react";
 
-const Navbar = ({ onLogout, userName }) => {
+const Navbar = ({ onLogout, userName, isAdmin, handleShowAdminDashboard }) => {
   const [searchQuery, setSearchQuery] = useState("");
   const navigate = useNavigate();
 
@@ -76,7 +76,12 @@ const Navbar = ({ onLogout, userName }) => {
             </Link>
 
             {/* User Profile */}
-            <UserDropdown onLogout={onLogout} userName={userName} />
+            <UserDropdown
+              isAdmin={isAdmin}
+              onLogout={onLogout}
+              userName={userName}
+              handleShowAdminDashboard={handleShowAdminDashboard}
+            />
           </div>
         </div>
       </div>

frontend/src/components/Pagination.jsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+
+export default function Pagination({ pageNum, onChange }) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const pages = [];
+  for (let i = 1; i <= pageNum; i++) {
+    pages.push(i);
+  }
+
+  const handleClick = (page) => {
+    setCurrentPage(page);
+    onChange(page);
+  };
+
+  const handleTogglePage = (type) => {
+    let current = currentPage;
+    if (type == "next")
+      current = current + 1 <= pageNum ? current + 1 : current;
+    else current = current - 1 >= 1 ? current - 1 : current;
+    setCurrentPage(current);
+    onChange(current);
+  };
+
+  return (
+    <>
+      <nav aria-label="Page navigation" className="flex justify-end">
+        <ul className="flex items-center -space-x-px h-8 text-sm mt-4 pr-0 font-bold">
+          <li>
+            <NavLink
+              onClick={() => {
+                handleTogglePage("previous");
+              }}
+              className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white"
+            >
+              <span className="sr-only">Previous</span>
+              <svg
+                className="w-2.5 h-2.5 rtl:rotate-180"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 6 10"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M5 1 1 5l4 4"
+                />
+              </svg>
+            </NavLink>
+          </li>
+          {pages.map((page) => (
+            <li key={page}>
+              <NavLink
+                className={`${
+                  currentPage == page ? "bg-green-600" : "bg-green-700"
+                } +
+                  " flex items-center justify-center px-3 h-8 leading-tight text-white  border border-gray-300 hover:bg-green-600 hover:text-white"`}
+                onClick={() => {
+                  handleClick(page);
+                }}
+              >
+                {page}
+              </NavLink>
+            </li>
+          ))}
+          <li>
+            <NavLink
+              onClick={() => {
+                handleTogglePage("next");
+              }}
+              className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white"
+            >
+              <span className="sr-only">Next</span>
+              <svg
+                className="w-2.5 h-2.5 rtl:rotate-180"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 6 10"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="m1 9 4-4-4-4"
+                />
+              </svg>
+            </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </>
+  );
+}

frontend/src/components/UserDropdown.jsx

@@ -1,8 +1,14 @@
 import { useState, useRef, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { User, Settings, ShoppingBag, DollarSign, LogOut } from "lucide-react";
+import { RiAdminLine } from "react-icons/ri";
 
-const UserDropdown = ({ onLogout, userName }) => {
+const UserDropdown = ({
+  onLogout,
+  userName,
+  isAdmin,
+  handleShowAdminDashboard,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const navigate = useNavigate();
@@ -89,6 +95,20 @@ const UserDropdown = ({ onLogout, userName }) => {
               Settings
             </Link>
 
+            {isAdmin ? (
+              <Link
+                className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                onClick={() => {
+                  handleShowAdminDashboard();
+                }}
+              >
+                <RiAdminLine className="h-4 w-4 mr-2 text-gray-500" />
+                Admin
+              </Link>
+            ) : (
+              <></>
+            )}
+
             <button
               className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
               onClick={handleLogout}