+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Failed to fetch products
+
+
+ );
+};
+
+export default Wishlist;
diff --git a/frontend/src/context/WishlistContext.tsx b/frontend/src/context/WishlistContext.tsx
new file mode 100644
index 0000000..dbd0820
--- /dev/null
+++ b/frontend/src/context/WishlistContext.tsx
@@ -0,0 +1,81 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+export interface WishlistEntry {
+ productId: number;
+ savedPrice: number;
+ addedAt: string;
+}
+
+interface WishlistContextType {
+ wishlistEntries: WishlistEntry[];
+ toggleWishlist: (product: { productId: number; price: number; discount?: number }) => void;
+ isWishlisted: (productId: number) => boolean;
+ wishlistCount: number;
+ getPriceDrop: (product: { productId: number; price: number; discount?: number }) => number | null;
+}
+
+const WishlistContext = createContext
+
+
+
+ + My Wishlist +
+ + {wishlistedProducts.length === 0 ? ( ++ Your wishlist is empty — browse products to save items for later +
+ ) : ( +
+ {wishlistedProducts.map(product => {
+ const entry = wishlistEntries.find(e => e.productId === product.productId);
+ if (!entry) return null;
+ const currentPrice = getEffectivePrice(product.price, product.discount);
+ const drop = getPriceDrop(product);
+ const priceDropped = drop !== null && drop < 0;
+
+ return (
+
+ )}
+
+
+ );
+ })}
+
+ 
+
+
+
+
+
+ + {product.name} +
++ {product.description} +
+ +
+
+
+ {product.discount ? (
+ <>
+ ${product.price.toFixed(2)}
+ ${currentPrice.toFixed(2)}
+
+ ) : (
+ ${currentPrice.toFixed(2)}
+ )}
+
+
+ + You saved it at ${entry.savedPrice.toFixed(2)} +
+ + {priceDropped && ( ++ Price dropped! Now ${currentPrice.toFixed(2)} +
+ )} + + {product.stockLevel !== undefined && product.stockLevel <= 5 && ( ++ Low stock: only {product.stockLevel} left! +
+ )} +