From dc3ac1ef622a6e7446721401c818cdc63a7046fe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 6 May 2026 14:47:13 +0000
Subject: [PATCH 1/2] Initial plan


From 0fb78c0f7193c8661079800d7c16d97c6b01d240 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 6 May 2026 14:51:46 +0000
Subject: [PATCH 2/2] feat: add wishlist with price-drop alerts (Variation 3)

Agent-Logs-Url: https://github.com/thomasiverson/GitHubCopilot_Customized/sessions/cb969598-68cd-4ed3-8b23-0236eeb0cbf4

Co-authored-by: thomasiverson <12767513+thomasiverson@users.noreply.github.com>
---
 frontend/src/App.tsx                          |   7 +-
 frontend/src/components/Navigation.tsx        |  12 ++
 .../components/entity/product/Products.tsx    |  29 ++++
 frontend/src/components/wishlist/Wishlist.tsx | 156 ++++++++++++++++++
 frontend/src/context/WishlistContext.tsx      |  81 +++++++++
 5 files changed, 284 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/wishlist/Wishlist.tsx
 create mode 100644 frontend/src/context/WishlistContext.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d0b02da..47fd94e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,8 @@ import { AuthProvider } from './context/AuthContext';
 import { ThemeProvider } from './context/ThemeContext';
 import AdminProducts from './components/admin/AdminProducts';
 import { useTheme } from './context/ThemeContext';
