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

2025-04-20 19:58:51 -06:00
68 changed files with 1542 additions and 3013 deletions
--- a/README.md
+++ b/README.md
@@ -1,9 +1,6 @@
-### Ground rules
+### Some ground rules
-
+1. Add both node_modules from Slient and Server to your ```gitignore``` file
-<img class='fullimage' alt='Fin-Track Application Screenshot' src='./assets/CampusPlug.png'/>
+2. Make a brach with the following naming conventionp, prefix it with your name ```Your-Name Branch-Name```.
 1. Add both node_modules from Client and Server to your ```gitignore``` file
 2. Make a brach with the following naming convention, prefix it with your name ```Your-Name Branch-Name```.
 ---
 ### Frontend
@@ -22,19 +19,24 @@
 ```
 ---
-### Recommendation system
+### Recommendation
-1. Install the dependencies `pip install scikit-learn numpy mysql.connector flask flask-cors`
+1. `cd recommendation-engine` into the dir and then type command
 2. `cd recommendation-engine` into the dir and then type command
 ```Bash
    1. python3 server.py    #Start The Server
 ```
 ---
 ### Recommendation system
 1. Install the dependencies
 ```Bash
  pip install mysql.connector
 ```
 ### Database
 1. MySql Version 9.2.0
 2. To Create the DataBase use the command bellow:
 ```Bash
    1. mysql -u root
-    2. \. PathTo/Schema.sql
+    2. \. PathToYour/Schema.sql
-    3. \. PathTo/Init-Data.sql
+    3. \. PathToYour/Init-Data.sql
 ```
--- a/assets/CampusPlug.png
+++ b/assets/CampusPlug.png
--- a/backend/controllers/category.js
+++ b/backend/controllers/category.js
@@ -1,78 +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 {
    if (id == "1") throw Error("You're not allowed to delete this category!");
    const [updateResult] = await db.execute(
      "UPDATE Product SET CategoryID = 1 WHERE CategoryID = ?",
      [id]
    );
    const [result] = await db.execute(
      `DELETE FROM Category WHERE CategoryID = ?`,
      [id]
    );
    res.json({ message: "Delete category successfully!" });
  } catch (error) {
    res.json({
      error: error.message || "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",
    });
  }
 };
--- a/backend/controllers/product.js
+++ b/backend/controllers/product.js
@@ -32,44 +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 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],
@@ -105,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;
@@ -341,61 +211,32 @@ exports.getProductById = async (req, res) => {
  }
 };
-exports.getProductWithPagination = async (req, res) => {
+// db_con.query(
-  const limit = +req.query.limit;
+//   "SELECT ProductID FROM product WHERE ProductID = ?",
-  const page = +req.query.page;
+//   [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 {
+// db_con.query(
-    const [data, fields] = await db.execute(
+//   "INSERT INTO Favorites (UserID, ProductID) VALUES (?, ?)",
-      `
+//   [userID, productID],
-          SELECT
+//   (err, result) => {
-        P.ProductID,
+//     if (err) {
-        P.Name AS ProductName,
+//       console.error("Error adding favorite product:", err);
-        P.Price,
+//       return res.json({ error: "Could not add favorite product" });
-        P.Date AS DateUploaded,
+//     }
-        U.Name AS SellerName,
+//     res.json({
-        MIN(I.URL) AS ProductImage,
+//       success: true,
-        C.Name AS Category
+//       message: "Product added to favorites successfully",
-      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.removeAnyProduct = async (req, res) => {
  const { id } = req.params;
  console.log(id);
  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!" });
  }
 };
--- a/backend/controllers/recommendation.js
+++ b/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({
--- a/backend/controllers/transaction.js
+++ b/backend/controllers/transaction.js
@@ -1,226 +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!" });
  }
 };
 // Create a new transaction
 exports.createTransaction = async (req, res) => {
  const { userID, productID, date, paymentStatus } = req.body;
  try {
    // Check if the transaction already exists for the same user and product
    const [existingTransaction] = await db.execute(
      `SELECT TransactionID FROM Transaction WHERE UserID = ? AND ProductID = ?`,
      [userID, productID],
    );
    if (existingTransaction.length > 0) {
      return res.status(400).json({
        success: false,
        message: "Transaction already exists for this user and product",
      });
    }
    // Format the date
    const formattedDate = new Date(date)
      .toISOString()
      .slice(0, 19)
      .replace("T", " ");
    // Insert the new transaction
    const [result] = await db.execute(
      `INSERT INTO Transaction (UserID, ProductID, Date, PaymentStatus)
       VALUES (?, ?, ?, ?)`,
      [userID, productID, formattedDate, paymentStatus],
    );
    res.json({
      success: true,
      message: "Transaction created successfully",
      transactionID: result.insertId,
    });
  } catch (error) {
    console.error("Error creating transaction:", error);
    res.status(500).json({ error: "Could not create transaction" });
  }
 };
 // Get all transactions for a given product
 exports.getTransactionsByProduct = async (req, res) => {
  const { productID } = req.params;
  try {
    const [transactions] = await db.execute(
      `SELECT
         T.TransactionID,
         T.UserID,
         T.ProductID,
         T.Date,
         T.PaymentStatus,
         P.Name AS ProductName,
         MIN(I.URL) AS Image_URL
       FROM Transaction T
       JOIN Product P ON T.ProductID = P.ProductID
       JOIN Image_URL I ON I.ProductID = T.ProductID
       GROUP BY T.TransactionID, T.UserID, T.ProductID, T.Date, T.PaymentStatus, P.Name`,
    );
    res.json({
      success: true,
      transactions,
    });
  } catch (error) {
    console.error("Error fetching transactions by product:", error);
    res.status(500).json({ error: "Could not retrieve transactions" });
  }
 };
 // Get all transactions for a given user
 exports.getTransactionsByUser = async (req, res) => {
  const { userID } = req.body;
  try {
    const [transactions] = await db.execute(
      `SELECT
         T.TransactionID,
         T.UserID,
         T.ProductID,
         T.Date,
         T.PaymentStatus,
         P.Name AS ProductName,
         MIN(I.URL) AS Image_URL
       FROM Transaction T
       JOIN Product P ON T.ProductID = P.ProductID
       JOIN Image_URL I ON I.ProductID = T.ProductID
       WHERE T.UserID = ?
   GROUP BY
   T.TransactionID,
   T.UserID,
   T.ProductID,
   T.Date,
   T.PaymentStatus,
   P.Name;
       `,
      [userID],
    );
    res.json({
      success: true,
      transactions,
    });
  } catch (error) {
    console.error("Error fetching transactions by user:", error);
    res.status(500).json({ error: "Could not retrieve transactions" });
  }
 };
 // Get all transactions in the system
 exports.getAllTransactions = async (req, res) => {
  try {
    const [transactions] = await db.execute(
      `SELECT
         T.TransactionID,
         T.UserID,
         T.ProductID,
         T.Date,
         T.PaymentStatus,
         P.Name AS ProductName,
         MIN(I.URL) AS Image_URL
       FROM Transaction T
       JOIN Product P ON T.ProductID = P.ProductID
      JOIN Image_URL I ON P.ProductID = I.ProductID
       GROUP BY T.TransactionID, T.UserID, T.ProductID, T.Date, T.PaymentStatus, P.Name`,
    );
    res.json({
      success: true,
      transactions,
    });
  } catch (error) {
    console.error("Error fetching all transactions:", error);
    res.status(500).json({ error: "Could not retrieve transactions" });
  }
 };
 // Delete a transaction
 exports.deleteTransaction = async (req, res) => {
  const { transactionID } = req.body;
  try {
    const [result] = await db.execute(
      `DELETE FROM Transaction
       WHERE TransactionID = ?`,
      [transactionID],
    );
    if (result.affectedRows === 0) {
      return res
        .status(404)
        .json({ success: false, message: "Transaction not found" });
    }
    res.json({
      success: true,
      message: "Transaction deleted successfully",
    });
  } catch (error) {
    console.error("Error deleting transaction:", error);
    res.status(500).json({ error: "Could not delete transaction" });
  }
 };
 exports.updateTransactionStatus = async (req, res) => {
  const { transactionID } = req.body;
  try {
    const [result] = await db.execute(
      `UPDATE Transaction
      SET PaymentStatus = 'completed'
      WHERE TransactionID = ?;`,
      [transactionID],
    );
    res.json({
      success: true,
      message: "Transaction updated successfully",
    });
  } catch (error) {
    console.error("Error deleting transaction:", error);
    res.status(500).json({ error: "Could not delete transaction" });
  }
 };
