+
@@ -180,58 +116,28 @@ const Browse = () => {
- {/* Header */}
-
- Browse Products
-
-
- Find what you need from fellow students
-
+
Browse Products
+
Find what you need from fellow students
- {/* Search + Filter */}
- setSearchQuery(e.target.value)}
- className="pl-10 py-6 text-lg border-2 border-blue-200 focus:border-blue-500 rounded-lg"
- />
+ setSearchQuery(e.target.value)} className="pl-10 py-6 text-lg border-2 border-blue-200 focus:border-blue-500 rounded-lg" />
- {/* Filter Button */}
-
+
-
-
- Filter Products
-
-
+ Filter Products
- {/* Category */}
-
-
- {/* Price Range */}
- {/* Sort by */}
-
-
- {/* Buttons */}
-
-
-
-
-
-
+
+
+
+
- {/* Products Grid */}
- {filteredProducts.length > 0 ? (
- filteredProducts.map((product) => (
-
navigate(`/product/${product.id}`)}
- className="hover:shadow-xl transition-shadow duration-300 border-2 border-blue-100 cursor-pointer"
- >
- 
-
-
- {product.name}
-
-
- Category: {product.category}
-
-
-
-
- {product.price}
-
-
- Seller: {product.seller}
-
-
-
-
-
-
- ))
- ) : (
+ {filteredProducts.length > 0 ? filteredProducts.map((product) => (
+
navigate(`/product/${product.id}`)} className="hover:shadow-xl transition-shadow duration-300 border-2 border-blue-100 cursor-pointer">
+
+
+ {product.name}
+ Category: {product.category}
+
+
+ {product.price}
+ Seller: {product.seller}
+
+
+
+
+
+ )) : (
-
- No products found matching your search.
-
+
No products found matching your search.
)}
- {/* Back to Home Button */}
-
+
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
deleted file mode 100644
index cacdf93..0000000
--- a/frontend/src/pages/Cart.jsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import React, { useContext } from "react";
-import { CartContext } from "../components/CartContext";
-import { Link } from "react-router-dom";
-import { motion, AnimatePresence } from "framer-motion";
-
-const Cart = () => {
- const { state, dispatch } = useContext(CartContext);
-
- // Group items by ID and calculate quantities
- const cartItems = state.cart.reduce((acc, item) => {
- const existingItem = acc.find(i => i.id === item.id);
- if (existingItem) {
- existingItem.quantity += 1;
- existingItem.totalPrice = existingItem.quantity * existingItem.price;
- } else {
- acc.push({ ...item, quantity: 1, totalPrice: item.price });
- }
- return acc;
- }, []);
-
- const subtotal = cartItems.reduce((sum, item) => sum + item.totalPrice, 0);
- const shipping = subtotal > 0 ? 99 : 0;
- const total = subtotal + shipping;
-
- const updateQuantity = (id, newQuantity) => {
- if (newQuantity < 1) return;
-
- // Find all items with this ID
- const items = state.cart.filter(item => item.id === id);
-
- if (newQuantity > items.length) {
- // Add more items
- const itemToAdd = items[0];
- dispatch({ type: "ADD_ITEM", payload: itemToAdd });
- } else if (newQuantity < items.length) {
- // Remove items
- const itemsToRemove = items.length - newQuantity;
- for (let i = 0; i < itemsToRemove; i++) {
- const lastIndex = state.cart.map((item, index) => ({ item, index }))
- .filter(({ item }) => item.id === id)
- .pop().index;
- dispatch({ type: "REMOVE_ITEM", payload: lastIndex });
- }
- }
- };
-
- const removeItemCompletely = (id) => {
- const itemsToRemove = state.cart
- .map((item, index) => ({ item, index }))
- .filter(({ item }) => item.id === id)
- .map(({ index }) => index)
- .reverse(); // Remove from end to avoid index issues
-
- itemsToRemove.forEach(index => {
- dispatch({ type: "REMOVE_ITEM", payload: index });
- });
- };
-
- const clearCart = () => {
- dispatch({ type: "CLEAR_CART" });
- };
-
- return (
-
- {/* Header */}
-
-
- Your Shopping Cart
-
-
- {cartItems.length === 0 ? "Your cart is waiting to be filled! ๐๏ธ" : `You have ${cartItems.length} unique item${cartItems.length > 1 ? 's' : ''} in your cart`}
-
-
-
-
- {/* Cart Items */}
-
- {cartItems.length === 0 ? (
-
- ๐
-
- Your cart is empty
-
-
- Discover amazing products and add them to your cart!
-
-
- Start Shopping
-
-
- ) : (
- <>
- {/* Cart Header */}
-
-
- Cart Items ({state.cart.length})
-
-
-
-
- {/* Cart Items List */}
-
-
- {cartItems.map((item, index) => (
-
-
- {/* Product Image */}
-
-
-
-
- {/* Product Info */}
-
-
- {item.name}
-
-
- โน{item.price.toLocaleString()} each
-
-
- {/* Quantity Controls */}
-
-
-
- {item.quantity}
-
-
-
-
- {/* Total Price for this item */}
-
- โน{(item.totalPrice).toLocaleString()}
-
-
-
-
- {/* Remove Button */}
-
-
-
-
- )}
-
-
- {/* Order Summary - Only show when cart has items */}
- {cartItems.length > 0 && (
-
-
-
- Order Summary
-
-
- {/* Price Breakdown */}
-
-
- Subtotal ({state.cart.length} items)
- โน{subtotal.toLocaleString()}
-
-
- Shipping
- {shipping > 0 ? `โน${shipping}` : "Free"}
-
- {shipping > 0 && subtotal < 999 && (
-
- ๐ Add โน{(999 - subtotal).toLocaleString()} more for free shipping!
-
- )}
-
-
- Total
-
- โน{total.toLocaleString()}
-
-
-
-
-
- {/* Action Buttons */}
-
-
- Proceed to Payment
-
-
- Continue Shopping
-
-
-
- {/* Security Badge */}
-
-
- ๐
- Secure Checkout
-
-
- Your payment information is encrypted and secure
-
-
-
- )}
-
-
- {/* Background Decoration */}
-
-
- );
-};
-
-export default Cart;
\ No newline at end of file
diff --git a/frontend/src/pages/Cart.tsx b/frontend/src/pages/Cart.tsx
new file mode 100644
index 0000000..ba0d5c9
--- /dev/null
+++ b/frontend/src/pages/Cart.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { useCart, CartItem } from "../components/CartContext";
+
+const Cart: React.FC = () => {
+ const { state, updateQuantity, removeItemById, removeItemByIndex, clearCart } = useCart();
+
+ // Group items by ID and calculate quantities
+ const cartItems = state.items.reduce
((acc, item) => {
+ const existing = acc.find(i => i.productId === item.productId);
+ if (existing) {
+ existing.quantity += item.quantity;
+ return acc;
+ } else {
+ acc.push({ ...item });
+ return acc;
+ }
+ }, []);
+
+ const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+ const shipping = subtotal > 0 ? 99 : 0;
+ const total = subtotal + shipping;
+
+ const handleUpdateQuantity = async (item: CartItem, newQuantity: number) => {
+ if (newQuantity < 1) return;
+ // Prefer backend id when available
+ try {
+ if (item._id) {
+ await updateQuantity({ itemId: item._id, quantity: newQuantity });
+ } else {
+ await updateQuantity({ productId: item.productId, quantity: newQuantity });
+ }
+ } catch (err) {
+ // ignore
+ }
+ };
+
+ const handleRemove = async (item: CartItem) => {
+ if (item._id) {
+ await removeItemById(item._id);
+ } else {
+ // remove first matching by index (fallback)
+ const idx = state.items.findIndex(i => i.productId === item.productId);
+ if (idx !== -1) await removeItemByIndex(idx);
+ }
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ Your Shopping Cart
+
+
+ {cartItems.length === 0 ? "Your cart is waiting to be filled! ๐๏ธ" : `You have ${cartItems.length} unique item${cartItems.length > 1 ? 's' : ''} in your cart`}
+
+
+
+
+ {/* Cart Items */}
+
+ {cartItems.length === 0 ? (
+
+ ๐
+
+ Your cart is empty
+
+
+ Discover amazing products and add them to your cart!
+
+
+ Start Shopping
+
+
+ ) : (
+ <>
+ {/* Cart Header */}
+
+
Cart Items ({state.items.length})
+
+
+ {/* Cart Items List */}
+
+
+ {cartItems.map((item) => (
+
+
+ {/* Product Image */}
+
+
+
+ {/* Product Info */}
+
+
{item.name}
+
โน{item.price.toLocaleString()} each
+
+
+
+ {item.quantity}
+
+
+ {/* Total Price for this item */}
+
โน{(item.price * item.quantity).toLocaleString()}
+
+
+ {/* Remove Button */}
+
+
+
+
+ )}
+
+
+ {cartItems.length > 0 && (
+
+
+
Order Summary
+
+
+
+ Subtotal ({state.items.length} items)
+ โน{subtotal.toLocaleString()}
+
+
+ Shipping
+ {shipping > 0 ? `โน${shipping}` : "Free"}
+
+ {shipping > 0 && subtotal < 999 && (
+
๐ Add โน{(999 - subtotal).toLocaleString()} more for free shipping!
+ )}
+
+
+ Total
+ โน{total.toLocaleString()}
+
+
+
+
+
+ Proceed to Payment
+
+
+
Continue Shopping
+
+
+
+ ๐Secure Checkout
+
+
Your payment information is encrypted and secure
+
+
+ )}
+
+
- {/* Header */}
-
-
- Discover Amazing Products
-
-
- Explore our curated collection of premium electronics and accessories
-
-
-
- {/* Products Grid */}
-
-
- {products.map((product, index) => (
-
- {/* Product Image - Fixed with proper height */}
-
-
-
-
-
-
- {product.name}
-
-
- โน{product.price.toLocaleString()}
-
-
-
-
- {product.description}
-
-
-
addToCart(product)}
- className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl mt-auto"
- whileHover={{ scale: 1.02 }}
- whileTap={{ scale: 0.98 }}
- >
- Add to Cart ๐
-
-
- ))}
-
-
-
- {/* Floating Cart Button */}
-
-
- View Cart
- ๐
-
-
-
- {/* Notification */}
-
- {notification && (
-
-
-
-
-
- {notification.name}
-
-
- Added to cart successfully! ๐
-
-
-
- {/* Background Decoration */}
-
-
-
- {/* Header */}
-
-
- Secure Checkout
-
-
- Complete your purchase with secure payment
-
-
-
-
- {/* Payment Methods & Form */}
-
- {/* Payment Method Selection */}
-
-
-
- Select Payment Method
-
-
- {paymentMethods.map((method) => (
-
setPaymentMethod(method.id)}
- className={`p-4 rounded-xl border-2 transition-all duration-200 ${
- paymentMethod === method.id
- ? `border-blue-500 bg-gradient-to-r ${method.color} text-white shadow-lg`
- : "border-gray-200 hover:border-gray-300 bg-white text-gray-700"
- }`}
- whileHover={{ scale: 1.02 }}
- whileTap={{ scale: 0.98 }}
- >
-
- {method.icon}
- {method.name}
-
-
- ))}
-
-
-
- {/* Payment Form */}
-
-
-
- {paymentMethod === "card" && "Card Details"}
- {paymentMethod === "upi" && "UPI Payment"}
- {paymentMethod === "wallet" && "Digital Wallet"}
- {paymentMethod === "netbanking" && "Net Banking"}
-
-
-
-
-
-
- {/* Order Summary */}
-
-
-
- Order Summary
-
-
- {/* Items List */}
-
- {state.cart.map((item, index) => (
-
-
-
-
- {item.name}
-
-
โน{item.price.toLocaleString()}
-
-
- ))}
-
-
- Subtotal ({state.cart.length} items)
- โน{total.toLocaleString()}
-
-
- Shipping
- โน{shipping}
-
-
- Tax (18%)
- โน{tax.toLocaleString()}
-
-
-
- Total Amount
-
- โน{finalTotal.toLocaleString()}
-
-
-
-
-
-
-
- {/* Security Badges */}
-
- {[
- { icon: "๐", text: "256-bit SSL Secure" },
- { icon: "๐ก๏ธ", text: "PCI DSS Compliant" },
- { icon: "๐ฐ", text: "100% Money Back" },
- { icon: "โก", text: "Instant Refund" }
- ].map((badge, index) => (
-
- {badge.icon}
- {badge.text}
-
- ))}
-
-
-
- {/* Background Decoration */}
-
-
+
+
+ Secure Checkout
+ Complete your purchase with secure payment
+
+
+
+
+
+
+
Select Payment Method
+
+ {[
+ { id: "card", name: "Credit/Debit Card", icon: "๐ณ", color: "from-blue-500 to-blue-700" },
+ { id: "upi", name: "UPI Payment", icon: "๐ฑ", color: "from-green-500 to-green-700" },
+ { id: "wallet", name: "Wallet", icon: "๐", color: "from-purple-500 to-purple-700" },
+ { id: "netbanking", name: "Net Banking", icon: "๐ฆ", color: "from-orange-500 to-orange-700" },
+ ].map(method => (
+
+ ))}
+
+
+
+
+
+
{paymentMethod === "card" ? "Card Details" : paymentMethod === "upi" ? "UPI Payment" : paymentMethod === "wallet" ? "Digital Wallet" : "Net Banking"}
+
+
+
+
+
+
+
+ Order Summary
+
+
+ {state.items.map((item, idx) => (
+
+
+
+
{item.name}
+
โน{(item.price * item.quantity).toLocaleString()}
+
+
+ ))}
+
+
Subtotal ({state.items.length} items)โน{total.toLocaleString()}
+
Shippingโน{shipping}
+
Tax (18%)โน{tax.toLocaleString()}
+
Total Amountโน{finalTotal.toLocaleString()}
+
+
+
+
+
Product not found.
;
const [mainImage, setMainImage] = useState(product.images[0]);
+ const [bid, setBid] = useState(product.auction.isAuction ? (product.auction.highestBid || 0) + (product.auction.minIncrement || 1) : 0);
+ const [isBidding, setIsBidding] = useState(false);
- // Local bid state
- const [bid, setBid] = useState(
- product.auction.isAuction ? product.auction.highestBid + product.auction.minIncrement : 0
- );
+ const placeBid = async () => {
+ if (!product.auction.isAuction) {
+ alert("This item is not in auction.");
+ return;
+ }
+ const min = (product.auction.highestBid || 0) + (product.auction.minIncrement || 1);
+ if (bid < min) {
+ alert(`Bid must be at least โน${min}`);
+ return;
+ }
- const placeBid = () => {
- if (bid >= product.auction.highestBid + product.auction.minIncrement) {
- alert(`Bid of โน${bid} placed successfully!`);
- product.auction.highestBid = bid;
- setBid(bid + product.auction.minIncrement);
- } else {
- alert(`Bid must be at least โน${product.auction.highestBid + product.auction.minIncrement}`);
+ setIsBidding(true);
+ try {
+ // Try to hit backend auction endpoint
+ const token = localStorage.getItem("accessToken");
+ const headers: any = { "Content-Type": "application/json" };
+ if (token) headers["Authorization"] = `Bearer ${token}`;
+
+ const res = await fetch(`/api/auctions/${product.id}/bid`, {
+ method: "POST",
+ headers,
+ body: JSON.stringify({ amount: bid }),
+ });
+
+ if (res.ok) {
+ alert(`Bid of โน${bid} placed successfully!`);
+ // optimistically update local product highestBid
+ product.auction.highestBid = bid;
+ setBid((bid || 0) + (product.auction.minIncrement || 1));
+ } else {
+ // backend responded with error
+ const errText = await res.text();
+ alert(`Failed to place bid: ${errText || res.statusText}`);
+ }
+ } catch (err) {
+ // Fallback offline behavior
+ alert(`Could not reach server. Local simulated bid of โน${bid} placed.`);
+ product.auction.highestBid = bid;
+ setBid((bid || 0) + (product.auction.minIncrement || 1));
+ } finally {
+ setIsBidding(false);
}
};
+ const handleBuyNow = async () => {
+ // add to cart via context then navigate to payment
+ await addItem({
+ productId: String(product.id),
+ name: product.title,
+ price: product.price,
+ quantity: 1,
+ image: product.images?.[0],
+ });
+ navigate("/payment");
+ };
+
return (
@@ -119,65 +117,40 @@ export default function ProductDetailsPage() {
- {/* Back Button */}
-