feat: Add Admin Role Middleware and Dashboard Role-Based Rendering

pos-backend/middlewares/tokenVerification.js

@@ -31,4 +31,18 @@ const isVerifiedUser = async (req, res, next) => {
     }
 }
 
-module.exports = { isVerifiedUser };
+// Middleware to check if user has Admin role
+const isAdmin = async (req, res, next) => {
+    try {
+        if (req.user && req.user.role === "Admin") {
+            next();
+        } else {
+            const error = createHttpError(403, "Access denied. Admin role required.");
+            return next(error);
+        }
+    } catch (error) {
+        next(error);
+    }
+}
+
+module.exports = { isVerifiedUser, isAdmin };

pos-backend/routes/orderRoute.js

@@ -1,12 +1,12 @@
 const express = require("express");
 const { addOrder, getOrders, getOrderById, updateOrder } = require("../controllers/orderController");
-const { isVerifiedUser } = require("../middlewares/tokenVerification");
+const { isVerifiedUser, isAdmin } = require("../middlewares/tokenVerification");
 const router = express.Router();
 
 
 router.route("/").post(isVerifiedUser, addOrder);
 router.route("/").get(isVerifiedUser, getOrders);
 router.route("/:id").get(isVerifiedUser, getOrderById);
-router.route("/:id").put(isVerifiedUser, updateOrder);
+router.route("/:id").put(isVerifiedUser, isAdmin, updateOrder);
 
 module.exports = router;

pos-backend/routes/tableRoute.js

@@ -1,10 +1,10 @@
 const express = require("express");
 const { addTable, getTables, updateTable } = require("../controllers/tableController");
 const router = express.Router();
-const { isVerifiedUser } = require("../middlewares/tokenVerification")
+const { isVerifiedUser, isAdmin } = require("../middlewares/tokenVerification")
 
-router.route("/").post(isVerifiedUser , addTable);
-router.route("/").get(isVerifiedUser , getTables);
-router.route("/:id").put(isVerifiedUser , updateTable);
+router.route("/").post(isVerifiedUser, isAdmin, addTable);
+router.route("/").get(isVerifiedUser, getTables);
+router.route("/:id").put(isVerifiedUser, isAdmin, updateTable);
 
 module.exports = router;

pos-frontend/src/pages/Dashboard.jsx

@@ -4,8 +4,9 @@ import { BiSolidDish } from "react-icons/bi";
 import Metrics from "../components/dashboard/Metrics";
 import RecentOrders from "../components/dashboard/RecentOrders";
 import Modal from "../components/dashboard/Modal";
+import { useSelector } from "react-redux";
 
-const buttons = [
+const adminButtons = [
   { label: "Add Table", icon: <MdTableBar />, action: "table" },
   { label: "Add Category", icon: <MdCategory />, action: "category" },
   { label: "Add Dishes", icon: <BiSolidDish />, action: "dishes" },
@@ -14,9 +15,11 @@ const buttons = [
 const tabs = ["Metrics", "Orders", "Payments"];
 
 const Dashboard = () => {
+  const { role } = useSelector((state) => state.user);
+  const isAdmin = role === "Admin";
 
   useEffect(() => {
-    document.title = "POS | Admin Dashboard"
+    document.title = "POS | Dashboard"
   }, [])
 
   const [isTableModalOpen, setIsTableModalOpen] = useState(false);
@@ -30,22 +33,30 @@ const Dashboard = () => {
     <div className="bg-[#1f1f1f] h-[calc(100vh-5rem)]">
       <div className="container mx-auto flex items-center justify-between py-14 px-6 md:px-4">
         <div className="flex items-center gap-3">
-          {buttons.map(({ label, icon, action }) => {
-            return (
-              <button
-                onClick={() => handleOpenModal(action)}
-                className="bg-[#1a1a1a] hover:bg-[#262626] px-8 py-3 rounded-lg text-[#f5f5f5] font-semibold text-md flex items-center gap-2"
-              >
-                {label} {icon}
-              </button>
-            );
-          })}
+          {isAdmin ? (
+            adminButtons.map(({ label, icon, action }) => {
+              return (
+                <button
+                  key={action}
+                  onClick={() => handleOpenModal(action)}
+                  className="bg-[#1a1a1a] hover:bg-[#262626] px-8 py-3 rounded-lg text-[#f5f5f5] font-semibold text-md flex items-center gap-2"
+                >
+                  {label} {icon}
+                </button>
+              );
+            })
+          ) : (
+            <div className="text-[#f5f5f5] font-semibold">
+              Welcome to the Dashboard
+            </div>
+          )}
         </div>
 
         <div className="flex items-center gap-3">
           {tabs.map((tab) => {
             return (
               <button
+                key={tab}
                 className={`
                 px-8 py-3 rounded-lg text-[#f5f5f5] font-semibold text-md flex items-center gap-2 ${
                   activeTab === tab
@@ -62,14 +73,14 @@ const Dashboard = () => {
       </div>
 
       {activeTab === "Metrics" && <Metrics />}
-      {activeTab === "Orders" && <RecentOrders />}
+      {activeTab === "Orders" && <RecentOrders isAdmin={isAdmin} />}
       {activeTab === "Payments" && 
         <div className="text-white p-6 container mx-auto">
           Payment Component Coming Soon
         </div>
       }
 
-      {isTableModalOpen && <Modal setIsTableModalOpen={setIsTableModalOpen} />}
+      {isTableModalOpen && isAdmin && <Modal setIsTableModalOpen={setIsTableModalOpen} />}
     </div>
   );
 };