--- a/backend/controllers/user.js
+++ b/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,7 +105,7 @@ 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
@@ -113,12 +113,12 @@ exports.completeSignUp = async (req, res) => {
      `INSERT INTO UserRole (UserID, Client, Admin)
                VALUES (LAST_INSERT_ID(), ${data.client || true}, ${
                  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!" });
  }
 };
--- a/backend/index.js
+++ b/backend/index.js
@@ -10,10 +10,6 @@ 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 {
  cleanupExpiredCodes,
@@ -46,9 +42,7 @@ app.use("/api/search", searchRouter);
 app.use("/api/engine", recommendedRouter);
 app.use("/api/history", history);
 app.use("/api/review", review);
-app.use("/api/transaction", transactionRouter);
+
 app.use("/api/category", categoryRouter);
 app.use("/api/transaction", transactionRouter);
 // Set up a scheduler to run cleanup every hour
 clean_up_time = 30*60*1000;
--- a/backend/routes/category.js
+++ b/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;
--- a/backend/routes/product.js
+++ b/backend/routes/product.js
@@ -7,11 +7,6 @@ const {
  getAllProducts,
  getProductById,
  addProduct,
  removeProduct,
  removeAnyProduct,
  getProductWithPagination,
  myProduct,
  updateProduct,
 } = require("../controllers/product");
 const router = express.Router();
@@ -25,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("/any/:id", removeAnyProduct);
 //Get products with pagination
 router.get("/getProductWithPagination", getProductWithPagination);
 router.get("/:id", getProductById); // Simplified route
 router.put("/update/:productId", updateProduct);
 module.exports = router;
--- a/backend/routes/transaction.js
+++ b/backend/routes/transaction.js
@@ -1,30 +0,0 @@
 // routes/transaction.js
 const express = require("express");
 const {
  createTransaction,
  getTransactionsByProduct,
  getTransactionsByUser,
  getAllTransactions,
  deleteTransaction,
  getTransactionWithPagination,
  removeTransation,
  updateTransactionStatus,
 } = require("../controllers/transaction");
 const router = express.Router();
 // logging middleware
 router.use((req, res, next) => {
  console.log(`Incoming ${req.method} ${req.originalUrl}`);
  next();
 });
 router.post("/createTransaction", createTransaction);
 router.get("/getTransactionsByProduct/:productID", getTransactionsByProduct);
 router.post("/getTransactionsByUser", getTransactionsByUser);
 router.post("/updateStatus", updateTransactionStatus);
 router.post("/getAllTransactions", getAllTransactions);
 router.delete("/deleteTransaction", deleteTransaction);
 router.get("/getTransactions", getTransactionWithPagination);
 router.delete("/:id", removeTransation);
 module.exports = router;
--- a/backend/routes/user.js
+++ b/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;
--- a/backend/utils/database.js
+++ b/backend/utils/database.js
@@ -6,8 +6,4 @@ const pool = mysql.createPool({
  database: "Marketplace",
 });
 // 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();
--- a/backend/utils/helper.js
+++ b/backend/utils/helper.js
@@ -18,7 +18,7 @@ async function sendVerificationEmail(email, verificationCode) {
 // Clean up expired verification codes (run this periodically)
 function cleanupExpiredCodes() {
-  db.query(
+  db_con.query(
    "DELETE FROM AuthVerification WHERE Date < DATE_SUB(NOW(), INTERVAL 15 MINUTE) AND Authenticated = 0",
    (err, result) => {
      if (err) {
--- a/frontend/package-lock.json
+++ b/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",
--- a/frontend/package.json
+++ b/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": {
--- a/frontend/public/20191227_012601_0000.png
+++ b/frontend/public/20191227_012601_0000.png
--- a/frontend/public/Pictures/Acoustic-Guitar.jpg
+++ b/frontend/public/Pictures/Acoustic-Guitar.jpg
--- a/frontend/public/Pictures/Backpack.jpg
+++ b/frontend/public/Pictures/Backpack.jpg
--- a/frontend/public/Pictures/Basketball.jpg
+++ b/frontend/public/Pictures/Basketball.jpg
--- a/frontend/public/Pictures/Bluetooth-Speaker.jpg
+++ b/frontend/public/Pictures/Bluetooth-Speaker.jpg
--- a/frontend/public/Pictures/CS-Textbook.jpg
+++ b/frontend/public/Pictures/CS-Textbook.jpg
--- a/frontend/public/Pictures/Calculator.jpg
+++ b/frontend/public/Pictures/Calculator.jpg
--- a/frontend/public/Pictures/Calculus-Textbook.jpg
+++ b/frontend/public/Pictures/Calculus-Textbook.jpg
--- a/frontend/public/Pictures/Calculus-Textbook2.jpg
+++ b/frontend/public/Pictures/Calculus-Textbook2.jpg
--- a/frontend/public/Pictures/Calculus-Textbook3.jpg
+++ b/frontend/public/Pictures/Calculus-Textbook3.jpg
--- a/frontend/public/Pictures/Controller.jpg
+++ b/frontend/public/Pictures/Controller.jpg
--- a/frontend/public/Pictures/Dell1.jpg
+++ b/frontend/public/Pictures/Dell1.jpg
--- a/frontend/public/Pictures/Dell2.jpg
+++ b/frontend/public/Pictures/Dell2.jpg
--- a/frontend/public/Pictures/Dell3.jpg
+++ b/frontend/public/Pictures/Dell3.jpg
--- a/frontend/public/Pictures/Desk-Lamp.jpg
+++ b/frontend/public/Pictures/Desk-Lamp.jpg
--- a/frontend/public/Pictures/Dorm-Desk.jpg
+++ b/frontend/public/Pictures/Dorm-Desk.jpg
--- a/frontend/public/Pictures/HP-Calculator.jpg
+++ b/frontend/public/Pictures/HP-Calculator.jpg
--- a/frontend/public/Pictures/HP-Laptop1.jpg
+++ b/frontend/public/Pictures/HP-Laptop1.jpg
--- a/frontend/public/Pictures/HP-Laptop2.jpg
+++ b/frontend/public/Pictures/HP-Laptop2.jpg
--- a/frontend/public/Pictures/Lab-Coat.jpg
+++ b/frontend/public/Pictures/Lab-Coat.jpg
--- a/frontend/public/Pictures/Mini-Fridge.jpg
+++ b/frontend/public/Pictures/Mini-Fridge.jpg
--- a/frontend/public/Pictures/Mountain-Bike.jpg
+++ b/frontend/public/Pictures/Mountain-Bike.jpg
--- a/frontend/public/Pictures/Physics-Textbook.jpg
+++ b/frontend/public/Pictures/Physics-Textbook.jpg
--- a/frontend/public/Pictures/University-Hoodie.jpg
+++ b/frontend/public/Pictures/University-Hoodie.jpg
--- a/frontend/public/Pictures/Winter-Jacket.jpg
+++ b/frontend/public/Pictures/Winter-Jacket.jpg
--- a/frontend/public/Pictures/Wireless-Mouse.jpg
+++ b/frontend/public/Pictures/Wireless-Mouse.jpg
--- a/frontend/public/Pictures/Yoga-Mat.jpg
+++ b/frontend/public/Pictures/Yoga-Mat.jpg
--- a/frontend/public/market.png
+++ b/frontend/public/market.png
--- a/frontend/public/university-of-calgary-logo.png
+++ b/frontend/public/university-of-calgary-logo.png
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,7 +4,6 @@ import {
  Routes,
  Route,
  Navigate,
  useLocation,
 } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
@@ -13,10 +12,7 @@ import Selling from "./pages/Selling";
 import Transactions from "./pages/Transactions";
 import Favorites from "./pages/Favorites";
 import ProductDetail from "./pages/ProductDetail";
-import SearchPage from "./pages/SearchPage";
+import SearchPage from "./pages/SearchPage"; // Make sure to import the SearchPage
 import Dashboard from "./pages/Dashboard"; // The single consolidated dashboard component
 import DashboardNav from "./components/DashboardNav";
 import { verifyIsAdmin } from "./api/admin";
 function App() {
  // Authentication state - initialize from localStorage if available
@@ -34,22 +30,7 @@ function App() {
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
-  // Product recommendation states
+  const [userId, setUserId] = useState(null);
  const [isGeneratingRecommendations, setIsGeneratingRecommendations] =
    useState(false);
  const [recommendations, setRecommendations] = useState([]);
  // Admin state
  const [isAdmin, setIsAdmin] = useState(false);
  const [showAdminDashboard, setShowAdminDashboard] = useState(false);
  // Check URL to determine if we're in admin mode
  useEffect(() => {
    // If URL contains /admin, set showAdminDashboard to true
    if (window.location.pathname.includes("/admin")) {
      setShowAdminDashboard(true);
    }
  }, []);
  // New verification states
  const [verificationStep, setVerificationStep] = useState("initial"); // 'initial', 'code-sent', 'verifying'
@@ -72,46 +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 () => {
    setIsGeneratingRecommendations(true);
    await new Promise((resolve) => setTimeout(resolve, 500));
    setIsGeneratingRecommendations(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);
    // Update URL without reloading page
    window.history.pushState({}, "", "/admin");
  };
  const handleCloseAdminDashboard = () => {
    setShowAdminDashboard(false);
    // Update URL without reloading page
    window.history.pushState({}, "", "/");
  };
  // Send verification code
  const sendVerificationCode = async (userData) => {
@@ -211,6 +154,7 @@ function App() {
  // Complete signup
  const completeSignUp = async (userData) => {
    try {
      setIsLoading(true);
      setError("");
      console.log("Completing signup for:", userData.email);
@@ -238,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,
@@ -246,25 +189,20 @@ function App() {
        // Set authenticated user
        setUser(newUser);
-        setIsSignUp(false);
+        setIsAuthenticated(true);
        //setIsAuthenticated(true);
        // Save to localStorage to persist across refreshes
        sessionStorage.setItem("isAuthenticated", "true");
        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");
@@ -293,11 +231,12 @@ function App() {
      setError("Email and password are required");
      setIsLoading(false);
      return;
    } else if (!formValues.email.endsWith("@ucalgary.ca")) {
      setError("Please use your UCalgary email address (@ucalgary.ca)");
      setIsLoading(false);
      return;
    }
    // else if (!formValues.email.endsWith("@ucalgary.ca")) {
    //   setError("Please use your UCalgary email address (@ucalgary.ca)");
    //   setIsLoading(false);
    //   return;
    // }
    try {
      if (isSignUp) {
        // Handle Sign Up with verification
@@ -362,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
+          console.log("Login successful for:", userData.email);
          // This will happen in the useEffect, but we set a loading state to show to the user
          setIsGeneratingRecommendations(true);
        } else {
          // Show error message for invalid credentials
          setError("Invalid email or password");
@@ -400,13 +337,11 @@ function App() {
    setUser(null);
    setVerificationStep("initial");
    setTempUserData(null);
    setRecommendations([]);
    setShowAdminDashboard(false);
    // Clear localStorage
    //
    sessionStorage.removeItem("user");
    sessionStorage.removeItem("isAuthenticated");
    sessionStorage.removeItem("userRecommendations");
    console.log("User logged out");
  };
@@ -434,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");
@@ -447,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",
@@ -468,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-emerald-600 border-t-transparent"></div>
    </div>
  );
  // Login component
  const LoginComponent = () => (
    <div className="flex h-screen bg-white">
@@ -538,7 +470,7 @@ function App() {
                      id="name"
                      name="name"
                      placeholder="Enter your name"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                      required={isSignUp}
                    />
                  </div>
@@ -557,7 +489,7 @@ function App() {
                      id="ucid"
                      name="ucid"
                      placeholder="1234567"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                      required={isSignUp}
                    />
                  </div>
@@ -575,7 +507,7 @@ function App() {
                    id="email"
                    name="email"
                    placeholder="your.email@ucalgary.ca"
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                    required
                  />
                </div>
@@ -593,7 +525,7 @@ function App() {
                      id="phone"
                      name="phone"
                      placeholder="+1(123)456 7890"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                      required={isSignUp}
                    />
                  </div>
@@ -612,7 +544,7 @@ function App() {
                      id="address"
                      name="address"
                      placeholder="Your address"
-                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                      required={isSignUp}
                    />
                  </div>
@@ -634,7 +566,7 @@ function App() {
                        ? "Create a secure password"
                        : "Enter your password"
                    }
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                    required
                  />
                </div>
@@ -643,7 +575,7 @@ function App() {
                  <button
                    type="submit"
                    disabled={isLoading}
-                    className="w-full px-6 py-2 text-base font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 transition-colors disabled:bg-emerald-300"
+                    className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
                  >
                    {isLoading
                      ? "Please wait..."
@@ -670,7 +602,7 @@ function App() {
                    id="verificationCode"
                    name="verificationCode"
                    placeholder="Enter the 6-digit code"
-                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+                    className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                    required
                  />
                  <p className="mt-1 text-xs text-gray-500">
@@ -682,7 +614,7 @@ function App() {
                  <button
                    type="submit"
                    disabled={isLoading}
-                    className="w-full px-6 py-2 text-base font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 transition-colors disabled:bg-emerald-300"
+                    className="w-full px-6 py-2 text-base font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors disabled:bg-green-300"
                  >
                    {isLoading ? "Please wait..." : "Verify Code"}
                  </button>
@@ -700,7 +632,7 @@ function App() {
                    type="button"
                    onClick={handleResendCode}
                    disabled={isLoading}
-                    className="text-sm text-emerald-600 hover:text-emerald-700"
+                    className="text-sm text-green-500 hover:text-green-700"
                  >
                    Resend code
                  </button>
@@ -718,7 +650,7 @@ function App() {
                  <button
                    onClick={toggleAuthMode}
                    type="button"
-                    className="text-emerald-600 font-medium hover:text-emerald-700"
+                    className="text-green-500 font-medium hover:text-green-700"
                  >
                    {isSignUp ? "Sign in" : "Sign up"}
                  </button>
@@ -742,39 +674,16 @@ function App() {
  return (
    <Router>
      {/* If admin dashboard should be shown */}
      {showAdminDashboard ? (
        <div className="flex">
          <DashboardNav handleCloseAdminDashboard={handleCloseAdminDashboard} />
          <Routes>
            {/* Single admin route for consolidated dashboard */}
            <Route path="/admin/*" element={<Dashboard />} />
            {/* Any other path in admin mode should go to dashboard */}
            <Route path="*" element={<Navigate to="/admin" />} />
          </Routes>
        </div>
      ) : (
        /* Normal user interface */
      <div className="min-h-screen bg-gray-50">
          {/* Show loading overlay when generating recommendations */}
          {isGeneratingRecommendations && <LoadingOverlay />}
        {/* Only show navbar when authenticated */}
        {isAuthenticated && (
-            <Navbar
+          <Navbar onLogout={handleLogout} userName={user?.name} />
              isAdmin={isAdmin}
              onLogout={handleLogout}
              userName={user?.name}
              handleShowAdminDashboard={handleShowAdminDashboard}
            />
        )}
        <Routes>
          {/* Public routes */}
          <Route
            path="/login"
-              element={
+            element={isAuthenticated ? <Navigate to="/" /> : <LoginComponent />}
                isAuthenticated ? <Navigate to="/" /> : <LoginComponent />
              }
          />
          {/* Protected routes */}
          <Route
@@ -782,7 +691,7 @@ function App() {
            element={
              <ProtectedRoute>
                <div className="container mx-auto px-4 py-6">
-                    <Home recommendations={recommendations} />
+                  <Home />
                </div>
              </ProtectedRoute>
            }
@@ -852,7 +761,6 @@ function App() {
          />
        </Routes>
      </div>
      )}
    </Router>
  );
 }
--- a/frontend/src/api/admin.js
+++ b/frontend/src/api/admin.js
@@ -1,120 +0,0 @@
 // api.js
 import axios from "axios";
 const client = axios.create({
  baseURL: "http://localhost:3030/api",
 });
 // Users
 export const getUsers = async (page = 1, limit = 10) => {
  try {
    const { data } = await client.get(
      `/user/getUserWithPagination?page=${page}&limit=${limit}`
    );
    return { users: data.users, total: data.total };
  } catch (error) {
    return handleError(error);
  }
 };
 export const removeUser = async (id) => {
  try {
    const { data } = await client.post(`/user/delete`, { userId: id });
    return { message: data.message };
  } catch (error) {
    return handleError(error);
  }
 };
 export const verifyIsAdmin = async (id) => {
  try {
    const { data } = await client.get(`/user/isAdmin/${id}`);
    return { isAdmin: data.isAdmin };
  } catch (error) {
    return handleError(error);
  }
 };
 // Products
 export const getProducts = async (page = 1, limit = 10) => {
  try {
    const { data } = await client.get(
      `/product/getProductWithPagination?limit=${limit}&page=${page}`
    );
    return { products: data.products, total: data.totalProd };
  } catch (error) {
    return handleError(error);
  }
 };
 export const removeProduct = async (id) => {
  try {
    const { data } = await client.delete(`/product/any/${id}`);
    return { message: data.message };
  } catch (error) {
    return handleError(error);
  }
 };
 // Categories
 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) {
    return handleError(error);
  }
 };
 export const addCategory = async (name) => {
  try {
    const { data } = await client.post(`/category/addCategory`, { name });
    return { message: data.message };
  } catch (error) {
    return handleError(error);
  }
 };
 export const removeCategory = async (id) => {
  try {
    const { data } = await client.delete(`/category/${id}`);
    if (data.error) throw Error(data.error);
    return { message: data.message };
  } catch (error) {
    return handleError(error);
  }
 };
 // Transactions
 export const getTransactions = async (page = 1, limit = 10) => {
  try {
    const { data } = await client.get(
      `/transaction/getTransactions?limit=${limit}&page=${page}`
    );
    return { transactions: data.data, total: data.total };
  } catch (error) {
    return handleError(error);
  }
 };
 export const removeTransaction = async (id) => {
  try {
    const { data } = await client.delete(`/transaction/${id}`);
    return { message: data.message };
  } catch (error) {
    return handleError(error);
  }
 };
 // Shared Error Handler
 const handleError = (error) => {
  const { response } = error;
  if (response?.data) return response.data;
  return alert(error.message || error);
 };
 // Optional: export client if you want to use it elsewhere
 export default client;
--- a/frontend/src/components/CategoryForm.jsx
+++ b/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-emerald-200", "text-emerald-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-emerald-700">
        Category:
      </label>
      <input
        type="text"
        className="border border-emerald-700 ml-2 rounded-sm focus:bg-emerald-100 text-emerald-900"
        name="category"
        id="category"
        onChange={handleChange}
        value={category}
      />
      <button type="submit" className="text-2xl pl-1 text-emerald-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>
  );
 }
--- a/frontend/src/components/DashboardNav.jsx
+++ b/frontend/src/components/DashboardNav.jsx
@@ -1,16 +0,0 @@
 import { FaArrowLeft } from "react-icons/fa";
 export default function DashboardNav({ handleCloseAdminDashboard }) {
  return (
    <div className="w-48 min-w-[12rem] bg-gray-100 text-emerald-600 flex flex-col p-4 shadow-md">
      <h2 className="text-lg font-semibold mb-4">Admin Dashboard</h2>
      <button
        onClick={handleCloseAdminDashboard}
        className="flex items-center gap-2 text-sm font-medium hover:text-emerald-700 underline underline-offset-4 transition"
      >
        <FaArrowLeft className="text-xs mt-[1px]" />
        Back to User Page
      </button>
    </div>
  );
 }
--- a/frontend/src/components/FloatingAlert.jsx
+++ b/frontend/src/components/FloatingAlert.jsx
@@ -11,7 +11,7 @@ const FloatingAlert = ({ message, onClose, duration = 3000 }) => {
  }, [onClose, duration]);
  return (
-    <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-emerald-600 text-white px-4 py-2 rounded-xl shadow-lg z-50 text-center">
+    <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-emerald-500 text-white px-4 py-2 rounded-xl shadow-lg z-50 text-center">
      {message}
    </div>
  );
--- a/frontend/src/components/Navbar.jsx
+++ b/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();
@@ -35,7 +35,7 @@ const Navbar = ({ onLogout, userName, isAdmin, handleShowAdminDashboard }) => {
                alt="Campus Plug"
                className="h-8 px-2"
              />
-              <span className="hidden md:block text-emerald-700 font-bold text-xl">
+              <span className="hidden md:block text-emerald-600 font-bold text-xl">
                Campus Plug
              </span>
            </Link>
@@ -76,12 +76,7 @@ const Navbar = ({ onLogout, userName, isAdmin, handleShowAdminDashboard }) => {
            </Link>
            {/* User Profile */}
-            <UserDropdown
+            <UserDropdown onLogout={onLogout} userName={userName} />
              isAdmin={isAdmin}
              onLogout={onLogout}
              userName={userName}
              handleShowAdminDashboard={handleShowAdminDashboard}
            />
          </div>
        </div>
      </div>
--- a/frontend/src/components/Pagination.jsx
+++ b/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-emerald-700 border border-gray-300 hover:bg-emerald-700 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-emerald-700" : "bg-emerald-700"
                } +
                  " flex items-center justify-center px-3 h-8 leading-tight text-white  border border-gray-300 hover:bg-emerald-700 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-emerald-700 border border-gray-300 hover:bg-emerald-700 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>
    </>
  );
 }
--- a/frontend/src/components/ProductForm.jsx
+++ b/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;
--- a/frontend/src/components/UserDropdown.jsx
+++ b/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 = ({
+const UserDropdown = ({ onLogout, userName }) => {
  onLogout,
  userName,
  isAdmin,
  handleShowAdminDashboard,
 }) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const navigate = useNavigate();
@@ -55,7 +49,7 @@ const UserDropdown = ({
        onClick={toggleDropdown}
      >
        <div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center">
-          <User className="h-5 w-5 text-emerald-700" />
+          <User className="h-5 w-5 text-emerald-600" />
        </div>
      </button>
@@ -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}
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1,366 +0,0 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import {
  getUsers,
  removeUser,
  getTransactions,
  removeTransaction,
  getProducts,
  removeProduct,
  getCategories,
  removeCategory,
 } from "../api/admin";
 import { MdDelete } from "react-icons/md";
 import { IoAddCircleSharp } from "react-icons/io5";
 import Pagination from "../components/Pagination";
 import CategoryForm from "../components/CategoryForm";
 import { useNavigate } from "react-router-dom";
 // Spinner Component
 const Spinner = () => (
  <div className="flex justify-center items-center h-40 w-full">
    <div className="w-12 h-12 border-4 border-emerald-600 border-dashed rounded-full animate-spin"></div>
  </div>
 );
 // Empty State Component
 const EmptyState = () => (
  <div className="flex flex-col items-center justify-center bg-gray-50 py-10 rounded-lg w-full">
    <svg
      className="w-16 h-16 text-gray-400"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
      ></path>
    </svg>
    <p className="mt-4 text-lg font-medium text-gray-600">No data found</p>
    <p className="mt-1 text-sm text-gray-500">
      No records are currently available.
    </p>
  </div>
 );
 // Generic Dashboard Component
 const Dashboard = ({
  fetchDataFn,
  deleteFn,
  columns,
  idKey,
  refreshKey = 0,
  headerAction = null,
 }) => {
  const navigate = useNavigate();
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const pageLimit = 10;
  const currentTab = useRef();
  //Reset the current page to 1 whenever we switch between tab
  useEffect(() => {
    if (currentTab.current != idKey) setCurrentPage(1);
    currentTab.current = idKey;
  }, [idKey]);
  const fetchItems = useCallback(
    (page = 1, limit = 10) => {
      fetchDataFn(page, limit)
        .then((res) => {
          console.log(res);
          const data =
            res.users || res.products || res.transactions || res.data || [];
          setItems(data);
          setTotal(res.total);
        })
        .catch((error) => {
          setItems([]);
          setTotal(0);
        })
        .finally(() => setLoading(false));
    },
    [fetchDataFn],
  );
  const handleRemove = (id) => {
    if (window.confirm("Are you sure you want to delete this item?")) {
      setLoading(true);
      deleteFn(id)
        .then(() => fetchItems(currentPage))
        .catch((error) => {
          console.error("Error removing item:", error);
          setLoading(false);
        });
    }
  };
  useEffect(() => {
    fetchItems(currentPage);
  }, [fetchItems, currentPage, refreshKey]);
  const onChangePage = (page) => {
    setCurrentPage(page);
  };
  if (loading) return <Spinner />;
  return (
    <div className="w-full mt-6">
      <div className="flex flex-col md:flex-row justify-between items-center mb-4 w-full">
        <h2 className="text-xl font-semibold text-gray-700 mb-2 md:mb-0">
          Total: <span className="text-emerald-700">{total}</span>
        </h2>
        {headerAction && <div>{headerAction}</div>}
      </div>
      {items.length > 0 ? (
        <div className="w-full overflow-x-auto bg-white rounded-lg shadow">
          <table className="min-w-full divide-y divide-gray-200 table-fixed">
            <thead className="bg-emerald-700">
              <tr>
                {columns.map((col) => (
                  <th
                    key={col.label}
                    scope="col"
                    className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider"
                  >
                    {col.label}
                  </th>
                ))}
                <th
                  scope="col"
                  className="px-6 py-3 text-center text-xs font-medium text-white uppercase tracking-wider w-20"
                >
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {items.map((item) => (
                <tr
                  key={item[idKey]}
                  className="hover:bg-gray-50 transition-colors"
                >
                  {columns.map((col) => (
                    <td
                      key={`${item[idKey]}-${col.key}`}
                      className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 overflow-hidden text-ellipsis"
                    >
                      {item[col.key] || "—"}
                    </td>
                  ))}
                  <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                    <button
                      onClick={() => handleRemove(item[idKey])}
                      className="text-red-500 hover:text-red-700 transition-colors"
                      title="Delete"
                    >
                      <MdDelete size={20} />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <EmptyState />
      )}
      {total > pageLimit && (
        <div className="mt-4 w-full">
          <Pagination
            pageNum={Math.ceil(total / pageLimit)}
            onChange={onChangePage}
          />
        </div>
      )}
    </div>
  );
 };
 // Main Admin Tabs
 export default function AdminDashboardTabs() {
  const [activeTab, setActiveTab] = useState(0);
  const [tabData, setTabData] = useState({
    users: { loaded: false, data: null },
    products: { loaded: false, data: null },
    transactions: { loaded: false, data: null },
    categories: { loaded: false, data: null },
  });
  const [visible, setVisible] = useState(false);
  const [categoryRefreshKey, setCategoryRefreshKey] = useState(0);
  const toggleForm = () => setVisible((v) => !v);
  // Preload all tab data
  useEffect(() => {
    const tabKeys = ["users", "products", "transactions", "categories"];
    const loadTabData = async (index) => {
      if (index === tabKeys.length) return;
      setTabData((prev) => ({
        ...prev,
        [tabKeys[index]]: { ...prev[tabKeys[index]], loaded: true },
      }));
      // Load next tab after a short delay
      setTimeout(() => loadTabData(index + 1), 100);
    };
    loadTabData(0);
  }, []);
  const tabs = [
    {
      title: "Users",
      icon: "👥",
      key: "users",
      component: () => (
        <Dashboard
          fetchDataFn={getUsers}
          deleteFn={removeUser}
          idKey="UserID"
          columns={[
            { label: "ID", key: "UserID" },
            { label: "UCID", key: "UCID" },
            { label: "Name", key: "Name" },
            { label: "Email", key: "Email" },
            { label: "Phone", key: "Phone" },
            { label: "Address", key: "Address" },
          ]}
        />
      ),
    },
    {
      title: "Products",
      icon: "📦",
      key: "products",
      component: () => (
        <Dashboard
          fetchDataFn={getProducts}
          deleteFn={removeProduct}
          idKey="ProductID"
          columns={[
            { label: "ID", key: "ProductID" },
            { label: "Name", key: "ProductName" },
            { label: "Price", key: "Price" },
            { label: "Category", key: "Category" },
            { label: "Seller", key: "SellerName" },
          ]}
        />
      ),
    },
    {
      title: "Transactions",
      icon: "💰",
      key: "transactions",
      component: () => (
        <Dashboard
          fetchDataFn={getTransactions}
          deleteFn={removeTransaction}
          idKey="TransactionID"
          columns={[
            { label: "ID", key: "TransactionID" },
            { label: "User", key: "UserName" },
            { label: "Product", key: "ProductName" },
            { label: "Date", key: "Date" },
            { label: "Status", key: "PaymentStatus" },
          ]}
        />
      ),
    },
    {
      title: "Categories",
      icon: "🏷️",
      key: "categories",
      component: () => (
        <>
          <Dashboard
            fetchDataFn={getCategories}
            deleteFn={removeCategory}
            idKey="CategoryID"
            columns={[
              { label: "ID", key: "CategoryID" },
              { label: "Name", key: "Name" },
            ]}
            refreshKey={categoryRefreshKey}
            headerAction={
              <button
                onClick={toggleForm}
                className="flex items-center bg-emerald-600 rounded-md px-4 py-2 text-white text-sm hover:bg-emerald-700 transition-colors font-medium shadow"
              >
                <IoAddCircleSharp className="mr-1" size={18} />
                Add Category
              </button>
            }
          />
          <CategoryForm
            visible={visible}
            onAddCategory={() => {
              setCategoryRefreshKey((prev) => prev + 1);
              toggleForm();
            }}
          />
        </>
      ),
    },
  ];
  return (
    <div className="w-full min-h-screen bg-gray-50">
      <div className="w-full px-4 py-8">
        {/* Mobile Tabs */}
        <div className="md:hidden w-full mb-4">
          <select
            className="w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-600 focus:ring focus:ring-emerald-600 focus:ring-opacity-50 p-2"
            value={activeTab}
            onChange={(e) => {
              setActiveTab(parseInt(e.target.value));
            }}
          >
            {tabs.map((tab, index) => (
              <option key={tab.key} value={index}>
                {tab.icon} {tab.title}
              </option>
            ))}
          </select>
        </div>
        {/* Desktop Tabs */}
        <div className="hidden md:flex space-x-1 border-b border-gray-200 w-full overflow-x-auto">
          {tabs.map((tab, index) => (
            <button
              key={tab.key}
              className={`px-6 py-3 font-medium text-sm rounded-t-lg transition-colors ${
                index === activeTab
                  ? "text-emerald-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
                  : "text-gray-600 hover:text-emerald-700 bg-gray-50"
              }`}
              onClick={() => {
                setActiveTab(index);
              }}
            >
              <span className="inline-block mr-2">{tab.icon}</span>
              {tab.title}
            </button>
          ))}
        </div>
        <div className="bg-white p-4 md:p-6 rounded-lg shadow-sm border border-gray-200 mt-4 w-full">
          <div className="w-full">
            {tabData[tabs[activeTab].key].loaded && tabs[activeTab].component()}
          </div>
        </div>
      </div>
    </div>
  );
 }
--- a/frontend/src/pages/Favorites.jsx
+++ b/frontend/src/pages/Favorites.jsx
@@ -119,7 +119,7 @@ const Favorites = () => {
          </p>
          <Link
            to="/"
-            className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
+            className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
          >
            Browse Listings
          </Link>
@@ -161,7 +161,7 @@ const Favorites = () => {
                    </button>
                  </div>
-                  <p className="text-emerald-700 font-bold mt-1">
+                  <p className="text-emerald-600 font-bold mt-1">
                    ${product.price.toFixed(2)}
                  </p>
@@ -200,8 +200,56 @@ const Favorites = () => {
      )}
      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+        <div className="container mx-auto px-4">
-          <p>© 2025 Campus Marketplace. All rights reserved.</p>
+          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-4 md:mb-0">
              <h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
              <p className="text-gray-400 text-sm">
                Your trusted university trading platform
              </p>
            </div>
            <div className="flex space-x-6">
              <div>
                <h4 className="font-medium mb-2">Quick Links</h4>
                <ul className="text-sm text-gray-400">
                  <li className="mb-1">
                    <Link to="/" className="hover:text-white transition">
                      Home
                    </Link>
                  </li>
                  <li className="mb-1">
                    <Link to="/selling" className="hover:text-white transition">
                      Sell an Item
                    </Link>
                  </li>
                  <li className="mb-1">
                    <Link
                      to="/favorites"
                      className="hover:text-white transition"
                    >
                      My Favorites
                    </Link>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">Contact</h4>
                <ul className="text-sm text-gray-400">
                  <li className="mb-1">support@campusmarket.com</li>
                  <li className="mb-1">University of Calgary</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
            <p>
              © {new Date().getFullYear()} Campus Marketplace. All rights
              reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
--- a/frontend/src/pages/Home.jsx
+++ b/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 {
-import { Tag, ChevronLeft, ChevronRight, Bookmark, Loader } from "lucide-react";
+  Tag,
  ChevronLeft,
  ChevronRight,
  Bookmark,
  BookmarkCheck,
 } from "lucide-react";
 import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
@@ -8,22 +14,14 @@ 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",
      {
@@ -40,18 +38,14 @@ const Home = () => {
    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);
    }
    console.log(`Add Product -> History: ${id}`);
  };
  const addHistory = async (id) => {
-    try {
+    const response = await fetch(
-      await fetch("http://localhost:3030/api/history/addHistory", {
+      "http://localhost:3030/api/history/addHistory",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
@@ -60,23 +54,23 @@ const Home = () => {
          userID: storedUser.ID,
          productID: id,
        }),
-      });
+      },
-    } catch (error) {
+    );
      console.error("Error adding to history:", error);
    }
  };
-  // Fetch recommended products
+  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 () => {
+    const fetchrecomProducts = async () => {
      // Skip if already fetched or no user data
      if (recommendationsFetched.current || !storedUser || !storedUser.ID)
        return;
      setIsLoading((prev) => ({ ...prev, recommendations: true }));
      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,
+              category: product.Category, // Ensure this gets the category name
-              image: product.ProductImage,
+              image: product.ProductImage, // Use the alias for image URL
-              seller: product.SellerName,
+              seller: product.SellerName, // Fetch seller name properly
-              datePosted: product.DateUploaded,
+              datePosted: product.DateUploaded, // Use the actual date
-              isFavorite: false,
+              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,
+              category: product.Category, // Ensure this gets the category name
-              image: product.ProductImage,
+              image: product.ProductImage, // Use the alias for image URL
-              seller: product.SellerName,
+              seller: product.SellerName, // Fetch seller name properly
-              datePosted: product.DateUploaded,
+              datePosted: product.DateUploaded, // Use the actual date
-              isFavorite: false,
+              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 () => {
+    const fetchrecomProducts = async () => {
-      // Skip if already fetched or no user data
+      // Get the user's data from localStorage
      if (historyFetched.current || !storedUser || !storedUser.ID) return;
      setIsLoading((prev) => ({ ...prev, history: true }));
      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,
+              category: product.Category, // Ensure this gets the category name
-              image: product.ProductImage,
+              image: product.ProductImage, // Use the alias for image URL
-              seller: product.SellerName,
+              seller: product.SellerName, // Fetch seller name properly
-              datePosted: product.DateUploaded,
+              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 }));
      }
    };
-
+    fetchrecomProducts();
-    fetchUserHistory();
+  }, []);
  }, [storedUser]); // Keep dependency
  const handleSelling = () => {
    navigate("/selling");
  };
  // Loading indicator component
  const LoadingSection = () => (
    <div className="flex justify-center items-center h-48">
      <Loader className="animate-spin text-emerald-700 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-700 hover:bg-emerald-600 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-700 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,61 +217,348 @@ const Home = () => {
            </p>
            <button
              onClick={handleSelling}
-              className="bg-emerald-700 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)}
          />
        )}
-
+        <div className="relative py-4">
        {/* Recommendations Section */}
        <ScrollableProductList
          containerId="RecomContainer"
          products={recommended}
          isLoading={isLoading.recommendations}
          addToHistory={true}
        >
          <h2 className="text-xl font-semibold text-gray-800 mb-4">
-            Recommended For You
+            Recommendation
          </h2>
        </ScrollableProductList>
-        {/* Recent Listings Section */}
+          <div className="relative">
-        <ScrollableProductList
+            {/* Left Button - Overlaid on products */}
-          containerId="listingsContainer"
+            <button
-          products={listings}
+              onClick={() =>
-          isLoading={isLoading.listings}
+                document
-          addToHistory={true}
+                  .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) && (
+        {showAlert && (
-          <ScrollableProductList
+          <FloatingAlert
-            containerId="HistoryContainer"
+            message="Product added to favorites!"
-            products={history}
+            onClose={() => setShowAlert(false)}
-            isLoading={isLoading.history}
+          />
          >
            <h2 className="text-xl font-semibold text-gray-800 mb-4">
              Your Browsing History
            </h2>
          </ScrollableProductList>
        )}
        <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 - Added here */}
      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+        <div className="container mx-auto px-4">
-          <p>© 2025 Campus Marketplace. All rights reserved.</p>
+          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-4 md:mb-0">
              <h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
              <p className="text-gray-400 text-sm">
                Your trusted university trading platform
              </p>
            </div>
            <div className="flex space-x-6">
              <div>
                <h4 className="font-medium mb-2">Quick Links</h4>
                <ul className="text-sm text-gray-400">
                  <li className="mb-1">
                    <Link to="/" className="hover:text-white transition">
                      Home
                    </Link>
                  </li>
                  <li className="mb-1">
                    <Link to="/selling" className="hover:text-white transition">
                      Sell an Item
                    </Link>
                  </li>
                  <li className="mb-1">
                    <Link
                      to="/favorites"
                      className="hover:text-white transition"
                    >
                      My Favorites
                    </Link>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">Contact</h4>
                <ul className="text-sm text-gray-400">
                  <li className="mb-1">support@campusmarket.com</li>
                  <li className="mb-1">University of Calgary</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
            <p>
              © {new Date().getFullYear()} Campus Marketplace. All rights
              reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
--- a/frontend/src/pages/ProductDetail.jsx
+++ b/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,13 +26,12 @@ 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([]);
  const [showReviewForm, setShowReviewForm] = useState(false);
  const [showAlert, setShowAlert] = useState(false);
  const [showAlert1, setShowAlert1] = useState(false);
  const storedUser = JSON.parse(sessionStorage.getItem("user"));
  const toggleFavorite = async (id) => {
@@ -52,6 +52,7 @@ const ProductDetail = () => {
    if (data.success) {
      setShowAlert(true);
    }
    console.log(`Add Product -> History: ${id}`);
  };
  const [reviewForm, setReviewForm] = useState({
@@ -247,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-700"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
      </div>
    );
  }
@@ -261,7 +262,7 @@ const ProductDetail = () => {
          <p className="text-gray-600">{error.product}</p>
          <Link
            to="/"
-            className="mt-4 inline-block bg-emerald-700 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>
@@ -278,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-700 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>
@@ -290,27 +291,21 @@ 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!"
          onClose={() => setShowAlert(false)}
        />
      )}
      {showAlert1 && (
        <FloatingAlert
          message="Product added to transaction!"
          onClose={() => setShowAlert1(false)}
        />
      )}
      <div className="flex flex-col md:flex-row gap-8">
        <div className="md:w-3/5">
@@ -356,7 +351,7 @@ const ProductDetail = () => {
              {product.images.map((image, index) => (
                <div
                  key={index}
-                  className={`bg-white border ${currentImage === index ? "border-emerald-700 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
@@ -386,13 +381,13 @@ const ProductDetail = () => {
                  e.preventDefault();
                  toggleFavorite(product.ProductID);
                }}
-                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-700 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)
@@ -422,40 +417,8 @@ const ProductDetail = () => {
            <div className="relative">
              <button
-                onClick={async () => {
+                onClick={() => setShowContactOptions(!showContactOptions)}
-                  try {
+                className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
                    // Create a transaction record
                    const transactionData = {
                      userID: storedUser.ID, // User ID from session storage
                      productID: product.ProductID, // Product ID from the product details
                      date: new Date().toISOString(), // Current date in ISO format
                      paymentStatus: "Pending", // Default payment status
                    };
                    const response = await fetch(
                      "http://localhost:3030/api/transaction/createTransaction",
                      {
                        method: "POST",
                        headers: {
                          "Content-Type": "application/json",
                        },
                        body: JSON.stringify(transactionData),
                      },
                    );
                    const result = await response.json();
                    if (result.success) {
                      setShowAlert1(true);
                    }
                    // Toggle contact options visibility
                    setShowContactOptions(!showContactOptions);
                  } catch (error) {
                    console.error("Error creating transaction:", error);
                    alert(`Error: ${error.message}`);
                  }
                }}
                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 px-4 mb-3"
              >
                Contact Seller
              </button>
@@ -467,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-700" />
+                      <Phone className="h-5 w-5 text-green-500" />
                      <span>Call Seller</span>
                    </a>
                  )}
