Enforce @ucalgary.ca emails for registration & require login after account creation

UI Color update
fix delete category
2025-04-22 12:18:10 -06:00 · 2025-04-21 22:46:39 -06:00 · 2025-04-21 17:03:09 -06:00 · 2025-04-21 16:53:51 -06:00
21 changed files with 258 additions and 508 deletions
--- a/README.md
+++ b/README.md
@@ -25,12 +25,13 @@
    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
--- a/backend/controllers/category.js
+++ b/backend/controllers/category.js
@@ -7,7 +7,7 @@ exports.getAllCategoriesWithPagination = async (req, res) => {
  try {
    const [data, _] = await db.execute(
      "SELECT * FROM Category C ORDER BY C.CategoryID ASC LIMIT ? OFFSET ?",
-      [limit.toString(), offset.toString()],
+      [limit.toString(), offset.toString()]
    );

    const [result] = await db.execute("SELECT COUNT(*) AS count FROM Category");
@@ -24,7 +24,7 @@ exports.addCategory = async (req, res) => {
  try {
    const [result] = await db.execute(
      "INSERT INTO Category (Name) VALUES (?)",
-      [name],
+      [name]
    );
    res.json({ message: "Adding new category successfully!" });
  } catch (error) {
@@ -34,15 +34,23 @@ exports.addCategory = async (req, res) => {

 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],
+      [id]
    );
+
    res.json({ message: "Delete category successfully!" });
  } catch (error) {
-    res.json({ error: "Cannot remove category from database!" });
+    res.json({
+      error: error.message || "Cannot remove category from database!",
+    });
  }
 };

--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -292,7 +292,8 @@ function App() {

        // Set authenticated user
        setUser(newUser);
-        setIsAuthenticated(true);
+        setIsSignUp(false);
+        //setIsAuthenticated(true);

        // Save to localStorage to persist across refreshes
        sessionStorage.setItem("isAuthenticated", "true");
@@ -338,12 +339,11 @@ 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
@@ -517,7 +517,7 @@ function App() {
  // Loading overlay component
  const LoadingOverlay = () => (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="animate-spin rounded-full h-12 w-12 border-4 border-green-500 border-t-transparent"></div>
+      <div className="animate-spin rounded-full h-12 w-12 border-4 border-emerald-600 border-t-transparent"></div>
    </div>
  );

@@ -584,7 +584,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-green-500 focus:ring-1 focus:ring-green-500"
+                      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"
                      required={isSignUp}
                    />
                  </div>
@@ -603,7 +603,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-green-500 focus:ring-1 focus:ring-green-500"
+                      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"
                      required={isSignUp}
                    />
                  </div>
@@ -621,7 +621,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-green-500 focus:ring-1 focus:ring-green-500"
+                    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"
                    required
                  />
                </div>
@@ -639,7 +639,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-green-500 focus:ring-1 focus:ring-green-500"
+                      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"
                      required={isSignUp}
                    />
                  </div>
@@ -658,7 +658,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-green-500 focus:ring-1 focus:ring-green-500"
+                      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"
                      required={isSignUp}
                    />
                  </div>
@@ -680,7 +680,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-green-500 focus:ring-1 focus:ring-green-500"
+                    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"
                    required
                  />
                </div>
@@ -689,7 +689,7 @@ function App() {
                  <button
                    type="submit"
                    disabled={isLoading}
-                    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"
+                    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"
                  >
                    {isLoading
                      ? "Please wait..."
@@ -716,7 +716,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-green-500 focus:ring-1 focus:ring-green-500"
+                    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"
                    required
                  />
                  <p className="mt-1 text-xs text-gray-500">
@@ -728,7 +728,7 @@ function App() {
                  <button
                    type="submit"
                    disabled={isLoading}
-                    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"
+                    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"
                  >
                    {isLoading ? "Please wait..." : "Verify Code"}
                  </button>
@@ -746,7 +746,7 @@ function App() {
                    type="button"
                    onClick={handleResendCode}
                    disabled={isLoading}
-                    className="text-sm text-green-500 hover:text-green-700"
+                    className="text-sm text-emerald-600 hover:text-emerald-700"
                  >
                    Resend code
                  </button>
@@ -764,7 +764,7 @@ function App() {
                  <button
                    onClick={toggleAuthMode}
                    type="button"
-                    className="text-green-500 font-medium hover:text-green-700"
+                    className="text-emerald-600 font-medium hover:text-emerald-700"
                  >
                    {isSignUp ? "Sign in" : "Sign up"}
                  </button>
--- a/frontend/src/api/admin.js
+++ b/frontend/src/api/admin.js
@@ -7,10 +7,10 @@ const client = axios.create({
 });

 // Users
-export const getUsers = async (page, limit = 10) => {
+export const getUsers = async (page = 1, limit = 10) => {
  try {
    const { data } = await client.get(
-      `/user/getUserWithPagination?page=${page}&limit=${limit}`,
+      `/user/getUserWithPagination?page=${page}&limit=${limit}`
    );
    return { users: data.users, total: data.total };
  } catch (error) {
@@ -37,10 +37,10 @@ export const verifyIsAdmin = async (id) => {
 };

 // Products
-export const getProducts = async (page, limit = 10) => {
+export const getProducts = async (page = 1, limit = 10) => {
  try {
    const { data } = await client.get(
-      `/product/getProductWithPagination?limit=${limit}&page=${page}`,
+      `/product/getProductWithPagination?limit=${limit}&page=${page}`
    );
    return { products: data.products, total: data.totalProd };
  } catch (error) {
@@ -61,7 +61,7 @@ export const removeProduct = async (id) => {
 export const getCategories = async (page, limit = 10) => {
  try {
    const { data } = await client.get(
-      `/category/getCategories?page=${page}&limit=${limit}`,
+      `/category/getCategories?page=${page}&limit=${limit}`
    );
    return { data: data.data, total: data.total };
  } catch (error) {
@@ -81,6 +81,7 @@ export const addCategory = async (name) => {
 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);
@@ -88,10 +89,10 @@ export const removeCategory = async (id) => {
 };

 // Transactions
-export const getTransactions = async (page, limit = 10) => {
+export const getTransactions = async (page = 1, limit = 10) => {
  try {
    const { data } = await client.get(
-      `/transaction/getTransactions?limit=${limit}&page=${page}`,
+      `/transaction/getTransactions?limit=${limit}&page=${page}`
    );
    return { transactions: data.data, total: data.total };
  } catch (error) {
@@ -112,7 +113,7 @@ export const removeTransaction = async (id) => {
 const handleError = (error) => {
  const { response } = error;
  if (response?.data) return response.data;
-  return { error: error.message || error };
+  return alert(error.message || error);
 };

 // Optional: export client if you want to use it elsewhere
--- a/frontend/src/components/CategoryForm.jsx
+++ b/frontend/src/components/CategoryForm.jsx
@@ -22,7 +22,7 @@ export default function CategoryForm({ visible, onAddCategory }) {
          .classList.remove("opacity-0", "bg-red-200", "text-red-500");
        document
          .getElementById("noti")
-          .classList.add("bg-green-200", "text-green-800");
+          .classList.add("bg-emerald-200", "text-emerald-800");
        document.getElementById("noti").innerHTML = `${message.message}`;
        setCategory("");
        onAddCategory();
@@ -42,18 +42,18 @@ export default function CategoryForm({ visible, onAddCategory }) {

  return (
    <form onSubmit={handleSubmit} action="" className="flex p-2 items-center">
-      <label htmlFor="category" className="text-green-700">
+      <label htmlFor="category" className="text-emerald-700">
        Category:
      </label>
      <input
        type="text"
-        className="border border-green-700 ml-2 rounded-sm focus:bg-green-100 text-green-900"
+        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-green-700">
+      <button type="submit" className="text-2xl pl-1 text-emerald-700">
        <MdAddBox className="text-3xl" />
      </button>
      <p
--- a/frontend/src/components/DashboardNav.jsx
+++ b/frontend/src/components/DashboardNav.jsx
@@ -3,6 +3,7 @@ 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"
--- 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-500 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-600 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
@@ -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-600 font-bold text-xl">
+              <span className="hidden md:block text-emerald-700 font-bold text-xl">
                Campus Plug
              </span>
            </Link>
--- a/frontend/src/components/Pagination.jsx
+++ b/frontend/src/components/Pagination.jsx
@@ -32,7 +32,7 @@ export default function Pagination({ pageNum, onChange }) {
              onClick={() => {
                handleTogglePage("previous");
              }}
-              className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white"
+              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
@@ -56,9 +56,9 @@ export default function Pagination({ pageNum, onChange }) {
            <li key={page}>
              <NavLink
                className={`${
-                  currentPage == page ? "bg-green-600" : "bg-green-700"
+                  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-green-600 hover:text-white"`}
+                  " 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);
                }}
@@ -72,7 +72,7 @@ export default function Pagination({ pageNum, onChange }) {
              onClick={() => {
                handleTogglePage("next");
              }}
-              className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-green-700 border border-gray-300 hover:bg-green-600 hover:text-white"
+              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
--- a/frontend/src/components/UserDropdown.jsx
+++ b/frontend/src/components/UserDropdown.jsx
@@ -55,7 +55,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-600" />
+          <User className="h-5 w-5 text-emerald-700" />
        </div>
      </button>

--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import {
  getUsers,
  removeUser,
@@ -11,16 +11,14 @@ import {
 } from "../api/admin";
 import { MdDelete } from "react-icons/md";
 import { IoAddCircleSharp } from "react-icons/io5";
-import { FaHome } from "react-icons/fa";
 import Pagination from "../components/Pagination";
 import CategoryForm from "../components/CategoryForm";
-import DashboardNav from "../components/DashboardNav";
 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-green-500 border-dashed rounded-full animate-spin"></div>
+    <div className="w-12 h-12 border-4 border-emerald-600 border-dashed rounded-full animate-spin"></div>
  </div>
 );

@@ -64,18 +62,26 @@ const Dashboard = ({
  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) => {
-      setLoading(true);
      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) => {
-          console.error("Error fetching data:", error);
          setItems([]);
          setTotal(0);
        })
@@ -110,7 +116,7 @@ const Dashboard = ({
    <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-green-600">{total}</span>
+          Total: <span className="text-emerald-700">{total}</span>
        </h2>
        {headerAction && <div>{headerAction}</div>}
      </div>
@@ -118,7 +124,7 @@ const Dashboard = ({
      {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-green-600">
+            <thead className="bg-emerald-700">
              <tr>
                {columns.map((col) => (
                  <th
@@ -290,7 +296,7 @@ export default function AdminDashboardTabs() {
            headerAction={
              <button
                onClick={toggleForm}
-                className="flex items-center bg-green-500 rounded-md px-4 py-2 text-white text-sm hover:bg-green-600 transition-colors font-medium shadow"
+                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
@@ -312,18 +318,14 @@ export default function AdminDashboardTabs() {
  return (
    <div className="w-full min-h-screen bg-gray-50">
      <div className="w-full px-4 py-8">
-        <div className="mb-8 flex justify-between items-center w-full">
-          <h1 className="text-2xl md:text-3xl font-bold text-gray-800">
-            Admin Dashboard
-          </h1>
-        </div>
-
        {/* Mobile Tabs */}
        <div className="md:hidden w-full mb-4">
          <select
-            className="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 p-2"
+            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))}
+            onChange={(e) => {
+              setActiveTab(parseInt(e.target.value));
+            }}
          >
            {tabs.map((tab, index) => (
              <option key={tab.key} value={index}>
@@ -340,10 +342,12 @@ export default function AdminDashboardTabs() {
              key={tab.key}
              className={`px-6 py-3 font-medium text-sm rounded-t-lg transition-colors ${
                index === activeTab
-                  ? "text-green-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
-                  : "text-gray-600 hover:text-green-700 bg-gray-50"
+                  ? "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)}
+              onClick={() => {
+                setActiveTab(index);
+              }}
            >
              <span className="inline-block mr-2">{tab.icon}</span>
              {tab.title}
--- 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-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+            className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
          >
            Browse Listings
          </Link>
@@ -161,7 +161,7 @@ const Favorites = () => {
                    </button>
                  </div>

-                  <p className="text-emerald-600 font-bold mt-1">
+                  <p className="text-emerald-700 font-bold mt-1">
                    ${product.price.toFixed(2)}
                  </p>

@@ -200,56 +200,8 @@ const Favorites = () => {
      )}

      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <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 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/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -219,7 +219,7 @@ const Home = () => {
  // Loading indicator component
  const LoadingSection = () => (
    <div className="flex justify-center items-center h-48">
-      <Loader className="animate-spin text-emerald-600 h-8 w-8" />
+      <Loader className="animate-spin text-emerald-700 h-8 w-8" />
    </div>
  );

@@ -243,7 +243,7 @@ const Home = () => {
            e.preventDefault();
            toggleFavorite(product.id);
          }}
-          className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
+          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>
@@ -253,7 +253,7 @@ const Home = () => {
        <h3 className="text-lg font-medium text-gray-800 leading-tight">
          {product.title}
        </h3>
-        <span className="font-semibold text-emerald-600 block mt-1">
+        <span className="font-semibold text-emerald-700 block mt-1">
          ${product.price}
        </span>

@@ -353,7 +353,7 @@ const Home = () => {
            </p>
            <button
              onClick={handleSelling}
-              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
+              className="bg-emerald-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"
            >
              Post an Item
            </button>
@@ -405,59 +405,9 @@ const Home = () => {
          </ScrollableProductList>
        )}
      </div>
-
-      {/* Footer */}
      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <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 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/ProductDetail.jsx
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -247,7 +247,7 @@ const ProductDetail = () => {
  if (loading.product) {
    return (
      <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-600"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-700"></div>
      </div>
    );
  }
@@ -261,7 +261,7 @@ const ProductDetail = () => {
          <p className="text-gray-600">{error.product}</p>
          <Link
            to="/"
-            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+            className="mt-4 inline-block bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
          >
            Back to Listings
          </Link>
@@ -278,7 +278,7 @@ const ProductDetail = () => {
          <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
          <Link
            to="/"
-            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2  hover:bg-emerald-700"
+            className="mt-4 inline-block bg-emerald-700 text-white px-4 py-2  hover:bg-emerald-700"
          >
            Back to Listings
          </Link>
@@ -356,7 +356,7 @@ const ProductDetail = () => {
              {product.images.map((image, index) => (
                <div
                  key={index}
-                  className={`bg-white border ${currentImage === index ? "border-emerald-600 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
+                  className={`bg-white border ${currentImage === index ? "border-emerald-700 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
                  onClick={() => selectImage(index)}
                >
                  <img
@@ -386,7 +386,7 @@ const ProductDetail = () => {
                  e.preventDefault();
                  toggleFavorite(product.ProductID);
                }}
-                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
+                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-700 transition shadow-sm"
              >
                <Bookmark className="text-white w-5 h-5" />
              </button>
@@ -455,7 +455,7 @@ const ProductDetail = () => {
                    alert(`Error: ${error.message}`);
                  }
                }}
-                className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
+                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 +467,7 @@ const ProductDetail = () => {
                      href={`tel:${product.SellerPhone}`}
                      className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
                    >
-                      <Phone className="h-5 w-5 text-emerald-600" />
+                      <Phone className="h-5 w-5 text-emerald-700" />
                      <span>Call Seller</span>
                    </a>
                  )}
@@ -477,7 +477,7 @@ const ProductDetail = () => {
                      href={`mailto:${product.SellerEmail}`}
                      className="flex items-center gap-2 p-3 hover:bg-gray-50"
                    >
-                      <Mail className="h-5 w-5 text-emerald-600" />
+                      <Mail className="h-5 w-5 text-emerald-700" />
                      <span>Email Seller</span>
                    </a>
                  )}
@@ -498,7 +498,10 @@ const ProductDetail = () => {
                    {product.SellerName || "Unknown Seller"}
                  </h3>
                  <p className="text-sm text-gray-500">
-                    Member since {product.SellerJoinDate || "N/A"}
+                    Product listed since{" "}
+                    {product.Date
+                      ? new Date(product.Date).toLocaleDateString()
+                      : "N/A"}
                  </p>
                </div>
              </div>
@@ -514,7 +517,7 @@ const ProductDetail = () => {
        <div className="bg-white border border-gray-200 p-6">
          {loading.reviews ? (
            <div className="flex justify-center py-8">
-              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-600"></div>
+              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-700"></div>
            </div>
          ) : error.reviews ? (
            <div className="text-red-500 mb-4">
@@ -561,7 +564,7 @@ const ProductDetail = () => {
        <div className="mt-4">
          <button
            onClick={() => setShowReviewForm(true)}
-            className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
+            className="bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-2 px-4"
          >
            Write a Review
          </button>
@@ -619,7 +622,7 @@ const ProductDetail = () => {
                    id="comment"
                    value={reviewForm.comment}
                    onChange={handleReviewInputChange}
-                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-600"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-700"
                    rows="4"
                    required
                  ></textarea>
@@ -635,7 +638,7 @@ const ProductDetail = () => {
                  </button>
                  <button
                    type="submit"
-                    className="px-4 py-2 bg-emerald-600 text-white  hover:bg-emerald-700"
+                    className="px-4 py-2 bg-emerald-700 text-white  hover:bg-emerald-700"
                    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-500 text-white p-3 hover:bg-emerald-600 transition-colors"
+                className="w-full bg-emerald-600 text-white p-3 hover:bg-emerald-700 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-600 font-semibold">
+                  <p className="text-emerald-700 font-semibold">
                    ${Number(listing.price).toFixed(2)}
                  </p>
                </div>
@@ -196,58 +196,9 @@ const SearchPage = () => {
          </div>
        </div>
      </div>
-      {/* Footer - Added here */}
      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <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 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/Selling.jsx
+++ b/frontend/src/pages/Selling.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useLocation, Link } from "react-router-dom";
-import { X, ChevronLeft, Plus, Trash2 } from "lucide-react";
+import { X, ChevronLeft, Trash2 } from "lucide-react";

 const Selling = () => {
  const [products, setProducts] = useState([]);
@@ -8,14 +8,13 @@ const Selling = () => {
  const storedUser = JSON.parse(sessionStorage.getItem("user"));
  const [categories, setCategories] = useState([]);
  const [categoryMapping, setCategoryMapping] = useState({});
-  const [selectedCategory, setSelectedCategory] = useState("");
  const [originalProduct, setOriginalProduct] = useState(null);

  const [editingProduct, setEditingProduct] = useState({
    name: "",
    price: "",
    description: "",
-    categories: [],
+    category: "",
    images: [],
  });

@@ -59,7 +58,7 @@ const Selling = () => {
    fetchCategories();
  }, []);

-  // Simulate fetching products from API/database on component mount
+  // Fetch products from API/database on component mount
  useEffect(() => {
    const fetchProducts = async () => {
      try {
@@ -89,61 +88,87 @@ const Selling = () => {
    };

    fetchProducts();
-  }, []); // Add userId to dependency array if it might change
+  });

-  // When editing a product, save the original product properly
  const handleEditProduct = (product) => {
-    // Save the original product completely
    setOriginalProduct(product);

-    // Convert category ID to category name if needed
    const categoryName = getCategoryNameById(product.CategoryID);

    setEditingProduct({
      ...product,
-      categories: categoryName ? [categoryName] : [],
-      images: product.images || [], // Ensure images array exists
+      category: categoryName || "", // Single category string
+      images: product.images || [],
    });

    setShowForm(true);
  };

-  // Then update the handleSaveProduct function to properly merge values
+  // 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.categories || []).length) {
-      alert("Please select at least one category");
+    if (!editingProduct.category) {
+      alert("Please select a category");
      return;
    }

    try {
-      const imagePaths = [];
+      let imagePaths = [];

-      // Handle images properly
+      // Handle image uploads and get their paths
      if (editingProduct.images && editingProduct.images.length > 0) {
-        // If there are new images uploaded (File objects)
-        const newImages = editingProduct.images.filter(
-          (img) => img instanceof File,
-        );
-        newImages.forEach((file) => {
-          const simulatedPath = `/public/uploads/${file.name}`;
-          imagePaths.push(simulatedPath);
-        });
-
-        // Also include any existing image URLs that are strings, not File objects
-        const existingImages = editingProduct.images.filter(
-          (img) => typeof img === "string",
-        );
-        if (existingImages.length > 0) {
-          imagePaths.push(...existingImages);
-        }
+        imagePaths = await uploadImages(editingProduct.images);
      } else if (originalProduct?.image_url) {
        // If no new images but there was an original image URL
-        imagePaths.push(originalProduct.image_url);
+        imagePaths = [originalProduct.image_url];
      }

-      const categoryName = (editingProduct.categories || [])[0];
      const categoryID =
-        categoryMapping[categoryName] || originalProduct?.CategoryID || 1;
+        categoryMapping[editingProduct.category] ||
+        originalProduct?.CategoryID ||
+        1;

      // Create payload with proper fallback to original values
      const payload = {
@@ -166,12 +191,7 @@ const Selling = () => {
          originalProduct?.Description ||
          "",
        category: categoryID,
-        images:
-          imagePaths.length > 0
-            ? imagePaths
-            : originalProduct?.image_url
-              ? [originalProduct.image_url]
-              : [],
+        images: imagePaths.length > 0 ? imagePaths : [],
      };

      console.log("Sending payload:", payload);
@@ -206,7 +226,7 @@ const Selling = () => {
        name: "",
        price: "",
        description: "",
-        categories: [],
+        category: "",
        images: [],
      });

@@ -243,7 +263,7 @@ const Selling = () => {
        throw new Error("Network response was not ok");
      }
    } catch (error) {
-      console.error("Error fetching products:", error);
+      console.error("Error deleting product:", error);
      // You might want to set an error state here
    }
  };
@@ -267,53 +287,18 @@ const Selling = () => {
      name: "",
      price: "",
      description: "",
-      categories: [],
+      category: "",
      images: [],
    });
    setShowForm(true);
  };

-  const addCategory = () => {
-    if (
-      selectedCategory &&
-      !(editingProduct.categories || []).includes(selectedCategory)
-    ) {
-      setEditingProduct((prev) => ({
-        ...prev,
-        categories: [...(prev.categories || []), selectedCategory],
-      }));
-      setSelectedCategory("");
-    }
-  };
-
-  const removeCategory = (categoryToRemove) => {
-    setEditingProduct((prev) => ({
-      ...prev,
-      categories: (prev.categories || []).filter(
-        (cat) => cat !== categoryToRemove,
-      ),
-    }));
-  };
-
-  const markAsSold = async () => {
-    // This would call an API to move the product to the transaction table
-    try {
-      // API call would go here
-      console.log(
-        "Moving product to transaction table:",
-        editingProduct.ProductID,
-      );
-
-      // Toggle the sold status in the UI
-      setEditingProduct((prev) => ({
-        ...prev,
-        isSold: !prev.isSold,
-      }));
-
-      // You would add your API call here to update the backend
-    } catch (error) {
-      console.error("Error marking product as sold:", error);
-    }
+  // Handle category change
+  const handleCategoryChange = (e) => {
+    setEditingProduct({
+      ...editingProduct,
+      category: e.target.value,
+    });
  };

  return (
@@ -323,7 +308,7 @@ const Selling = () => {
        {!showForm && (
          <button
            onClick={handleAddProduct}
-            className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+            className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
          >
            + Add New Product
          </button>
@@ -335,7 +320,7 @@ const Selling = () => {
          {/* Back Button */}
          <button
            onClick={() => setShowForm(false)}
-            className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1"
+            className="mb-4 text-emerald-700 hover:text-emerald-800 flex items-center gap-1"
          >
            <ChevronLeft size={16} />
            <span>Back to Listings</span>
@@ -363,7 +348,7 @@ const Selling = () => {
                    name: e.target.value,
                  })
                }
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
              />
            </div>

@@ -382,78 +367,33 @@ const Selling = () => {
                    price: e.target.value,
                  })
                }
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-600 focus:outline-none"
              />
            </div>

-            {/* Sold Status */}
-            <div className="md:col-span-2">
-              <div className="flex items-center mt-2">
-                {editingProduct.isSold && (
-                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
-                    Sold
-                  </span>
-                )}
-              </div>
-            </div>
-
-            {/* Categories */}
+            {/* Category - Single Selection Dropdown */}
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Categories
+                Category
              </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"
+                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
-                    .filter(
-                      (cat) => !(editingProduct.categories || []).includes(cat),
-                    )
-                    .map((category, index) => (
+                {categories.map((category, index) => (
                  <option key={index} value={category}>
                    {category}
                  </option>
                ))}
              </select>
-                <button
-                  type="button"
-                  onClick={addCategory}
-                  disabled={!selectedCategory}
-                  className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
-                >
-                  <Plus size={16} />
-                  <span>Add</span>
-                </button>
-              </div>
-
-              {/* Selected Categories */}
-              {(editingProduct.categories || []).length > 0 ? (
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {(editingProduct.categories || []).map((category, index) => (
-                    <span
-                      key={index}
-                      className="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-800"
-                    >
-                      {category}
-                      <button
-                        type="button"
-                        onClick={() => removeCategory(category)}
-                        className="ml-1 text-emerald-600 hover:text-emerald-800"
-                      >
-                        <X size={14} />
-                      </button>
-                    </span>
-                  ))}
-                </div>
-              ) : (
+              {!editingProduct.category && (
                <p className="text-xs text-gray-500 mt-1">
-                  Please select at least one category
+                  Please select a category
                </p>
              )}
            </div>
@@ -475,7 +415,7 @@ const Selling = () => {
                  })
                }
                rows="4"
-                className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
+                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>
@@ -504,8 +444,8 @@ const Selling = () => {
                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 className="text-emerald-700 font-medium">
+                  Click to upload images (will be saved to /public/uploads)
                </span>
              </label>

@@ -535,7 +475,11 @@ const Selling = () => {
                        className="relative w-20 h-20 border border-gray-200 overflow-hidden"
                      >
                        <img
-                          src={URL.createObjectURL(img)}
+                          src={
+                            typeof img === "string"
+                              ? img
+                              : URL.createObjectURL(img)
+                          }
                          alt={`Product ${idx + 1}`}
                          className="w-full h-full object-cover"
                        />
@@ -559,7 +503,8 @@ const Selling = () => {
              )}

              {/* Show current image if editing */}
-              {editingProduct.image_url && (
+              {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">
@@ -583,22 +528,9 @@ const Selling = () => {
              Cancel
            </button>

-            {editingProduct.ProductID && (
-              <button
-                onClick={markAsSold}
-                className={`px-4 py-2 rounded-md transition-colors ${
-                  editingProduct.isSold
-                    ? "bg-green-600 text-white hover:bg-green-700"
-                    : "bg-red-600 text-white hover:bg-red-700"
-                }`}
-              >
-                Mark as {editingProduct.isSold ? "Available" : "Sold"}
-              </button>
-            )}
-
            <button
              onClick={handleSaveProduct}
-              className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
+              className="bg-emerald-700 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
            >
              {editingProduct.ProductID ? "Update Product" : "Add Product"}
            </button>
@@ -613,7 +545,7 @@ const Selling = () => {
              </p>
              <button
                onClick={handleAddProduct}
-                className="bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
+                className="bg-emerald-700 text-white px-4 py-2 hover:bg-emerald-700"
              >
                Create Your First Listing
              </button>
@@ -645,7 +577,7 @@ const Selling = () => {
                        </h3>
                      </div>

-                      <p className="text-emerald-600 font-bold mt-1">
+                      <p className="text-emerald-700 font-bold mt-1">
                        ${product.Price}
                      </p>

@@ -679,7 +611,7 @@ const Selling = () => {
                            e.preventDefault();
                            handleEditProduct(product);
                          }}
-                          className="text-emerald-600 hover:text-emerald-800 font-medium"
+                          className="text-emerald-700 hover:text-emerald-800 font-medium"
                        >
                          Edit
                        </button>
@@ -692,6 +624,11 @@ const Selling = () => {
          )}
        </>
      )}
+      <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-500"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600"></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-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                  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-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                  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-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                />
              </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-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                  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-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                />
              </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-500"
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-600"
                />
              </div>
            </div>

            <button
              type="submit"
-              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
            >
              Update Profile
            </button>
@@ -395,6 +395,11 @@ 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
@@ -14,7 +14,7 @@ const Transactions = () => {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ userID: 1 }), // replace with actual userID
-          }
+          },
        );
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const { transactions: txData } = await response.json();
@@ -29,7 +29,7 @@ const Transactions = () => {
            image: tx.Image_URL || "/default-image.jpg",
            date: tx.Date,
            status: tx.PaymentStatus,
-          }))
+          })),
        );
      } catch (error) {
        console.error("Failed to fetch transactions:", error);
@@ -47,7 +47,7 @@ const Transactions = () => {
          method: "DELETE",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ transactionID: id }),
-        }
+        },
      );
      const data = await res.json();
      if (data.success) {
@@ -86,7 +86,7 @@ const Transactions = () => {
          </p>
          <Link
            to="/"
-            className="inline-block bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+            className="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
          >
            Browse Listings
          </Link>
@@ -127,7 +127,7 @@ const Transactions = () => {
                      {tx.name}
                    </h3>
                    {tx.price !== null && (
-                      <p className="text-emerald-600 font-bold mt-1">
+                      <p className="text-emerald-700 font-bold mt-1">
                        ${tx.price.toFixed(2)}
                      </p>
                    )}
@@ -152,58 +152,8 @@ const Transactions = () => {
      )}

      <footer className="bg-gray-800 text-white py-6 mt-12">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <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 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/mysql-code/Init-Data.sql
+++ b/mysql-code/Init-Data.sql
@@ -44,7 +44,7 @@ VALUES
    (
        1,
        'John Doe',
-        'john.doe@example.com',
+        'john.doe@ucalgary.ca',
        'U123456',
        'hashedpassword1',
        '555-123-4567',
@@ -53,7 +53,7 @@ VALUES
    (
        2,
        'Jane Smith',
-        'jane.smith@example.com',
+        'jane.smith@ucalgary.ca',
        'U234567',
        'hashedpassword2',
        '555-234-5678',
@@ -72,6 +72,7 @@ VALUES
 INSERT INTO
    Category (Name)
 VALUES
+    ('Other'),
    ('Textbooks'),
    ('Electronics'),
    ('Furniture'),
@@ -100,9 +101,7 @@ VALUES
    ('Winter Clothing'),
    ('Photography Equipment'),
    ('Event Tickets'),
-    ('Software Licenses'),
-    ('Transportation (Car Pool)'),
-    ('Other');
+    ('Software Licenses');

 -- Insert Products
 INSERT INTO
@@ -454,4 +453,5 @@ 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
@@ -28,19 +28,6 @@ CREATE TABLE Category (
    Name VARCHAR(255) NOT NULL
 );

-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),
-    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID)
-);
-
 -- Product Entity
 CREATE TABLE Product (
    ProductID INT AUTO_INCREMENT PRIMARY KEY,
@@ -51,7 +38,7 @@ CREATE TABLE Product (
    Description TEXT,
    CategoryID INT,
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE SET NULL,
+    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
    FOREIGN KEY (CategoryID) REFERENCES Category (CategoryID)
 );

@@ -73,7 +60,7 @@ CREATE TABLE Review (
        AND Rating <= 5
    ),
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE SET NULL,
+    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
 );

@@ -85,7 +72,7 @@ CREATE TABLE Transaction (
    Date DATETIME DEFAULT CURRENT_TIMESTAMP,
    PaymentStatus VARCHAR(50),
    FOREIGN KEY (UserID) REFERENCES User (UserID) ON DELETE CASCADE,
-    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE SET NULL
+    FOREIGN KEY (ProductID) REFERENCES Product (ProductID) ON DELETE CASCADE
 );

 -- Recommendation Entity (Many-to-One with User, Many-to-One with Product)
--- a/recommondation-engine/pycache/app.cpython-313.pyc
+++ b/recommondation-engine/pycache/app.cpython-313.pyc
Author	SHA1	Message	Date
Mann Patel	bbddc8566a	Enforce @ucalgary.ca emails for registration & require login after account creation	2025-04-22 12:18:10 -06:00
Mann Patel	4ba6dfa7be	UI Color update	2025-04-21 22:46:39 -06:00
estherdev03	0a1db869f7	fix delete category	2025-04-21 17:03:09 -06:00
estherdev03	a8745ed94c	Fix admin	2025-04-21 16:53:51 -06:00