update recommendation.js, generate 5 random products for new user

backend/controllers/category.js

@@ -1,70 +0,0 @@
-const db = require("../utils/database");
-
-exports.getAllCategoriesWithPagination = async (req, res) => {
-  const limit = +req.query?.limit;
-  const page = +req.query?.page;
-  const offset = (page - 1) * limit;
-  try {
-    const [data, _] = await db.execute(
-      "SELECT * FROM Category C ORDER BY C.CategoryID ASC LIMIT ? OFFSET ?",
-      [limit.toString(), offset.toString()],
-    );
-
-    const [result] = await db.execute("SELECT COUNT(*) AS count FROM Category");
-    const { count: total } = result[0];
-    return res.json({ data, total });
-  } catch (error) {
-    res.json({ error: "Cannot fetch categories from database!" });
-  }
-};
-
-exports.addCategory = async (req, res) => {
-  const { name } = req.body;
-
-  try {
-    const [result] = await db.execute(
-      "INSERT INTO Category (Name) VALUES (?)",
-      [name],
-    );
-    res.json({ message: "Adding new category successfully!" });
-  } catch (error) {
-    res.json({ error: "Cannot add new category!" });
-  }
-};
-
-exports.removeCategory = async (req, res) => {
-  const { id } = req.params;
-
-  try {
-    const [result] = await db.execute(
-      `DELETE FROM Category WHERE CategoryID = ?`,
-      [id],
-    );
-    res.json({ message: "Delete category successfully!" });
-  } catch (error) {
-    res.json({ error: "Cannot remove category from database!" });
-  }
-};
-
-exports.getAllCategory = async (req, res) => {
-  try {
-    const [data, fields] = await db.execute(`SELECT * FROM Category`);
-
-    const formattedData = {};
-    data.forEach((row) => {
-      formattedData[row.CategoryID] = row.Name;
-    });
-
-    res.json({
-      success: true,
-      message: "Categories fetched successfully",
-      data: formattedData,
-    });
-  } catch (error) {
-    console.error("Error fetching categories:", error);
-    return res.status(500).json({
-      success: false,
-      error: "Database error occurred",
-    });
-  }
-};

backend/controllers/product.js

@@ -32,49 +32,11 @@ exports.addProduct = async (req, res) => {
   }
 };
 