@@ -477,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-700" />
+                      <Mail className="h-5 w-5 text-green-500" />
                      <span>Email Seller</span>
                    </a>
                  )}
@@ -498,10 +461,7 @@ const ProductDetail = () => {
                    {product.SellerName || "Unknown Seller"}
                  </h3>
                  <p className="text-sm text-gray-500">
-                    Product listed since{" "}
+                    Member since {product.SellerJoinDate || "N/A"}
                    {product.Date
                      ? new Date(product.Date).toLocaleDateString()
                      : "N/A"}
                  </p>
                </div>
              </div>
@@ -517,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-700"></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">
@@ -564,7 +524,7 @@ const ProductDetail = () => {
        <div className="mt-4">
          <button
            onClick={() => setShowReviewForm(true)}
-            className="bg-emerald-700 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>
@@ -622,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-700"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
                    rows="4"
                    required
                  ></textarea>
@@ -638,7 +598,7 @@ const ProductDetail = () => {
                  </button>
                  <button
                    type="submit"
-                    className="px-4 py-2 bg-emerald-700 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"}
--- a/frontend/src/pages/SearchPage.jsx
+++ b/frontend/src/pages/SearchPage.jsx
@@ -146,7 +146,7 @@ const SearchPage = () => {
            <div className="flex space-x-2">
              <button
                onClick={applyFilters}
-                className="w-full bg-emerald-600 text-white p-3 hover:bg-emerald-700 transition-colors"
+                className="w-full bg-emerald-500 text-white p-3 hover:bg-emerald-600 transition-colors"
              >
                Apply Filters
              </button>
@@ -187,7 +187,7 @@ const SearchPage = () => {
                  <h3 className="text-lg font-medium text-gray-800">
                    {listing.title}
                  </h3>
-                  <p className="text-emerald-700 font-semibold">
+                  <p className="text-emerald-600 font-semibold">
                    ${Number(listing.price).toFixed(2)}
                  </p>
                </div>
@@ -196,9 +196,58 @@ const SearchPage = () => {
          </div>
        </div>
      </div>
      {/* Footer - Added here */}
      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
+        <div className="container mx-auto px-4">
-          <p>© 2025 Campus Marketplace. All rights reserved.</p>
+          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-4 md:mb-0">
              <h3 className="text-lg font-semibold mb-2">Campus Marketplace</h3>
              <p className="text-gray-400 text-sm">
                Your trusted university trading platform
              </p>
            </div>
            <div className="flex space-x-6">
              <div>
                <h4 className="font-medium mb-2">Quick Links</h4>
                <ul className="text-sm text-gray-400">
                  <li className="mb-1">
                    <Link to="/" className="hover:text-white transition">
                      Home
                    </Link>
                  </li>
                  <li className="mb-1">
                    <Link to="/selling" className="hover:text-white transition">
                      Sell an Item
                    </Link>
                  </li>
                  <li className="mb-1">
                    <Link
                      to="/favorites"
                      className="hover:text-white transition"
                    >
                      My Favorites
                    </Link>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">Contact</h4>
                <ul className="text-sm text-gray-400">
                  <li className="mb-1">support@campusmarket.com</li>
                  <li className="mb-1">University of Calgary</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
            <p>
              © {new Date().getFullYear()} Campus Marketplace. All rights
              reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
--- a/frontend/src/pages/Selling.jsx
+++ b/frontend/src/pages/Selling.jsx
@@ -1,284 +1,95 @@
 import { useState, useEffect } from "react";
-import { useLocation, Link } from "react-router-dom";
+import ProductForm from "../components/ProductForm";
 import { X, ChevronLeft, Trash2 } from "lucide-react";
 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"));
+  // State to store the product being edited (or empty for new product)
  const [categories, setCategories] = useState([]);
  const [categoryMapping, setCategoryMapping] = useState({});
  const [originalProduct, setOriginalProduct] = useState(null);
  const [editingProduct, setEditingProduct] = useState({
    name: "",
    price: "",
    description: "",
-    category: "",
+    categories: [],
    status: "Unsold",
    images: [],
  });
-  function reloadPage() {
+  // Simulate fetching products from API/database on component mount
    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();
  }, []);
  // Fetch products from API/database on component mount
  useEffect(() => {
    // This would be replaced with a real API call
    const fetchProducts = async () => {
-      try {
+      // Mock data
-        // Replace with your actual API endpoint
+      const mockProducts = [
        const response = await fetch(
          "http://localhost:3030/api/product/myProduct",
        {
-            method: "POST",
+          id: "1",
-            headers: {
+          name: "Vintage Camera",
-              "Content-Type": "application/json",
+          price: "299.99",
          description: "A beautiful vintage film camera in excellent condition",
          categories: ["Electronics", "Art & Collectibles"],
          status: "Unsold",
          images: ["/public/Pictures/Dell1.jpg"],
        },
-            body: JSON.stringify({
+        {
-              userID: storedUser.ID,
+          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) {
+      setProducts(mockProducts);
          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
      }
    };
    fetchProducts();
-  });
+  }, []);
-  const handleEditProduct = (product) => {
+  // Handle creating or updating a product
-    setOriginalProduct(product);
+  const handleSaveProduct = () => {
-
+    if (editingProduct.id) {
-    const categoryName = getCategoryNameById(product.CategoryID);
+      // Update existing product
-
+      setProducts(
-    setEditingProduct({
+        products.map((p) => (p.id === editingProduct.id ? editingProduct : p)),
      ...product,
      category: categoryName || "", // Single category string
      images: product.images || [],
    });
    setShowForm(true);
  };
  // Upload images to server and get their paths
  const uploadImages = async (images) => {
    console.log(images);
    const uploadedImagePaths = [];
    // Filter out only File objects (new images to upload)
    const filesToUpload = images.filter((img) => img instanceof File);
    for (const file of filesToUpload) {
      // Create a FormData object to send the file
      const formData = new FormData();
      formData.append("image", file);
      try {
        // Send the file to your upload endpoint
        const response = await fetch("http://localhost:3030/api/upload", {
          method: "POST",
          body: formData,
        });
        if (!response.ok) {
          throw new Error(`Failed to upload image: ${file.name}`);
        }
        const result = await response.json();
        // Assuming the server returns the path where the file was saved
        uploadedImagePaths.push(`/public/uploads/${file.name}`);
      } catch (error) {
        console.error("Error uploading image:", error);
        // If upload fails, still add the expected path (this is a fallback)
        uploadedImagePaths.push(`/public/uploads/${file.name}`);
      }
    }
    // Also include any existing image URLs that are strings, not File objects
    const existingImages = images.filter((img) => typeof img === "string");
    if (existingImages.length > 0) {
      uploadedImagePaths.push(...existingImages);
    }
    return uploadedImagePaths;
  };
  // Handle saving product with updated image logic
  const handleSaveProduct = async () => {
    if (!editingProduct.category) {
      alert("Please select a category");
      return;
    }
    try {
      let imagePaths = [];
      // Handle image uploads and get their paths
      if (editingProduct.images && editingProduct.images.length > 0) {
        imagePaths = await uploadImages(editingProduct.images);
      } else if (originalProduct?.image_url) {
        // If no new images but there was an original image URL
        imagePaths = [originalProduct.image_url];
      }
      const categoryID =
        categoryMapping[editingProduct.category] ||
        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 : [],
      };
      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}`,
      );
    } else {
      // Create new product
      const newProduct = {
        ...editingProduct,
        id: Date.now().toString(), // Generate a temporary ID
      };
      setProducts([...products, newProduct]);
    }
      const data = await response.json();
      console.log("Product saved:", data);
    // Reset form and hide it
    setShowForm(false);
    setEditingProduct({
      name: "",
      price: "",
      description: "",
-        category: "",
+      categories: [],
      status: "Unsold",
      images: [],
    });
      setOriginalProduct(null); // reset original as well
      reloadPage();
    } catch (error) {
      console.error("Error saving product:", error);
      alert(`Error saving product: ${error.message}`);
    }
  };
  // Handle product deletion
-  const handleDeleteProduct = async (productId) => {
+  const handleDeleteProduct = (productId) => {
-    try {
+    if (window.confirm("Are you sure you want to delete this product?")) {
-      // Replace with your actual API endpoint
+      setProducts(products.filter((p) => p.id !== productId));
      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 deleting product:", error);
      // You might want to set an error state here
    }
  };
-  // Helper function to get category name from ID
+  // Handle editing a product
-  const getCategoryNameById = (categoryId) => {
+  const handleEditProduct = (product) => {
-    if (!categoryId || !categoryMapping) return null;
+    setEditingProduct({
-
+      ...product,
-    // Find the category name by ID
+      images: product.images || [], // Ensure images array exists
-    for (const [name, id] of Object.entries(categoryMapping)) {
+    });
-      if (id === categoryId) {
+    setShowForm(true);
        return name;
      }
    }
    return null;
  };
  // Handle adding a new product
@@ -287,20 +98,13 @@ const Selling = () => {
      name: "",
      price: "",
      description: "",
-      category: "",
+      categories: [],
      status: "Unsold",
      images: [],
    });
    setShowForm(true);
  };
  // Handle category change
  const handleCategoryChange = (e) => {
    setEditingProduct({
      ...editingProduct,
      category: e.target.value,
    });
  };
  return (
    <div className="container mx-auto p-4 max-w-6xl">
      <div className="flex justify-between items-center mb-6">
@@ -308,7 +112,7 @@ const Selling = () => {
        {!showForm && (
          <button
            onClick={handleAddProduct}
-            className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
+            className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
          >
            + Add New Product
          </button>
@@ -316,226 +120,12 @@ const Selling = () => {
      </div>
      {showForm ? (
-        <div className="bg-white border border-gray-200 shadow-md p-6">
+        <ProductForm
-          {/* Back Button */}
+          editingProduct={editingProduct}
-          <button
+          setEditingProduct={setEditingProduct}
-            onClick={() => setShowForm(false)}
+          onSave={handleSaveProduct}
-            className="mb-4 text-emerald-700 hover:text-emerald-800 flex items-center gap-1"
+          onCancel={() => setShowForm(false)}
          >
            <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-600 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-600 focus:outline-none"
              />
            </div>
            {/* Category - Single Selection Dropdown */}
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Category
              </label>
              <select
                value={editingProduct.category || ""}
                onChange={handleCategoryChange}
                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
                required
              >
                <option value="" disabled>
                  Select a category
                </option>
                {categories.map((category, index) => (
                  <option key={index} value={category}>
                    {category}
                  </option>
                ))}
              </select>
              {!editingProduct.category && (
                <p className="text-xs text-gray-500 mt-1">
                  Please select a 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-600 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-700 font-medium">
                  Click to upload images (will be saved to /public/uploads)
                </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={
                            typeof img === "string"
                              ? img
                              : 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 &&
                !(editingProduct.images || []).length && (
                  <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>
            <button
              onClick={handleSaveProduct}
              className="bg-emerald-700 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
            >
              {editingProduct.ProductID ? "Update Product" : "Add Product"}
            </button>
          </div>
        </div>
      ) : (
        <>
          {products.length === 0 ? (
@@ -545,7 +135,7 @@ const Selling = () => {
              </p>
              <button
                onClick={handleAddProduct}
-                className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
+                className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
              >
                Create Your First Listing
              </button>
@@ -553,16 +143,15 @@ const Selling = () => {
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {products.map((product) => (
-                <Link
+                <div
-                  key={product.ProductID}
+                  key={product.id}
-                  to={`/product/${product.ProductID}`}
+                  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 ? (
+                    {product.images && product.images.length > 0 ? (
                      <img
-                          src={product.image_url || ""}
+                        src={product.images[0] || ""}
-                          alt={product.Name}
+                        alt={product.name}
                        className="w-full h-full object-cover"
                      />
                    ) : (
@@ -573,62 +162,61 @@ const Selling = () => {
                  <div className="p-4">
                    <div className="flex justify-between items-start">
                      <h3 className="text-lg font-semibold text-gray-800">
-                          {product.Name}
+                        {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>
-                      <p className="text-emerald-700 font-bold mt-1">
+                    <p className="text-emerald-600 font-bold mt-1">
-                        ${product.Price}
+                      ${product.price}
                    </p>
-                      {product.CategoryID && (
+                    {product.categories && product.categories.length > 0 && (
                      <div className="mt-2 flex flex-wrap gap-1">
-                          <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1">
+                        {product.categories.map((category) => (
-                            {getCategoryNameById(product.CategoryID) ||
+                          <span
-                              product.CategoryID}
+                            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}
+                      {product.description}
                    </p>
                    <div className="mt-4 flex justify-end gap-2">
                      <button
-                          onClick={(e) => {
+                        onClick={() => handleDeleteProduct(product.id)}
                            e.stopPropagation();
                            e.preventDefault();
                            handleDeleteProduct(product.ProductID);
                          }}
                        className="text-red-600 hover:text-red-800"
                      >
                        Delete
                      </button>
                      <button
-                          onClick={(e) => {
+                        onClick={() => handleEditProduct(product)}
-                            e.stopPropagation();
+                        className="text-emerald-600 hover:text-emerald-800 font-medium"
                            e.preventDefault();
                            handleEditProduct(product);
                          }}
                          className="text-emerald-700 hover:text-emerald-800 font-medium"
                      >
                        Edit
                      </button>
                    </div>
                  </div>
                </div>
                </Link>
              ))}
            </div>
          )}
        </>
      )}
      <footer className="bg-gray-800 text-white py-6 mt-12">
        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
          <p>© 2025 Campus Marketplace. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
 };
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -190,7 +190,7 @@ const Settings = () => {
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500"></div>
      </div>
    );
  }
@@ -234,7 +234,7 @@ const Settings = () => {
                  id="name"
                  value={userData.name}
                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                  required
                />
              </div>
@@ -251,7 +251,7 @@ const Settings = () => {
                  id="email"
                  value={userData.email}
                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                  required
                  readOnly // Email is often used as identifier and not changeable
                />
@@ -269,7 +269,7 @@ const Settings = () => {
                  id="phone"
                  value={userData.phone}
                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                />
              </div>
@@ -285,7 +285,7 @@ const Settings = () => {
                  id="UCID"
                  value={userData.UCID}
                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                  required
                />
              </div>
@@ -302,7 +302,7 @@ const Settings = () => {
                  id="address"
                  value={userData.address}
                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                />
              </div>
              <div>
@@ -317,14 +317,14 @@ const Settings = () => {
                  id="password"
                  value={userData.password}
                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                />
              </div>
            </div>
            <button
              type="submit"
-              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
+              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
            >
              Update Profile
            </button>
@@ -395,11 +395,6 @@ const Settings = () => {
          </div>
        </div>
      </div>
      <footer className="bg-gray-800 text-white py-6 mt-12">
        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
          <p>© 2025 Campus Marketplace. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
 };
--- a/frontend/src/pages/Transactions.jsx
+++ b/frontend/src/pages/Transactions.jsx
@@ -1,209 +1,8 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Calendar, CreditCard, Trash2 } from "lucide-react";
 import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
 const Transactions = () => {
-  const [transactions, setTransactions] = useState([]);
+  return <div></div>;
  const [showAlert, setShowAlert] = useState(false);
  const storedUser = JSON.parse(sessionStorage.getItem("user"));
  function reloadPage() {
    const docTimestamp = new Date(performance.timing.domLoading).getTime();
    const now = Date.now();
    if (now > docTimestamp) {
      location.reload();
    }
  }
  useEffect(() => {
    const fetchTransactions = async () => {
      try {
        const response = await fetch(
          "http://localhost:3030/api/transaction/getTransactionsByUser",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ userID: storedUser.ID }),
          },
        );
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const { transactions: txData } = await response.json();
        if (!Array.isArray(txData)) return;
        console.log(txData);
        setTransactions(
          txData.map((tx) => ({
            id: tx.TransactionID,
            productId: tx.ProductID,
            name: tx.ProductName,
            price: tx.Price != null ? parseFloat(tx.Price) : null,
            image: tx.Image_URL,
            date: tx.Date,
            status: tx.PaymentStatus,
          })),
        );
      } catch (error) {
        console.error("Failed to fetch transactions:", error);
      }
    };
    fetchTransactions();
  }, []);
  const deleteTransaction = async (id) => {
    try {
      const res = await fetch(
        "http://localhost:3030/api/transaction/deleteTransaction",
        {
          method: "DELETE",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ transactionID: id }),
        },
      );
      const data = await res.json();
      if (data.success) {
        setTransactions((prev) => prev.filter((tx) => tx.id !== id));
        reloadPage();
      } else {
        console.error("Delete failed:", data.message);
      }
    } catch (err) {
      console.error("Error deleting transaction:", err);
    }
  };
  const updateTransaction = async (id) => {
    try {
      const res = await fetch(
        "http://localhost:3030/api/transaction/updateStatus",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ transactionID: id }),
        },
      );
      const data = await res.json();
      if (data) {
        setShowAlert(true);
        reloadPage();
      }
    } catch (err) {
      console.error("Error deleting transaction:", err);
    }
  };
  const formatDate = (dateString) => {
    const d = new Date(dateString);
    return d.toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  };
  return (
    <div className="max-w-6xl mx-auto">
      {showAlert && (
        <FloatingAlert
          message="Status Updated"
          onClose={() => setShowAlert(false)}
        />
      )}
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-800">My Transactions</h1>
      </div>
      {transactions.length === 0 ? (
        <div className="bg-white border border-gray-200 p-8 text-center">
          <CreditCard className="h-12 w-12 text-gray-300 mx-auto mb-4" />
          <h3 className="text-xl font-medium text-gray-700 mb-2">
            No transactions found
          </h3>
          <p className="text-gray-500 mb-4">
            Once transactions are created, they’ll appear here.
          </p>
          <Link
            to="/"
            className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
          >
            Browse Listings
          </Link>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {transactions.map((tx) => (
              <div
                key={tx.id}
                className="relative border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
              >
                <div className="absolute bottom-2 right-2 flex gap-2 z-10">
                  <button
                    onClick={(e) => {
                      e.preventDefault();
                      updateTransaction(tx.id);
                    }}
                    className="text-emerald-600 hover:text-emerald-700 text-sm font-medium"
                  >
                    Complete
                  </button>
                  <button
                    onClick={(e) => {
                      e.preventDefault();
                      deleteTransaction(tx.id);
                    }}
                    className="text-red-500 hover:text-red-600"
                  >
                    <Trash2 size={20} />
                  </button>
                </div>
                <Link to={`/product/${tx.productId}`}>
                  <div className="h-48 bg-gray-200 flex items-center justify-center">
                    <img
                      src={tx.image}
                      alt={tx.name}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-4">
                    <h3 className="text-lg font-semibold text-gray-800">
                      {tx.name}
                    </h3>
                    {tx.price !== null && (
                      <p className="text-emerald-700 font-bold mt-1">
                        ${tx.price.toFixed(2)}
                      </p>
                    )}
                    <div className="flex items-center text-gray-500 text-sm mt-2">
                      <Calendar className="mr-1" size={16} />
                      {formatDate(tx.date)}
                    </div>
                    <p className="text-gray-600 text-sm mt-1">
                      Status: <span className="font-medium">{tx.status}</span>
                    </p>
                  </div>
                </Link>
              </div>
            ))}
          </div>
          <div className="mt-6 text-sm text-gray-500">
            Showing {transactions.length}{" "}
            {transactions.length === 1 ? "transaction" : "transactions"}
          </div>
        </>
      )}
      <footer className="bg-gray-800 text-white py-6 mt-12">
        <div className="border-t border-gray-700  text-center text-sm text-gray-400">
          <p>© 2025 Campus Marketplace. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
 };
 export default Transactions;
--- a/frontend/src/schema.sql
+++ b/frontend/src/schema.sql
@@ -1,124 +0,0 @@
 -- MySql Version 9.2.0
 CREATE DATABASE Marketplace;
 USE Marketplace;
 -- User Entity
 CREATE TABLE User (
    UserID INT AUTO_INCREMENT PRIMARY KEY,
    Name VARCHAR(100) NOT NULL,
    Email VARCHAR(100) UNIQUE NOT NULL,
    UCID VARCHAR(20) UNIQUE NOT NULL,
    Password VARCHAR(255) NOT NULL,
    Phone VARCHAR(20),
    Address VARCHAR(255)
 );
 CREATE TABLE UserRole (
    UserID INT,
    Client BOOLEAN DEFAULT True,
    Admin BOOLEAN DEFAULT FALSE,
    PRIMARY KEY (UserID),
    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE
 );
 -- Category Entity (must be created before Product or else error)
 CREATE TABLE Category (
    CategoryID INT AUTO_INCREMENT PRIMARY KEY,
    Name VARCHAR(255) NOT NULL
 );
 -- Product Entity
 CREATE TABLE Product (
    ProductID INT AUTO_INCREMENT PRIMARY KEY,
    Name VARCHAR(255) NOT NULL,
    Price DECIMAL(10, 2) NOT NULL,
    StockQuantity INT,
    UserID INT,
    Description TEXT,
    CategoryID INT NOT NULL,
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID) ON DELETE SET NULL
 );
 -- Fixed Image_URL table
 CREATE TABLE Image_URL (
    URL VARCHAR(255),
    ProductID INT,
    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
 );
 -- Fixed Review Entity (Many-to-One with User, Many-to-One with Product)
 CREATE TABLE Review (
    ReviewID INT AUTO_INCREMENT PRIMARY KEY,
    UserID INT,
    ProductID INT,
    Comment TEXT,
    Rating INT CHECK (
        Rating >= 1
        AND Rating <= 5
    ),
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
 );
 -- Transaction Entity (Many-to-One with User, Many-to-One with Product)
 CREATE TABLE Transaction (
    TransactionID INT PRIMARY KEY,
    UserID INT,
    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 CASCADE 
 );
 -- Recommendation Entity (Many-to-One with User, Many-to-One with Product)
 CREATE TABLE Recommendation (
    RecommendationID_PK INT AUTO_INCREMENT PRIMARY KEY,
    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
 );
 -- History Entity (Many-to-One with User, Many-to-One with Product)
 CREATE TABLE History (
    HistoryID INT AUTO_INCREMENT PRIMARY KEY,
    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
 );
 -- Favorites Entity (Many-to-One with User, Many-to-One with Product)
 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,
    UNIQUE (UserID, ProductID)
 );
 -- Product-Category Junction Table (Many-to-Many)
 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
 );
 -- Login Authentication table
 CREATE TABLE AuthVerification (
    UserID INT AUTO_INCREMENT PRIMARY KEY,
    Email VARCHAR(100) UNIQUE NOT NULL,
    VerificationCode VARCHAR(6) NOT NULL,
    Authenticated BOOLEAN DEFAULT FALSE,
    Date DATETIME DEFAULT CURRENT_TIMESTAMP
 );
--- a/mysql-code/Init-Data.sql
+++ b/mysql-code/Init-Data.sql
@@ -2,6 +2,8 @@
 SET
    FOREIGN_KEY_CHECKS = 0;
 TRUNCATE TABLE Product_Category;
 TRUNCATE TABLE Favorites;
 TRUNCATE TABLE History;
@@ -42,7 +44,7 @@ VALUES
    (
        1,
        'John Doe',
-        'john.doe@ucalgary.ca',
+        'john.doe@example.com',
        'U123456',
        'hashedpassword1',
        '555-123-4567',
@@ -51,7 +53,7 @@ VALUES
    (
        2,
        'Jane Smith',
-        'jane.smith@ucalgary.ca',
+        'jane.smith@example.com',
        'U234567',
        'hashedpassword2',
        '555-234-5678',
@@ -65,41 +67,40 @@ VALUES
    (1, TRUE, TRUE),
    (2, TRUE, FALSE);
 -- Insert Categories
 -- Insert Categories
 INSERT INTO
-    Category (Name)
+    Category (CategoryID, Name)
 VALUES
-    ('Other'),
+    (1, 'Textbooks'),
-    ('Textbooks'),
+    (2, 'Electronics'),
-    ('Electronics'),
+    (3, 'Furniture'),
-    ('Furniture'),
+    (4, 'Clothing'),
-    ('Clothing'),
+    (5, 'Sports Equipment'),
-    ('Sports Equipment'),
+    (6, 'Musical Instruments'),
-    ('Musical Instruments'),
+    (7, 'Art Supplies'),
-    ('Art Supplies'),
+    (8, 'Kitchen Appliances'),
-    ('Kitchen Appliances'),
+    (9, 'Gaming'),
-    ('Gaming'),
+    (10, 'Bicycles'),
-    ('Bicycles'),
+    (11, 'Computer Accessories'),
-    ('Computer Accessories'),
+    (12, 'Stationery'),
-    ('Stationery'),
+    (13, 'Fitness Equipment'),
-    ('Fitness Equipment'),
+    (14, 'Winter Sports'),
-    ('Winter Sports'),
+    (15, 'Lab Equipment'),
-    ('Lab Equipment'),
+    (16, 'Camping Gear'),
-    ('Camping Gear'),
+    (17, 'School Supplies'),
-    ('School Supplies'),
+    (18, 'Office Furniture'),
-    ('Office Furniture'),
+    (19, 'Books (Non-textbook)'),
-    ('Books (-textbook)'),
+    (20, 'Math & Science Resources'),
-    ('Math & Science Resources'),
+    (21, 'Engineering Tools'),
-    ('Engineering Tools'),
+    (22, 'Backpacks & Bags'),
-    ('Backpacks & Bags'),
+    (23, 'Audio Equipment'),
-    ('Audio Equipment'),
+    (24, 'Dorm Essentials'),
-    ('Dorm Essentials'),
+    (25, 'Smartphones & Tablets'),
-    ('Smartphones & Tablets'),
+    (26, 'Winter Clothing'),
-    ('Winter Clothing'),
+    (27, 'Photography Equipment'),
-    ('Photography Equipment'),
+    (28, 'Event Tickets'),
-    ('Event Tickets'),
+    (29, 'Software Licenses'),
-    ('Software Licenses');
+    (30, 'Transportation (Car Pool)');
 -- Insert Products
 INSERT INTO
@@ -318,29 +319,85 @@ VALUES
 INSERT INTO
    Image_URL (URL, ProductID)
 VALUES
-    ('/Uploads/Dell1.jpg', 1),
+    ('/Pictures/Dell1.jpg', 1),
-    ('/Uploads/Dell2.jpg', 1),
+    ('/Pictures/Dell2.jpg', 1),
-    ('/Uploads/Dell3.jpg', 1),
+    ('/Pictures/Dell3.jpg', 1),
-    ('/Uploads/HP-Laptop1.jpg', 2),
+    ('/Pictures/HP-Laptop1.jpg', 2),
-    ('/Uploads/HP-Laptop1.jpg', 2),
+    ('/Pictures/HP-Laptop1.jpg', 2),
-    ('/Uploads/Dorm-Desk.jpg', 3),
+    ('/Pictures/Dorm-Desk.jpg', 3),
-    ('/Uploads/University-Hoodie.jpg', 4),
+    ('/Pictures/University-Hoodie.jpg', 4),
-    ('/Uploads/Basketball.jpg', 5),
+    ('/Pictures/Basketball.jpg', 5),
-    ('/Uploads/Acoustic-Guitar.jpg', 6),
+    ('/Pictures/Acoustic-Guitar.jpg', 6),
-    ('/Uploads/Physics-Textbook.jpg', 7),
+    ('/Pictures/Physics-Textbook.jpg', 7),
-    ('/Uploads/Mini-Fridge.jpg', 8),
+    ('/Pictures/Mini-Fridge.jpg', 8),
-    ('/Uploads/Controller.jpg', 9),
+    ('/Pictures/Controller.jpg', 9),
-    ('/Uploads/Mountain-Bike.jpg', 10),
+    ('/Pictures/Mountain-Bike.jpg', 10),
-    ('/Uploads/Wireless-Mouse.jpg', 11),
+    ('/Pictures/Wireless-Mouse.jpg', 11),
-    ('/Uploads/Lab-Coat.jpg', 12),
+    ('/Pictures/Lab-Coat.jpg', 12),
-    ('/Uploads/Calculator.jpg', 13),
+    ('/Pictures/Calculator.jpg', 13),
-    ('/Uploads/Yoga-Mat.jpg', 14),
+    ('/Pictures/Yoga-Mat.jpg', 14),
-    ('/Uploads/Winter-Jacket.jpg', 15),
+    ('/Pictures/Winter-Jacket.jpg', 15),
-    ('/Uploads/CS-Textbook.jpg', 16),
+    ('/Pictures/CS-Textbook.jpg', 16),
-    ('/Uploads/Desk-Lamp.jpg', 17),
+    ('/Pictures/Desk-Lamp.jpg', 17),
-    ('/Uploads/HP-Calculator.jpg', 18),
+    ('/Pictures/HP-Calculator.jpg', 18),
-    ('/Uploads/Bluetooth-Speaker.jpg', 19),
+    ('/Pictures/Bluetooth-Speaker.jpg', 19),
-    ('/Uploads/Backpack.jpg', 20);
+    ('/Pictures/Backpack.jpg', 20);
 -- Insert Product-Category relationships (products with multiple categories)
 INSERT INTO
    Product_Category (ProductID, CategoryID)
 VALUES
    (1, 1),
    (1, 17),
    (1, 20), -- Calculus book: Textbooks, School Supplies, Math Resources
    (2, 2),
    (2, 11),
    (2, 25), -- Laptop: Electronics, Computer Accessories, Smartphones & Tablets
    (3, 3),
    (3, 18),
    (3, 24), -- Desk: Furniture, Office Furniture, Dorm Essentials
    (4, 4),
    (4, 26), -- Hoodie: Clothing, Winter Clothing
    (5, 5),
    (5, 13), -- Basketball: Sports Equipment, Fitness Equipment
    (6, 6),
    (6, 23), -- Guitar: Musical Instruments, Audio Equipment
    (7, 1),
    (7, 15),
    (7, 20), -- Physics book: Textbooks, Lab Equipment, Math & Science Resources
    (8, 8),
    (8, 24), -- Mini Fridge: Kitchen Appliances, Dorm Essentials
    (9, 9),
    (9, 2), -- PS5 Controller: Gaming, Electronics
    (10, 10),
    (10, 5),
    (10, 13), -- Mountain Bike: Bicycles, Sports Equipment, Fitness Equipment
    (11, 11),
    (11, 2), -- Mouse: Computer Accessories, Electronics
    (12, 15),
    (12, 17), -- Lab Coat: Lab Equipment, School Supplies
    (13, 12),
    (13, 17),
    (13, 20), -- Calculator: Stationery, School Supplies, Math & Science Resources
    (14, 13),
    (14, 5), -- Yoga Mat: Fitness Equipment, Sports Equipment
    (15, 26),
    (15, 4),
    (15, 14), -- Winter Jacket: Winter Clothing, Clothing, Winter Sports
    (16, 1),
    (16, 17),
    (16, 19), -- CS Book: Textbooks, School Supplies, Books (Non-textbook)
    (17, 24),
    (17, 2), -- Desk Lamp: Dorm Essentials, Electronics
    (18, 12),
    (18, 17),
    (18, 20), -- Scientific Calculator: Stationery, School Supplies, Math & Science
    (19, 23),
    (19, 2),
    (19, 24), -- Bluetooth Speaker: Audio Equipment, Electronics, Dorm Essentials
    (20, 22),
    (20, 17),
    (20, 24);
 -- Insert History records
 INSERT INTO
@@ -370,6 +427,7 @@ VALUES
    (1, 5), -- User 4 likes Basketball
    (2, 8);
 -- User 5 likes Mini Fridge
 -- Insert Transactions
 INSERT INTO
    Transaction (
@@ -394,5 +452,4 @@ VALUES
        1,
        'This is a great fake product! Totally recommend it.',
        5,
-        '2024-10-02 16:00:00'
+    );
    )
--- a/mysql-code/Schema.sql
+++ b/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
 );
@@ -36,9 +36,9 @@ CREATE TABLE Product (
    StockQuantity INT,
    UserID INT,
    Description TEXT,
-    CategoryID INT,
+    CategoryID INT NOT NULL,
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID)
 );
@@ -46,7 +46,7 @@ CREATE TABLE Product (
 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,19 +60,19 @@ CREATE TABLE Review (
        AND Rating <= 5
    ),
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID)
 );
 -- Transaction Entity (Many-to-One with User, Many-to-One with Product)
 CREATE TABLE Transaction (
-    TransactionID INT AUTO_INCREMENT PRIMARY KEY,
+    TransactionID INT PRIMARY KEY,
    UserID INT,
    ProductID INT,
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
    PaymentStatus VARCHAR(50),
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    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 (UserID) REFERENCES User (UserID),
-    FOREIGN KEY (RecommendedProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    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 (UserID) REFERENCES User (UserID),
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID)
 );
 -- Favorites Entity (Many-to-One with User, Many-to-One with Product)
@@ -100,11 +100,20 @@ CREATE TABLE Favorites (
    FavoriteID INT AUTO_INCREMENT PRIMARY KEY,
    UserID INT,
    ProductID INT,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
+    FOREIGN KEY (UserID) REFERENCES User (UserID),
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE,
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID),
    UNIQUE (UserID, ProductID)
 );
 -- Product-Category Junction Table (Many-to-Many)
 CREATE TABLE Product_Category (
    ProductID INT,
    CategoryID INT,
    PRIMARY KEY (ProductID, CategoryID),
    FOREIGN KEY (ProductID) REFERENCES Product (ProductID),
    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID)
 );
 -- Login Authentication table
 CREATE TABLE AuthVerification (
    UserID INT AUTO_INCREMENT PRIMARY KEY,
--- a/recommondation-engine/pycache/app.cpython-313.pyc
+++ b/recommondation-engine/pycache/app.cpython-313.pyc
--- a/recommondation-engine/app.py
+++ b/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,109 +14,47 @@ 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:
-        print(f"Deleted existing recommendations for user {user_id}")
+        for item in Array:
-        cursor.execute(f"DELETE FROM Recommendation WHERE UserID = {user_id}")
+            #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()
        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=0, exclude_list=None):
+        #results = cursor.fetchall()
-    db_con = database()
+        #print(results)
-    cursor = db_con.cursor()
+    except:
-
+        pass
    try:
        if exclude_list and len(exclude_list) > 0:
            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=5):
    db_con = database()
    cursor = db_con.cursor()
    try:
        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 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)
    finally:
        cursor.close()
        db_con.close()
 def has_user_history_or_recommendations(user_id):
    db_con = database()
    cursor = db_con.cursor()
    try:
        cursor.execute(f"SELECT COUNT(*) FROM History WHERE UserID = {user_id}" )
        history_count = cursor.fetchone()[0]
        cursor.execute(f"SELECT COUNT(*) FROM Recommendation WHERE UserID = {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()
 def get_all_products():
    db_con = database()
    cursor = db_con.cursor()
    try:
    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 p.CategoryID = {category_id} THEN 1 ELSE 0 END) AS `Cat_{category_id}`"
+        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;
        """
@@ -124,39 +62,33 @@ def get_all_products():
    results = cursor.fetchall()
    final = []
        product_ids = []
    for row in results:
        text_list = list(row)
-            product_id = text_list.pop(0)
+        text_list.pop(0)
        final.append(text_list)
            product_ids.append(product_id)
    cursor.close()
    db_con.close()
-        return final, product_ids
+    return final
    except Exception as e:
        logging.error(f"Error getting all products: {str(e)}")
        cursor.close()
        db_con.close()
        return [], []
 def get_user_history(user_id):
    db_con = database()
    cursor = db_con.cursor()
    try:
    cursor.execute("SELECT CategoryID FROM Category")
    categories = cursor.fetchall()
    select_clause = "SELECT p.ProductID"
    for category in categories:
-            category_id = category[0]
+        category_id = category[0] # get the uid of the catefory and then append that to the new column
-            select_clause += f", MAX(CASE WHEN p.CategoryID = {category_id} THEN 1 ELSE 0 END) AS `Cat_{category_id}`"
+        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
-            WHERE p.ProductID IN (SELECT ProductID FROM History WHERE UserID = {user_id})
+        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;
        """
@@ -171,71 +103,58 @@ def get_user_history(user_id):
    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):
+def get_recommendations(user_id, top_n=10):
    try:
-        delete_user_recommendations(user_id)
+        # Get all products and user history with their category vectors
-
+        all_products = get_all_products()
        if not has_user_history_or_recommendations(user_id):
            random_recs = get_random_products(top_n)
            recommendation_upload(user_id, random_recs)
            additional_random = get_random_products(5, random_recs)
            recommendation_upload(user_id, additional_random)
            return random_recs + additional_random
        all_product_features, all_product_ids = get_all_products()
        user_history = get_user_history(user_id)
-
+        # if not user_history:
-        if not user_history:
+        #     #Cold start: return popular products
-            popular_recs = get_popular_products(top_n)
+        #     return get_popular_products(top_n)
-            recommendation_upload(user_id, popular_recs)
+        # Calculate similarity between all products and user history
-
+        user_profile = np.mean(user_history, axis=0)  # Average user preferences
-            additional_random = get_random_products(5, popular_recs)
+        similarities = cosine_similarity([user_profile], all_products)
-            recommendation_upload(user_id, additional_random)
+        # 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.
            return popular_recs + additional_random
        user_profile = np.mean(user_history, axis=0)
        similarities = cosine_similarity([user_profile], all_product_features)
        product_indices = similarities[0].argsort()[-top_n:][::-1]
        print("product", product_indices)
-        recommended_product_ids = [all_product_ids[i] for i in product_indices]
+        # Get the recommended product IDs
-        print(recommended_product_ids)
+        recommended_products = [all_products[i][0] for i in product_indices]  # Product IDs
-        recommendation_upload(user_id, recommended_product_ids)
+        # Upload the recommendations to the database
-
+        history_upload(user_id, product_indices)  # Pass the indices directly to history_upload
        additional_random = get_random_products(5, recommended_product_ids)
        recommendation_upload(user_id, additional_random)
        return recommended_product_ids + additional_random
        # Return recommended product IDs
        return recommended_products
    except Exception as e:
        logging.error(f"Recommendation error for user {user_id}: {str(e)}")
-        random_products = get_random_products(top_n + 5)
+        # return get_popular_products(top_n)  # Fallback to popular products
        return random_products
-def recommendation_upload(userID, products):
+def history_upload(userID, anrr):
    db_con = database()
    cursor = db_con.cursor()
    try:
-        for product_id in products:
+        for item in anrr:
-            cursor.execute("INSERT INTO Recommendation (UserID, RecommendedProductID) VALUES (%s, %s)",
+            #Product ID starts form index 1
-                          (userID, product_id))
+            item_value = item + 1
            print(item_value)
            # Use parameterized queries to prevent SQL injection
            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
        cursor.close()
        db_con.close()