+import { WishlistProvider } from './context/WishlistContext';
+import Wishlist from './components/wishlist/Wishlist';
 
 // Wrapper component to apply theme classes
 function ThemedApp() {
@@ -25,6 +27,7 @@ function ThemedApp() {
             <Route path="/products" element={<Products />} />
             <Route path="/login" element={<Login />} />
             <Route path="/admin/products" element={<AdminProducts />} />
+            <Route path="/wishlist" element={<Wishlist />} />
           </Routes>
         </main>
         <Footer />
@@ -37,7 +40,9 @@ function App() {
   return (
     <AuthProvider>
       <ThemeProvider>
-        <ThemedApp />
+        <WishlistProvider>
+          <ThemedApp />
+        </WishlistProvider>
       </ThemeProvider>
     </AuthProvider>
   );
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index d7b393b..023dc7a 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -1,11 +1,13 @@
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { useTheme } from '../context/ThemeContext';
+import { useWishlist } from '../context/WishlistContext';
 import { useState } from 'react';
 
 export default function Navigation() {
   const { isLoggedIn, isAdmin, logout } = useAuth();
   const { darkMode, toggleTheme } = useTheme();
+  const { wishlistCount } = useWishlist();
   const [adminMenuOpen, setAdminMenuOpen] = useState(false);
 
   return (
@@ -30,6 +32,16 @@ export default function Navigation() {
               <Link to="/" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>Home</Link>
               <Link to="/products" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>Products</Link>
               <Link to="/about" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>About us</Link>
+              {isLoggedIn && (
+                <Link to="/wishlist" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center`}>
+                  Wishlist
+                  {wishlistCount > 0 && (
+                    <span className="ml-1 bg-primary text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
+                      {wishlistCount}
+                    </span>
+                  )}
+                </Link>
+              )}
               {isAdmin && (
                 <div className="relative">
                   <button 
diff --git a/frontend/src/components/entity/product/Products.tsx b/frontend/src/components/entity/product/Products.tsx
index af2319e..474a33e 100644
--- a/frontend/src/components/entity/product/Products.tsx
+++ b/frontend/src/components/entity/product/Products.tsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { useQuery } from 'react-query';
 import { api } from '../../../api/config';
 import { useTheme } from '../../../context/ThemeContext';
+import { useWishlist } from '../../../context/WishlistContext';
 
 interface Product {
   productId: number;
@@ -14,6 +15,7 @@ interface Product {
   unit: string;
   supplierId: number;
   discount?: number;
+  stockLevel?: number;
 }
 
 const fetchProducts = async (): Promise<Product[]> => {
@@ -28,6 +30,7 @@ export default function Products() {
   const [showModal, setShowModal] = useState(false);
   const { data: products, isLoading, error } = useQuery('products', fetchProducts);
   const { darkMode } = useTheme();
+  const { toggleWishlist, isWishlisted, getPriceDrop } = useWishlist();
 
   const filteredProducts = products?.filter(product => 
     product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -125,6 +128,32 @@ export default function Products() {
                       {Math.round(product.discount * 100)}% OFF
                     </div>
                   )}
+                  <button
+                    onClick={e => { e.stopPropagation(); toggleWishlist(product); }}
+                    className="absolute top-2 right-2 p-1 rounded-full bg-white bg-opacity-80 hover:bg-opacity-100 transition-all"
+                    aria-label={isWishlisted(product.productId) ? `Remove ${product.name} from wishlist` : `Add ${product.name} to wishlist`}
+                  >
+                    {isWishlisted(product.productId) ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-500" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+                      </svg>
+                    ) : (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                      </svg>
+                    )}
+                  </button>
+                  {(() => {
+                    const drop = getPriceDrop(product);
+                    if (drop !== null && drop < 0) {
+                      return (
+                        <div className="absolute bottom-2 left-2 right-2 bg-yellow-400 text-yellow-900 text-xs font-semibold px-2 py-1 rounded shadow text-center">
+                          Price Drop! Save ${Math.abs(drop).toFixed(2)}
+                        </div>
+                      );
+                    }
+                    return null;
+                  })()}
                 </div>
                 
                 <div className="p-4 flex flex-col flex-grow">
diff --git a/frontend/src/components/wishlist/Wishlist.tsx b/frontend/src/components/wishlist/Wishlist.tsx
new file mode 100644
index 0000000..0676579
--- /dev/null
+++ b/frontend/src/components/wishlist/Wishlist.tsx
@@ -0,0 +1,156 @@
+import axios from 'axios';
+import { useQuery } from 'react-query';
+import { api } from '../../api/config';
+import { useTheme } from '../../context/ThemeContext';
+import { useWishlist } from '../../context/WishlistContext';
+
+interface Product {
+  productId: number;
+  name: string;
+  description: string;
+  price: number;
+  imgName: string;
+  sku: string;
+  unit: string;
+  supplierId: number;
+  discount?: number;
+  stockLevel?: number;
+}
+
+const fetchProducts = async (): Promise<Product[]> => {
+  const { data } = await axios.get(`${api.baseURL}${api.endpoints.products}`);
+  return data;
+};
+
+const getEffectivePrice = (price: number, discount?: number): number =>
+  discount ? price * (1 - discount) : price;
+
+const Wishlist = () => {
+  const { darkMode } = useTheme();
+  const { wishlistEntries, toggleWishlist, isWishlisted, getPriceDrop } = useWishlist();
+  const { data: products, isLoading, error } = useQuery('products', fetchProducts);
+
+  const wishlistedProducts = products?.filter(p =>
+    wishlistEntries.some(e => e.productId === p.productId)
+  ) ?? [];
+
+  if (isLoading) {
+    return (
+      <div className={`min-h-screen ${darkMode ? 'bg-dark' : 'bg-gray-100'} pt-20 px-4 transition-colors duration-300`}>
+        <div className="max-w-7xl mx-auto">
+          <div className="flex justify-center items-center h-64">
+            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-primary"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`min-h-screen ${darkMode ? 'bg-dark' : 'bg-gray-100'} pt-20 px-4 transition-colors duration-300`}>
+        <div className="max-w-7xl mx-auto">
+          <div className="text-red-500 text-center">Failed to fetch products</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`min-h-screen ${darkMode ? 'bg-dark' : 'bg-gray-100'} pt-20 pb-16 px-4 transition-colors duration-300`}>
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col space-y-6">
+          <h1 className={`text-3xl font-bold ${darkMode ? 'text-light' : 'text-gray-800'} transition-colors duration-300`}>
+            My Wishlist
+          </h1>
+
+          {wishlistedProducts.length === 0 ? (
+            <p className={`text-center py-16 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+              Your wishlist is empty — browse products to save items for later
+            </p>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+              {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 (
+                  <div
+                    key={product.productId}
+                    className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg overflow-hidden shadow-lg flex flex-col transition-colors duration-300`}
+                  >
+                    <div className={`relative h-56 ${darkMode ? 'bg-gradient-to-t from-gray-700 to-gray-800' : 'bg-gradient-to-t from-gray-100 to-white'} transition-colors duration-300`}>
+                      <img
+                        src={`/${product.imgName}`}
+                        alt={product.name}
+                        className="w-full h-full object-contain p-2"
+                      />
+                      <button
+                        onClick={() => toggleWishlist(product)}
+                        className="absolute top-2 right-2 p-1 rounded-full bg-white bg-opacity-80 hover:bg-opacity-100 transition-all"
+                        aria-label={isWishlisted(product.productId) ? `Remove ${product.name} from wishlist` : `Add ${product.name} to wishlist`}
+                      >
+                        {isWishlisted(product.productId) ? (
+                          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-500" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+                          </svg>
+                        ) : (
+                          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                          </svg>
+                        )}
+                      </button>
+                    </div>
+
+                    <div className="p-4 flex flex-col flex-grow space-y-2">
+                      <h3 className={`text-lg font-semibold ${darkMode ? 'text-light' : 'text-gray-800'} transition-colors duration-300`}>
+                        {product.name}
+                      </h3>
+                      <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'} flex-grow transition-colors duration-300`}>
+                        {product.description}
+                      </p>
+
+                      <div className="space-y-1 mt-auto">
+                        <div className="flex items-baseline space-x-2">
+                          {product.discount ? (
+                            <>
+                              <span className="text-gray-500 line-through text-sm">${product.price.toFixed(2)}</span>
+                              <span className="text-primary text-xl font-bold">${currentPrice.toFixed(2)}</span>
+                            </>
+                          ) : (
+                            <span className="text-primary text-xl font-bold">${currentPrice.toFixed(2)}</span>
+                          )}
+                        </div>
+
+                        <p className={`text-xs ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                          You saved it at ${entry.savedPrice.toFixed(2)}
+                        </p>
+
+                        {priceDropped && (
+                          <p className={`text-sm font-semibold rounded px-2 py-1 ${darkMode ? 'text-green-300 bg-green-900 border border-green-700' : 'text-green-600 bg-green-50 border border-green-200'}`}>
+                            Price dropped! Now ${currentPrice.toFixed(2)}
+                          </p>
+                        )}
+
+                        {product.stockLevel !== undefined && product.stockLevel <= 5 && (
+                          <p className="text-sm font-semibold text-red-600">
+                            Low stock: only {product.stockLevel} left!
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+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<WishlistContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'wishlist_v2';
+
+const getEffectivePrice = (price: number, discount?: number): number =>
+  discount ? price * (1 - discount) : price;
+
+export function WishlistProvider({ children }: { children: ReactNode }) {
+  const [wishlistEntries, setWishlistEntries] = useState<WishlistEntry[]>(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? (JSON.parse(stored) as WishlistEntry[]) : [];
+    } catch {
+      return [];
+    }
+  });
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(wishlistEntries));
+  }, [wishlistEntries]);
+
+  const toggleWishlist = (product: { productId: number; price: number; discount?: number }) => {
+    setWishlistEntries(prev => {
+      const exists = prev.find(e => e.productId === product.productId);
+      if (exists) {
+        return prev.filter(e => e.productId !== product.productId);
+      }
+      return [
+        ...prev,
+        {
+          productId: product.productId,
+          savedPrice: getEffectivePrice(product.price, product.discount),
+          addedAt: new Date().toISOString(),
+        },
+      ];
+    });
+  };
+
+  const isWishlisted = (productId: number): boolean =>
+    wishlistEntries.some(e => e.productId === productId);
+
+  const wishlistCount = wishlistEntries.length;
+
+  const getPriceDrop = (product: { productId: number; price: number; discount?: number }): number | null => {
+    const entry = wishlistEntries.find(e => e.productId === product.productId);
+    if (!entry) return null;
+    const currentPrice = getEffectivePrice(product.price, product.discount);
+    return currentPrice - entry.savedPrice;
+  };
+
+  return (
+    <WishlistContext.Provider value={{ wishlistEntries, toggleWishlist, isWishlisted, wishlistCount, getPriceDrop }}>
+      {children}
+    </WishlistContext.Provider>
+  );
+}
+
+export function useWishlist() {
+  const context = useContext(WishlistContext);
+  if (context === undefined) {
+    throw new Error('useWishlist must be used within a WishlistProvider');
+  }
+  return context;
+}