-exports.removeProduct = async (req, res) => {
-  const { userID, productID } = req.body;
-  console.log(userID);
-
-  try {
-    // First delete images
-    await db.execute(`DELETE FROM Image_URL WHERE ProductID = ?`, [productID]);
-    await db.execute(`DELETE FROM History WHERE ProductID = ?`, [productID]);
-    await db.execute(`DELETE FROM Favorites WHERE ProductID = ?`, [productID]);
-    await db.execute(`DELETE FROM Product_Category WHERE ProductID = ?`, [
-      productID,
-    ]);
-    await db.execute(`DELETE FROM Product_Category WHERE ProductID = ?`, [
-      productID,
-    ]);
-    await db.execute(`DELETE FROM Transaction WHERE ProductID = ?`, [
-      productID,
-    ]);
-    await db.execute(
-      `DELETE FROM Recommendation WHERE RecommendedProductID = ?`,
-      [productID],
-    );
-
-    // Then delete the product
-    await db.execute(`DELETE FROM Product WHERE UserID = ? AND ProductID = ?`, [
-      userID,
-      productID,
-    ]);
-
-    res.json({
-      success: true,
-      message: "Product removed successfully",
-    });
-  } catch (error) {
-    console.error("Error removing product:", error);
-    return res.json({ error: "Could not remove product" });
-  }
-};
-
 exports.addFavorite = async (req, res) => {
   const { userID, productID } = req.body;
   console.log(userID);
   try {
+    // Use parameterized query to prevent SQL injection
     const [result] = await db.execute(
       `INSERT INTO Favorites (UserID, ProductID) VALUES (?, ?)`,
       [userID, productID],
@@ -110,103 +72,6 @@ exports.removeFavorite = async (req, res) => {
   }
 };
 
-exports.updateProduct = async (req, res) => {
-  const { productId } = req.params;
-  const { name, description, price, category, images } = req.body;
-
-  console.log(productId);
-
-  const connection = await db.getConnection();
-  try {
-    await connection.beginTransaction();
-
-    // Step 1: Check if the product exists
-    const [checkProduct] = await connection.execute(
-      "SELECT * FROM Product WHERE ProductID = ?",
-      [productId],
-    );
-    if (checkProduct.length === 0) {
-      await connection.rollback();
-      return res.status(404).json({ error: "Product not found" });
-    }
-
-    // Step 2: Update the product
-    await connection.execute(
-      `
-      UPDATE Product
-      SET Name = ?, Description = ?, Price = ?, CategoryID = ?
-      WHERE ProductID = ?
-      `,
-      [name, description, price, category, productId],
-    );
-
-    // Step 3: Delete existing images
-    await connection.execute(`DELETE FROM Image_URL WHERE ProductID = ?`, [
-      productId,
-    ]);
-
-    // Step 4: Insert new image URLs
-    for (const imageUrl of images) {
-      await connection.execute(
-        `INSERT INTO Image_URL (ProductID, URL) VALUES (?, ?)`,
-        [productId, imageUrl],
-      );
-    }
-
-    await connection.commit();
-    res.json({ success: true, message: "Product updated successfully" });
-  } catch (error) {
-    await connection.rollback();
-    console.error("Update product error:", error);
-    res.status(500).json({ error: "Failed to update product" });
-  } finally {
-    connection.release();
-  }
-};
-
-exports.myProduct = async (req, res) => {
-  const { userID } = req.body;
-
-  try {
-    const [result] = await db.execute(
-      `
-      SELECT
-      p.ProductID,
-      p.Name,
-      p.Description,
-      p.Price,
-      p.CategoryID,
-      p.UserID,
-      p.Date,
-      u.Name AS SellerName,
-      MIN(i.URL) AS image_url
-  FROM Product p
-  JOIN User u ON p.UserID = u.UserID
-  LEFT JOIN Image_URL i ON p.ProductID = i.ProductID
-  WHERE p.UserID = ?
-  GROUP BY
-      p.ProductID,
-      p.Name,
-      p.Description,
-      p.Price,
-      p.CategoryID,
-      p.UserID,
-      p.Date,
-      u.Name;
-      `,
-      [userID],
-    );
-
-    res.json({
-      success: true,
-      data: result,
-    });
-  } catch (error) {
-    console.error("Error retrieving favorites:", error);
-    res.status(500).json({ error: "Could not retrieve favorite products" });
-  }
-};
-
 exports.getFavorites = async (req, res) => {
   const { userID } = req.body;
 
@@ -346,61 +211,32 @@ exports.getProductById = async (req, res) => {
   }
 };
 
-exports.getProductWithPagination = async (req, res) => {
-  const limit = +req.query.limit;
-  const page = +req.query.page;
+// db_con.query(
+//   "SELECT ProductID FROM product WHERE ProductID = ?",
+//   [productID],
+//   (err, results) => {
+//     if (err) {
+//       console.error("Error checking product:", err);
+//       return res.json({ error: "Database error" });
+//     }
 
-  const offset = (page - 1) * limit;
+//     if (results.length === 0) {
+//       return res.json({ error: "Product does not exist" });
+//     }
+//   },
+// );
 
-  try {
-    const [data, fields] = await db.execute(
-      `
-          SELECT
-        P.ProductID,
-        P.Name AS ProductName,
-        P.Price,
-        P.Date AS DateUploaded,
-        U.Name AS SellerName,
-        MIN(I.URL) AS ProductImage,
-        C.Name AS Category
-      FROM Product P
-      LEFT JOIN Image_URL I ON P.ProductID = I.ProductID
-      LEFT JOIN User U ON P.UserID = U.UserID
-      LEFT JOIN Category C ON P.CategoryID = C.CategoryID
-      GROUP BY
-        P.ProductID,
-        P.Name,
-        P.Price,
-        P.Date,
-        U.Name,
-        C.Name
-      ORDER BY P.ProductID ASC
-      LIMIT ? OFFSET ?
-    `,
-      [limit.toString(), offset.toString()],
-    );
-
-    const [result] = await db.execute(
-      `SELECT COUNT(*) AS totalProd FROM Product`,
-    );
-    const { totalProd } = result[0];
-
-    return res.json({ totalProd, products: data });
-  } catch (error) {
-    res.json({ error: "Error fetching products!" });
-  }
-};
-
-exports.removeProduct = async (req, res) => {
-  const { id } = req.params;
-
-  try {
-    const [result] = await db.execute(
-      `DELETE FROM Product WHERE ProductID = ?`,
-      [id],
-    );
-    res.json({ message: "Delete product successfully!" });
-  } catch (error) {
-    res.json({ error: "Cannot remove product from database!" });
-  }
-};
+// db_con.query(
+//   "INSERT INTO Favorites (UserID, ProductID) VALUES (?, ?)",
+//   [userID, productID],
+//   (err, result) => {
+//     if (err) {
+//       console.error("Error adding favorite product:", err);
+//       return res.json({ error: "Could not add favorite product" });
+//     }
+//     res.json({
+//       success: true,
+//       message: "Product added to favorites successfully",
+//     });
+//   },
+// );

backend/controllers/recommendation.js

@@ -3,7 +3,43 @@ const db = require("../utils/database");
 // TODO: Get the recommondaed product given the userID
 exports.RecommondationByUserId = async (req, res) => {
   const { id } = req.body;
+
   try {
+    const [recommendation] = await db.execute(
+      "select * from Recommendation where UserID = ? limit 1", [id]
+    );
+    if (recommendation.length === 0) {
+      const [data] = await db.execute(
+        `
+    SELECT
+      P.ProductID,
+      P.Name AS ProductName,
+      P.Price,
+      P.Date AS DateUploaded,
+      U.Name AS SellerName,
+      I.URL AS ProductImage,
+      C.Name AS Category
+    FROM Product P
+    JOIN Image_URL I ON P.ProductID = I.ProductID
+    JOIN User U ON P.UserID = U.UserID
+    JOIN Category C ON P.CategoryID = C.CategoryID
+    JOIN (
+      SELECT ProductID
+      FROM Product
+      ORDER BY RAND()
+      LIMIT 5
+    ) RandomProducts ON P.ProductID = RandomProducts.ProductID
+    WHERE I.URL IS NOT NULL;
+    `
+      );
+
+      console.log("Random products for new user:", data);
+      return res.json({
+        success: true,
+        message: "Random products fetched for new user",
+        data,
+      });
+    } else{
     const [data, fields] = await db.execute(
       `
       WITH RankedImages AS (
@@ -43,6 +79,7 @@ exports.RecommondationByUserId = async (req, res) => {
       message: "Products fetched successfully",
       data,
     });
+  }
   } catch (error) {
     console.error("Error finding products:", error);
     return res.status(500).json({

backend/controllers/transaction.js

@@ -1,40 +0,0 @@
-const db = require("../utils/database");
-
-exports.getTransactionWithPagination = async (req, res) => {
-  const limit = +req.query?.limit;
-  const page = +req.query?.page;
-  const offset = (page - 1) * limit;
-  try {
-    const [data, _] = await db.execute(
-      `SELECT T.TransactionID, DATE_FORMAT(T.Date, '%b-%d-%Y %h:%i %p') as Date, T.PaymentStatus, U.Name as UserName, P.Name as ProductName 
-			      FROM Transaction T
-			      LEFT JOIN User U ON T.UserID = U.UserID
-            LEFT JOIN Product P ON T.ProductID = P.ProductID
-            ORDER BY T.TransactionID ASC LIMIT ? OFFSET ?`,
-      [limit.toString(), offset.toString()]
-    );
-
-    const [result] = await db.execute(
-      "SELECT COUNT(*) AS count FROM Transaction"
-    );
-    const { count: total } = result[0];
-    return res.json({ data, total });
-  } catch (error) {
-    res.json({ error: "Cannot fetch transactions from database!" });
-  }
-};
-
-exports.removeTransation = async (req, res) => {
-  const { id } = req.params;
-  try {
-    const [result] = await db.execute(
-      "DELETE FROM Transaction WHERE TransactionID = ?;",
-      [id.toString()]
-    );
-    return res.json({ message: "Remove transaction successfully!" });
-  } catch (error) {
-    return res
-      .status(500)
-      .json({ error: "Cannot remove transactions from database!" });
-  }
-};

backend/controllers/user.js

@@ -13,13 +13,13 @@ exports.sendVerificationCode = async (req, res) => {
     // Generate a random 6-digit code
     const verificationCode = crypto.randomInt(100000, 999999).toString();
     console.log(
-      `Generated verification code for ${email}: ${verificationCode}`
+      `Generated verification code for ${email}: ${verificationCode}`,
     );
 
     // Check if email already exists in verification table
     const [results, fields] = await db.execute(
       "SELECT * FROM AuthVerification WHERE Email = ?",
-      [email]
+      [email],
     );
 
     if (results.length > 0) {
@@ -27,7 +27,7 @@ exports.sendVerificationCode = async (req, res) => {
       const [result] = await db.execute(
         `UPDATE AuthVerification SET VerificationCode = ?, Authenticated = FALSE, Date = CURRENT_TIMESTAMP
          WHERE Email = ?`,
-        [verificationCode, email]
+        [verificationCode, email],
       );
 
       // Send email and respond
@@ -37,7 +37,7 @@ exports.sendVerificationCode = async (req, res) => {
       // Insert new record
       const [result] = await db.execute(
         "INSERT INTO AuthVerification (Email, VerificationCode, Authenticated) VALUES (?, ?, FALSE)",
-        [email, verificationCode]
+        [email, verificationCode],
       );
       // Send email and respond
       await sendVerificationEmail(email, verificationCode);
@@ -62,7 +62,7 @@ exports.verifyCode = async (req, res) => {
     // Check verification code
     const [results, fields] = await db.execute(
       "SELECT * FROM AuthVerification WHERE Email = ? AND VerificationCode = ? AND Authenticated = 0 AND Date > DATE_SUB(NOW(), INTERVAL 15 MINUTE)",
-      [email, code]
+      [email, code],
     );
     if (results.length === 0) {
       console.log(`Invalid or expired verification code for email ${email}`);
@@ -76,7 +76,7 @@ exports.verifyCode = async (req, res) => {
     // Mark as authenticated
     const [result] = await db.execute(
       "UPDATE AuthVerification SET Authenticated = TRUE WHERE Email = ?",
-      [email]
+      [email],
     );
     res.json({
       success: true,
@@ -95,7 +95,7 @@ exports.completeSignUp = async (req, res) => {
   try {
     const [results, fields] = await db.execute(
       `SELECT * FROM AuthVerification WHERE Email = ? AND Authenticated = 1;`,
-      [data.email]
+      [data.email],
     );
 
     if (results.length === 0) {
@@ -105,20 +105,20 @@ exports.completeSignUp = async (req, res) => {
     // Create the user
     const [createResult] = await db.execute(
       `INSERT INTO User (Name, Email, UCID, Password, Phone, Address)
-          VALUES ('${data.name}', '${data.email}', '${data.UCID}', '${data.password}', '${data.phone}', '${data.address}')`
+          VALUES ('${data.name}', '${data.email}', '${data.UCID}', '${data.password}', '${data.phone}', '${data.address}')`,
     );
 
     // Insert role using the user's ID
     const [insertResult] = await db.execute(
       `INSERT INTO UserRole (UserID, Client, Admin)
                 VALUES (LAST_INSERT_ID(), ${data.client || true}, ${
-        data.admin || false
-      })`
+                  data.admin || false
+                })`,
     );
 
     // Delete verification record
     const [deleteResult] = await db.execute(
-      `DELETE FROM AuthVerification WHERE Email = '${data.email}'`
+      `DELETE FROM AuthVerification WHERE Email = '${data.email}'`,
     );
 
     res.json({
@@ -310,7 +310,7 @@ exports.deleteUser = async (req, res) => {
     // Delete from UserRole first (assuming foreign key constraint)
     const [result1] = await db.execute(
       "DELETE FROM UserRole WHERE UserID = ?",
-      [userId]
+      [userId],
     );
 
     // Then delete from User table
@@ -328,38 +328,3 @@ exports.deleteUser = async (req, res) => {
     return res.status(500).json({ error: "Could not delete user!" });
   }
 };
-
-exports.getUsersWithPagination = async (req, res) => {
-  const limit = +req.query.limit;
-  const page = +req.query.page;
-
-  const offset = (page - 1) * limit;
-  try {
-    const [users, fields] = await db.execute(
-      "SELECT * FROM User LIMIT ? OFFSET ?",
-      [limit.toString(), offset.toString()]
-    );
-
-    const [result] = await db.execute("SELECT COUNT(*) AS count FROM User");
-    const { count: total } = result[0];
-
-    res.json({ users, total });
-  } catch (error) {
-    console.error("Errors: ", error);
-    return res.status(500).json({ error: "\nCould not fetch users!" });
-  }
-};
-
-exports.isAdmin = async (req, res) => {
-  const { id } = req.params;
-  try {
-    const [result] = await db.execute(
-      "SELECT R.Admin FROM marketplace.userrole R WHERE R.UserID = ?",
-      [id]
-    );
-    const { Admin } = result[0];
-    res.json({ isAdmin: Admin });
-  } catch (error) {
-    res.json({ error: "Cannot verify admin status!" });
-  }
-};

backend/index.js

@@ -9,8 +9,6 @@ const searchRouter = require("./routes/search");
 const recommendedRouter = require("./routes/recommendation");
 const history = require("./routes/history");
 const review = require("./routes/review");
-const categoryRouter = require("./routes/category");
-const transactionRouter = require("./routes/transaction");
 
 const { generateEmailTransporter } = require("./utils/mail");
 const {
@@ -44,12 +42,10 @@ app.use("/api/search", searchRouter);
 app.use("/api/engine", recommendedRouter);
 app.use("/api/history", history);
 app.use("/api/review", review);
-app.use("/api/category", categoryRouter);
-app.use("/api/transaction", transactionRouter);
-app.use("/api/category", categoryRouter);
+
 
 // Set up a scheduler to run cleanup every hour
-clean_up_time = 30 * 60 * 1000;
+clean_up_time = 30*60*1000;
 setInterval(cleanupExpiredCodes, clean_up_time);
 
 app.listen(3030, () => {

backend/routes/category.js

@@ -1,16 +0,0 @@
-const express = require("express");
-const {
-  getAllCategoriesWithPagination,
-  addCategory,
-  removeCategory,
-  getAllCategory,
-} = require("../controllers/category");
-
-const router = express.Router();
-
-router.get("/getCategories", getAllCategoriesWithPagination);
-router.post("/addCategory", addCategory);
-router.delete("/:id", removeCategory);
-router.get("/", getAllCategory);
-
-module.exports = router;

backend/routes/product.js

@@ -7,10 +7,6 @@ const {
   getAllProducts,
   getProductById,
   addProduct,
-  removeProduct,
-  getProductWithPagination,
-  myProduct,
-  updateProduct,
 } = require("../controllers/product");
 const router = express.Router();
 
@@ -24,18 +20,8 @@ router.post("/addFavorite", addFavorite);
 router.post("/getFavorites", getFavorites);
 router.post("/delFavorite", removeFavorite);
 
-router.post("/delProduct", removeProduct);
-router.post("/myProduct", myProduct);
 router.post("/addProduct", addProduct);
 router.get("/getProduct", getAllProducts);
-
-//Remove product
-router.delete("/:id", removeProduct);
-//Get products with pagination
-router.get("/getProductWithPagination", getProductWithPagination);
-
 router.get("/:id", getProductById); // Simplified route
 
-router.put("/update/:productId", updateProduct);
-
 module.exports = router;

backend/routes/transaction.js

@@ -1,12 +0,0 @@
-const express = require("express");
-const {
-  getTransactionWithPagination,
-  removeTransation,
-} = require("../controllers/transaction");
-
-const router = express.Router();
-
-router.get("/getTransactions", getTransactionWithPagination);
-router.delete("/:id", removeTransation);
-
-module.exports = router;

backend/routes/user.js

@@ -8,8 +8,6 @@ const {
   updateUser,
   deleteUser,
   doLogin,
-  isAdmin,
-  getUsersWithPagination,
 } = require("../controllers/user");
 
 const router = express.Router();
@@ -38,10 +36,4 @@ router.post("/update", updateUser);
 //Delete A uses Data:
 router.post("/delete", deleteUser);
 
-//Check admin status
-router.get("/isAdmin/:id", isAdmin);
-
-//Fetch user with pagination
-router.get("/getUserWithPagination", getUsersWithPagination);
-
 module.exports = router;

backend/utils/database.js

@@ -4,11 +4,6 @@ const pool = mysql.createPool({
   host: "localhost",
   user: "root",
   database: "Marketplace",
-  password: "12345678",
 });
 
-// const pool = mysql.createPool(
-//   "singlestore://mann-619d0:<mann-619d0 Password>@svc-3482219c-a389-4079-b18b-d50662524e8a-shared-dml.aws-virginia-6.svc.singlestore.com:3333/db_mann_48ba9?ssl={}",
-// );
-
 module.exports = pool.promise();

backend/utils/helper.js

@@ -1,5 +1,4 @@
 const { generateEmailTransporter } = require("./mail");
-const db = require("../utils/database");
 
 // Helper function to send email
 async function sendVerificationEmail(email, verificationCode) {
@@ -18,17 +17,18 @@ async function sendVerificationEmail(email, verificationCode) {
 }
 
 // Clean up expired verification codes (run this periodically)
-const cleanupExpiredCodes = () => {
-  db.execute(
-    "DELETE FROM AuthVerification WHERE Date < DATE_SUB(NOW(), INTERVAL 15 MINUTE) AND Authenticated = 0"
-  )
-    .then((res) => {
-      console.log(`Cleaned up expired verification codes`);
-    })
-    .catch((err) => {
-      console.error("Error cleaning up expired codes:", err);
-    });
-};
+function cleanupExpiredCodes() {
+  db_con.query(
+    "DELETE FROM AuthVerification WHERE Date < DATE_SUB(NOW(), INTERVAL 15 MINUTE) AND Authenticated = 0",
+    (err, result) => {
+      if (err) {
+        console.error("Error cleaning up expired codes:", err);
+      } else {
+        console.log(`Cleaned up ${result} expired verification codes`);
+      }
+    }
+  );
+}
 
 const checkDatabaseConnection = async (db) => {
   try {

frontend/package-lock.json

@@ -13,7 +13,6 @@
         "lucide-react": "^0.477.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-icons": "^5.5.0",
         "react-router-dom": "^7.2.0"
       },
       "devDependencies": {
@@ -4370,15 +4369,6 @@
         "react": "^19.0.0"
       }
     },
-    "node_modules/react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

frontend/package.json

@@ -15,7 +15,6 @@
     "lucide-react": "^0.477.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0",
     "react-router-dom": "^7.2.0"
   },
   "devDependencies": {

frontend/src/App.jsx

@@ -13,13 +13,6 @@ import Transactions from "./pages/Transactions";
 import Favorites from "./pages/Favorites";
 import ProductDetail from "./pages/ProductDetail";
 import SearchPage from "./pages/SearchPage"; // Make sure to import the SearchPage
-import Dashboard from "./pages/Dashboard";
-import UserDashboard from "./pages/UserDashboard";
-import ProductDashboard from "./pages/ProductDashboard";
-import DashboardNav from "./components/DashboardNav";
-import CategoryDashboard from "./pages/CategoryDashboard";
-import { verifyIsAdmin } from "./api/admin";
-import TransactionDashboard from "./pages/TransactionDashboard";
 
 function App() {
   // Authentication state - initialize from localStorage if available
@@ -37,10 +30,7 @@ function App() {
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
-  // Product recommendation states
-  const [isGeneratingRecommendations, setIsGeneratingRecommendations] =
-    useState(false);
-  const [recommendations, setRecommendations] = useState([]);
+  const [userId, setUserId] = useState(null);
 
   // New verification states
   const [verificationStep, setVerificationStep] = useState("initial"); // 'initial', 'code-sent', 'verifying'
@@ -63,89 +53,8 @@ function App() {
   }, []);
 
   useEffect(() => {
-    if (isAuthenticated && user) {
-      sendSessionDataToServer();
-    }
-  }, [isAuthenticated, user]);
-
-  // Generate product recommendations when user logs in
-  useEffect(() => {
-    if (isAuthenticated && user) {
-      generateProductRecommendations();
-    }
-  }, [isAuthenticated, user]);
-
-  // Generate product recommendations
-  const generateProductRecommendations = async () => {
-    try {
-      setIsGeneratingRecommendations(true);
-
-      // Add a short delay to simulate calculation time
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      console.log("Generating product recommendations for user:", user.ID);
-
-      // Make API call to get recommendations
-      const response = await fetch(
-        "http://localhost:3030/api/recommendations/generate",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            userId: user.ID,
-          }),
-        },
-      );
-
-      if (!response.ok) {
-        throw new Error("Failed to generate recommendations");
-      }
-
-      const result = await response.json();
-
-      if (result.success) {
-        console.log(
-          "Recommendations generated successfully:",
-          result.recommendations,
-        );
-        setRecommendations(result.recommendations);
-
-        // Store recommendations in session storage for access across the app
-        sessionStorage.setItem(
-          "userRecommendations",
-          JSON.stringify(result.recommendations),
-        );
-      } else {
-        console.error("Error generating recommendations:", result.message);
-      }
-    } catch (err) {
-      console.error("Error generating product recommendations:", err);
-    } finally {
-      setIsGeneratingRecommendations(false);
-    }
-  };
-
-  const [isAdmin, setIsAdmin] = useState(false);
-  const [showAdminDashboard, setShowAdminDashboard] = useState(false);
-
-  useEffect(() => {
-    const userInfo = sessionStorage.getItem("user")
-      ? JSON.parse(sessionStorage.getItem("user"))
-      : "";
-    const id = userInfo?.ID;
-    verifyIsAdmin(id).then((data) => {
-      setIsAdmin(data.isAdmin);
-    });
-  }, [user]);
-
-  const handleShowAdminDashboard = () => {
-    setShowAdminDashboard(true);
-  };
-  const handleCloseAdminDashboard = () => {
-    setShowAdminDashboard(false);
-  };
+    sendSessionDataToServer();
+  }, []);
 
   // Send verification code
   const sendVerificationCode = async (userData) => {
@@ -273,7 +182,6 @@ function App() {
       if (result.success) {
         // Create user object from API response
         const newUser = {
-          ID: result.userID || result.ID,
           name: result.name || userData.name,
           email: result.email || userData.email,
           UCID: result.UCID || userData.ucid,
@@ -288,17 +196,13 @@ function App() {
         sessionStorage.setItem("user", JSON.stringify(newUser));
 
         // After successful signup, send session data to server
-        sendSessionDataToServer();
+        sendSessionDataToServer(); // Call it after signup
 
         // Reset verification steps
         setVerificationStep("initial");
         setTempUserData(null);
 
         console.log("Signup completed successfully");
-
-        // Generate recommendations for the new user
-        generateProductRecommendations();
-
         return true;
       } else {
         setError(result.message || "Failed to complete signup");
@@ -397,11 +301,9 @@ function App() {
           sessionStorage.setItem("isAuthenticated", "true");
           sessionStorage.setItem("user", JSON.stringify(userObj));
 
-          console.log("Login successful for:", userData.email);
+          sessionStorage.getItem("user");
 
-          // Start generating recommendations with a slight delay
-          // This will happen in the useEffect, but we set a loading state to show to the user
-          setIsGeneratingRecommendations(true);
+          console.log("Login successful for:", userData.email);
         } else {
           // Show error message for invalid credentials
           setError("Invalid email or password");
@@ -435,12 +337,11 @@ function App() {
     setUser(null);
     setVerificationStep("initial");
     setTempUserData(null);
-    setRecommendations([]);
 
     // Clear localStorage
+    //
     sessionStorage.removeItem("user");
     sessionStorage.removeItem("isAuthenticated");
-    sessionStorage.removeItem("userRecommendations");
 
     console.log("User logged out");
   };
@@ -468,6 +369,8 @@ function App() {
     try {
       // Retrieve data from sessionStorage
       const user = JSON.parse(sessionStorage.getItem("user"));
+      // const isAuthenticated =
+      //   sessionStorage.getItem("isAuthenticated") === "true";
 
       if (!user || !isAuthenticated) {
         console.log("User is not authenticated");
@@ -481,6 +384,8 @@ function App() {
         isAuthenticated,
       };
 
+      console.log("Sending user data to the server:", requestData);
+
       // Send data to Python server (replace with your actual server URL)
       const response = await fetch("http://0.0.0.0:5000/api/user/session", {
         method: "POST",
@@ -502,13 +407,6 @@ function App() {
     }
   };
 
-  // Loading overlay component
-  const LoadingOverlay = () => (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="animate-spin rounded-full h-12 w-12 border-4 border-green-500 border-t-transparent"></div>
-    </div>
-  );
-
   // Login component
   const LoginComponent = () => (
     <div className="flex h-screen bg-white">
@@ -774,43 +672,12 @@ function App() {
     return children;
   };
 
-  // If user is admin, show admin naviagtion
-  if (showAdminDashboard) {
-    return (
-      <Router>
-        <div className="flex">
-          <DashboardNav handleCloseAdminDashboard={handleCloseAdminDashboard} />
-          <Routes>
-            {/* Admin routes */}
-            <Route path="/admin" element={<Dashboard />} />
-            <Route path="/admin/user" element={<UserDashboard />} />
-            <Route path="/admin/product" element={<ProductDashboard />} />
-            <Route path="/admin/category" element={<CategoryDashboard />} />
-            <Route
-              path="/admin/transaction"
-              element={<TransactionDashboard />}
-            />
-            <Route path="*" element={<Dashboard />} />
-          </Routes>
-        </div>
-      </Router>
-    );
-  }
-
   return (
     <Router>
       <div className="min-h-screen bg-gray-50">
-        {/* Show loading overlay when generating recommendations */}
-        {isGeneratingRecommendations && <LoadingOverlay />}
-
         {/* Only show navbar when authenticated */}
         {isAuthenticated && (
-          <Navbar
-            isAdmin={isAdmin}
-            onLogout={handleLogout}
-            userName={user?.name}
-            handleShowAdminDashboard={handleShowAdminDashboard}
-          />
+          <Navbar onLogout={handleLogout} userName={user?.name} />
         )}
         <Routes>
           {/* Public routes */}
@@ -824,7 +691,7 @@ function App() {
             element={
               <ProtectedRoute>
                 <div className="container mx-auto px-4 py-6">
-                  <Home recommendations={recommendations} />
+                  <Home />
                 </div>
               </ProtectedRoute>
             }

frontend/src/api/admin.js

@@ -1,120 +0,0 @@
-import client from "./client";
-
-export const getUsers = async (page, limit = 10) => {
-  try {
-    const { data } = await client.get(
-      `/user/getUserWithPagination?page=${page}&limit=${limit}`
-    );
-    return { users: data.users, total: data.total };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const getProducts = async (page, limit = 10) => {
-  try {
-    const { data } = await client.get(
-      `/product/getProductWithPagination?limit=${limit}&page=${page}`
-    );
-
-    return { products: data.products, total: data.totalProd };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const getCategories = async (page, limit = 10) => {
-  try {
-    const { data } = await client.get(
-      `/category/getCategories?page=${page}&limit=${limit}`
-    );
-    return { data: data.data, total: data.total };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const getTransactions = async (page, limit = 10) => {
-  try {
-    const { data } = await client.get(
-      `/transaction/getTransactions?limit=${limit}&page=${page}`
-    );
-    return { transactions: data.data, total: data.total };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const addCategory = async (name) => {
-  try {
-    const { data } = await client.post(`/category/addCategory`, { name: name });
-    return { message: data.message };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const removeCategory = async (id) => {
-  try {
-    const { data } = await client.delete(`/category/${id}`);
-    return { message: data.message };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const removeUser = async (id) => {
-  try {
-    const { data } = await client.post(`/user/delete`, { userId: id });
-    return { message: data.message };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const removeProduct = async (id) => {
-  try {
-    const { data } = await client.delete(`/product/${id}`);
-    return { message: data.message };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const verifyIsAdmin = async (id) => {
-  try {
-    const { data } = await client.get(`/user/isAdmin/${id}`);
-    return { isAdmin: data.isAdmin };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};
-
-export const removeTransaction = async (id) => {
-  try {
-    const { data } = await client.delete(`/transaction/${id}`);
-    return { message: data.message };
-  } catch (error) {
-    const { response } = error;
-    if (response?.data) return response.data;
-    return { error: error.message || error };
-  }
-};

frontend/src/api/client.js

@@ -1,3 +0,0 @@
-import axios from "axios";
-const client = axios.create({ baseURL: "http://localhost:3030/api" });
-export default client;

frontend/src/components/CategoryForm.jsx

@@ -1,65 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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";
-import { FaMoneyBillTransfer } from "react-icons/fa6";
-
-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>
-          <li className="w-fit pl-10">
-            <NavLink
-              to="/admin/transaction"
-              className={({ isActive }) =>
-                (isActive
-                  ? "text-green-400"
-                  : "text-white transition-all hover:text-green-200") +
-                " flex items-center px-5 text-lg pt-5"
-              }
-            >
-              <FaMoneyBillTransfer />
-              <span className="pl-3">Transaction</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, isAdmin, handleShowAdminDashboard }) => {
+const Navbar = ({ onLogout, userName }) => {
   const [searchQuery, setSearchQuery] = useState("");
   const navigate = useNavigate();
 
@@ -76,12 +76,7 @@ const Navbar = ({ onLogout, userName, isAdmin, handleShowAdminDashboard }) => {
             </Link>
 
             {/* User Profile */}
-            <UserDropdown
-              isAdmin={isAdmin}
-              onLogout={onLogout}
-              userName={userName}
-              handleShowAdminDashboard={handleShowAdminDashboard}
-            />
+            <UserDropdown onLogout={onLogout} userName={userName} />
           </div>
         </div>
       </div>

frontend/src/components/Pagination.jsx

@@ -1,99 +0,0 @@
-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/ProductForm.jsx

@@ -0,0 +1,410 @@
+import React, { useState } from "react";
+import { X, ChevronLeft, Plus, Trash2, Check } from "lucide-react";
+
+const ProductForm = ({
+  editingProduct,
+  setEditingProduct,
+  onSave,
+  onCancel,
+}) => {
+  const [selectedCategory, setSelectedCategory] = useState("");
+  const storedUser = JSON.parse(sessionStorage.getItem("user"));
+
+  const categories = [
+    "Electronics",
+    "Clothing",
+    "Home & Garden",
+    "Toys & Games",
+    "Books",
+    "Sports & Outdoors",
+    "Automotive",
+    "Beauty & Personal Care",
+    "Health & Wellness",
+    "Jewelry",
+    "Art & Collectibles",
+    "Food & Beverages",
+    "Office Supplies",
+    "Pet Supplies",
+    "Music & Instruments",
+    "Other",
+  ];
+
+  // Map category names to their respective IDs
+  const categoryMapping = {
+    Electronics: 1,
+    Clothing: 2,
+    "Home & Garden": 3,
+    "Toys & Games": 4,
+    Books: 5,
+    "Sports & Outdoors": 6,
+    Automotive: 7,
+    "Beauty & Personal Care": 8,
+    "Health & Wellness": 9,
+    Jewelry: 10,
+    "Art & Collectibles": 11,
+    "Food & Beverages": 12,
+    "Office Supplies": 13,
+    "Pet Supplies": 14,
+    "Music & Instruments": 15,
+    Other: 16,
+  };
+
+  const handleSave = async () => {
+    // Check if the user has selected at least one category
+    if (!(editingProduct.categories || []).length) {
+      alert("Please select at least one category");
+      return;
+    }
+
+    try {
+      // First, upload images if there are any
+      const imagePaths = [];
+
+      // If we have files to upload, we'd handle the image upload here
+      // This is a placeholder for where you'd implement image uploads
+      // For now, we'll simulate the API expecting paths:
+      if (editingProduct.images && editingProduct.images.length > 0) {
+        // Simulating image paths for demo purposes
+        // In a real implementation, you would upload these files first
+        // and then use the returned paths
+        editingProduct.images.forEach((file, index) => {
+          const simulatedPath = `/public/uploads/${file.name}`;
+          imagePaths.push(simulatedPath);
+        });
+      }
+
+      // Get the category ID from the first selected category
+      const categoryName = (editingProduct.categories || [])[0];
+      const categoryID = categoryMapping[categoryName] || 3; // Default to 3 if not found
+
+      // Prepare payload according to API expectations
+      const payload = {
+        name: editingProduct.name || "",
+        price: parseFloat(editingProduct.price) || 0,
+        qty: 1, // Hardcoded as per your requirement
+        userID: storedUser.ID,
+        description: editingProduct.description || "",
+        category: categoryID,
+        images: imagePaths,
+      };
+
+      console.log("Sending payload:", payload);
+
+      const response = await fetch(
+        "http://localhost:3030/api/product/addProduct",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        },
+      );
+
+      if (!response.ok) {
+        const errorData = await response.text();
+        throw new Error(`Failed to add product: ${errorData}`);
+      }
+
+      const data = await response.json();
+      console.log("Product added:", data);
+      if (onSave) onSave(data);
+    } catch (error) {
+      console.error("Error saving product:", error);
+      alert(`Error saving product: ${error.message}`);
+    }
+  };
+
+  const addCategory = () => {
+    if (
+      selectedCategory &&
+      !(editingProduct.categories || []).includes(selectedCategory)
+    ) {
+      setEditingProduct((prev) => ({
+        ...prev,
+        categories: [...(prev.categories || []), selectedCategory],
+      }));
+      setSelectedCategory("");
+    }
+  };
+
+  const removeCategory = (categoryToRemove) => {
+    setEditingProduct((prev) => ({
+      ...prev,
+      categories: (prev.categories || []).filter(
+        (cat) => cat !== categoryToRemove,
+      ),
+    }));
+  };
+
+  const toggleSoldStatus = () => {
+    setEditingProduct((prev) => ({
+      ...prev,
+      isSold: !prev.isSold,
+    }));
+  };
+
+  return (
+    <div className="bg-white border border-gray-200 shadow-md p-6">
+      {/* Back Button */}
+      <button
+        onClick={onCancel}
+        className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1"
+      >
+        <ChevronLeft size={16} />
+        <span>Back to Listings</span>
+      </button>
+
+      <h3 className="text-xl font-bold text-gray-800 mb-6 border-b border-gray-200 pb-3">
+        {editingProduct?.id ? "Edit Your Product" : "List a New Product"}
+      </h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Product Name */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Product Name
+          </label>
+          <input
+            type="text"
+            value={editingProduct.name || ""}
+            onChange={(e) =>
+              setEditingProduct({ ...editingProduct, name: e.target.value })
+            }
+            className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Price */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Price ($)
+          </label>
+          <input
+            type="number"
+            value={editingProduct.price || ""}
+            onChange={(e) =>
+              setEditingProduct({
+                ...editingProduct,
+                price: e.target.value,
+              })
+            }
+            className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Sold Status */}
+        <div className="md:col-span-2">
+          <div className="flex items-center mt-2">
+            <input
+              type="checkbox"
+              id="soldStatus"
+              checked={editingProduct.isSold || false}
+              onChange={toggleSoldStatus}
+              className="w-4 h-4 text-emerald-600 rounded focus:ring-emerald-500"
+            />
+            <label htmlFor="soldStatus" className="ml-2 text-sm text-gray-700">
+              Mark as {editingProduct.isSold ? "Available" : "Sold"}
+            </label>
+            {editingProduct.isSold && (
+              <span className="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                Sold
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Categories */}
+        <div className="md:col-span-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Categories
+          </label>
+          <div className="flex gap-2">
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+            >
+              <option value="" disabled>
+                Select a category
+              </option>
+              {categories
+                .filter(
+                  (cat) => !(editingProduct.categories || []).includes(cat),
+                )
+                .map((category) => (
+                  <option key={category} value={category}>
+                    {category}
+                  </option>
+                ))}
+            </select>
+            <button
+              type="button"
+              onClick={addCategory}
+              disabled={!selectedCategory}
+              className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
+            >
+              <Plus size={16} />
+              <span>Add</span>
+            </button>
+          </div>
+
+          {/* Selected Categories */}
+          {(editingProduct.categories || []).length > 0 ? (
+            <div className="mt-2 flex flex-wrap gap-2">
+              {(editingProduct.categories || []).map((category) => (
+                <span
+                  key={category}
+                  className="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-800"
+                >
+                  {category}
+                  <button
+                    type="button"
+                    onClick={() => removeCategory(category)}
+                    className="ml-1 text-emerald-600 hover:text-emerald-800"
+                  >
+                    <X size={14} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="text-xs text-gray-500 mt-1">
+              Please select at least one category
+            </p>
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="md:col-span-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Description
+          </label>
+          <textarea
+            value={editingProduct.description || ""}
+            onChange={(e) =>
+              setEditingProduct({
+                ...editingProduct,
+                description: e.target.value,
+              })
+            }
+            rows="4"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+            placeholder="Describe your product in detail..."
+          ></textarea>
+        </div>
+
+        {/* Image Upload */}
+        <div className="md:col-span-2">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Product Images <span className="text-gray-500">(Max 5)</span>
+          </label>
+
+          <input
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={(e) => {
+              const files = Array.from(e.target.files).slice(0, 5);
+              setEditingProduct((prev) => ({
+                ...prev,
+                images: [...(prev.images || []), ...files].slice(0, 5),
+              }));
+            }}
+            className="hidden"
+            id="image-upload"
+          />
+          <label
+            htmlFor="image-upload"
+            className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
+          >
+            <span className="text-emerald-600 font-medium">
+              Click to upload images
+            </span>
+          </label>
+
+          {/* Image previews */}
+          {(editingProduct.images || []).length > 0 && (
+            <div className="mt-3">
+              <div className="flex justify-between items-center mb-2">
+                <p className="text-sm text-gray-600">
+                  {editingProduct.images.length}{" "}
+                  {editingProduct.images.length === 1 ? "image" : "images"}{" "}
+                  selected
+                </p>
+                <button
+                  onClick={() =>
+                    setEditingProduct((prev) => ({ ...prev, images: [] }))
+                  }
+                  className="text-sm text-red-600 hover:text-red-800 flex items-center gap-1"
+                >
+                  <Trash2 size={14} />
+                  <span>Clear all</span>
+                </button>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {editingProduct.images.map((img, idx) => (
+                  <div
+                    key={idx}
+                    className="relative w-20 h-20 border border-gray-200 overflow-hidden"
+                  >
+                    <img
+                      src={URL.createObjectURL(img)}
+                      alt={`Product ${idx + 1}`}
+                      className="w-full h-full object-cover"
+                    />
+                    <button
+                      onClick={() => {
+                        const updated = [...editingProduct.images];
+                        updated.splice(idx, 1);
+                        setEditingProduct((prev) => ({
+                          ...prev,
+                          images: updated,
+                        }));
+                      }}
+                      className="absolute top-0 right-0 bg-white bg-opacity-80 w-6 h-6 flex items-center justify-center text-gray-700 hover:text-red-600"
+                    >
+                      <X size={14} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="mt-6 flex justify-between border-t border-gray-200 pt-4">
+        <button
+          onClick={toggleSoldStatus}
+          className={`flex items-center gap-1 px-4 py-2 rounded-md transition-colors ${
+            editingProduct.isSold
+              ? "bg-green-100 text-green-700 hover:bg-green-200"
+              : "bg-red-100 text-red-700 hover:bg-red-200"
+          }`}
+        >
+          <Check size={16} />
+          <span>Mark as {editingProduct.isSold ? "Available" : "Sold"}</span>
+        </button>
+
+        <div className="flex gap-3">
+          <button
+            onClick={onCancel}
+            className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200 rounded-md"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
+          >
+            {editingProduct.id ? "Update Product" : "Add Product"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductForm;

frontend/src/components/UserDropdown.jsx

@@ -1,14 +1,8 @@
 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,
-  isAdmin,
-  handleShowAdminDashboard,
-}) => {
+const UserDropdown = ({ onLogout, userName }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const navigate = useNavigate();
@@ -95,20 +89,6 @@ const UserDropdown = ({
               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}

frontend/src/index.css

@@ -1,4 +1,4 @@
 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

frontend/src/pages/CategoryDashboard.jsx

@@ -1,105 +0,0 @@
-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(() => {
-        fetchCategory(currentPage);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  //Get user when initialize the component
-  useEffect(fetchCategory, []);
-
-  return (
-    <div className="pt-10 p-20 w-full">
-      <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} />
-      {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/Dashboard.jsx

@@ -1,7 +0,0 @@
-export default function Dashboard() {
-  return (
-    <div className="text-3xl font-bold p-3 text-green-800">
-      Welcome to admin dashboard
-    </div>
-  );
-}

frontend/src/pages/Home.jsx

@@ -1,6 +1,12 @@
+import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useState, useEffect, useRef } from "react";
-import { Tag, ChevronLeft, ChevronRight, Bookmark, Loader } from "lucide-react";
+import {
+  Tag,
+  ChevronLeft,
+  ChevronRight,
+  Bookmark,
+  BookmarkCheck,
+} from "lucide-react";
 
 import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
 
@@ -8,50 +14,17 @@ const Home = () => {
   const navigate = useNavigate();
   const [listings, setListings] = useState([]);
   const [recommended, setRecommended] = useState([]);
-  const [history, setHistory] = useState([]);
+  const [history, sethistory] = useState([]);
   const [error, setError] = useState(null);
   const [showAlert, setShowAlert] = useState(false);
-  const [isLoading, setIsLoading] = useState({
-    recommendations: true,
-    listings: true,
-    history: true,
-  });
-  const recommendationsFetched = useRef(false);
-  const historyFetched = useRef(false);
 
   //After user data storing the session.
   const storedUser = JSON.parse(sessionStorage.getItem("user"));
 
   const toggleFavorite = async (id) => {
-    try {
-      const response = await fetch(
-        "http://localhost:3030/api/product/addFavorite",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            userID: storedUser.ID,
-            productID: id,
-          }),
-        },
-      );
-      const data = await response.json();
-      if (data.success) {
-        setShowAlert(true);
-        // Close alert after 3 seconds
-        setTimeout(() => setShowAlert(false), 3000);
-      }
-      console.log(`Add Product -> Favorites: ${id}`);
-    } catch (error) {
-      console.error("Error adding favorite:", error);
-    }
-  };
-
-  const addHistory = async (id) => {
-    try {
-      await fetch("http://localhost:3030/api/history/addHistory", {
+    const response = await fetch(
+      "http://localhost:3030/api/product/addFavorite",
+      {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -60,23 +33,44 @@ const Home = () => {
           userID: storedUser.ID,
           productID: id,
         }),
-      });
-    } catch (error) {
-      console.error("Error adding to history:", error);
+      },
+    );
+    const data = await response.json();
+    if (data.success) {
+      setShowAlert(true);
     }
+    console.log(`Add Product -> History: ${id}`);
   };
 
-  // Fetch recommended products
+  const addHistory = async (id) => {
+    const response = await fetch(
+      "http://localhost:3030/api/history/addHistory",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          userID: storedUser.ID,
+          productID: id,
+        }),
+      },
+    );
+  };
+
+  function reloadPage() {
+    var doctTimestamp = new Date(performance.timing.domLoading).getTime();
+    var now = Date.now();
+    var tenSec = 10 * 1000;
+    if (now > doctTimestamp + tenSec) {
+      location.reload();
+    }
+  }
+  reloadPage();
+
   useEffect(() => {
-    const fetchRecommendedProducts = async () => {
-      // Skip if already fetched or no user data
-      if (recommendationsFetched.current || !storedUser || !storedUser.ID)
-        return;
-
-      setIsLoading((prev) => ({ ...prev, recommendations: true }));
+    const fetchrecomProducts = async () => {
       try {
-        recommendationsFetched.current = true; // Mark as fetched before the API call
-
         const response = await fetch(
           "http://localhost:3030/api/engine/recommended",
           {
@@ -89,42 +83,36 @@ const Home = () => {
             }),
           },
         );
-        if (!response.ok) throw new Error("Failed to fetch recommendations");
+        if (!response.ok) throw new Error("Failed to fetch products");
 
         const data = await response.json();
         if (data.success) {
           setRecommended(
             data.data.map((product) => ({
               id: product.ProductID,
-              title: product.ProductName,
+              title: product.ProductName, // Use the alias from SQL
               price: product.Price,
-              category: product.Category,
-              image: product.ProductImage,
-              seller: product.SellerName,
-              datePosted: product.DateUploaded,
-              isFavorite: false,
+              category: product.Category, // Ensure this gets the category name
+              image: product.ProductImage, // Use the alias for image URL
+              seller: product.SellerName, // Fetch seller name properly
+              datePosted: product.DateUploaded, // Use the actual date
+              isFavorite: false, // Default state
             })),
           );
+          reloadPage();
         } else {
-          throw new Error(data.message || "Error fetching recommendations");
+          throw new Error(data.message || "Error fetching products");
         }
       } catch (error) {
-        console.error("Error fetching recommendations:", error);
+        console.error("Error fetching products:", error);
         setError(error.message);
-        // Reset the flag if there's an error so it can try again
-        recommendationsFetched.current = false;
-      } finally {
-        setIsLoading((prev) => ({ ...prev, recommendations: false }));
       }
     };
+    fetchrecomProducts();
+  }, []);
 
-    fetchRecommendedProducts();
-  }, [storedUser]); // Keep dependency
-
-  // Fetch all products
   useEffect(() => {
     const fetchProducts = async () => {
-      setIsLoading((prev) => ({ ...prev, listings: true }));
       try {
         const response = await fetch(
           "http://localhost:3030/api/product/getProduct",
@@ -132,17 +120,18 @@ const Home = () => {
         if (!response.ok) throw new Error("Failed to fetch products");
 
         const data = await response.json();
+
         if (data.success) {
           setListings(
             data.data.map((product) => ({
               id: product.ProductID,
-              title: product.ProductName,
+              title: product.ProductName, // Use the alias from SQL
               price: product.Price,
-              category: product.Category,
-              image: product.ProductImage,
-              seller: product.SellerName,
-              datePosted: product.DateUploaded,
-              isFavorite: false,
+              category: product.Category, // Ensure this gets the category name
+              image: product.ProductImage, // Use the alias for image URL
+              seller: product.SellerName, // Fetch seller name properly
+              datePosted: product.DateUploaded, // Use the actual date
+              isFavorite: false, // Default state
             })),
           );
         } else {
@@ -151,24 +140,15 @@ const Home = () => {
       } catch (error) {
         console.error("Error fetching products:", error);
         setError(error.message);
-      } finally {
-        setIsLoading((prev) => ({ ...prev, listings: false }));
       }
     };
-
     fetchProducts();
   }, []);
 
-  // Fetch user history
   useEffect(() => {
-    const fetchUserHistory = async () => {
-      // Skip if already fetched or no user data
-      if (historyFetched.current || !storedUser || !storedUser.ID) return;
-
-      setIsLoading((prev) => ({ ...prev, history: true }));
+    const fetchrecomProducts = async () => {
+      // Get the user's data from localStorage
       try {
-        historyFetched.current = true; // Mark as fetched before the API call
-
         const response = await fetch(
           "http://localhost:3030/api/history/getHistory",
           {
@@ -181,168 +161,52 @@ const Home = () => {
             }),
           },
         );
-        if (!response.ok) throw new Error("Failed to fetch history");
+        if (!response.ok) throw new Error("Failed to fetch products");
 
         const data = await response.json();
         if (data.success) {
-          setHistory(
+          sethistory(
             data.data.map((product) => ({
               id: product.ProductID,
-              title: product.ProductName,
+              title: product.ProductName, // Use the alias from SQL
               price: product.Price,
-              category: product.Category,
-              image: product.ProductImage,
-              seller: product.SellerName,
-              datePosted: product.DateUploaded,
+              category: product.Category, // Ensure this gets the category name
+              image: product.ProductImage, // Use the alias for image URL
+              seller: product.SellerName, // Fetch seller name properly
+              datePosted: product.DateUploaded, // Use the actual date
             })),
           );
         } else {
-          throw new Error(data.message || "Error fetching history");
+          throw new Error(data.message || "Error fetching products");
         }
       } catch (error) {
-        console.error("Error fetching history:", error);
+        console.error("Error fetching products:", error);
         setError(error.message);
-        // Reset the flag if there's an error so it can try again
-        historyFetched.current = false;
-      } finally {
-        setIsLoading((prev) => ({ ...prev, history: false }));
       }
     };
-
-    fetchUserHistory();
-  }, [storedUser]); // Keep dependency
+    fetchrecomProducts();
+  }, []);
 
   const handleSelling = () => {
     navigate("/selling");
   };
 
-  // Loading indicator component
-  const LoadingSection = () => (
-    <div className="flex justify-center items-center h-48">
-      <Loader className="animate-spin text-emerald-600 h-8 w-8" />
-    </div>
-  );
-
-  // Product card component to reduce duplication
-  const ProductCard = ({ product, addToHistory = false }) => (
-    <Link
-      key={product.id}
-      to={`/product/${product.id}`}
-      onClick={addToHistory ? () => addHistory(product.id) : undefined}
-      className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
-    >
-      <div className="relative">
-        <img
-          src={product.image}
-          alt={product.title}
-          className="w-full h-48 object-cover"
-        />
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            toggleFavorite(product.id);
-          }}
-          className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
-        >
-          <Bookmark className="text-white w-5 h-5" />
-        </button>
-      </div>
-
-      <div className="p-4">
-        <h3 className="text-lg font-medium text-gray-800 leading-tight">
-          {product.title}
-        </h3>
-        <span className="font-semibold text-emerald-600 block mt-1">
-          ${product.price}
-        </span>
-
-        <div className="flex items-center text-sm text-gray-500 mt-2">
-          <Tag className="h-4 w-4 mr-1" />
-          <span>{product.category}</span>
-        </div>
-
-        <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
-          <span className="text-xs text-gray-500">{product.datePosted}</span>
-          <span className="text-sm font-medium text-gray-700">
-            {product.seller}
-          </span>
-        </div>
-      </div>
-    </Link>
-  );
-
-  // Scrollable product list component to reduce duplication
-  const ScrollableProductList = ({
-    containerId,
-    products,
-    children,
-    isLoading,
-    addToHistory = false,
-  }) => (
-    <div className="relative py-4">
-      {children}
-
-      <div className="relative">
-        <button
-          onClick={() =>
-            document
-              .getElementById(containerId)
-              .scrollBy({ left: -400, behavior: "smooth" })
-          }
-          className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
-        >
-          <ChevronLeft size={24} />
-        </button>
-
-        <div
-          id={containerId}
-          className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0 rounded min-h-[250px]"
-        >
-          {isLoading ? (
-            <LoadingSection />
-          ) : products.length > 0 ? (
-            products.map((product) => (
-              <ProductCard
-                key={product.id}
-                product={product}
-                addToHistory={addToHistory}
-              />
-            ))
-          ) : (
-            <div className="flex justify-center items-center w-full h-48 text-gray-500">
-              No products available
-            </div>
-          )}
-        </div>
-
-        <button
-          onClick={() =>
-            document
-              .getElementById(containerId)
-              .scrollBy({ left: 400, behavior: "smooth" })
-          }
-          className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
-        >
-          <ChevronRight size={24} />
-        </button>
-      </div>
-    </div>
-  );
-
   return (
     <div className="flex flex-col min-h-screen">
       <div className="flex-grow">
         {/* Hero Section with School Background */}
         <div className="relative py-12 px-4 mb-8 shadow-sm">
+          {/* Background Image - Positioned at bottom */}
           <div className="absolute inset-0 z-0 overflow-hidden bg-black bg-opacity-100">
             <img
               src="../public/Ucalgary.png"
               alt="University of Calgary"
-              className="w-full h-full object-cover object-bottom opacity-45"
+              className="w-full h-full object-cover object-bottom opacity-50"
             />
+            {/* Dark overlay for better text readability */}
           </div>
 
+          {/* Content */}
           <div className="max-w-2xl mx-auto text-center relative z-1">
             <h1 className="text-3xl font-bold text-white mb-4">
               Buy and Sell on Campus
@@ -353,60 +217,297 @@ const Home = () => {
             </p>
             <button
               onClick={handleSelling}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
+              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
             >
               Post an Item
             </button>
           </div>
         </div>
 
-        {/* Floating Alert */}
+        {/* Recent Listings */}
         {showAlert && (
           <FloatingAlert
             message="Product added to favorites!"
             onClose={() => setShowAlert(false)}
           />
         )}
-
-        {/* Recommendations Section */}
-        <ScrollableProductList
-          containerId="RecomContainer"
-          products={recommended}
-          isLoading={isLoading.recommendations}
-          addToHistory={true}
-        >
+        <div className="relative py-4">
           <h2 className="text-xl font-semibold text-gray-800 mb-4">
-            Recommended For You
+            Recommendation
           </h2>
-        </ScrollableProductList>
 
-        {/* Recent Listings Section */}
-        <ScrollableProductList
-          containerId="listingsContainer"
-          products={listings}
-          isLoading={isLoading.listings}
-          addToHistory={true}
-        >
+          <div className="relative">
+            {/* Left Button - Overlaid on products */}
+            <button
+              onClick={() =>
+                document
+                  .getElementById("RecomContainer")
+                  .scrollBy({ left: -400, behavior: "smooth" })
+              }
+              className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+            >
+              <ChevronLeft size={24} />{" "}
+            </button>
+
+            {/* Scrollable Listings Container */}
+            <div
+              id="RecomContainer"
+              className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0 rounded"
+            >
+              {recommended.map((recommended) => (
+                <Link
+                  key={recommended.id}
+                  to={`/product/${recommended.id}`}
+                  onClick={() => addHistory(recommended.id)}
+                  className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
+                >
+                  <div className="relative">
+                    <img
+                      src={recommended.image}
+                      alt={recommended.title}
+                      className="w-full h-48 object-cover"
+                    />
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        toggleFavorite(recommended.id);
+                      }}
+                      className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
+                    >
+                      <Bookmark className="text-white w-5 h-5" />
+                    </button>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="text-lg font-medium text-gray-800 leading-tight">
+                      {recommended.title}
+                    </h3>
+                    <span className="font-semibold text-emerald-600 block mt-1">
+                      ${recommended.price}
+                    </span>
+
+                    <div className="flex items-center text-sm text-gray-500 mt-2">
+                      <Tag className="h-4 w-4 mr-1" />
+                      <span>{recommended.category}</span>
+                    </div>
+
+                    <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
+                      <span className="text-xs text-gray-500">
+                        {recommended.datePosted}
+                      </span>
+                      <span className="text-sm font-medium text-gray-700">
+                        {recommended.seller}
+                      </span>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+
+            {/* Right Button - Overlaid on products */}
+            <button
+              onClick={() =>
+                document
+                  .getElementById("RecomContainer")
+                  .scrollBy({ left: 400, behavior: "smooth" })
+              }
+              className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+            >
+              <ChevronRight size={24} />{" "}
+            </button>
+          </div>
+        </div>
+
+        {/* Recent Listings */}
+        {showAlert && (
+          <FloatingAlert
+            message="Product added to favorites!"
+            onClose={() => setShowAlert(false)}
+          />
+        )}
+        <div className="relative py-4">
           <h2 className="text-xl font-semibold text-gray-800 mb-4">
             Recent Listings
           </h2>
-        </ScrollableProductList>
+
+          <div className="relative">
+            {/* Left Button - Overlaid on products */}
+            <button
+              onClick={() =>
+                document
+                  .getElementById("listingsContainer")
+                  .scrollBy({ left: -400, behavior: "smooth" })
+              }
+              className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+            >
+              <ChevronLeft size={24} />{" "}
+            </button>
+
+            {/* Scrollable Listings Container */}
+            <div
+              id="listingsContainer"
+              className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
+            >
+              {listings.map((listing) => (
+                <Link
+                  key={listing.id}
+                  to={`/product/${listing.id}`}
+                  className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
+                >
+                  <div className="relative">
+                    <img
+                      src={listing.image}
+                      alt={listing.title}
+                      onClick={() => addHistory(listing.id)}
+                      className="w-full h-48 object-cover"
+                    />
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        toggleFavorite(listing.id);
+                      }}
+                      className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
+                    >
+                      <Bookmark className="text-white w-5 h-5" />
+                    </button>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="text-lg font-medium text-gray-800 leading-tight">
+                      {listing.title}
+                    </h3>
+                    <span className="font-semibold text-emerald-600 block mt-1">
+                      ${listing.price}
+                    </span>
+
+                    <div className="flex items-center text-sm text-gray-500 mt-2">
+                      <Tag className="h-4 w-4 mr-1" />
+                      <span>{listing.category}</span>
+                    </div>
+
+                    <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
+                      <span className="text-xs text-gray-500">
+                        {listing.datePosted}
+                      </span>
+                      <span className="text-sm font-medium text-gray-700">
+                        {listing.seller}
+                      </span>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+
+            {/* Right Button - Overlaid on products */}
+            <button
+              onClick={() =>
+                document
+                  .getElementById("listingsContainer")
+                  .scrollBy({ left: 400, behavior: "smooth" })
+              }
+              className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+            >
+              <ChevronRight size={24} />{" "}
+            </button>
+          </div>
+        </div>
 
         {/* History Section */}
-        {(history.length > 0 || isLoading.history) && (
-          <ScrollableProductList
-            containerId="HistoryContainer"
-            products={history}
-            isLoading={isLoading.history}
-          >
-            <h2 className="text-xl font-semibold text-gray-800 mb-4">
-              Your Browsing History
-            </h2>
-          </ScrollableProductList>
+        {showAlert && (
+          <FloatingAlert
+            message="Product added to favorites!"
+            onClose={() => setShowAlert(false)}
+          />
         )}
+        <div className="relative py-4">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">History</h2>
+
+          <div className="relative">
+            {/* Left Button - Overlaid on products */}
+            <button
+              onClick={() =>
+                document
+                  .getElementById("HistoryContainer")
+                  .scrollBy({ left: -400, behavior: "smooth" })
+              }
+              className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+            >
+              <ChevronLeft size={24} />{" "}
+            </button>
+
+            {/* Scrollable Listings Container */}
+            <div
+              id="HistoryContainer"
+              className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
+            >
+              {history.map((history) => (
+                <Link
+                  key={history.id}
+                  to={`/product/${history.id}`}
+                  className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
+                >
+                  <div className="relative">
+                    <img
+                      src={history.image}
+                      alt={history.title}
+                      className="w-full h-48 object-cover"
+                    />
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        toggleFavorite(history.id);
+                      }}
+                      className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
+                    >
+                      <Bookmark className="text-white w-5 h-5" />
+                    </button>
+                  </div>
+
+                  <div className="p-4">
+                    <h3 className="text-lg font-medium text-gray-800 leading-tight">
+                      {history.title}
+                    </h3>
+                    <span className="font-semibold text-emerald-600 block mt-1">
+                      ${history.price}
+                    </span>
+
+                    <div className="flex items-center text-sm text-gray-500 mt-2">
+                      <Tag className="h-4 w-4 mr-1" />
+                      <span>{history.category}</span>
+                    </div>
+
+                    <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
+                      <span className="text-xs text-gray-500">
+                        {history.datePosted}
+                      </span>
+                      <span className="text-sm font-medium text-gray-700">
+                        {history.seller}
+                      </span>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+
+            {/* Right Button - Overlaid on products */}
+            <button
+              onClick={() =>
+                document
+                  .getElementById("HistoryContainer")
+                  .scrollBy({ left: 400, behavior: "smooth" })
+              }
+              className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+            >
+              <ChevronRight size={24} />{" "}
+            </button>
+          </div>
+        </div>
       </div>
 
-      {/* Footer */}
+      {/* Footer - Added here */}
       <footer className="bg-gray-800 text-white py-6 mt-12">
         <div className="container mx-auto px-4">
           <div className="flex flex-col md:flex-row justify-between items-center">

frontend/src/pages/ProductDashboard.jsx

@@ -1,91 +0,0 @@
-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>
-      {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/ProductDetail.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useParams, Link } from "react-router-dom";
 import {
+  Heart,
   ArrowLeft,
   Tag,
   User,
@@ -25,6 +26,7 @@ const ProductDetail = () => {
     reviews: null,
     submit: null,
   });
+  const [isFavorite, setIsFavorite] = useState(false);
   const [showContactOptions, setShowContactOptions] = useState(false);
   const [currentImage, setCurrentImage] = useState(0);
   const [reviews, setReviews] = useState([]);
@@ -50,6 +52,7 @@ const ProductDetail = () => {
     if (data.success) {
       setShowAlert(true);
     }
+    console.log(`Add Product -> History: ${id}`);
   };
 
   const [reviewForm, setReviewForm] = useState({
@@ -245,7 +248,7 @@ const ProductDetail = () => {
   if (loading.product) {
     return (
       <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-600"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
       </div>
     );
   }
@@ -259,7 +262,7 @@ const ProductDetail = () => {
           <p className="text-gray-600">{error.product}</p>
           <Link
             to="/"
-            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+            className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
           >
             Back to Listings
           </Link>
@@ -276,7 +279,7 @@ const ProductDetail = () => {
           <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
           <Link
             to="/"
-            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2  hover:bg-emerald-700"
+            className="mt-4 inline-block bg-green-500 text-white px-4 py-2  hover:bg-green-600"
           >
             Back to Listings
           </Link>
@@ -288,15 +291,15 @@ const ProductDetail = () => {
   // Render product details
   return (
     <div className="max-w-6xl mx-auto px-4 py-8">
-      {/* <div className="mb-6">
+      <div className="mb-6">
         <Link
           to="/search"
-          className="flex items-center text-emerald-700 hover:text-emerald-700"
+          className="flex items-center text-green-600 hover:text-green-700"
         >
           <ArrowLeft className="h-4 w-4 mr-1" />
           <span>Back</span>
         </Link>
-      </div> */}
+      </div>
       {showAlert && (
         <FloatingAlert
           message="Product added to favorites!"
@@ -348,7 +351,7 @@ const ProductDetail = () => {
               {product.images.map((image, index) => (
                 <div
                   key={index}
-                  className={`bg-white border ${currentImage === index ? "border-emerald-600 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
+                  className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
                   onClick={() => selectImage(index)}
                 >
                   <img
@@ -378,13 +381,13 @@ const ProductDetail = () => {
                   e.preventDefault();
                   toggleFavorite(product.ProductID);
                 }}
-                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
+                className="top-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
               >
                 <Bookmark className="text-white w-5 h-5" />
               </button>
             </div>
 
-            <div className="text-2xl font-bold text-emerald-700 mb-4">
+            <div className="text-2xl font-bold text-green-600 mb-4">
               $
               {typeof product.Price === "number"
                 ? product.Price.toFixed(2)
@@ -415,7 +418,7 @@ const ProductDetail = () => {
             <div className="relative">
               <button
                 onClick={() => setShowContactOptions(!showContactOptions)}
-                className="w-full bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-3 px-4 mb-3"
+                className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
               >
                 Contact Seller
               </button>
@@ -427,7 +430,7 @@ const ProductDetail = () => {
                       href={`tel:${product.SellerPhone}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
                     >
-                      <Phone className="h-5 w-5 text-emerald-600" />
+                      <Phone className="h-5 w-5 text-green-500" />
                       <span>Call Seller</span>
                     </a>
                   )}
@@ -437,7 +440,7 @@ const ProductDetail = () => {
                       href={`mailto:${product.SellerEmail}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50"
                     >
-                      <Mail className="h-5 w-5 text-emerald-600" />
+                      <Mail className="h-5 w-5 text-green-500" />
                       <span>Email Seller</span>
                     </a>
                   )}
@@ -474,7 +477,7 @@ const ProductDetail = () => {
         <div className="bg-white border border-gray-200 p-6">
           {loading.reviews ? (
             <div className="flex justify-center py-8">
-              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-600"></div>
+              <div className="animate-spin h-8 w-8 border-t-2 border-green-500"></div>
             </div>
           ) : error.reviews ? (
             <div className="text-red-500 mb-4">
@@ -521,7 +524,7 @@ const ProductDetail = () => {
         <div className="mt-4">
           <button
             onClick={() => setShowReviewForm(true)}
-            className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
+            className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
           >
             Write a Review
           </button>
@@ -579,7 +582,7 @@ const ProductDetail = () => {
                     id="comment"
                     value={reviewForm.comment}
                     onChange={handleReviewInputChange}
-                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
                     rows="4"
                     required
                   ></textarea>
@@ -595,7 +598,7 @@ const ProductDetail = () => {
                   </button>
                   <button
                     type="submit"
-                    className="px-4 py-2 bg-emerald-600 text-white  hover:bg-emerald-700"
+                    className="px-4 py-2 bg-green-500 text-white  hover:bg-green-600"
                     disabled={loading.submitting}
                   >
                     {loading.submitting ? "Submitting..." : "Submit Review"}

frontend/src/pages/Selling.jsx

@@ -1,264 +1,95 @@
 import { useState, useEffect } from "react";
-import { useLocation, Link } from "react-router-dom";
-import { X, ChevronLeft, Plus, Trash2 } from "lucide-react";
+import ProductForm from "../components/ProductForm";
 
 const Selling = () => {
+  // State to store user's products
   const [products, setProducts] = useState([]);
+  // State to control when editing form is shown
   const [showForm, setShowForm] = useState(false);
-  const storedUser = JSON.parse(sessionStorage.getItem("user"));
-  const [categories, setCategories] = useState([]);
-  const [categoryMapping, setCategoryMapping] = useState({});
-  const [selectedCategory, setSelectedCategory] = useState("");
-  const [originalProduct, setOriginalProduct] = useState(null);
-
+  // State to store the product being edited (or empty for new product)
   const [editingProduct, setEditingProduct] = useState({
     name: "",
     price: "",
     description: "",
     categories: [],
+    status: "Unsold",
     images: [],
   });
 
-  function reloadPage() {
-    var doctTimestamp = new Date(performance.timing.domLoading).getTime();
-    var now = Date.now();
-    if (now > doctTimestamp) {
-      location.reload();
-    }
-  }
-
-  // Fetch categories from API
-  useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const response = await fetch("http://localhost:3030/api/category");
-        if (!response.ok) throw new Error("Failed to fetch categories");
-
-        const responseJson = await response.json();
-        const data = responseJson.data;
-
-        // Create an array of category names for the dropdown
-        const categoryNames = [];
-        const mapping = {};
-
-        // Process the data properly to avoid rendering objects
-        Object.entries(data).forEach(([id, name]) => {
-          // Make sure each category name is a string
-          const categoryName = String(name);
-          categoryNames.push(categoryName);
-          mapping[categoryName] = parseInt(id);
-        });
-
-        setCategories(categoryNames);
-        setCategoryMapping(mapping);
-      } catch (error) {
-        console.error("Error fetching categories:", error);
-      }
-    };
-
-    fetchCategories();
-  }, []);
-
   // Simulate fetching products from API/database on component mount
   useEffect(() => {
+    // This would be replaced with a real API call
     const fetchProducts = async () => {
-      try {
-        // Replace with your actual API endpoint
-        const response = await fetch(
-          "http://localhost:3030/api/product/myProduct",
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              userID: storedUser.ID,
-            }),
-          },
-        );
+      // Mock data
+      const mockProducts = [
+        {
+          id: "1",
+          name: "Vintage Camera",
+          price: "299.99",
+          description: "A beautiful vintage film camera in excellent condition",
+          categories: ["Electronics", "Art & Collectibles"],
+          status: "Unsold",
+          images: ["/public/Pictures/Dell1.jpg"],
+        },
+        {
+          id: "2",
+          name: "Leather Jacket",
+          price: "149.50",
+          description: "Genuine leather jacket, worn only a few times",
+          categories: ["Clothing"],
+          status: "Unsold",
+          images: [],
+        },
+      ];
 
-        if (!response.ok) {
-          throw new Error("Network response was not ok");
-        }
-        const datajson = await response.json();
-        setProducts(datajson.data);
-      } catch (error) {
-        console.error("Error fetching products:", error);
-        // You might want to set an error state here
-      }
+      setProducts(mockProducts);
     };
 
     fetchProducts();
-  }, []); // Add userId to dependency array if it might change
+  }, []);
 
-  // When editing a product, save the original product properly
-  const handleEditProduct = (product) => {
-    // Save the original product completely
-    setOriginalProduct(product);
-
-    // Convert category ID to category name if needed
-    const categoryName = getCategoryNameById(product.CategoryID);
-
-    setEditingProduct({
-      ...product,
-      categories: categoryName ? [categoryName] : [],
-      images: product.images || [], // Ensure images array exists
-    });
-
-    setShowForm(true);
-  };
-
-  // Then update the handleSaveProduct function to properly merge values
-  const handleSaveProduct = async () => {
-    if (!(editingProduct.categories || []).length) {
-      alert("Please select at least one category");
-      return;
-    }
-
-    try {
-      const imagePaths = [];
-
-      // Handle images properly
-      if (editingProduct.images && editingProduct.images.length > 0) {
-        // If there are new images uploaded (File objects)
-        const newImages = editingProduct.images.filter(
-          (img) => img instanceof File,
-        );
-        newImages.forEach((file) => {
-          const simulatedPath = `/public/uploads/${file.name}`;
-          imagePaths.push(simulatedPath);
-        });
-
-        // Also include any existing image URLs that are strings, not File objects
-        const existingImages = editingProduct.images.filter(
-          (img) => typeof img === "string",
-        );
-        if (existingImages.length > 0) {
-          imagePaths.push(...existingImages);
-        }
-      } else if (originalProduct?.image_url) {
-        // If no new images but there was an original image URL
-        imagePaths.push(originalProduct.image_url);
-      }
-
-      const categoryName = (editingProduct.categories || [])[0];
-      const categoryID =
-        categoryMapping[categoryName] || originalProduct?.CategoryID || 1;
-
-      // Create payload with proper fallback to original values
-      const payload = {
-        name:
-          editingProduct.Name ||
-          editingProduct.name ||
-          originalProduct?.Name ||
-          "",
-        price: parseFloat(
-          editingProduct.Price ||
-            editingProduct.price ||
-            originalProduct?.Price ||
-            0,
-        ),
-        qty: 1,
-        userID: storedUser.ID,
-        description:
-          editingProduct.Description ||
-          editingProduct.description ||
-          originalProduct?.Description ||
-          "",
-        category: categoryID,
-        images:
-          imagePaths.length > 0
-            ? imagePaths
-            : originalProduct?.image_url
-              ? [originalProduct.image_url]
-              : [],
+  // Handle creating or updating a product
+  const handleSaveProduct = () => {
+    if (editingProduct.id) {
+      // Update existing product
+      setProducts(
+        products.map((p) => (p.id === editingProduct.id ? editingProduct : p)),
+      );
+    } else {
+      // Create new product
+      const newProduct = {
+        ...editingProduct,
+        id: Date.now().toString(), // Generate a temporary ID
       };
-
-      console.log("Sending payload:", payload);
-
-      const endpoint = editingProduct.ProductID
-        ? `http://localhost:3030/api/product/update/${editingProduct.ProductID}`
-        : "http://localhost:3030/api/product/addProduct";
-
-      const method = editingProduct.ProductID ? "PUT" : "POST";
-
-      const response = await fetch(endpoint, {
-        method,
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(payload),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.text();
-        throw new Error(
-          `${editingProduct.ProductID ? "Failed to update" : "Failed to add"} product: ${errorData}`,
-        );
-      }
-
-      const data = await response.json();
-      console.log("Product saved:", data);
-
-      // Reset form and hide it
-      setShowForm(false);
-      setEditingProduct({
-        name: "",
-        price: "",
-        description: "",
-        categories: [],
-        images: [],
-      });
-
-      setOriginalProduct(null); // reset original as well
-
-      reloadPage();
-    } catch (error) {
-      console.error("Error saving product:", error);
-      alert(`Error saving product: ${error.message}`);
+      setProducts([...products, newProduct]);
     }
+
+    // Reset form and hide it
+    setShowForm(false);
+    setEditingProduct({
+      name: "",
+      price: "",
+      description: "",
+      categories: [],
+      status: "Unsold",
+      images: [],
+    });
   };
 
   // Handle product deletion
-  const handleDeleteProduct = async (productId) => {
-    try {
-      // Replace with your actual API endpoint
-      const response = await fetch(
-        "http://localhost:3030/api/product/delProduct",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            userID: storedUser.ID,
-            productID: productId,
-          }),
-        },
-      );
-      reloadPage();
-      console.log("deleteproodidt");
-
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-    } catch (error) {
-      console.error("Error fetching products:", error);
-      // You might want to set an error state here
+  const handleDeleteProduct = (productId) => {
+    if (window.confirm("Are you sure you want to delete this product?")) {
+      setProducts(products.filter((p) => p.id !== productId));
     }
   };
 
-  // Helper function to get category name from ID
-  const getCategoryNameById = (categoryId) => {
-    if (!categoryId || !categoryMapping) return null;
-
-    // Find the category name by ID
-    for (const [name, id] of Object.entries(categoryMapping)) {
-      if (id === categoryId) {
-        return name;
-      }
-    }
-    return null;
+  // Handle editing a product
+  const handleEditProduct = (product) => {
+    setEditingProduct({
+      ...product,
+      images: product.images || [], // Ensure images array exists
+    });
+    setShowForm(true);
   };
 
   // Handle adding a new product
@@ -268,54 +99,12 @@ const Selling = () => {
       price: "",
       description: "",
       categories: [],
+      status: "Unsold",
       images: [],
     });
     setShowForm(true);
   };
 
-  const addCategory = () => {
-    if (
-      selectedCategory &&
-      !(editingProduct.categories || []).includes(selectedCategory)
-    ) {
-      setEditingProduct((prev) => ({
-        ...prev,
-        categories: [...(prev.categories || []), selectedCategory],
-      }));
-      setSelectedCategory("");
-    }
-  };
-
-  const removeCategory = (categoryToRemove) => {
-    setEditingProduct((prev) => ({
-      ...prev,
-      categories: (prev.categories || []).filter(
-        (cat) => cat !== categoryToRemove,
-      ),
-    }));
-  };
-
-  const markAsSold = async () => {
-    // This would call an API to move the product to the transaction table
-    try {
-      // API call would go here
-      console.log(
-        "Moving product to transaction table:",
-        editingProduct.ProductID,
-      );
-
-      // Toggle the sold status in the UI
-      setEditingProduct((prev) => ({
-        ...prev,
-        isSold: !prev.isSold,
-      }));
-
-      // You would add your API call here to update the backend
-    } catch (error) {
-      console.error("Error marking product as sold:", error);
-    }
-  };
-
   return (
     <div className="container mx-auto p-4 max-w-6xl">
       <div className="flex justify-between items-center mb-6">
@@ -331,279 +120,12 @@ const Selling = () => {
       </div>
 
       {showForm ? (
-        <div className="bg-white border border-gray-200 shadow-md p-6">
-          {/* Back Button */}
-          <button
-            onClick={() => setShowForm(false)}
-            className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1"
-          >
-            <ChevronLeft size={16} />
-            <span>Back to Listings</span>
-          </button>
-
-          <h3 className="text-xl font-bold text-gray-800 mb-6 border-b border-gray-200 pb-3">
-            {editingProduct?.ProductID
-              ? "Edit Your Product"
-              : "List a New Product"}
-          </h3>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {/* Product Name */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Product Name
-              </label>
-              <input
-                type="text"
-                value={editingProduct.Name || editingProduct.name || ""}
-                onChange={(e) =>
-                  setEditingProduct({
-                    ...editingProduct,
-                    Name: e.target.value,
-                    name: e.target.value,
-                  })
-                }
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
-              />
-            </div>
-
-            {/* Price */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Price ($)
-              </label>
-              <input
-                type="number"
-                value={editingProduct.Price || editingProduct.price || ""}
-                onChange={(e) =>
-                  setEditingProduct({
-                    ...editingProduct,
-                    Price: e.target.value,
-                    price: e.target.value,
-                  })
-                }
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
-              />
-            </div>
-
-            {/* Sold Status */}
-            <div className="md:col-span-2">
-              <div className="flex items-center mt-2">
-                {editingProduct.isSold && (
-                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
-                    Sold
-                  </span>
-                )}
-              </div>
-            </div>
-
-            {/* Categories */}
-            <div className="md:col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Categories
-              </label>
-              <div className="flex gap-2">
-                <select
-                  value={selectedCategory}
-                  onChange={(e) => setSelectedCategory(e.target.value)}
-                  className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
-                >
-                  <option value="" disabled>
-                    Select a category
-                  </option>
-                  {categories
-                    .filter(
-                      (cat) => !(editingProduct.categories || []).includes(cat),
-                    )
-                    .map((category, index) => (
-                      <option key={index} value={category}>
-                        {category}
-                      </option>
-                    ))}
-                </select>
-                <button
-                  type="button"
-                  onClick={addCategory}
-                  disabled={!selectedCategory}
-                  className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
-                >
-                  <Plus size={16} />
-                  <span>Add</span>
-                </button>
-              </div>
-
-              {/* Selected Categories */}
-              {(editingProduct.categories || []).length > 0 ? (
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {(editingProduct.categories || []).map((category, index) => (
-                    <span
-                      key={index}
-                      className="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-800"
-                    >
-                      {category}
-                      <button
-                        type="button"
-                        onClick={() => removeCategory(category)}
-                        className="ml-1 text-emerald-600 hover:text-emerald-800"
-                      >
-                        <X size={14} />
-                      </button>
-                    </span>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-xs text-gray-500 mt-1">
-                  Please select at least one category
-                </p>
-              )}
-            </div>
-
-            {/* Description */}
-            <div className="md:col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Description
-              </label>
-              <textarea
-                value={
-                  editingProduct.Description || editingProduct.description || ""
-                }
-                onChange={(e) =>
-                  setEditingProduct({
-                    ...editingProduct,
-                    Description: e.target.value,
-                    description: e.target.value,
-                  })
-                }
-                rows="4"
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
-                placeholder="Describe your product in detail..."
-              ></textarea>
-            </div>
-
-            {/* Image Upload */}
-            <div className="md:col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Product Images <span className="text-gray-500">(Max 5)</span>
-              </label>
-
-              <input
-                type="file"
-                accept="image/*"
-                multiple
-                onChange={(e) => {
-                  const files = Array.from(e.target.files).slice(0, 5);
-                  setEditingProduct((prev) => ({
-                    ...prev,
-                    images: [...(prev.images || []), ...files].slice(0, 5),
-                  }));
-                }}
-                className="hidden"
-                id="image-upload"
-              />
-              <label
-                htmlFor="image-upload"
-                className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
-              >
-                <span className="text-emerald-600 font-medium">
-                  Click to upload images
-                </span>
-              </label>
-
-              {/* Image previews */}
-              {(editingProduct.images || []).length > 0 && (
-                <div className="mt-3">
-                  <div className="flex justify-between items-center mb-2">
-                    <p className="text-sm text-gray-600">
-                      {editingProduct.images.length}{" "}
-                      {editingProduct.images.length === 1 ? "image" : "images"}{" "}
-                      selected
-                    </p>
-                    <button
-                      onClick={() =>
-                        setEditingProduct((prev) => ({ ...prev, images: [] }))
-                      }
-                      className="text-sm text-red-600 hover:text-red-800 flex items-center gap-1"
-                    >
-                      <Trash2 size={14} />
-                      <span>Clear all</span>
-                    </button>
-                  </div>
-                  <div className="flex flex-wrap gap-2">
-                    {editingProduct.images.map((img, idx) => (
-                      <div
-                        key={idx}
-                        className="relative w-20 h-20 border border-gray-200 overflow-hidden"
-                      >
-                        <img
-                          src={URL.createObjectURL(img)}
-                          alt={`Product ${idx + 1}`}
-                          className="w-full h-full object-cover"
-                        />
-                        <button
-                          onClick={() => {
-                            const updated = [...editingProduct.images];
-                            updated.splice(idx, 1);
-                            setEditingProduct((prev) => ({
-                              ...prev,
-                              images: updated,
-                            }));
-                          }}
-                          className="absolute top-0 right-0 bg-white bg-opacity-80 w-6 h-6 flex items-center justify-center text-gray-700 hover:text-red-600"
-                        >
-                          <X size={14} />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Show current image if editing */}
-              {editingProduct.image_url && (
-                <div className="mt-3">
-                  <p className="text-sm text-gray-600 mb-2">Current image:</p>
-                  <div className="relative w-20 h-20 border border-gray-200 overflow-hidden">
-                    <img
-                      src={editingProduct.image_url}
-                      alt="Current product"
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Actions */}
-          <div className="mt-6 flex justify-end gap-3 border-t border-gray-200 pt-4">
-            <button
-              onClick={() => setShowForm(false)}
-              className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200 rounded-md"
-            >
-              Cancel
-            </button>
-
-            {editingProduct.ProductID && (
-              <button
-                onClick={markAsSold}
-                className={`px-4 py-2 rounded-md transition-colors ${
-                  editingProduct.isSold
-                    ? "bg-green-600 text-white hover:bg-green-700"
-                    : "bg-red-600 text-white hover:bg-red-700"
-                }`}
-              >
-                Mark as {editingProduct.isSold ? "Available" : "Sold"}
-              </button>
-            )}
-
-            <button
-              onClick={handleSaveProduct}
-              className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
-            >
-              {editingProduct.ProductID ? "Update Product" : "Add Product"}
-            </button>
-          </div>
-        </div>
+        <ProductForm
+          editingProduct={editingProduct}
+          setEditingProduct={setEditingProduct}
+          onSave={handleSaveProduct}
+          onCancel={() => setShowForm(false)}
+        />
       ) : (
         <>
           {products.length === 0 ? (
@@ -621,72 +143,75 @@ const Selling = () => {
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {products.map((product) => (
-                <Link
-                  key={product.ProductID}
-                  to={`/product/${product.ProductID}`}
+                <div
+                  key={product.id}
+                  className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
                 >
-                  <div className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
-                    <div className="h-48 bg-gray-200 flex items-center justify-center">
-                      {product.image_url && product.image_url.length > 0 ? (
-                        <img
-                          src={product.image_url || ""}
-                          alt={product.Name}
-                          className="w-full h-full object-cover"
-                        />
-                      ) : (
-                        <div className="text-gray-400">No image</div>
-                      )}
+                  <div className="h-48 bg-gray-200 flex items-center justify-center">
+                    {product.images && product.images.length > 0 ? (
+                      <img
+                        src={product.images[0] || ""}
+                        alt={product.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="text-gray-400">No image</div>
+                    )}
+                  </div>
+
+                  <div className="p-4">
+                    <div className="flex justify-between items-start">
+                      <h3 className="text-lg font-semibold text-gray-800">
+                        {product.name}
+                      </h3>
+                      <span
+                        className={`px-2 py-1 text-xs ${
+                          product.status === "Sold"
+                            ? "bg-gray-200 text-gray-700"
+                            : "bg-emerald-100 text-emerald-800"
+                        }`}
+                      >
+                        {product.status}
+                      </span>
                     </div>
 
-                    <div className="p-4">
-                      <div className="flex justify-between items-start">
-                        <h3 className="text-lg font-semibold text-gray-800">
-                          {product.Name}
-                        </h3>
-                      </div>
+                    <p className="text-emerald-600 font-bold mt-1">
+                      ${product.price}
+                    </p>
 
-                      <p className="text-emerald-600 font-bold mt-1">
-                        ${product.Price}
-                      </p>
-
-                      {product.CategoryID && (
-                        <div className="mt-2 flex flex-wrap gap-1">
-                          <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1">
-                            {getCategoryNameById(product.CategoryID) ||
-                              product.CategoryID}
+                    {product.categories && product.categories.length > 0 && (
+                      <div className="mt-2 flex flex-wrap gap-1">
+                        {product.categories.map((category) => (
+                          <span
+                            key={category}
+                            className="text-xs bg-gray-100 text-gray-600 px-2 py-1 "
+                          >
+                            {category}
                           </span>
-                        </div>
-                      )}
-
-                      <p className="text-gray-500 text-sm mt-2 line-clamp-2">
-                        {product.Description}
-                      </p>
-
-                      <div className="mt-4 flex justify-end gap-2">
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            handleDeleteProduct(product.ProductID);
-                          }}
-                          className="text-red-600 hover:text-red-800"
-                        >
-                          Delete
-                        </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            handleEditProduct(product);
-                          }}
-                          className="text-emerald-600 hover:text-emerald-800 font-medium"
-                        >
-                          Edit
-                        </button>
+                        ))}
                       </div>
+                    )}
+
+                    <p className="text-gray-500 text-sm mt-2 line-clamp-2">
+                      {product.description}
+                    </p>
+
+                    <div className="mt-4 flex justify-end gap-2">
+                      <button
+                        onClick={() => handleDeleteProduct(product.id)}
+                        className="text-red-600 hover:text-red-800"
+                      >
+                        Delete
+                      </button>
+                      <button
+                        onClick={() => handleEditProduct(product)}
+                        className="text-emerald-600 hover:text-emerald-800 font-medium"
+                      >
+                        Edit
+                      </button>
                     </div>
                   </div>
-                </Link>
+                </div>
               ))}
             </div>
           )}

frontend/src/pages/TransactionDashboard.jsx

@@ -1,91 +0,0 @@
-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>
-  );
-}

frontend/src/pages/UserDashboard.jsx

@@ -1,91 +0,0 @@
-import { useEffect, useState } from "react";
-import { getUsers, removeUser } from "../api/admin";
-import { MdDelete } from "react-icons/md";
-import Pagination from "../components/Pagination";
-
-export default function UserDashboard() {
-  const [users, setUsers] = useState([]);
-  const [total, setTotal] = useState(0);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  let pageLimit = 10;
-
-  const onChangePage = (page, limit = 10) => {
-    setCurrentPage(page);
-    fetchUsers(page, limit);
-  };
-
-  const fetchUsers = (page = 1, limit = 10) => {
-    getUsers(page, limit).then(({ users, total }) => {
-      setUsers(users);
-      setTotal(total);
-    });
-  };
-
-  const handleRemoveUser = (id) => {
-    removeUser(id)
-      .then((res) => {
-        fetchUsers(currentPage);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  //Get user when initialize the component
-  useEffect(fetchUsers, []);
-
-  return (
-    <div className="pt-10 p-20">
-      <h1 className="text-4xl pb-3 font-bold text-green-800 underline">
-        USERS
-      </h1>
-      {users.length > 0 ? (
-        <>
-          {" "}
-          <table className="table-fixed w-full text-center border border-green-600">
-            <thead className="bg-green-600 h-10">
-              <tr>
-                <th>UserID</th>
-                <th>UCID</th>
-                <th>Name</th>
-                <th>Email</th>
-                <th>Phone</th>
-                <th>Address</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {users.map((user) => (
-                <tr key={user.UserID} className="border border-green-600 h-10">
-                  <td>{user.UserID}</td>
-                  <td>{user.UCID}</td>
-                  <td>{user.Name}</td>
-                  <td>{user.Email}</td>
-                  <td>{user.Phone}</td>
-                  <td>{user.Address}</td>
-                  <td className="flex justify-center pt-2">
-                    <MdDelete
-                      onClick={() => {
-                        handleRemoveUser(user.UserID);
-                      }}
-                      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">
-          No user exists!
-        </p>
-      )}
-    </div>
-  );
-}

mysql-code/Init-Data.sql

@@ -67,41 +67,40 @@ VALUES
     (1, TRUE, TRUE),
     (2, TRUE, FALSE);
 
--- Insert Categories
 -- Insert Categories
 INSERT INTO
-    Category (Name)
+    Category (CategoryID, Name)
 VALUES
-    ('Textbooks'),
-    ('Electronics'),
-    ('Furniture'),
-    ('Clothing'),
-    ('Sports Equipment'),
-    ('Musical Instruments'),
-    ('Art Supplies'),
-    ('Kitchen Appliances'),
-    ('Gaming'),
-    ('Bicycles'),
-    ('Computer Accessories'),
-    ('Stationery'),
-    ('Fitness Equipment'),
-    ('Winter Sports'),
-    ('Lab Equipment'),
-    ('Camping Gear'),
-    ('School Supplies'),
-    ('Office Furniture'),
-    ('Books (-textbook)'),
-    ('Math & Science Resources'),
-    ('Engineering Tools'),
-    ('Backpacks & Bags'),
-    ('Audio Equipment'),
-    ('Dorm Essentials'),
-    ('Smartphones & Tablets'),
-    ('Winter Clothing'),
-    ('Photography Equipment'),
-    ('Event Tickets'),
-    ('Software Licenses'),
-    ('Transportation (Car Pool)');
+    (1, 'Textbooks'),
+    (2, 'Electronics'),
+    (3, 'Furniture'),
+    (4, 'Clothing'),
+    (5, 'Sports Equipment'),
+    (6, 'Musical Instruments'),
+    (7, 'Art Supplies'),
+    (8, 'Kitchen Appliances'),
+    (9, 'Gaming'),
+    (10, 'Bicycles'),
+    (11, 'Computer Accessories'),
+    (12, 'Stationery'),
+    (13, 'Fitness Equipment'),
+    (14, 'Winter Sports'),
+    (15, 'Lab Equipment'),
+    (16, 'Camping Gear'),
+    (17, 'School Supplies'),
+    (18, 'Office Furniture'),
+    (19, 'Books (Non-textbook)'),
+    (20, 'Math & Science Resources'),
+    (21, 'Engineering Tools'),
+    (22, 'Backpacks & Bags'),
+    (23, 'Audio Equipment'),
+    (24, 'Dorm Essentials'),
+    (25, 'Smartphones & Tablets'),
+    (26, 'Winter Clothing'),
+    (27, 'Photography Equipment'),
+    (28, 'Event Tickets'),
+    (29, 'Software Licenses'),
+    (30, 'Transportation (Car Pool)');
 
 -- Insert Products
 INSERT INTO
@@ -320,29 +319,29 @@ VALUES
 INSERT INTO
     Image_URL (URL, ProductID)
 VALUES
-    ('/Uploads/Dell1.jpg', 1),
-    ('/Uploads/Dell2.jpg', 1),
-    ('/Uploads/Dell3.jpg', 1),
-    ('/Uploads/HP-Laptop1.jpg', 2),
-    ('/Uploads/HP-Laptop1.jpg', 2),
-    ('/Uploads/Dorm-Desk.jpg', 3),
-    ('/Uploads/University-Hoodie.jpg', 4),
-    ('/Uploads/Basketball.jpg', 5),
-    ('/Uploads/Acoustic-Guitar.jpg', 6),
-    ('/Uploads/Physics-Textbook.jpg', 7),
-    ('/Uploads/Mini-Fridge.jpg', 8),
-    ('/Uploads/Controller.jpg', 9),
-    ('/Uploads/Mountain-Bike.jpg', 10),
-    ('/Uploads/Wireless-Mouse.jpg', 11),
-    ('/Uploads/Lab-Coat.jpg', 12),
-    ('/Uploads/Calculator.jpg', 13),
-    ('/Uploads/Yoga-Mat.jpg', 14),
-    ('/Uploads/Winter-Jacket.jpg', 15),
-    ('/Uploads/CS-Textbook.jpg', 16),
-    ('/Uploads/Desk-Lamp.jpg', 17),
-    ('/Uploads/HP-Calculator.jpg', 18),
-    ('/Uploads/Bluetooth-Speaker.jpg', 19),
-    ('/Uploads/Backpack.jpg', 20);
+    ('/Pictures/Dell1.jpg', 1),
+    ('/Pictures/Dell2.jpg', 1),
+    ('/Pictures/Dell3.jpg', 1),
+    ('/Pictures/HP-Laptop1.jpg', 2),
+    ('/Pictures/HP-Laptop1.jpg', 2),
+    ('/Pictures/Dorm-Desk.jpg', 3),
+    ('/Pictures/University-Hoodie.jpg', 4),
+    ('/Pictures/Basketball.jpg', 5),
+    ('/Pictures/Acoustic-Guitar.jpg', 6),
+    ('/Pictures/Physics-Textbook.jpg', 7),
+    ('/Pictures/Mini-Fridge.jpg', 8),
+    ('/Pictures/Controller.jpg', 9),
+    ('/Pictures/Mountain-Bike.jpg', 10),
+    ('/Pictures/Wireless-Mouse.jpg', 11),
+    ('/Pictures/Lab-Coat.jpg', 12),
+    ('/Pictures/Calculator.jpg', 13),
+    ('/Pictures/Yoga-Mat.jpg', 14),
+    ('/Pictures/Winter-Jacket.jpg', 15),
+    ('/Pictures/CS-Textbook.jpg', 16),
+    ('/Pictures/Desk-Lamp.jpg', 17),
+    ('/Pictures/HP-Calculator.jpg', 18),
+    ('/Pictures/Bluetooth-Speaker.jpg', 19),
+    ('/Pictures/Backpack.jpg', 20);
 
 -- Insert Product-Category relationships (products with multiple categories)
 INSERT INTO

mysql-code/Schema.sql

@@ -24,7 +24,7 @@ CREATE TABLE UserRole (
 
 -- Category Entity (must be created before Product or else error)
 CREATE TABLE Category (
-    CategoryID INT AUTO_INCREMENT PRIMARY KEY,
+    CategoryID INT PRIMARY KEY,
     Name VARCHAR(255) NOT NULL
 );
 
@@ -38,15 +38,15 @@ CREATE TABLE Product (
     Description TEXT,
     CategoryID INT NOT NULL,
     Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE SET NULL,
-    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID) ON DELETE SET NULL
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
+    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID)
 );
 
 -- Fixed Image_URL table
 CREATE TABLE Image_URL (
     URL VARCHAR(255),
     ProductID INT,
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID)
 );
 
 -- Fixed Review Entity (Many-to-One with User, Many-to-One with Product)
@@ -60,8 +60,8 @@ CREATE TABLE Review (
         AND Rating <= 5
     ),
     Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE SET NULL,
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID)
 );
 
 -- Transaction Entity (Many-to-One with User, Many-to-One with Product)
@@ -71,8 +71,8 @@ CREATE TABLE Transaction (
     ProductID INT,
     Date DATETIME DEFAULT CURRENT_TIMESTAMP,
     PaymentStatus VARCHAR(50),
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE SET NULL 
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID)
 );
 
 -- Recommendation Entity (Many-to-One with User, Many-to-One with Product)
@@ -81,8 +81,8 @@ CREATE TABLE Recommendation (
     UserID INT,
     RecommendedProductID INT,
     Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
-    FOREIGN KEY (RecommendedProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
+    FOREIGN KEY (RecommendedProductID) REFERENCES Product (ProductID)
 );
 
 -- History Entity (Many-to-One with User, Many-to-One with Product)
@@ -91,8 +91,8 @@ CREATE TABLE History (
     UserID INT,
     ProductID INT,
     Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID)
 );
 
 -- Favorites Entity (Many-to-One with User, Many-to-One with Product)
@@ -100,8 +100,8 @@ CREATE TABLE Favorites (
     FavoriteID INT AUTO_INCREMENT PRIMARY KEY,
     UserID INT,
     ProductID INT,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE,
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID),
     UNIQUE (UserID, ProductID)
 );
 
@@ -110,8 +110,8 @@ CREATE TABLE Product_Category (
     ProductID INT,
     CategoryID INT,
     PRIMARY KEY (ProductID, CategoryID),
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE,
-    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID) ON DELETE CASCADE
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID),
+    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID)
 );
 
 -- Login Authentication table

recommondation-engine/app.py

@@ -3,7 +3,7 @@ import mysql.connector
 from sklearn.metrics.pairwise import cosine_similarity
 import numpy as np
 import logging
-import random
+from unittest import result
 
 def database():
     db_connection = mysql.connector.connect(
@@ -14,257 +14,145 @@ def database():
     )
     return db_connection
 
-def delete_user_recommendations(user_id):
+def get_popular_products():
+    pass
+
+
+def delete_user_recommendation(userID, Array):
     db_con = database()
     cursor = db_con.cursor()
 
     try:
-        cursor.execute("DELETE FROM Recommendation WHERE UserID = %s", (user_id,))
+        for item in Array:
+            #Product ID starts form index 1
+            item_value = item + 1
+            print(item_value)
+            # Use parameterized queries to prevent SQL injection
+            cursor.execute(f"INTO Recommendation (UserID, RecommendedProductID) VALUES ({userID}, {item_value});")
+
         db_con.commit()
-        print(f"Deleted existing recommendations for user {user_id}")
-        logging.info(f"Deleted existing recommendations for user {user_id}")
-        return True
-    except Exception as e:
-        logging.error(f"Error deleting recommendations for user {user_id}: {str(e)}")
-        db_con.rollback()
-        return False
-    finally:
-        cursor.close()
-        db_con.close()
 
-def get_random_products(count=10, exclude_list=None):
-    """Get random products from the database, excluding any in the exclude_list"""
-    db_con = database()
-    cursor = db_con.cursor()
-
-    try:
-        if exclude_list and len(exclude_list) > 0:
-            # Convert exclude_list to string for SQL IN clause
-            exclude_str = ', '.join(map(str, exclude_list))
-            cursor.execute(f"SELECT ProductID FROM Product WHERE ProductID NOT IN ({exclude_str}) ORDER BY RAND() LIMIT {count}")
-        else:
-            cursor.execute(f"SELECT ProductID FROM Product ORDER BY RAND() LIMIT {count}")
-
-        random_products = [row[0] for row in cursor.fetchall()]
-        return random_products
-
-    except Exception as e:
-        logging.error(f"Error getting random products: {str(e)}")
-        return []
-    finally:
-        cursor.close()
-        db_con.close()
-
-def get_popular_products(count=10):
-    """Get popular products based on history table frequency"""
-    db_con = database()
-    cursor = db_con.cursor()
-
-    try:
-        # Get products that appear most frequently in history
-        cursor.execute("""
-            SELECT ProductID, COUNT(*) as count
-            FROM History
-            GROUP BY ProductID
-            ORDER BY count DESC
-            LIMIT %s
-        """, (count,))
-
-        popular_products = [row[0] for row in cursor.fetchall()]
-
-        # If not enough popular products, supplement with random ones
-        if len(popular_products) < count:
-            random_products = get_random_products(count - len(popular_products), popular_products)
-            popular_products.extend(random_products)
-
-        return popular_products
-
-    except Exception as e:
-        logging.error(f"Error getting popular products: {str(e)}")
-        return get_random_products(count)  # Fallback to random products
-    finally:
-        cursor.close()
-        db_con.close()
-
-def has_user_history_or_recommendations(user_id):
-    """Check if user exists in History or Recommendation table"""
-    db_con = database()
-    cursor = db_con.cursor()
-
-    try:
-        # Check if user has history
-        cursor.execute("SELECT COUNT(*) FROM History WHERE UserID = %s", (user_id,))
-        history_count = cursor.fetchone()[0]
-
-        # Check if user has recommendations
-        cursor.execute("SELECT COUNT(*) FROM Recommendation WHERE UserID = %s", (user_id,))
-        recommendation_count = cursor.fetchone()[0]
-
-        return history_count > 0 or recommendation_count > 0
-
-    except Exception as e:
-        logging.error(f"Error checking user history/recommendations: {str(e)}")
-        return False
-    finally:
-        cursor.close()
-        db_con.close()
+        #results = cursor.fetchall()
+        #print(results)
+    except:
+        pass
 
 def get_all_products():
+
     db_con = database()
     cursor = db_con.cursor()
 
-    try:
-        cursor.execute("SELECT CategoryID FROM Category")
-        categories = cursor.fetchall()
+    cursor.execute("SELECT CategoryID FROM Category")
+    categories = cursor.fetchall()
 
-        select_clause = "SELECT p.ProductID"
-        for category in categories:
-            category_id = category[0]
-            select_clause += f", MAX(CASE WHEN pc.CategoryID = {category_id} THEN 1 ELSE 0 END) AS `Cat_{category_id}`"
+    select_clause = "SELECT p.ProductID"
+    for category in categories:
+        category_id = category[0]
+        select_clause += f", MAX(CASE WHEN pc.CategoryID = {category_id} THEN 1 ELSE 0 END) AS `Cat_{category_id}`"
 
-        final_query = f"""
-            {select_clause}
-            FROM Product p
-            LEFT JOIN Product_Category pc ON p.ProductID = pc.ProductID
-            LEFT JOIN Category c ON pc.CategoryID = c.CategoryID
-            GROUP BY p.ProductID;
-            """
+    final_query = f"""
+        {select_clause}
+        FROM Product p
+        LEFT JOIN Product_Category pc ON p.ProductID = pc.ProductID
+        LEFT JOIN Category c ON pc.CategoryID = c.CategoryID
+        GROUP BY p.ProductID;
+        """
 
-        cursor.execute(final_query)
-        results = cursor.fetchall()
+    cursor.execute(final_query)
+    results = cursor.fetchall()
 
-        final = []
-        product_ids = []
-        for row in results:
-            text_list = list(row)
-            product_id = text_list.pop(0)  # Save the product ID before removing it
-            final.append(text_list)
-            product_ids.append(product_id)
+    final = []
+    for row in results:
+        text_list = list(row)
+        text_list.pop(0)
+        final.append(text_list)
 
-        cursor.close()
-        db_con.close()
-        return final, product_ids  # Return both feature vectors and product IDs
-    except Exception as e:
-        logging.error(f"Error getting all products: {str(e)}")
-        cursor.close()
-        db_con.close()
-        return [], []
+    cursor.close()
+    db_con.close()
+    return final
 
 def get_user_history(user_id):
     db_con = database()
     cursor = db_con.cursor()
 
+    cursor.execute("SELECT CategoryID FROM Category")
+    categories = cursor.fetchall()
+
+    select_clause = "SELECT p.ProductID"
+    for category in categories:
+        category_id = category[0] # get the uid of the catefory and then append that to the new column
+        select_clause += f", MAX(CASE WHEN pc.CategoryID = {category_id} THEN 1 ELSE 0 END) AS `Cat_{category_id}`"
+
+    final_query = f"""
+        {select_clause}
+        FROM Product p
+        LEFT JOIN Product_Category pc ON p.ProductID = pc.ProductID
+        LEFT JOIN Category c ON pc.CategoryID = c.CategoryID
+        where p.ProductID in (select ProductID from History where UserID = {user_id})
+        GROUP BY p.ProductID;
+        """
+
+    cursor.execute(final_query)
+    results = cursor.fetchall()
+    final = []
+    for row in results:
+        text_list = list(row)
+        text_list.pop(0)
+        final.append(text_list)
+
+    cursor.close()
+    db_con.close()
+    return final
+
+def get_recommendations(user_id, top_n=10):
     try:
-        cursor.execute("SELECT CategoryID FROM Category")
-        categories = cursor.fetchall()
-
-        select_clause = "SELECT p.ProductID"
-        for category in categories:
-            category_id = category[0] # get the uid of the category and then append that to the new column
-            select_clause += f", MAX(CASE WHEN pc.CategoryID = {category_id} THEN 1 ELSE 0 END) AS `Cat_{category_id}`"
-
-        final_query = f"""
-            {select_clause}
-            FROM Product p
-            LEFT JOIN Product_Category pc ON p.ProductID = pc.ProductID
-            LEFT JOIN Category c ON pc.CategoryID = c.CategoryID
-            where p.ProductID in (select ProductID from History where UserID = {user_id})
-            GROUP BY p.ProductID;
-            """
-
-        cursor.execute(final_query)
-        results = cursor.fetchall()
-        final = []
-        for row in results:
-            text_list = list(row)
-            text_list.pop(0)
-            final.append(text_list)
-
-        cursor.close()
-        db_con.close()
-        return final
-    except Exception as e:
-        logging.error(f"Error getting user history: {str(e)}")
-        cursor.close()
-        db_con.close()
-        return []
-
-def get_recommendations(user_id, top_n=5):
-    try:
-        # Always delete existing recommendations first
-        delete_user_recommendations(user_id)
-
-        # Check if user has history or recommendations
-        if not has_user_history_or_recommendations(user_id):
-            # Cold start: return random products
-            random_recs = get_random_products(top_n)
-            # Store these random recommendations
-            history_upload(user_id, random_recs)
-
-            # Add 5 more unique random products
-            additional_random = get_random_products(5, random_recs)
-            history_upload(user_id, additional_random)
-
-            return random_recs + additional_random
-
         # Get all products and user history with their category vectors
-        all_product_features, all_product_ids = get_all_products()
+        all_products = get_all_products()
         user_history = get_user_history(user_id)
-
-        if not user_history:
-            # User exists but has no history yet
-            popular_recs = get_popular_products(top_n)
-            history_upload(user_id, popular_recs)
-
-            # Add 5 more unique random products
-            additional_random = get_random_products(5, popular_recs)
-            history_upload(user_id, additional_random)
-
-            return popular_recs + additional_random
-
+        # if not user_history:
+        #     #Cold start: return popular products
+        #     return get_popular_products(top_n)
         # Calculate similarity between all products and user history
         user_profile = np.mean(user_history, axis=0)  # Average user preferences
-        similarities = cosine_similarity([user_profile], all_product_features)
-        print(similarities)
-
-        # Get indices of the top N products sorted by similarity
+        similarities = cosine_similarity([user_profile], all_products)
+        # finds the indices of the top N products that have the highest
+        # cosine similarity with the user's profile and sorted from most similar to least similar.
         product_indices = similarities[0].argsort()[-top_n:][::-1]
+        print("product", product_indices)
 
-        # Get the actual product IDs using the indices
-        recommended_product_ids = [all_product_ids[i] for i in product_indices]
+        # Get the recommended product IDs
+        recommended_products = [all_products[i][0] for i in product_indices]  # Product IDs
 
-        # Upload the core recommendations to the database
-        history_upload(user_id, recommended_product_ids)
-
-        # Add 5 more unique random products that aren't in the recommendations
-        additional_random = get_random_products(5, recommended_product_ids)
-        history_upload(user_id, additional_random)
-
-        # Return both the similarity-based recommendations and the random ones
-        return recommended_product_ids + additional_random
+        # Upload the recommendations to the database
+        history_upload(user_id, product_indices)  # Pass the indices directly to history_upload
 
+        # Return recommended product IDs
+        return recommended_products
     except Exception as e:
         logging.error(f"Recommendation error for user {user_id}: {str(e)}")
-        # Fallback to random products
-        random_products = get_random_products(top_n + 5)
-        return random_products
+        # return get_popular_products(top_n)  # Fallback to popular products
 
-def history_upload(userID, products):
-    """Upload product recommendations to the database"""
+def history_upload(userID, anrr):
     db_con = database()
     cursor = db_con.cursor()
 
     try:
-        for product_id in products:
+        for item in anrr:
+            #Product ID starts form index 1
+            item_value = item + 1
+            print(item_value)
             # Use parameterized queries to prevent SQL injection
-            cursor.execute("INSERT INTO Recommendation (UserID, RecommendedProductID) VALUES (%s, %s)",
-                          (userID, product_id))
+            cursor.execute(f"INSERT INTO Recommendation (UserID, RecommendedProductID) VALUES ({userID}, {item_value});")
 
         # Commit the changes
         db_con.commit()
 
+        # If you need results, you'd typically fetch them after a SELECT query
+        #results = cursor.fetchall()
+        #print(results)
+
     except Exception as e:
-        logging.error(f"Error uploading recommendations: {str(e)}")
+        print(f"Error: {e}")
         db_con.rollback()
     finally:
         # Close the cursor and connection